Lancement du projet

Objectifs

• Comprendre le projet final à réaliser : une application Web de type quiz sur la cybersécurité.
• Découvrir Git et GitHub pour versionner son code.
• Créer un dépôt personnel pour héberger son projet.
• Cloner son dépôt en local pour commencer à travailler.

Notions théoriques

1. Le projet Quiz Cyber

Nous allons créer une application Web en JavaScript : un jeu de quiz sur la cybersécurité.

Ce quiz a pour objectif de former les élèves, les professeurs et le personnel du lycée, de manière interactive, sur :

• le fonctionnement du SI (Système d'Information) du lycée,
• comment créer un ticket d'incident,
• comment se protéger contre les cyberattaques,
• quelles sont les bonnes pratiques à suivre en sécurité informatique.

astuce

Ce projet va aussi vous permettre d’apprendre les bases de la programmation JavaScript et TypeScript, de découvrir Next.js, Supabase, Git, GitHub, et de mettre en ligne une vraie application Web.

2. Qu’est-ce que Git ?

Git est un logiciel de gestion de version. Il permet de :

• sauvegarder l’évolution de votre code,
• revenir à une version antérieure si besoin,
• travailler à plusieurs sans écraser le travail des autres.

Git fonctionne en local, sur votre ordinateur.

3. Qu’est-ce que GitHub ?

GitHub est un service en ligne qui permet :

• d’héberger vos projets Git,
• de les rendre publics ou privés,
• de collaborer avec d’autres développeurs.

GitHub est indispensable pour publier votre projet et le déployer plus tard.

4. Vocabulaire de base

• Dépôt (repository) : un projet versionné avec Git.
• Commit : une sauvegarde de l’état du code à un instant donné.
• Push : envoyer les commits de votre ordinateur vers GitHub.
• Clone : copier un projet GitHub sur votre ordinateur.
• README.md : un fichier texte pour expliquer votre projet.

---

Exemple pratique

Imaginons que vous commenciez à coder un jeu. Vous voulez sauvegarder votre travail régulièrement.

Voici un scénario typique avec Git :

# Initialiser un dépôt Git
git init

# Ajouter un fichier
git add index.html

# Créer une sauvegarde (commit)
git commit -m "Ajout de la page d'accueil"

# Créer un dépôt sur GitHub (en ligne)

# Connecter votre dépôt local au dépôt GitHub
git remote add origin https://github.com/votre-nom/quiz-cyber.git

# Envoyer votre code en ligne
git push -u origin main

Et voilà, votre code est en ligne, sauvegardé, et prêt à être partagé ou collaboré.

---

Quelques méthodes à connaître

Action	Commande Git
Initialiser un dépôt Git local	git init
Ajouter des fichiers	git add .
Sauvegarder avec un message	git commit -m "Message"
Lier un dépôt distant	git remote add origin <url>
Envoyer sur GitHub	git push -u origin main
Cloner un projet	git clone <url>

---

Test de mémorisation/compréhension

À quoi sert GitHub ?

À créer un ticket d'incident

À héberger les sources d'un projet ou de la documentation en ligne

À compiler du code

Quelle commande permet d'envoyer le code local sur GitHub ?

git send

git deploy

git push

Dans quel fichier décrit-on le projet ?

README.md

LICENSE.txt

index.html

Quelle est la bonne séquence de commandes pour envoyer le code local sur GitHub ?

git add → git push

git add → git commit → git push

git commit → git add → git push

git push → git add → git commit

git commit → git push → git add

Quelle commande permet de copier un projet GitHub sur votre ordinateur ?

git push

git fork

git clone <url>

git download <url>

git sync <url>

git copy <url>

Pourquoi est-il important de faire des commits régulièrement ?

Pour éviter de devoir utiliser GitHub

Pour sauvegarder les changements et pouvoir revenir en arrière

Pour rendre le projet automatiquement public

Pour empêcher d'autres développeurs de modifier le code

Pour supprimer les anciennes versions du code

Pour cloner le projet plus rapidement

---

TP pour réfléchir et résoudre des problèmes

Objectif du TP

Vous allez :

• créer un compte GitHub,
• créer un dépôt Git en ligne,
• initialiser un dépôt Git local sur votre ordinateur,
• cloner votre dépôt sur votre machine,
• ajouter un fichier README.md qui décrit votre projet Quiz Cyber.

---

Étapes à suivre

1. Créer un compte GitHub (si vous n’en avez pas déjà un).
2. Créer un nouveau dépôt nommé quiz-cyber.
   • Cochez l’option “Initialiser ce dépôt avec un README”.
3. Cloner ce dépôt sur votre ordinateur :

   git clone https://github.com/votre-nom/quiz-cyber.git

4. Ouvrir le dossier dans VS Code.
5. Modifier le fichier README.md pour expliquer :
   • le but du projet,
   • les technologies utilisées,
   • votre prénom et nom.
6. Ajouter un nouveau fichier vide nommé index.html.
7. Faire un commit :

   git add .
   git commit -m "Ajout du fichier index.html et mise à jour du README"

8. Envoyer les modifications sur GitHub :

   git push

---

Corrigé du TP

Solution attendue

• Le dépôt GitHub est bien créé avec un README.
• Le dépôt est cloné localement avec la commande git clone.
• Le fichier README.md contient une description du projet :
  • Objectif : Créer un jeu de quiz sur la cybersécurité.
  • Technologies : HTML, CSS, JavaScript, TypeScript, Next.js, Supabase.
  • Auteur : Prénom Nom.
• Un fichier index.html vide est présent.
• Le commit a été fait avec un message clair.
• Le push a été effectué sans erreur.