ICD Meteo est une application web permettant de fournir des prévisions météorologiques “sonifiées”. Elle est responsive et accessible aux personnes déficientes visuelles.
Techniquement, c'est une application écrite en Javascript, qui utilise le framework VueJS/Vuetify et la librairie Vite.
Cette application est une maquette rapidement développée dans le cadre l'enseignement "Gestion de projets agiles et en équipe" par la promotion MS-ICD 2023.
Ce projet industriel consiste à reprendre l'application météo qui avait été développée dans le cadre du module gestion agile, et de mettre en place une chaine de CI/CD, permettant d'améliorer le code en production de façon sûre et automatisée.
Ce projet est devisé en plusieurs étapes qui commence par une Analyse de l'application, en suite la création du pipeline qui es composé des étapes suivantes :
• Intégration continue
• Livraison continue
• Déploiement continue
Après le déploiement de l’application, il est nécessaire de faire un suivi de l’état de l’application, et c’est pour cette raison il existe une dernière étape qui est le monitoring.
## Intégration Continue :
Cette étape consiste à mettre en œuvre des tests pour l'application météo afin de tester la qualité́ du code en utilisant des linters.
Pour tester l’intégralité des fichiers de l’application, il faut utiliser plusieurs linters
La raison du choix pour mettre plusieurs linters pour chaque type de fichier au lieu mettre juste un seul réside dans la possibilité́ d'utiliser d'autres règles pour analyser le code vu que chaque linter a ses propres règles.
Pour les fichiers html : on utilise deux linters afin d’avoir plus de règles pour tester les fichiers
• Le premier linter html est html-validate qui permet de Valider la conformité des fichiers HTML aux normes W3C
Pour l’installer on utilise la commande : npm install -g html-validate.
et pour l’exécuter on utilise : html-validate /index.html
• Le deuxième linter html est html-hint
Pour l’installer on utilise la commande : npm install -g htmlhint
et pour l’exécuter on utilise : htmlhint myfile.html
il y a aussi du code JavaScript ce qui va permettre d'utiliser d'autre linters pour tester la qualité du code de ce dernier.
Pour cette partie de JavaScript, on a opté pour 3 linters :
• Le premier linter pour le code JavaScript est JSHint qui est un outil d'analyse de code statique utilisé pour vérifier si le code source JavaScript est conforme aux règles de codage.
Pour l’installer on utilise la commande : npm install -g jshint
et pour l’exécuter on utilise la commande : jshint suivi par le dossier dans lequel il y a les fichiers JavaScript
• Le deuxième linter pour le code JavaScript est standardJS qui permet aussi d'analyser et de faire des tests pour les fichiers JavaScript.
Pour l’installer on utilise la commande : npm install standard –global
et pour l’exécuter on utilise la commande : npx standard directement dans le dossier
• Le troisième linter pour le code JavaScript est ESlint qui permet d’identifier les erreurs dans du code JavaScript.
Pour l’installer on utilise la commande : npm install eslint --save-dev
et pour l’exécuter on utilise la commande : npm run lint
## Partie Dockerisation:
Dans cette partie il ya deux dockerfile en deux manière différente, pour le premier dockerfile1 qu’on peut utiliser localement on a fait toutes les configuration dans un seul dockerfile en deux stages, satge de developpement pour builder l’application et stage production en utilisation l’image nginx. Pour le tester localement :
docker build -t meteo -f Dockerfile1 .
docker run –p 8000:80 meteo
Pour le Dockerfile2, contient juste la configuration de serveur nginx en utilisant le fichier dist qui est généré hors le dockerfile comme artefact dans le pipeline. Parce qu’il faut tester les fichiers statiques dans le pipeline qui seront générer après la compilation
