Après avoir documenté les requêtes des APIs avec le logiciel Postman, vous trouverez l’article ici. Une fois le travail fait en amont, il fallait rendre les données visibles par l’utilisateur afin qu’il accède:
- Les projets,
- Les dépôts,
- Les commits.
Avant de se lancer dans le code, la réflexion est importante afin d’avoir un plan en tête, de comment organiser la structure visuelle du front, j’avais ma petite idée. Pour l’accueil, il y aura un bouton pour Github et un second bouton pour Git Azure Devops, d’autres boutons pourrons être ajoutés si nous utilisons d’autres plateformes de versioning (consiste à gérer l’ensemble des versions d’un ou plusieurs fichiers).
Une fois le bouton sélectionné, il pourra s’authentifier par Basic Authentification, un formulaire sera présent pour qu’il puisse noter son token fournit par la plateforme de versioning. Cette partie sera changée, mais pour notre début de développement, cela sera amplement suffisant.
Rendre le code modulable était ma priorité car c’est contraignant de devoir changer le code si on le répète plusieurs fois. Pour exemple, si la requête de l’api change, on va devoir modifier la requête, il vaut mieux le faire une fois que plusieurs fois. J’ai donc regroupé dans plusieurs fichiers les requêtes en fonction de leur plateforme de versioning.
Voici un fichier qui s’occupe des requêtes pour la plateforme Azure Devops.
Il suffit de modifier la requête inscrite dans ce fichier, pour effectuer la mise à jour. Puis nous utiliserons la requête dans notre code en important le fichier. Ceci fait office d’exemple exhaustif d’utilisation.
import AzureService from '../services/azure';
AzureService.showProjet(this.organization)
Une fois l’authentification réussite, il pourra donc accéder à ses projets.
Ensuite de ses projets, il accède à la possibilité de voir ses repository avec un bouton cliquable.
Ensuite de ses repository il accède à la possibilité de voir ses branches avec un bouton cliquable. L’utilisateur accède donc aux informations de son repository, il peut :
- Revoir le détail du projet,
- Voir les branches du projet.
De là, il peut voir tout les commits du repository ou voir les commits de la branche ciblée. Dans tous les cas l’affichage reste pareil.
Pour simplifier la visibilité, nous avons rendu le tableau réglable sur le nombre de commit visible et il suffit de cliquer sur la flèche pour avoir plus d’information du commit.
Les données fournies par les différentes APIs peuvent être différentes mais la présentation de la donnée reste la même.
Conclusion
Avant de démarrer le code, j’aurais pu mettre mes idées à plat avec un wireframe, ce que j’aurais dû faire avant mais dans la précipitation j’ai complément oublié. Un code doit être pensé pour être durable dans le temps, car il pourrait changer à tout moment donc, il vaut mieux réfléchir avant pour gagner du temps pour le maintien du code.