Semaine 5 / 6

Sur les 2 semaines restantes, je vais me concentrer sur le traitement des données envoyées lors de la connexion ou de l'inscription.

• Lors de l'inscription → Création d'un nouvel utilisateur
• Lors de la connexion → Vérification de l'existence de l'utilisateur

Firebase met à disposition des développeurs un système d'authentification pouvant être utilisé au sein d'un projet React.
Travaillant avec Firebase, j'ai donc décidé de partir dessus. Le code produit n'est pas propre à Firebase ce qui permet de pouvoir changer la façon de s'authentifier en fonction des besoins du projet (API, BDD).

Dans un premier temps, l'authentification a été faite uniquement en JavaScript ce qui a facilité son développement, car moins rigide que TypeScript. Une recherche sur TypeScript a été réalisée juste après cette étape pour comprendre pourquoi le préféré à JavaScript. Un compte rendu de cette recherche peut être retrouvé dans ce document.
Une fois cette version mise en place, il a donc fallu faire le passage entre JavaScript et TypeScript. Des changements dans le code JS a donc été nécessaire pour respecter le typage de TS offrant ainsi la sécurité du type (l'une des motivations principales pour l'utilisation de TypeScript).

Vous pouvez accéder au site web via ce lien.
Un compte de test est déjà présent sous les identifiants (Email: user-test@testing.com / Mot de passe: password).

Un dernier point à régler est l'erreur de la page blanche qui survient après l'authentification à cause des requêtes Cross-Origins. Une solution apportée auparavant était l'usage de MOESIF mais son utilisation reste inconfortable.

Semaine 4

La partie inscription/connection et sélection des personnages sont maintenant dans un état stable, il est maintenant nécessaire d'améliorer le code produit pour qu'il s'implémente parfaitement au projet que cela soit du côté dev ou prod.

Pour la partie inscription/connection vu que se sont tous deux des formulaires j'ai dû chercher une librairie, parmi quelques-unes proposées, capable de produire des formulaires tout en respectant les standards React.
Il m'a été demandé de faire une recherche sur les critères qu'on pouvait avoir en tant que dev sur le choix d'une librairie. Cette question m'a emmené à ce résultat.

La librairie Formik a été utilisé pour la partie connection tandis que Redux-Form a été utilisé pour l'inscription. Prochainement, Formik sera utilisée des deux côtés.

Maintenant que la partie Formik est terminée, je suis passé sur la seconde page, à savoir, la partie sur la sélection des personnages.
Le problème de la page blanche provient de l'erreur évoquée précédemment, réglée avec l'extension MOESIF, mais aussi à cause du fait que l'URL qui appel l'API est branchée en localhost ce qui rend son appel inaccessible en environnement de production.
Pour régler ce problème j'ai dû mettre en place une configuration, sur l'accès à l'appel à l'API, qui change en fonction de si nous sommes en environment de development ou de production. Voici un article en ligne qui reprend les étapes que j'ai mis en place.

Pour les besoins de l'application, l'API, actuellement sous Node.js avec le framework Express, va changer de framework.
Il m'a été demandé de faire des recherches sur les avantages et inconvénients d'Express ainsi que de trouver ses replacements. Les informations obtenues sur différents forums et documentations peuvent être retrouvées dans ce document. Il a été décidé de partir sur NestJS car une bonne partie de l'équipe connais et a déjà travaillé avec ce framework.

Semaine 3

Les maquettes en React ont été déployées sous Firebase à cette nouvelle adresse et comme chaque début de semaine, nous faisons le point sur la semaine qui s'est écoulée durant une visioconférence de 30min ( petit aperçu ici :) ).

Actuellement, les données reçues lors de la selection du personnage (liste des personnages) sont stockées en dur dans un composant React.
L'objectif et de se connecter à l'API, faite sous Node.js avec le framework Express, afin de récupérer cette liste de personnages et ainsi l'afficher à la place des données statiques.
Je devais donc commencer par comprendre les notions autour de Node.js + Express ainsi que des API web, puis apprendre comment utiliser Axios car son usage est nécessaire pour faire des appels à l'API du côté React.

