.. _ref-projet0: .. _ref-intro: ============================== Chapitre 5 : Phase 1 du projet ============================== 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 GitLab avant de commencer. Cette phase compte pour 5 points, très facilement gagnés puisque les critères sont simplement : * Créer votre git sur la `Forge UCLouvain `__ qui contient un mini site web écrit en Flask sur base du `projet de référence `__ . 1/5 * S'assurer que votre tuteur ou tutrice de référence ait accès au Git, ainsi que tous les membres du groupes. 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. 2/5 * Chaque membre du groupe a mis en place ellui-même (en utilisant git) une page à son nom qui lae 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 à le rejoindre en utilisant l'adresse https://forge.uclouvain.be/linfo1002/2025/lln-group-3 en remplaçant éventuellement "lln" par "crl" ou "ulb" et en changeant le numéro du groupe. .. 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 XXX grâce à un pipeline d'intégration continue. .. 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*.