Lancement du projet

Introduction au projet CyberQuiz : création d'un dépôt GitHub et clonage en local.

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 CyberQuiz

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.
• add : ajouter des fichiers au suivi de Git.
• commit : une sauvegarde de l’état du code à un instant donné.
• push : envoyer les commits de votre ordinateur vers GitHub.
• README.md : un fichier texte pour expliquer votre projet.

---

Quelques méthodes à connaître

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

---

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

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,
• créer un projet Next.js en local,
• connecter votre dépôt local au dépôt GitHub
• modifier le fichier README.md pour présenter votre projet CyberQuiz.

---

Étapes à suivre

1. Se connecter à GitHub

• Allez sur le site : https://github.com

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

• Connectez-vous à votre compte GitHub.

  

---

2. Créer le dépôt quiz-cyber

Pour héberger votre projet CyberQuiz, vous devez créer un dépôt GitHub.

Affichez la liste de vos dépôts, en cliquant sur votre photo de profil en haut à droite, puis sur Repositories.

Pour créer un dépôt GitHub, cliquez sur le bouton New.

---

3. Ouvrir le dossier du projet

Veuillez ouvrir le dossier dans lequel vous souhaitez créer le projet. Selon votre système d’exploitation (Explorateur de fichiers sous Windows, Finder sous macOS/Linux).

---

4. Ouvrir un terminal

Veuillez ouvrir un terminal dans ce dossier. Selon votre système d’exploitation (PowerShell ou Invite de commandes sous Windows, Terminal sous macOS/Linux).

astuce

Sous Windows, pour ouvrir un terminal dans un dossier avec l'Explorateur de fichiers, il suffit de :

• saisir cmd dans la Barre d'adresses
• appuyer sur la touche Entrée

---

5. Créer un projet Next.js.

Pour créer un projet Next.js, il suffit d'utiliser la commande suivante :

npx create-next-app

Cette commande vous guide pas à pas :

• Ok to proceed? (y) → saisissez y
• What is your project named? → saisissez quiz-cyber,
• Would you like to use the recommended Next.js defaults? → Yes, use recommended defaults,

astuce

Si la commande npx n'est pas reconnue, installez Node.js depuis : nodejs.org.

Vous pouvez vous aider avec ce guide : Installer Node.js.

---

6. Connecter son dépôt local à GitHub

Pour connecter votre dépôt local au dépôt GitHub :

• allez sur la page de votre dépôt (Code)
• et cliquez sur le bouton pour copier l’URL du dépôt.

Revenez dans le terminal et entrez dans le dossier du projet :

cd quiz-cyber

Entrez la commande suivante, pour initiaiser le dépôt Git :

git init

Entrez les commandes suivantes, pour lier le dépôt local au dépôt GitHub distant :

git add .
git commit -m "Lancement du projet CyberQuiz"
git remote add origin <url>
git push

Remplacez <url> par l’URL que vous avez copiée précédemment.

Par exemple : git remote add origin https://github.com/PrenomNom/quiz-cyber.git

attention

N'oubliez pas le point . après git add -> git add .

---

7. Ouvrir le dossier dans VS Code

Ouvrez VS Code, puis cliquez sur File → Open Folder..., et sélectionnez le dossier quiz-cyber que vous avez créé précédemment.

---

8. Modifier le fichier README.md

Veuillez vider et modifier le fichier README.md pour expliquer :

• le but du projet,
• les technologies utilisées,
• votre prénom et nom.

CyberQuiz est une application Web en JavaScript (un jeu de quiz sur la cybersécurité) 
pour former les élèves, les professeurs et le personnel du lycée de manière interactive sur :
- le fonctionnement du SI du lycée,
- comment créer un ticket d'incident,
- comment se protéger contre les cyberattaques, 
- quelles sont les bonnes pratiques.
Technologies utilisées :
- HTML, CSS, JavaScript
- Next.js
- Supabase
Auteur : Prénom Nom 

astuce

Le fichier README.md utilise la syntaxe Markdown. Vous pouvez vous aider avec ce guide : Markdown.

---

9. Ouvrir le terminal

Pour ouvrir le terminal intégré dans VS Code, il suffit de cliquer dans le menu, sur Terminal → New Terminal.

---

10. Faire un commit

Voici les commandes pour faire un commit :

git add .
git commit -m "Mise à jour du README"

---

11. Envoyer les modifications

Envoyez les modifications sur GitHub, avec la commande :

git push

astuce

Si c’est la première fois que vous faites un git push, GitHub peut vous demander de préciser la branche distante :

git push --set-upstream origin main

---

12. Vérifier sur GitHub

Vérifiez sur GitHub que vos fichiers sont bien en ligne.

---

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.