Chapitre 8 : Phase 1 du projet

Ce chapitre présente le projet dans sa globalité avant de se focaliser sur la phase 1. Vous devez utiliser le projet Gitlab qui vous a été assigné, bien que vous puissiez tout remplacer à l'exception du fichier .gitlab-ci.yml. Le projet sera constitué de 4 phases au total, ne comptant pas la phase zéro qui était une mise en bouche à propos du HTML.

Déploiement de votre site web

Vous avez normalement déjà été invités à un répertoire sur la Forge UCLouvain, si ce n'est pas encore le cas, vous devez contacter votre tutrice/tuteur. Lorsque vous poussez sur la branche main de votre répertoire une action Gitlab déploie automatiquement votre site sur un serveur de l'UCLouvain.

Le pipeline d'intégration continue teste et déploie automatiquement votre site à chaque push sur la branche main. Si le déploiement échoue, consultez la FAQ pour des conseils sur le débuggage du pipeline.

Astuce

Pour des questions sur l'installation, le déploiement, ou Git, consultez la FAQ.

Attention, nous attirons votre attention qu'un des objectifs du cours est de garder votre site opérationnel, c'est-à-dire que la branche main doit toujours avoir une version fonctionnelle de votre site. Pendant les phases de développement, vous devez travailler sur des branches de développement (une branche par fonctionnalité idéalement, mais on vous demande au minimum d'avoir une branche dev) avant de pousser vos modifications sur la branche main. Plus de détails ci-dessous.

L'URL pour accéder au site correspondant à votre répertoire est la suivante : http://<groupe>.linfo1002.ovh/. Par exemple pour le groupe ucl00 le site est accessible à l'URL suivante : http://ucl00.linfo1002.ovh/.

Une application d'étude du secteur de l'aviation en Belgique

Dans ce projet, vous utiliserez les horaires des décollages et atterissages des avions au départ et à l'arrivée de l'aéroport de Liège (code AITA : LGG, code OACI : EBLG). Nous avons déjà extrait les données pour vous depuis un opérateur tiers et les avons insérées dans une base de donnée SQLite qui sera intégrée dans la 3ème phase du projet.

L'aéroport de Liège est un aéroport de fret majeur en Europe. Il n'a presque pas de vols commerciaux de passagers. Ainsi, les données que vous allez manipuler contiennent des informations sur les vols de fret.

Dans la phase 2, vous intégrerez le calcul de l'empreinte carbone des vols d'avion. Dans la phase 3, vous intégrerez cette base de données des vols dans votre site web. Enfin, dans la phase 4, vous produirez des visualisations intéressantes à partir des données de vol

Organisation du projet

La réalisation du projet nécessite l'apprentissage d'un petit ensemble de concepts qui seront introduits en cours et en TP. Cependant, ce cours reste un cours de projet, vous devrez aller plus loin par vous-même en utilisant la documentation ainsi que les ressources que vous pouvez trouver sur internet. Il est interdit de faire l'usage d'outil d'IA comme ChatGPT ou Copilot. Que ce soit pour répondre à vos questions ou pour générer du code. L'utilisation de l'IA sera assimilée à de la tricherie. En effet, l'IA est capable de faire correctement la plupart des choses demandées dans ce cours. Le but du cours est que vous appreniez comment faire un site web vous-même, que vous appreniez les bases. Plus tard en master, l'IA pourra peut-être vous aider à aller plus vite si vous comprenez les bases vous-même.

Nous verrons notamment, à travers les diverses phases du projet :

les bases du fonctionnement du world-wide web, voir Le world wide web (www).

les bases de l'HyperText Markup Langage (HTML) qui est utilisé pour écrire les pages disponibles sur un serveur web, voir Le langage HTML.

le framework Flask qui permet d'implémenter facilement des sites web interactifs en python, voir Le framework flask.

les bases pour utiliser la librairie chart.js pour produire facilement de belles visualisations dans le chapitre Chapitre 14 : La visualisation de données.

Les étudiants de Charleroi verrons les bases de SQL (Charleroi) et la façon dont on peut interagir avec une base de données SQL en python, voir Les bases de données SQL.

Les étudiants de Louvain-La-Neuve (normalement tous les Bac 1) mettront en application les compétences acquises dans le cours de base de donnée dédié, avec des attentes plus avancées que ceux de Charleroi qui n'ont pas de cours de base de donnée dédié, avec notamment des fonctions permettant l'écriture dans la base de donnée.

Les étudiants qui ont le cours d'Intetrace Homme-Machine à Louvain-La-Neuve (normalement tous les Bac 1) seront évalués sur la mise en pratique du cours d'IHM dans le cadre de ce projet. Ils devront écrire une section du rapport spécifique.

Le projet se fera en 4 phases :

Phase 1, celle-ci. Mise en place du site web statique de base

Phase 2, utilisation de tests unitaires et ajout des calculs d'empreinte carbone.

Phase 3, intégration et affichage de la base de données

Phase 4, visualisations et site complet.

Phase 1

Chaque groupe d'étudiants devra mettre en ligne son site web de base.

Chaque groupe DOIT réaliser son travail en utilisant la Forge UCLouvain qui utilise la plateforme GitLab et le gestionnaire de version Git. Ceci permettra de garder une trace des contributions des différents membres du groupe. Pour ce projet, et tous les suivants, toute modification du code doit se faire en utilisant des "Merge Request", afin que le code soit relu par un·e autre membre du groupe. Pensez à organiser votre Git proprement et à utiliser des messages de commit clairs. Lors des travaux pratiques de la semaine 2 (semaine 3 à CRL), vous avez vu l'utilisation de Git et la Forge.

Vous devez maintenant repartir du projet de base qui est déjà dans votre groupe Git sur la forge. Le site Flask fait au TP n'est pas à garder, ce n'est qu'un exercice d'apprentissage.

$ git clone https://forge.uclouvain.be/linfo1002/2026/UCLXX/base-project-2026.git projet
$ cd projet

Cette phase compte pour 5 points, très facilement gagnés puisque les critères sont simplement :

S'assurer que votre tuteur ou tutrice de référence ait accès au Git, ainsi que tous les membres du groupe. Pour cela un·e membre du groupe devra créer une "Issue" sur la forge et tous les membres du groupe devront répondre dans l'issue. Assurez-vous que votre tuteur ou tutrice vous réponde également. 1/5

Vérifier que le pipeline d'intégration continue n'est pas cassé par vos modifications, et que votre site est bien accessible en ligne. 1/5

Votre site utilise le modèle MVC et l'héritage de template. Cependant, dans cette phase, il n'y a pas encore besoin de modèles, donc le modèle MVC se limite plutôt à "VC". 1/5

Votre site renvoie du HTML correct. 1/5

Chaque membre du groupe a mis en place elle-même ou lui-même (en utilisant git) une page à son nom qui la présente avec une photo. Ce point est côté individuellement. 1/5

Le contenu du site n'importe pas à ce stade au-delà des quelques pages. Si vous voulez vous dépasser et développer un design, sachez que le projet suivra le thème de l'aviation, comme présenté ci-dessus.

Cette phase ne nécessite pas de rapport. L'assistant vérifiera chacun des critères directement avec vous. Les critères doivent être complétés pour la date précisée en cours et sur Moodle.

En S3 (S4 UCLouvain), vous mettrez également en place votre contrat d'équipe. Si au moment de la deadline annoncée en cours et sur Moodle votre contrat n'est pas signé par tous les membres, une pénalité d'un point sera appliquée.

La Forge

Accéder à votre groupe

Votre groupe a été créé pour vous. Vous devez demander à votre tutrice/tuteur à le rejoindre si vous n'avez pas été ajoutés automatiquement.

Mise en ligne automatique

Votre projet sera automatiquement disponible à l'adresse http://ucl00.linfo1002.ovh/ grâce à un pipeline d'intégration continue (en remplaçant ucl par crl ou ulb et 00 par le numéro de votre groupe).

Veillez à ne jamais casser votre pipeline d'intégration continue. L'état du pipeline est visible en cliquant sur le symbole d'état après avoir effectué un commit sur la branche main. Quand il est fonctionnel c'est un petit V vert, quand il est cassé c'est une croix rouge.

L'état du pipeline d'intégration continue sera indiqué comme ceci :

Notez qu'uniquement les commits sur la branche main seront déployés sur le site en ligne. C'est pour ça qu'il faut vérifier que le pipeline est correct sur une branche séparée, puis faire un merge request vérifiée par les collègues. Lorsque la merge request est effectivement intégrée à main alors le pipeline se lancera à nouveau, en lançant cette fois la dernière étape de déploiement final du site.

Gestion des erreurs de déploiement

Vous pouvez regarder l'état d'une étape du pipeline et essayer de comprendre l'erreur.

Dans cet exemple, le pipeline sur la forge indique s'il y a eu une erreur au moment du déploiement.

Cliquez sur le pipeline en erreur pour voir les logs.

Si vous ne trouvez pas le problème, la solution est sans doute de revenir au précédent commit fonctionnel et ajouter des plus petits commits jusqu'à comprendre la source de l'erreur.

Gestion des erreurs de crash du site

Si le site crash, vous pouvez également consulter les logs de votre serveur à l'URL suivante : http://<groupe>-logs.linfo1002.ovh/. Ce site affiche les logs de votre serveur (l'équivalent de l'output de flask --app=mobility run), ce qui peut vous aider à comprendre pourquoi votre site ne fonctionne pas.