Git, Exemple d’Application

TP 1

Important

Les TP sont prévus pour être réalisés en étant connecté à votre VM ENSAI, soit depuis les clients légers des salles info, soit via https://view.ensai.fr/. Vous y disposez de tous les outils nécessaires :

• Python 3.10 : la version de Python installée à l’ENSAI
  • ainsi que les packages nécessaires
• Visual Studio Code : votre éditeur de code
• Git : pour gérer vos dépôts
• PostgreSQL : une base de données
  • DBeaver : pour consulter, modifier cette base de données

À moins que vous ne maîtrisiez des outils tels Docker pour créer votre base de données, il est fortement déconseillé de coder sur votre propre machine que ce soit en TP ou en projet. Vous allez perdre un temps considérable en installation et configuration. Et même si vous êtes très très doués certaines parties ne pourront de toute manière pas fonctionner.

À faire à la maison

Un prérequis de ce TP est que votre configuration Git soit opérationnelle.

Tip

Si vous avez besoin de vous rafrîchir la mémoire sur Git, suivez ce lien.

Compte GitHub

• Créez un compte GitHub, si vous n’en avez pas déjà un

Config Git

• Ouvrez Git Bash
• Exécutez cette commande : git config -l

Si les valeurs user.name et user.email sont bien renseignées, tout est ok.

Si ce n’est pas le cas, exécutez une à une les 5 commandes git config.

Clé SSH

• Exécutez cette commande : cat ~/.ssh/id_rsa.pub (toujours dans Git Bash)

Si le fichier existe et que cela renvoie un réultat commençant par ssh-rsa, cela signifie que vous avez bien défini une clé SSH sur votre machine.

Dans le cas contraire, créez une clé SSH

Nous allons maintenant vérifier si vous avez bien déclaré cette clé publique sur GitHub, ou sinon l’ajouter

• Copiez la clé publique : cat ~/.ssh/id_rsa.pub | clip
• Allez sur la page pour déclarer une nouvelle clé SSH (Settings > SSH and GPG keys > New)
  • Title : VM ENSAI
  • Key : Collez votre clé
  • Add SSH key

Soit votre clé publique est maintenant déclarée à GitHub, ou au pire, GitHub vous dira qu’il connait déjà cette clé.

Objectifs

Les objectifs de ce premier TP sont les suivants :

• Utilisation de Git
• Prise en main de VS Code
• Comprendre comment fonctionne une application

Ce TP mêle explications et phases de code.

Les explications de ce TP ne doivent pas prendre le pas sur celles de votre intervenant. Prenez les comme une base de connaissance pour plus tard, mais préférez toujours les explications orales.

1 Création des dépôts

Note

Pour ce premier TP, vous allez travailler avec votre équipe projet sur un seul et même dépôt distant.

Un membre de l’équipe va créer un dépôt sur GitHub et ensuite tous les membres (le créateur du dépôt GitHub inclus) vont créer leurs dépôt locaux en clonant ce dépôt distant.

1.1 Le dépôt distant

Important

Un seul membre de l’équipe crée ce dépôt distant.

• Connectez-vous sur GitHub
• Créez un fork du dépôt ENSAI-2A-complement-info-TP
  • Un fork est une copie d’un dépôt, permettant à un utilisateur de développer indépendamment sans affecter l’original
• Ajoutez les membres de votre équipe
  • Sur la page du dépôt > ⚙️ Settings > Collaborators > Add people
• Envoyez à vos camarades, l’adresse du dépôt distant

1.2 Les dépôts locaux

Maintenant, chaque membre de l’équipe va créer sur sa propre machine, son clone du dépôt.

Commençons par créer un dossier pour ranger votre dépôt local :

• Ouvrez Git Bash
• Exécutez cette commande : mkdir -p /p/Cours2A/UE3-Complements-info/TP1 && cd $_
  • Elle crée l’arborescence demandée (mkdir)
  • Puis elle vous positionne dans ce dossier (cd)
• Clonez le dépôt distant avec SSH
  • Lorsque vous êtes sur la page GitHub du dépôt, cliquez sur Code, puis sur l’onglet SSH
  • Copiez l’url qui commence par git@github.com...
  • Dans Git Bash : git clone <url> (en remplaçant <url>)

Votre clone est prêt, vous pouvez vérifier sa présence via l’explorateur Windows (WIN + E, puis allez dans le dossier P:\Cours2A\UE3-Complements-info\TP1).

• Fermez Git Bash
  • Si tout s’est bien passé
  • Vous allez retrouver ensuite le même Git Bash, qui est intégré dans VS Code

2 Visual Studio Code

2.1 Ouvrir le dépôt

Un dépôt est un ensemble de dossiers et de fichiers. Pour consulter et éditer ces fichiers, vous allez utiliser Visual Studio Code, un éditeur très populaire.

Note

Au lieu de VS Code, vous pouvez tout à fait ouvrir vos fichiers avec le bloc-notes, mais vous vous rendrez rapidement compte que c’est beaucoup moins pratique.

