Quel est mon rôle dans ce projet ?
Je suis responsable du projet web puisque je suis le seul intervenant.
Quels sont les objectifs du projet ?
- Stocker des données de formulaire sans concevoir une API RESTful / Base de données ;
- Permettre la manipulation des données récoltées (visualisation, modification, suppression) dans un tableau de bord centralisé ;
- Partager les données récoltées à des collaborateurs avec des droits restrictif ;
- Exporter les données récoltées sous différents formats (CSV, Excel, etc...) ;
D'où est venu l'idée du projet ?
Lors de mon alternance chez Workunion, j'avais comme mission de faire la refonte de site web, que ça soit le design, le parcours utilisateur ainsi que la conception des base de données.
Certains sites web ne possédait qu'un ou deux formulaires à gérer et concevoir, héberger une API ainsi qu'une base de données pour si peu était une perte de temps et d'argent, c'est là que l'idée d'Exact Form m'est venu.
Combien de temps le projet a-t-il durée ?
- L'idée d'Exact Form est venu en fin Janvier ;
- La phase de prototypage (maquettes intéractives) du site web à durée 1 semaine ;
- La conception de la base de données et des fonctionnalités à durée 2 semaines à l'aide de différents diagrammes (modèle logique/physique de données)
- L'intégration de l'interface utilisateur ainsi que les tests End-to-End ont durée 2 semaines ;
- La réalisation de l'API REST, la base de données ainsi que les tests d'intégrations avec Jest ont durée 3 semaines ;
- La création d'un dossier projet contenant le cachier des charges, les spécifications fonctionnelles et techniques, les livrables, etc... a durée 3 semaines ;
- L'élaboration de slides afin de présenter ce projet à un jury de deux développeurs séniors pour valider mon diplôme de Concepteur développeur web a pris 2 semaines ;
À savoir que le projet n'est actuellement pas entièrement fini, notamment la partie collaboration et exportation du projet, mais le coeur du projet est fonctionnel.
Quelles ont été les choix technologiques du projet ?
Pour commencer, le language pour créer les applications n'est pas le JavaScript mais le TypeScript. Ce choix a été fait pour plusieurs raisons :
- Le typage statique pour restreindre les données incorrectes et améliorer l'autocomplétion ;
- Il est facultatif et réversible, le supprimer entièrement d'un projet n'est pas un problème ;
- Sa transpilation ES6 permettant de coder en ES6+ et transformer le code en ES5 ou moins pour améliorer la compatibilité avec les serveurs / navigateurs web ;
- Il est largement adopté par les développeurs JavaScript car il permet notamment de faciliter le travail en équipe pour les raisons ci-dessus ;
- Surtout monter en compétence en tant que développeur JavaScript ;
Pour le front, NextJS a été retenu étant donné que c'est un framework que je connais dans son intégralité. Pour l'API RESTful, j'ai choisi d'utiliser ExpressJS puisque c'est un framework permettant une grande liberté dans l'architecture du projet et pour sa rapidité (cela me permet de profiter de l'architecture de NestJS sans sa lenteur dans les requêtes HTTP).
Pour simplifier et uniformiser les requêtes d'une base de données à l'autre, j'ai utilisé Prisma comme ORM.
Pour la base de données, j'ai pris MongoDB pour son accès au cloud dès le développement afin de réduire un maximum les imprévus lors de mise en production. De plus, cela permet de n'avoir rien à installer en local facilitant ainsi la mise en place de l'environnement de développement.
Le cluster MongoDB dans le cloud possède 3 base de données différentes :
- "exact_form_dev" pour le développement ;
- "exact_form_test" pour les tests front et API afin de ne pas interférer avec les développeurs ;
- "exact_form" pour la production, c'est la base de données avec laquelle les utilisateurs finaux intéragiront ;
La phase design
La réalisation de la charte graphique du projet a commencé par le choix des couleurs que portera le site. Avec colorhunt.co j'ai pu facilement trouvé des couleurs qui mettant en valeur la future intégration du site web.
Ensuite, le choix des polices a été fait avec fonts.google.com. La police pour les titres se nomme "Saira Condensed" et celle pour les textes "Exo2".
Pour les pictogrammes, mon choix s'est tourné sur fontawesome.com pour sa grande variétée ainsi que la gratuitée de ses différents pictogrammes.
Le logo quand à lui a été trouvé sur dribbble.com et je n'ai fait que le reproduire sur Figma en svg afin d'avoir une version légère et scalable du logo.
Le prototypage complet a été réalisé avec figma.com car c'est un logiciel de design facile à prendre en main, intuitif et permettant à n'importe quel développeur de réaliser des maquettes.
Le prototypage contient 4 chemins différents :
- Le chemin mobile visiteur ;
- Le chemin PC visiteur ;
- Le chemin mobile connecté ;
- Le chemin PC connecté ;
La phase conception
La mise en place de la conception est la partie la plus importante du projet car elle permet de définir le parcours utilisateur, les données à stocker ainsi que l'ensemble des fonctionnalités du projet dans son ensemble.
Pour commencer cette conception, j'ai imaginé le parcours utilisateur sur le site avec une cartographie selon si l'utilisateur est connecté ou non.
S'en est suivi la différenciation des différents rôles présent grâce à des diagrammes de cas d'utilisation pour chaque fonctionnalité
J'ai poursuivi cette conception en créant un diagramme des classes permettant de me représenter les différents services que contiendra mon API RESTful. À savoir que les méthodes ne sont pas présentes pour faciliter la lecture du diagramme.
Puis j'ai conçu 2 diagrammes d'activités permettant de visualiser les 2 fonctionnalitées les plus importantes du site, à savoir la collecte de données et la visualisation de ces données de manière paginée.
Pour aller plus loin dans la conception de la visualisation des données récoltées de manière paginées, un diagramme de séquence représentant chaque étape de l'action utilisateur à l'affichage sur l'interface a été fait avec le plus de détails et étapes possibles.
Maintenant que la base de données commence à prendre forme avec tous les diagrammes précédant, voici un modèle logique de données qui est une version moins détaillée du modèle physique de données.
Du modèle logique de données en découle le modèle physique de données qui est le diagramme réprésentant à la perfection la base de données lors de la conception d'une base de données. On y trouve les contraintes et les tables de liasons s'il y en a (ce qui n'est pas le cas ici).
À savoir que c'est le diagramme le plus présent lors de la création d'un projet web avec une base de données vu qu'il est simple à faire, facile à comprendre et représente au mieux la base de données juste avant de pouvoir la créer.
Les tests côté API
L'objectif principal des tests côté API est de s'assurer que toutes les parties d'une application fonctionnent correctement ensemble, en simulant des interactions réelles entre les différentes API. Ces tests peuvent être effectués à différents niveaux, tels que le niveau d'unité, le niveau de composant ou le niveau de système, en fonction de la complexité et des exigences du projet.
Ici, j'ai choisi de faire des tests d'intégration en testant chaque route avec chaque cas d'erreur et de réussite possible afin d'avoir la couverture de test la plus grande possible.
La mise en production
J'ai d'abord acheté le nom de domaine "exact-form.com" sur namecheap.com que j'ai relié à Heroku qui qui héberge le front et l'API. Heroku est à mon sens meilleur que OVH pour l'hébergement ainsi que la gestion du nom de domaine. À savoir que les deux projets ont besoin de serveur pour fonctionner, NextJS ne fonctionne pas dans le même environnement que ReactJS.
Actuellement la production n'est pas disponible puisque Heroku me coûterait 14€ par mois. Avec des moyens plus importants, je commencerai à l'utiliser dans mes futurs projets.
Quelles ont été les ressources mise en oeuvre pour assurer la sécurité sur le site ?
Beaucoup de ressources ont été mise en oeuvre afin de sécuriser un maximum toutes les requêtes ainsi que les données que le site recolte :
- XSS, la faille permettant des injections de script est bloquée avec l'utilisation de NextJS et le paquet npm "xss" ;
- Injection NoSQL, la faille permettant des injections de requêtes dans la base de données pour y soutirer des informations est bloqué grâce à l'ORM Prisma ;
- Les mots de passe stockées en base de données sont hachés. Personne, y compris un développeur du site ne peut connâitre votre mot de passe car un mot de passe haché ne peut pas permettre de trouver le mot de passe final ;
- Chaque mot de passe est robuste (1 majuscule, 1 minuscule, 1 chiffre, 1 caractère spécial et 8 caractères minimaux) afin de limiter les attaques par brute force et le vol de compte ;
- La base de données de production est inaccessible à tous les développeurs avec des utilisateurs différents et inversement afin d'éviter tout problème ;
Conclusion
La réalisation de ce projet m'aura énormement appris que ça soit pour me sentir plus à l'aise avec TypeScript ou avec la mise en place de tests End-to-End et d'intégration côté front et API. De plus étant un projet que j'ai réalisé seul, je suis heureux de tout ce qui a été produit pour la réalisation de ce projet.
Ce projet m'a permis d'obtenir mon Bac+3 en validant mon diplôme de concepteur développeur web devant un jury de deux développeurs séniors lors d'une présentation de deux heures.
Le site est-il en ligne ?
Non, puisque l'hébergement me coûterait 14€ par mois ce qui est actuellement au-dessus de mes moyens.