Mise en place de l'environnement¶

Dans cette section, vous allez préparer votre environnement de développement pour le cours. Nous utiliserons GitHub pour héberger votre code et GitHub Codespaces pour coder directement dans le navigateur, sans installation logicielle sur votre machine.

Étape 1 : Créer un compte GitHub¶

GitHub est une plateforme qui permet de stocker et de gérer du code avec Git. C'est l'outil de référence utilisé par des millions de développeurs dans le monde.

1. Accédez au site : Allez sur https://github.com.

2. Inscription avec email universitaire : Cliquez sur "Sign up" et créez un compte avec votre adresse email universitaire.

   Pourquoi l'email universitaire ?

   Utiliser votre email universitaire vous permettra de bénéficier du GitHub Student Developer Pack, qui offre des avantages gratuits comme des crédits Codespaces illimités, des outils premium, et bien plus encore.

3. Choisissez un nom d'utilisateur professionnel : Optez pour un nom simple et professionnel (ex. prenom-nom ou prenom.nom).

   Conseil

   Évitez les pseudonymes fantaisistes. Ce compte sera visible par vos enseignants et potentiellement par de futurs recruteurs !

Étape 2 : Rejoindre la classe GitHub Classroom¶

GitHub Classroom est un outil qui permet aux enseignants de distribuer des exercices et de suivre votre progression. Lorsque vous acceptez une invitation, GitHub crée automatiquement un dépôt (repository) personnel pour vous.

1. Cliquez sur le lien d'invitation fourni par votre enseignant (envoyé par email ou sur la plateforme pédagogique).

2. Autorisez GitHub Classroom : Si c'est votre première fois, GitHub vous demandera d'autoriser l'application GitHub Classroom à accéder à votre compte. Acceptez.

3. Acceptez l'assignation : Cliquez sur "Accept this assignment".

4. Patientez quelques secondes : GitHub crée automatiquement votre dépôt privé pour le TP. Ce dépôt contient les fichiers de départ et les instructions.

5. Accédez à votre dépôt : Une fois créé, cliquez sur le lien qui apparaît pour accéder à votre dépôt personnel.

Étape 3 : Ouvrir un Codespace¶

GitHub Codespaces est un environnement de développement complet qui fonctionne dans votre navigateur. Plus besoin d'installer des logiciels sur votre ordinateur : tout se passe en ligne !

1. Accédez à votre dépôt : Vous devriez être sur la page principale de votre dépôt GitHub.

2. Lancez Codespaces :

   • Cliquez sur le bouton vert "Code" en haut à droite
   • Sélectionnez l'onglet "Codespaces"
   • Cliquez sur "Create codespace on main"

   Qu'est-ce que 'main' ?

   main est le nom de la branche principale de votre projet. Une branche est comme une version parallèle de votre code. Vous en apprendrez plus sur les branches dans les prochains TPs.

3. Patientez pendant la configuration : GitHub prépare votre environnement. Cela peut prendre 1 à 3 minutes la première fois.

4. Un conteneur Docker se lance avec tous les outils nécessaires
5. Les extensions VS Code sont installées automatiquement

6. Votre projet est cloné et prêt à l'emploi

7. Explorez l'interface : Vous êtes maintenant dans VS Code (Visual Studio Code), un éditeur de code professionnel !

   • Barre latérale gauche : Explorateur de fichiers, recherche, contrôle de source (Git), etc.
   • Zone centrale : Éditeur de code où vous écrivez vos programmes
   • Panneau inférieur : Terminal, console de débogage, problèmes détectés
   • Barre d'état : Informations sur le fichier ouvert, la branche Git active, etc.

Étape 4 : Premiers commits avec Git¶

Maintenant que votre environnement est prêt, apprenons à sauvegarder vos modifications avec Git. Git est un système de contrôle de version qui enregistre l'historique de vos modifications.

Créer un fichier README¶

1. Créez un fichier :
2. Dans l'explorateur de fichiers (barre latérale gauche), cliquez sur l'icône "Nouveau fichier"

3. Nommez-le README.md

4. Ajoutez du contenu : Dans le fichier, écrivez quelques informations sur vous :

   1 2 3 4 5 6 7 8 9

   # Mon Premier Projet **Nom :** Votre Nom **Classe :** Votre Classe **Date :** 3 octobre 2025 ## Description Ce dépôt contient mes exercices de développement web et mobile.

5. Sauvegardez : Utilisez Ctrl+S (ou Cmd+S sur Mac) pour sauvegarder le fichier.

Comprendre Git : add, commit, push¶

Git fonctionne en trois étapes pour sauvegarder vos modifications :

1. git add : Prépare les fichiers pour la sauvegarde (staging)
2. git commit : Enregistre les modifications avec un message descriptif
3. git push : Envoie les modifications vers GitHub (le serveur distant)

Imaginez que vous prenez une photo de groupe :

• git add = Choisir qui sera sur la photo
• git commit = Prendre la photo avec une légende
• git push = Partager la photo sur les réseaux sociaux

Exécuter les commandes Git¶

1. Ouvrez le terminal :
2. Allez dans le menu : View > Terminal (ou utilisez Ctrl+`)

3. Un terminal bash s'ouvre en bas de l'écran

4. Ajoutez vos fichiers à l'index Git :

   1

   git add .

   Explication

   • git add : Commande pour ajouter des fichiers à l'index Git
   • . : Signifie "tous les fichiers modifiés". Vous pourriez aussi écrire git add README.md pour n'ajouter que ce fichier.

5. Créez un commit (une sauvegarde) :

   1	git commit -m "Ajout du README avec mes informations"

   Explication

   • git commit : Crée un point de sauvegarde dans l'historique
   • -m "message" : Ajoute un message descriptif. Soyez clair et concis !

   Bons messages de commit

   • ✅ "Ajout du README avec mes informations"
   • ✅ "Correction d'un bug dans la fonction login"
   • ❌ "update" (trop vague)
   • ❌ "modifications" (pas assez descriptif)

6. Envoyez vos modifications sur GitHub :

   1

   git push

   Explication

   Cette commande envoie votre commit local vers le serveur GitHub. Ainsi, vos modifications sont sauvegardées dans le cloud et visibles par votre enseignant.

7. Vérifiez sur GitHub :

8. Retournez sur la page de votre dépôt GitHub dans votre navigateur
9. Rafraîchissez la page (F5)
10. Vous devriez voir votre fichier README.md apparaître avec votre message de commit !

Continuez vers la prochaine étape du TP pour commencer à coder votre première application web.