.. _ref-projet1: .. _ref-intro: ============================== Chapitre 5 : 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. Vous pouvez consulter les logs de déploiement dans build->pipeline dans la barre de menu à gauche. **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``. L'URL pour accéder au site correspondant à votre répertoire est la suivante : ``http://.linfo1002.ovh/``. Par exemple pour le groupe ``ucl00`` le site est accessible à l'URL suivante : ``http://ucl00.linfo1002.ovh/.`` Le pipeline sur la forge indique s'il y a eu une erreur au moment du déploiement. Vous pouvez également consulter les logs de votre serveur à l'URL suivante : ``http://-logs.linfo1002.ovh/``. Une application d'étude du secteur de l'aviation en Belgique ----------------------------------------------------------------- Dans ce projet, vous utiliserez les données collectées depuis `aerostack.com`. Vous ne devez pas utiliser directement l'API. Nous avons déjà extrait les données pour vous et les avons insérées dans une base de donnée SQLite qui sera intégrée dans la prochaine phase du projet. Nous nous concentrerons sur les 5 plus grands aéroports de Belgique : Bruxelles, Charleroi, Liège, Anvers et Ostende. Vous allez créer un site web qui permettra de visualiser ces données et implémenter une série de fonctionnalités. Dans la phase 3, vous intégrerez le calcul de l'empreinte carbone des vols, et puis des statistiques d'émission de gaz à effet de serre total en fonction par exemple, des pays de destination. 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. 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 :ref:`ref-web`. - les bases de l'HyperText Markup Langage (HTML) qui est utilisé pour écrire les pages disponibles sur un serveur web, voir :ref:`ref-html`. - le framework Flask qui permet d'implémenter facilement des sites web interactifs en python, voir :ref:`ref-flask`. - les bases de SQL et la façon dont on peut interagir avec une base de données SQL en python, voir :ref:`ref-sql`. - les bases pour utiliser la librairie ``chart.js`` pour produire facilement de belles visualisations dans le chapitre :ref:`ref-viz`. Le projet se fera en 4 phases : - Phase 1, celle-ci. Mise en place du site web statique de base - Phase 2, intégration et affichage de la base de données - Phase 3, utilisation de tests unitaires et ajout des calculs d'empreinte carbone. - 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 3, vous verrez l'utilisation de Git et la Forge. Vous devriez attendre ce TP si vous n'êtes pas à l'aise avec Git ou GitLab avant de commencer. 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" 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é en S1. Cette phase ne nécessite pas de rapport. L'assistant vérifiera chacun des critères directement. Les critères doivent être complétés pour la date précisée en cours et sur Moodle. En S2, 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. .. Créer un groupe .. *************** .. Si vous ne l'avez pas encore fait, créez un groupe de travail sur la `Forge UCLouvain `__. .. 1. Cliquer sur ``Menu``, ``Groups`` puis ``Create group``, ou directement via `https://forge.uclouvain.be/groups/new `__. .. 2. Donner le nom ``linfo1002-2024-group`` où ```` est le numéro du groupe. Assurez-vous que le niveau de visiblité soit "Private". .. 3. Cliquer sur le bouton ``Create group``. .. 4. Dans ``Group informations`` puis ``Members`` vous devez ajouter tous les membres de votre groupe et votre tuteur ou tutrice référent·e. .. Créer un fork du projet .. *********************** .. Il faut maintenant créer le projet git qui sera utilisé pour toutes les phases du cours sur la Forge UCLouvain. .. Vous devez utiliser un clône d'un projet de base qui contient un mini site Flask exemple pour vous aider. .. .. note:: .. Vous verrez que ce projet de base permet l'accès à une base de données afin de vous aider à la mise en place. .. Cela sera vu en S3, ignorez cette partie pour l'instant et contentez-vous de modifier le template HTML et créer le CSS comme vu en TP1. .. 1. Sélectionner le projet `base-project-2024 `__ et cliquer sur *Fork* .. 2. Renommer le projet ``website``. .. 3. Dans project URL, dans le menu déroulant ``Select a namespace``, choisir le groupe qui vient d'être créé (``linfo1002-2025-group``). .. 4. Garder le niveau de visibilité ``Private``. .. 5. Cliquer sur *Fork Project*. 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. .. image:: figures/ci-1.jpg :width: 600 L'état du pipeline d'intégration continue sera indiqué comme ceci : .. image:: figures/ci-2.jpg :width: 600 Vous pouvez regarder l'état d'une étape du pipeline et essayer de comprendre l'erreur. Si vous n'y arrivez pas, 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. .. image:: figures/ci-3.jpg :width: 600 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. .. Coolify .. ------- .. .. warning:: .. Il faut faire **précisément** ce qui est décrit dans ce tutorial sur Coolify. Lisez la documentation en entier avant de continuer. .. Un problème courant est l'ajout d'un espace au début d'un champ. Lisez les messages d'erreurs. .. Pour accéder à la plateforme de déploiement (accessible uniquement .. **depuis le réseau UCLouvain**) : .. 1. Accéder à Coolify sur https://linfo1002.ovh. Créer un compte via .. *Register* et choisir un mot de passe. .. 2. Se connecter à la plateforme. .. Créer une destination .. ********************* .. La destination est le lieu ou déployer votre site web. Dans ce cas Coolify tourne déjà sur un serveur réservé à LINFO1002. De façon similaire au déploiement de Flask sur `127.0.0.1`, vous allez choisir ici un conteneur local. .. 1. Cliquer sur *Let’s get started* et ensuite sur *Destination*. .. 2. Préremplir en cliquant sur *Local Docker*. Un nom personnalisé peut .. être donné à la destination, mais ce n'est pas nécessaire. .. 3. Cliquer sur *Save* .. Créer une source .. **************** .. La source explique à Coolify comment aller chercher votre dépôt sur la Forge. .. .. warning:: .. Attention, le point 4 est le principal problème des étudiants, n'allez pas trop vite. Il faut cocher des cases! .. 1. Sur le dashboard Coolify, cliquer sur *Create New Resource* et .. ensuite sur *Git Source*. .. 2. Choisir le modèle *GitLab*. Modifier: .. - Name : *Forge UCLouvain* .. - HTML URL : ``https://forge.uclouvain.be`` .. - API URL : ``https://forge.uclouvain.be/api`` .. 3. Cliquer sur *Create new GitLab app manually*. Une fenêtre Gitlab .. s’ouvre. Si ce n’est pas fait, s’identifier avec *Login UCLouvain*. .. 4. Dans la fenêtre Gitlab, indiquer: .. - Name : *LINFO1002 - Coolify* .. - Redirect URI : ``https://linfo1002.ovh/webhooks/gitlab`` .. - Cocher les cases: ``api``, ``read_repository``, ``email``. .. 5. Cliquer sur *Save application*. Garder la fenêtre ouverte et noter le .. nombre ```` dans l’URL de votre navigateur .. ``https://forge.uclouvain.be/oauth/applications/``. C'est un nombre généralement compris entre 100 et 500. Ne confondez pas avec l'application id ou le secret. .. 6. Dans la fenêtre Coolify, transposer les *OAuth ID*, *Application ID* .. et *Secret* de l’entrée récemment créée. La fenêtre Gitlab permet de .. copier ces informations. .. 7. Une fois les champs remplis dans la fenêtre Coolify, cliquer sur .. *Save*. .. .. Créer une base de données .. .. ------------------------- .. .. 1. Sur le Dashboard Coolify, cliquer sur *Create New Resource* et .. .. ensuite sur *Database*. .. .. 2. Choisir *MariaDB*. Un numéro de version est proposé: choisir la plus .. .. récente (10.8). .. .. 3. Une série d’informations s’affiche. Choisir éventuellement un nom et .. .. cliquer sur *Save*. .. .. 4. Démarrer le SGDB en cliquant sur la flèche verte en haut de la .. .. fenêtre. .. .. 5. Cliquer sur *Show connection string* et mettre cette valeur de côté. .. Créer une application .. ********************* .. Dans cette dernière étape, nous allons expliquer à Coolify quel dépôt doit être utilisé et comment le déployer sur la destination qui vient d'être créée. .. 1. Sur le Dashboard Coolify, cliquer sur *Create New Resource* et .. ensuite sur *Application*. .. 2. Choisir la source configurée. Une fenêtre Gitlab peut s’ouvrir pour .. identification. S’identifier et autoriser l’accès en cliquant sur .. *Authorize*. .. Si la fenêtre ne s'ouvre pas, vérifier que votre antipub est désactivé pour la forge. .. Si une erreur apparait, c'est que des paramètres ont été entrés incorrectement lors de la phase ``Créer une source``. .. 3. Cliquer sur la liste de groupes, et choisir le groupe créé précédemment ``linfo1002-2024-group``. .. Sélectionner le dépôt Git du groupe, et la branche à utiliser pour le .. déploiement automatique (par défaut: ``main``). Ensuite, cliquer sur .. *Save*. .. 4. Choisir *Python* comme type d’application. La fenêtre de .. configuration s’ouvre. .. 5. Indiquer : .. - FQDN : ``https://g.linfo1002.ovh`` où ```` est le .. numéro du groupe. .. - WSGI/ASGI : ``Gunicorn`` .. - Module : ``mobility.wsgi`` .. de l’application Flask. .. - Variable: ``application`` .. - Port: ``8000`` .. 6. Cliquer sur ``Save``. .. 7. Une fois la configuration terminée, cliquer sur *Deploy* en haut de .. la fenêtre. Au bout de quelques instants, l’application est déployée .. et peut être ouverte en cliquant sur *Open* en haut de la fenêtre. .. .. 6. Cliquer sur *Save*. Aller sur l’onglet *Secrets*. Ajouter un secret .. .. ``SQLALCHEMY_DATABASE_URI`` avec comme valeur le connection string à .. .. la base de données mis de côté, en replaçant ``mariadb://`` par .. .. ``mysql+pymysql://``, et cliquer sur *Add*.