Introduction
Docstore est une application permettant de sauvegarder des documents de manière sécurisée. Lorsque que les documents sont stockés, ils sont totalement chiffrés. Un document peut contenir plusieurs fichiers. Il est aussi possible d’y ajouter des tags ou un dossier parent.
Cet article relate la conception du projet, en passant par la phase de développement ainsi que la présentation des technologies et des différentes fonctionnalités.
Présentation
Comme expliqué ci-dessus, cette application a pour but de stocker des fichiers de manière sécurisée. Son point fort est donc la sécurité et le chiffrement fort de tous les fichiers uploadés.
Objectifs
- Permettre de stocker des fichiers
- Sécurisation des fichiers via du chiffrement
- Pouvoir ajouter des informations supplémentaires qui permettent de mieux identifier un document (description, tags, date de réception, date de fin, dossier, etc.)
Technologies
Back-end
Pour les technologies, j’ai décidé de partir sur du C#, avec du .NET 6, sur de l’ASP Core.
J’utilise Postgresql pour la base de données.
Front-end
Pour le front, la page n’ayant pas besoin d’être très dynamique, j’ai choisi AlpineJs. Pour “accélérer” le rendu des pages et pour faire des changements de pages plus efficients, j’ai utilisé Unpoly.
Pour le rendu graphique, j’ai choisi Tailwind. Énormément de composants existent sur internet, ce qui permet d’accélérer la conception du site au niveau graphique.
Développement
Trello
Pour gérer les tâches que j’avais à faire sur le projet, j’ai créé un petit Kanban sur Trello.
Prototype
Pour débuter ce projet, j’ai commencé par développer un prototype. J’ai créé les pages de base avec l’upload de fichier, la création de document, la création de dossier, la gestion des tags etc.
Page d’accueil des documents
J’ai utilisé le framework PicoCSS pour le rendu graphique. Il a l’avantage d’ajouter un style de base sans utiliser aucune classe CSS. Cela me permettait de pouvoir réutiliser les mêmes composants HTML dans le futur design.
Page de détails d’un document
Cela me permettait aussi d’avoir une idée sur les différentes fonctionnalités que je voulais intégrer ainsi que sur la complexité de celles-ci.
J’ai également pu mettre la sécurité en place en réfléchissant à quel type de chiffrement je voulais utiliser.
Base de données
J’ai aussi “créé” la structure de la base de données. J’ai décidé d’utiliser l’ORM EntityFrameworkCore. Il a la particularité d’être orienté code, ce qui signifie qu’aucune requête SQL n’est à écrire dans le code (en théorie). Il suffit simplement d’utiliser les classes et les méthodes proposées par le framework pour accéder aux données. L’ORM se charge ensuite de “traduire” le code en une requête SQL.
Fichier
Chaque fichier uploadé est directement chiffré grâce à un algorithme AES (Advanced Encryption Standard).
C’est un algorithme de chiffrement symétrique, ce qui signifie qu’il est possible de déchiffrer à l’aide de la clé utilisée lors du chiffrement.
Sécurité
Chacune des requêtes SQL contient l’identifiant de la personne connectée. Ce qui signifie que seul l’utilisateur peut accéder à ces documents ainsi qu’aux fichiers associés. Les fichiers étant hébergés dans un dossier inaccessible par URL, le téléchargement est géré dans le code. Et encore une fois, l’identité de l’utilisateur est vérifiée à ce moment-là. Les utilisateurs peuvent uniquement accéder à leurs documents.
Pour l’instant le partage de fichier entre utilisateurs n’est pas prévu.
Tâche d’arrière-plan
Étant donné que les fichiers sont uploadés avant la soumission du formulaire, certains peuvent être présents sur le serveur sans qu’ils ne soient utilisés.
Exemple : Je me rends sur la page de création d’un document, j’ajoute 3 fichiers, je quitte l’application sans valider le formulaire.
Dans ce genre de cas, les fichiers sont présents dans le dossier d’upload mais ne sont associés à aucun document.
Pour éviter de stocker des fichiers et des documents qui ne sont pas utilisés/utilisables, j’ai ajouté des tâches d’arrière-plan qui vérifient le dossier d’uploads ainsi que la base de données pour analyser ceux qui seraient associés à rien.
Tâche de vérification des fichiers non associés
- La tâche tourne toutes les 12 heures
- Elle envoie une requête SQL pour récupérer tous les fichiers uploadés
- Tous les fichiers en base de données sont comparés avec ceux présents physiquement sur le serveur.
- Si un fichier existe physiquement mais qu’il n’existe pas en base, il est alors supprimé.
Tâches de vérification des documents non utilisés
- La tâche tourne toutes les 12 heures
- Elle envoie une requête SQL pour récupérer tous les fichiers n’ayant pas de document et ayant été créé il y a plus de 4 heures
- Tous les documents reçus sont alors supprimés.
Design
J’ai décidé d’utiliser TailwindCss. Ce framework est de plus en plus populaire. La version 3.0 est sortie au moment où j’ai démarré le projet. Il intègre un système de purge qui conserve uniquement les classes CSS qui sont utilisées dans le code. Cela permet de générer un fichier CSS plus léger.
La plupart des designs ont été pris sur le site TailwindUi. Il a été créé par les concepteurs de Tailwind et propose beaucoup de composants.
Dark Mode
Grâce à Tailwind, le dark mode est relativement simple à intégrer. Pour l’instant, sur l’application, seul le dark mode est disponible. Dans une future version, il sera possible de passer vers une version claire.
Docker
Pour cette application, j’ai décidé d’en faire un conteneur. Cela me permettait de simplifier la mise en production (détaillée plus bas) ainsi que, dans un premier temps, de gérer la base de données via docker.
La base de données et les fichiers uploadés sont gérés par des volumes.
Production
Sur ce projet, j’ai décidé d’aller beaucoup plus loin que pour les autres en mettant en production le site internet.
J’ai décidé de l’héberger chez DigitalOcean sur un Droplet à 5€.
Comme expliqué ci-dessus, j’ai conteneurisé l’application. Pour démarrer le site, j’utilise simplement Docker Compose en y ajoutant une base de données Postgres.
J’y ai rajouté un certificat SSL généré par Let’s Encrypt.
DigitalOcean apporte aussi la possibilité d’utiliser des Firewall. Seuls les ports 80 et 443 sont donc ouverts (et le port 22 uniquement quand j’ai besoin de faire de modification ou des mises à jour de l’application).
Fonctionnalités
Document
Accueil
La page d’accueil affiche les dossiers et les documents sans dossier.
Exemple rendu de la page d’accueil
L’accueil propose aussi un accès rapide vers les 3 derniers documents ajoutés.
Exemple des 3 derniers documents ajoutés
Création
Lors de la création, chaque fichier ajouté est directement enregistré par l’application avant la validation. Cela permet d’améliorer les performances lors de l’enregistrement, cela permet aussi de conserver les fichiers si la validation du formulaire échoue.
Exemple de création de document pour un contrat de travail
Il est aussi possible de sélectionner un dossier ou de le créer à la volée s’il n’existe pas.
Exemple de ma fenêtre de création d’un dossier
Des tags peuvent aussi être ajoutés ainsi que la date de réception et l’éventuelle date de fin du document.
Modification / Suppression
Bien évidemment, la modification ainsi que la suppression ont été mises en place.
Fenêtre de confirmation de suppression
Dossier
Le dossier est un point important pour ordonner et ranger les documents. Celui-ci, à l’heure actuelle, est davantage utilisé comme un groupe car il n’est possible de créer qu’un seul dossier parent.
Progressive Web App
En effet, l’application est un site internet, mais grâce “aux méthodes” PWA, l’application peut être installée via le navigateur et être utilisée “comme une application normale”.
Les fonctionnalités sont les mêmes et grâce au framework CSS, l’intégration est plutôt simple.
Exemple d’une page sur un téléphone portable
Conclusion
Améliorations / Extensions
- L’ajout d’une aide pendant la recherche d’un tag
- Pouvoir créer des dossiers dans des dossiers
- Ajouter un champ de recherche poussé
- Pouvoir modifier les informations de son compte
- Ajouter une gestion du poids maximal de stockage
- Option gratuite -> 1Go
- Option premium -> illimité
Retour d’expérience
Un projet extrêmement intéressant dans lequel une mise en production a été effectuée. Le site est actif et pleinement utilisable. C’est la première fois que je vais aussi loin dans un de mes projets (achat d’un nom de domaine, conteneurisation du projet, mise en production chez un hébergeur…). La phase de mise en prod était donc nouvelle pour moi. Mais j’ai pu en apprendre plus sur la sécurisation avec, par exemple, la création d’un certificat SSL pour permettre le HTTPS ou encore l’utilisation d’un firewall pour autoriser/bloquer certains ports.
J’utilise cette application pour mes besoins personnels. Je n’ai pas encore rencontré de bug majeur.
Je suis vraiment satisfait du résultat et des fonctionnalités que j’ai réussi à mettre en place.