• Express => côté serveur (Node.js)
• Axios => côté client (React)

Pour mettre en place ce principe j'ai dû créer une route sur l'API, par exemple /api/characters, où serait chargé la liste des personnages (nom, id, texture, etc...) et grâce à Axios, j'irai requêter cette url pour obtenir la liste.
Des erreurs connues lors de travaux avec des API sont arrivées comme Access-Control-Allow-Origin qui bloque les requêtes multiorigines (Cross-Origin Request). Une extension connue sous Chrome : MOESIF est utilisée pour pallier ce problème en local.

Maintenant que nous avons accès aux données depuis l'API, nous avons cherché à savoir ce qui caractérisait un personnage (dans le sens customisation du personnage) et avons donc commencer une phase d'analyse autour de ça.
Actuellement un personnage est identifié par un id et un nom et nous avons décidé d'aller plus loin que c'est 2 seuls caractéristiques. Des extraits de la conversation ont été rendu public.

Semaine 2

L'objectif de cette semaine se concentre autour de React est plus précisément sur les bonnes pratiques à avoir en React à savoir :

• L'architecture d'un projet React
• Tests unitaires sur les composants
• Interactions entre une application React et une base de données et/ou une API
• Librairie adaptée aux formulaires en React

Suite à de nombreux échanges, j'ai pu proposer différentes architectures en fonction de ce que j'ai pu voir sur d'autres projets React :

Partant de ces bases-là, j'ai dû intégrer la notion de micro frontend, ce qui m'a mené vers quelque chose de ce genre :

Par la suite, nous avons convenu de cette architecture ci-dessous, où chaque composant est pensé comme une petite application à part entière.

Maintenant que quelques composants sont fonctionnels et à la bonne place, il est nécessaire de les tester afin que la mise en production se passe sans problèmes. Pour cela, j'ai utilisé la librairie Testing Library qui a été installée par défaut avec l'utilisation de Create React App

Les tests mis en place peuvent s'apparenter à ceci :

Semaine 1

Dev To Be Curious est un centre de formation proposant des formations que cela soit en présentiel ou en distanciel. Evan Boissonnot seul sensei de ce centre fait parti d'un réseau OpenSeriousGame promouvant l'apprentissage à travers des jeux ou applications ludiques.

J'ai intégré l'équipe de CV-gamifie, un projet existant maintenant depuis quelque temps, mettant en place un multiverse où l'on pourra accéder à des formations totalement gamifiées.
L'équipe ne compte aucun salarié, seulement des personnes bénévoles qui donnent de leur temps pour voir aboutir ce projet. Une deadline à été installée dans le courant de Juin à Septembre avec comme objectif une première version stable et accessible.

En tant que stagiaire, mon travail est de mettre en place la création de compte (premier écran que le joueur.euse verra quand il arrivera sur le jeu).
Il y à 3 moyens de rejoindre la formation :

Me positionnant sur le premier moyen j'ai dû, dans un premier temps, faire une étude des besoins. Cela passe par la création de maquettes , qui seront à faire valider avant de passer à la phase de code.
Ces maquettes validées, j'ai dû les implémenter en HTML/CSS en utilisant le framework Materialize CSS. Les fichiers produits sont intégrés à un dépôt GIT sur une branche dédiée.

Mon avancement est suivi grâce à un Trello qui a été mis en place.

Pour que le résultat final soit validé, j'ai dû utiliser Firebase, une plateforme développée par Google permettant la création d'applications web et mobile hébergées en ligne. Firebase met à disposition des développeurs des outils servant à l'analyse de données et au maintien des applications (bug et crash).
Je me suis formé dessus et ai produit un document retraçant les étapes nécessaires au déploiement de mon projet.
Vous pouvez avoir un aperçu à cette adresse

Toujours dans l'optique d'implémenter la création de compte sous sa version définitive dans le projet Cv-gamifie, j'ai dû transformer les maquettes faites en HTML/CSS vers des maquettes en React.js
Pour se faire, je devais utiliser Create React App avec l'option Typescript.
Encore une fois, les étapes de la mise en pratique peuvent être retrouvées dans ce document