• Ouvrez Visual Studio Code
• Ouvrez votre dépôt local
  • File > Open Folder
  • Allez dans le dossier P:\Cours2A\UE3-Complements-info\TP1
  • Cliquez une seule fois sur 📁 ENSAI-2A-complement-info-TP
  • Puis sur le bouton Sélectionner un dossier

Important

• Vérifiez que le dossier parent dans l’Explorer VS Code est ENSAI-2A-complement-info-TP
  • L’Explorer, à gauche, permet d’explorer l’arborsence des fichiers et dossiers

⚠️ Si le dossier parent n’est pas le bon, recommencez l’Open Folder où vous aurez de gros soucis par la suite !!!

2.2 Contenu du dépôt

Ce dépôt contient les éléments suivants :

Élément	Description
.vscode	Contient les paramètres VS Code pour ce projet
src	Dossier contenant les fichiers Python rangés dans une arborescence respectant la programmation en couches
.gitignore	Liste des fichiers à ne pas versionner avec git
LICENSE	Définit les droits d’utilisation du dépôt
README.md	Contient des informations utiles pour présenter, installer et utiliser l’application
requirements.txt	Liste les packages Python nécessaires

2.3 La config VSCode

Tip

VS Code est hautement paramétrable, aussi bien au niveau User qu’au niveau Workspace (i.e. considérons que Workspace = dépôt).

• Ouvrez le fichier .vscode/settings.json

Ce fichier contient du paramétrage pour le dépôt, par exemple :

• Le formattage automatique lorsque vous sauvegardez un fichier Python
  • Le formateur utilisé est Black
  • La taille des lignes est limitée à 100 caractères
  • Les tabulations sont remplacées par 4 espaces
• Le dossier source se nomme src
  • Pour importer des modules, ce dossier src sera la racine
• le terminal par défaut est Git Bash

3 Git

Note

Vous allez maintenant faire quelques manipulations basiques avec Git :

• Ajouter des fichiers au dépôts
• Créer des points de sauvegarde
• Envoyer vos modifications locales vers les dépôts distant
• Mettre à jour votre dépôt local

3.1 Routine Git

• Ouvrez le Git Bash intégré dans VS Code

  • Terminal > New Terminal (ou CTRL + ù)

• Lancez le programme principal pour vérifier que tout fonctionne bien

  • python src/__main__.py

• Créez un nouveau fichier dans le dossier src en complétant avec votre propre prénom et collez ce code

  <prenom>.py

  a, b = 0, 5
  
  for i in range(b):
      print(" " * a, end="")
      a += 1
      print("Bonjour <prenom>")

• Dans Git Bash, utilisez les commandes status, add, commit, push et pull pour envoyer vos modifications vers le dépôt distant

Aide

L’enchainement des commandes Git devra devenir un automatisme.

Si lors du push, vous avez ce message, c’est qu’il faut commencer par pull.

To https://github.com/ludo2ne/ENSAI-2A-complement-info-TP.git
Merge branch 'main' of https://github.com/ludo2ne/ENSAI-2A-complement-info-TP
 ! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'https://github.com/ludo2ne/ENSAI-2A-complement-info-TP.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first merge the remote changes (e.g.,
hint: 'git pull') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

3.2 Résoudre un conflit

• Pour tous les fichiers <prenom.py>, un seul membre de l’équipe commence par modifier le prenom dans le code
  • ne pas modifier les noms des fichiers, uniquement le code à l’intérieur
    • print("Bonjour <prenom>") ➡️ print("Bonjour Marie-<prenom>")
  • Et il add, commit et push
• Ensuite les autres membres modifient chacun leur propre fichier
  • print("Bonjour <prenom>") ➡️ print("Bonjour Anne-<prenom>")
  • Et ils add, commit, pull et push

Normalement un conflit survient lors du pull. En effet il y a un conflit de version

Version	Code
Version originale	print("Bonjour <prenom>")
Votre modification	print("Bonjour Anne-<prenom>")
Version sur le dépôt distant	print("Bonjour Marie-<prenom>")

<<<<<<< HEAD
print("Bonjour Anne-<prenom>")          # Votre modification - current change
=======
print("Bonjour Marie-<prenom>")         # La modification du dépôt distant - incoming change
>>>>>>>

• Vous choisissez d’imposer votre version
  • Soit en cliquant sur Accept Current Change
  • Soit en supprimant print("Bonjour Marie-<prenom>"), ainsi que les <<<<<<<, ======= et >>>>>>>
• add, commit pull et push

Important

Avoir un conflit, ce n’est pas grave !

Avoir un conflit, ce n’est pas grave !

Avoir un conflit, ce n’est pas grave !

Conflit ≠ Erreur

Cela arrive simplement quand Git rencontre 2 versions et il n’a pas de 🔮, ni de 🎲 pour choisir laquelle est la bonne.

Pour éviter les conflits, organisez-vous avec votre équipe pour éviter autant que possible de travailler sur les mêmes fichiers en même temps.

4 Un exemple d’application

