Adrian Fernandez
Système de cadrage des images
Pendant notre stage au sein du projet MoneIoT, l'une des tâches qui m'ont été confiées était de forcer différentes tailles pour les images séléctionnées par l'utilisateur. Les résultats de cette tâche n'était pas assez concluants après quelques tests d'utilisation, une nouvelle tâche a été décidée pour laisser l'utilisateur redimensionner son image à l'interieur d'un cadre défini avec l'aide de cropperJS.
​
Le début de cette tâche était de découvrir la bibliothèque cropperJS et de voir ce qu'il est possible de faire avec et de comment à l'utiliser. Après des tests de découverte, j'ai réalisé une wireframe et une modale de test pour comprendre son utilisation. Après avoir réussi à faire une fenêtre avec un comportement fonctionnel, je me suis attellé à l'envoi en base de données avec les controlleurs et repositories. CropperJS envoie le fichier en format base64 donc il a fallu le décoder en back-end. Enfin, quand la fenêtre marchais en back-end et front-end, il fallait finir par l'implémenter partout sur le site aux différents endroits où un utilisateur peut choisir une image. La fenêtre à beaucoup d'attributs pour pouvoir être réutilisé sur le site le plus possible. Vous pouvez aussi voir les autres conditions de sécurité réalisées en front-end.
​
Cette tâche était l'une des plus complexes que j'ai eu à faire pendant mon stage. J'ai dû m'occuper de l'implémentation d'une fenêtre depuis sa conception avec les wireframes, sa mise en page, l'implémentation d'une bibliothèque Javascript et son implémentation autant en back-end qu'en front-end. C'est une tâche qui m'a fait toucher à beaucoup de choses et apprendre beaucoup de divers technologies.
​
​
​
​
​
Modale de redimensionnement
Implémentation
Front-End
Implémentation
Back-End