Présentation

C'est déjà la fin de mon stage chez Belighted, les dernières semaines se sont écoulées incroyablement vite.

Je tiens à remercier chaleureusement tous les Belighters pour leur accueil particulièrement chaleureux et pour tous les conseils qu'ils m'ont prodigués.
En particulier Philippe, qui a été mon mentor de stage et qui m'a appris énormément de choses sur les bonnes pratiques, les modèles de conception, l'architecture RESTful, les tests (beaucoup de choses sur les tests), etc.

C'est assez amusant de revoir le code de mon premier projet scolaire dans Rails. Cela me fait réaliser à quel point Belighted m'a fait progresser.

Parlons maintenant de ce que j'ai fait et appris ces dernières semaines.

Implémentation de Pravatar à grande échelle

Scale est l'un des projets de Belighted.
Il s'agit d'un système de gestion des ressources SaaS conçu pour les agences numériques.

Scale n'a pas de système de gestion des avatars à l'exception de Gravatar, c'est ce qui a conduit à l'idée de Pravatar.
Cette idée consiste à fournir à Scale un système d'avatar distinct, puis à le réutiliser sur d'autres projets nécessitant des avatars, puis à le rendre disponible pour des projets externes.

Une fois que j'ai fait fonctionner Pravatar et que je l'ai testé sur un autre projet, y compris la gemme dédiée et l'extrait de code javascript, il était temps de faire le test final, en exécutant Pravatar on Scale !

Les outils disponibles

Au cours de ce travail sur Pravatar, j'ai construit ces outils afin de permettre aux clients d'utiliser les services :

• API : API conforme à la spécification de l'API JSON.
• Script : inclus dans une <script>balise par le client, qui peut ensuite utiliser la fonctionnalité Pravatar simplement en utilisant certains attributs d'utilisation des données dans le code HTML.
• Gemme : associée au script, la gemme simplifie encore davantage le processus en fournissant deux aides simples, concises et configurables pour afficher et télécharger les fonctionnalités de Pravatar.

Muni de ces outils, l'étape suivante consistait à découvrir la base de code Scale et à comprendre comment configurer Pravatar.

Analyse d'échelle

À première vue, Scale m'a fait très peur parce que c'était quelque chose que je n'avais jamais vu auparavant.
Je m'attendais à une structure Rails simple avec juste un dossier d'application contenant les dossiers mvc et rien de plus. Je pourrais donc simplement insérer l'extrait dans le fichier classique application.html.erb, puis mettre la gemme dans le fichier gemfile et lever la main pour dire que j'en avais fini avec cela.
J'étais si naïve ! Cependant, en le regardant aujourd'hui, je suis d'autant plus satisfait que cela n'ait pas été si facile.

Donc, Scale était en fait un AngularJS application d'une seule page desservie par l'application backend Rails.
Je ne comprenais pas exactement comment AngularJS fonctionnait avec Rails in Scale, mais j'ai vite compris que je n'aurais à travailler qu'avec Angular. J'ai donc mis quelques jours à apprendre Angular après avoir analysé le code.

Les outils et l'échelle

Grâce à mes nouvelles connaissances d'AngularJS, j'ai pu revoir l'utilisabilité de mes outils au sein du projet.

Extrait de code Javascript

Le principal problème avec mon extrait de code était que j'ai basé toutes les fonctionnalités sur l'événement $document.ready (), ce qui convenait bien avec une application web « sans état » comme ma démo de Rails, mais pas du tout avec une application « dynamique » Angular !

J'ai donc mis à jour ce script en fournissant mes fonctionnalités dans un Pravatar objet attaché à la fenêtre par le script.
Mais cela ne fonctionnait pas bien de toute façon, de plus cela me semblait assez moche de mélanger mon script avec angular et de brutaliser son processus logique avec mes fonctions.

En conclusion, l'extrait n'a pas été conçu pour ce type de projet.
Même si j'avais pu le faire fonctionner avec Angular, je ne sais toujours pas à quel point cela aurait été bon.

Le joyau des rails

Mon échec avec l'extrait impliquait que je ne pouvais pas utiliser la gemme, car elle a été conçue pour fonctionner avec elle !

Quoi qu'il en soit, même si l'extrait aurait été parfaitement correct, le joyau aurait été source de problèmes.

La gemme Pravatar a la gemme JWT comme dépendance.
La tentative d'installation groupée de la gemme Pravatar sur Scale a entraîné une quantité monumentale de conflits de versions de sous-dépendances. La résolution de ces conflits en mettant à niveau ces dépendances aurait pu rendre Scale totalement instable, quelle que soit la mise à jour de la version de la gemme.

API Pravatar

C'était la seule option qui restait pour faire fonctionner Pravatar à grande échelle, et probablement la meilleure.

Si je parvenais à créer un script à l'aide de cette API pour exécuter le service, c'était tout à fait réalisable en utilisant cette API avec AngularJS malgré mon manque d'expérience et mes nouvelles connaissances en la matière.

Mise en œuvre

Les seuls aspects de Scale sur lesquels je devais me concentrer étaient les avatars.

Comme les avatars étaient uniquement affichés (aucune option de mise à jour/téléchargement), j'ai rapidement découvert que tous les affichages d'avatars sur Scale étaient réalisés selon la même directive.

Pour utiliser mon API Pravatar, j'ai dû créer un PravatarProvider qui serait initialisé avec Clé API, le Nom du projet et le URL du Pravatar.
Ce fournisseur exposerait alors deux fonctions, l'une chargée pour charger l'avatar à partir d'un identifiant de profil, et l'autre chargée pour télécharger un nouvel avatar avec des données d'image en base64 et l'identifiant du profil.

La zone d'affichage des avatars étant parfaitement conçue, le résultat d'un Pravatar récupéré s'y intégrait parfaitement.
Comme la fonction de téléchargement n'avait pas été implémentée auparavant, il m'a fallu un peu de temps pour concevoir quelque chose d'intuitif pour les utilisateurs.
Mais avec les conseils de Simon, et en réutilisant certains effet de chargement élément de Scale, j'ai réussi à créer une fonctionnalité de téléchargement élégante sur Scale.

Comme d'habitude, cela semble très simple maintenant, mais il m'a fallu un certain temps pour comprendre comment Angular fonctionnait et prendre confiance en lui.

Conclusion

Ces quinze semaines ont été vraiment géniales, tellement de nouvelles expériences et de choses à apprendre, quelques bières avec les Belighters, le plaisir d'y aller tous les jours !

J'espère vraiment que le contenu de Pravatar sera utile à Belighted d'une certaine manière et que j'ai fait du bon travail pour eux, car ils m'ont beaucoup apporté en contrepartie.

Cette expérience a confirmé ma volonté de poursuivre dans le domaine du développement web, et je me sens vraiment chanceuse d'avoir fait ce stage dans une si bonne entreprise avec des personnes aussi sympathiques.

Merci encore Belighted !