Pour comprendre comment est construit une application découpée en couches, vous allez étudier un exemple simple.

Suivez les instructions du README pour :

• Cloner le dépôt
• Ouvrir le dépôt avec VS Code
• Installer les packages
• Saisie de vos Variables d’environnement

Le fichier README

Le README est disponible :

• en bas de la page GitHub du dépôt distant (mis en forme)
• sur votre dépôt local, fichier README.md (version brute)

2 types d’applications peuvent vous être demandés en projet :

• Une application de Menu
  • l’utilisateur navigue dans des menus
• Un webservice
  • l’application expose des endpoints
  • l’utilisateur peut interroger ces endpoints et récupérer les résultats

4.1 Une application de Menu

• Toujours en suivant les instructions du README, lancez le main

Vous arrivez sur le menu d’accueil. Le principe de ce type d’application est de vous faire naviguer d’une vue à l’autre. Si nécessaire, la vue appellera en arrière plan des services.

Note

Quelques exemples plus concrets :

Vue de Connexion

• Vous rentrez votre nom d’utilisateur et votre mot de passe et validez
• La vue appelle alors un service qui va vérifier les informations saisies
  • Si valide, vous êtes connecté et redirigé vers la vue du joueur connecté
  • Sinon, vous êtes redirigé vers l’accueil

Vue liste des joueurs

• Les joueurs sont stockés en base de données
• Lorsqu’elle est chargée la vue n’a pas accès à la liste des joueurs
• La vue appelle un service qui fournit cette liste
  • Ce service va lui même appeler une méthode DAO pour interroger la base de données (TP4)
• La liste remonte jusque la vue qui affiche la liste des joueurs

• Rechercher le code du menu d’accueil dans la couche view
  • Si vous observez le code, cette classe ne fait qu’une seule chose : vous rediriger vers une nouvelle vue
• Sélectionnez le choix Ré-initialiser la base de données
  • Cela permet de créer les tables dans la base de données
  • Et d’insérer des données
  • Si vous explorez le code, vous verrez que cela exécute les scripts sql du dossier data
• Sélectionnez Créer un compte et saisissez les éléments demandés
  • Observez le code inscription_vue.py pour voir comment sont vérifiées les saisies

Tip

Il existe de nombreuses possibilités pour restreindre l’utilisateur dans ses saisies.

Il est également possible de créer des règles personnalisées.

• Après être revenu à l’accueil, choisissez Se connecter
  • Vous arrivez sur une nouvelle vue avec un nouveau menu
  • 💡 pour aller plus vite, vous pouvez utiliser l’utilisateur « a », mot de passe « a »
• Affichez les joueurs
• Ouvrez le fichier de log dans le dossier logs

Note

Dans les logs, vous pouvez observer le cheminement des opérations :

• Vous naviguez de vues en vues
• Certaines vues appellent de services qui eux mêmes appellent des DAO.

• Déconnectez-vous et arrêtez l’application

4.2 Un webservice

Nous reviendrons plus en détail sur les webservices lors du TP3.

• En suivant les instructions du README, lancez le webservice
• Dans votre navigateur, testez les requêtes GET (lecture)
• Consultez les logs pour voir les méthodes appelées
• Arrêtez le webservice

Note

Pour les autres types de requêtes http (PUT, POST, DELETE), le navigateur ne suffit pas.

Vous verrez comment réaliser ces requêtes dans un prochain TP.

5 Créez votre répo projet

Un membre de l’équipe :

• Crée un dépôt distant sur GitHub (new Repository)
  • Repository name : par exemple ENSAI-Projet-info-2A
  • Public ou Privé, comme vous voulez
  • Cochez Add a README file
  • .gitignore : Python
  • Choose a license : au choix Apache, GNU ou MIT
• Invite ses camarades

Obligatoire

• Invitez également votre tutrice ou tuteur, ainsi que l’enseignant (pseudo : ludo2ne)

Ensuite, chaque membre de l’équipe :

• Crée un clone local du dépôt dans P:/Cours2A/UE3-Projet-info
• Fait un test pour vérifier qu’il peut pousser du code, par exemple en créant :
  • doc/suivi/2024.09.12-semaine1.md : le premier point hebdo
  • src/main.py : le fichier pour lancer votre application
  • requirements.txt : le fichier listant les packages

Caution

Par la suite, vous veillerez à ce que votre dépôt soit « bien rangé », de la même manière que celui vu dans la partie précédente.

5.1 Le fichier .env

Ce fichier contiendra des variables d’envrionnement qui serviront par exemple pour vous connecter à la base de données PostgreSQL.

• Faîtes en sorte que ce fichier reste dans votre dépôt local sans jamais être envoyé sur GitHub

Tip

Il suffit qu’un seul membre de l’équipe modifie le fichier adéquat, push et ensuite les autres pull.

Conclusion

Le but de ce TP était de vous remettre en jambe concernant l’utilisation de Git, ainsi que de vous faire découvrir et comprendre comment fonctionne une application découpée en couche.