diff --git a/A-preparatifs.md b/A-preparatifs.md new file mode 100644 index 0000000000000000000000000000000000000000..46caf8cda4c3e91004987891db1339a82bcb8892 --- /dev/null +++ b/A-preparatifs.md @@ -0,0 +1,79 @@ +<img src="images/readme/header-small.jpg" > + +# A. Préparatifs <!-- omit in toc --> + +## Sommaire <!-- omit in toc --> +- [A.1. Récupération du projet](#a1-récupération-du-projet) +- [A.3. Lancement de l'application](#a3-lancement-de-lapplication) + +## A.1. Récupération du projet + +**Ce repo contient une solution commentée du précédent TP.** <br> +Il va vous servir de base pour ce nouveau TP. + +1. **Commencez par faire un fork du TP :** + - soit en cliquant sur le bouton `"Créer une divergence"` (_`"Fork"` sur la version anglaise de gitlab_) + - soit en vous rendant directement sur https://gitlab.univ-lille.fr/js/tp3/-/forks/new + + Choisissez de placer le fork dans votre profil utilisateur et configurez le repo **en mode "privé"** + (**`Settings`** > **`Visibility, project features, permissions`** > **`Project visibility`**) + + +2. **Ajoutez-votre encadrant de TP en tant que "reporter" pour qu'il ait accès à votre code :** + - dans le menu de gauche, cliquez sur `"Membres"`, + - entrez comme **nom d'utilisateur** celui de votre encadrant de TP (`@nicolas.anquetil`, `@patricia.everaere-caillier` ou `@thomas.fritsch`) + - ... et `"reporter"` comme **rôle**. + + +3. **Ouvrez ensuite un terminal et récupérez les fichiers de ce TP grâce à Git en clonant votre fork dans un dossier de votre choix :** + ```bash + mkdir ~/tps-js + git clone https://gitlab.univ-lille.fr/<votre-username>/tp3.git ~/tps-js/tp3 + ``` + > _**NB :** Comme pour le TP1, ici je clone dans mon dossier `/home/thomas/tps-js/tp3`. **Si vous êtes sous windows faites attention au sens des slashs et au caractère `"~"`** qui représente le dossier de l'utilisateur sur système unix. Si vous êtes sous windows utilisez **Git bash** (qui comprend cette syntaxe) ou si vous tenez vraiment à utiliser **cmd** pensez à adapter !_ + + > _**NB2 :** Comme pour le TP1 aussi, si vous préférez **cloner en SSH** pour ne pas avoir à taper votre mot de passe à chaque fois, renseignez votre clé SSH dans votre [compte utilisateur gitlab](https://gitlab.univ-lille.fr/profile/keys) et clonez à partir de cette URL : `git@gitlab-ssh.univ-lille.fr:js/tp3.git`_ + +4. **Ouvrez le projet dans VSCodium** (pour les différentes façon d'ouvrir le projet relisez les [instructions du TP1](https://gitlab.univ-lille.fr/js/tp1/-/blob/master/A-preparatifs.md#a3-ouvrir-le-projet-dans-vscodium) ) + ```bash + codium ~/tps-js/tp3 + ``` + +5. **Installez les paquets npm nécessaires au projet** notamment le compilateur [Babel](https://babeljs.io).<br> + Ouvrez un terminal intégré à VSCodium (<kbd>CTRL</kbd>+<kbd>J</kbd> *(PC)* / <kbd>CMD</kbd>+<kbd>J</kbd> *(Mac)*) et tapez juste : + ```bash + npm install + ``` + + > _**NB :** Vous noterez qu'on ne précise pas les paquets à installer. npm va en effet les déterminer **automatiquement** à partir du contenu du fichier `package.json` et plus particulièrement à partir des sections `"dependencies"` et `"devDependencies"` qui indiquent quels sont les paquets qui ont été installés précédemment._ + > + > **Magique !** 🙌 + +## A.3. Lancement de l'application + +Comme dans le précédent TP lancez un serveur HTTP et la compilation du projet **dans deux terminaux côte à côte** ([terminaux splittés](https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-splitting)) : + +1. **Lancez un serveur http** dans un terminal intégré de VSCodium (<kbd>CTRL</kbd>+<kbd>J</kbd> *(PC)* / <kbd>CMD</kbd>+<kbd>J</kbd> *(Mac)*) : + ```bash + npx serve -l 8000 + ``` + +2. **Lancez la compilation de votre projet** dans un **deuxième** [terminal splitté](https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-splitting) (*le `watch` et `npx serve` doivent tourner en parallèle*) : + ```bash + npm run watch + ``` + + > _**NB :** vous vous souvenez ? **`npm run` permet de lancer un script custom**_ + _que vous avez créé dans le précédent TP ([TP2 / A.5. Créer un script de build personnalisé](https://gitlab.univ-lille.fr/js/tp2/-/blob/master/A-preparatifs.md#a5-cr%C3%A9er-un-script-de-build-personnalis%C3%A9))_ + _puis modifié pour [compiler avec webpack+babel](https://gitlab.univ-lille.fr/js/tp2/-/blob/master/C-modules.md#c3-rendre-les-modules-compatibles-avec-les-vieux-navigateurs)_ + +3. **Vérifiez dans le navigateur que la page index.html s'affiche correctement** en ouvrant l'url http://localhost:8000. + + Le résultat attendu est le suivant : + + <img src="images/readme/pizzaland-00.png" > + + > _**NB : Si la page ne s'affiche pas correctement**, vérifiez que vous avez bien lancé le serveur http dans le dossier du projet, c'est à dire celui où se trouve le fichier `index.html`. Puis vérifiez dans la `Console` ou dans l'onglet `Sources` (Chrome) ou `Debugger` (Firefox) qu'l n'y a pas d'erreur JS lorsque la page se charge._ + +## Étape suivante <!-- omit in toc --> +Si la compilation fonctionne, vous pouvez passer à l'étape suivante : [B. Les bases de l'API DOM](B-les-bases.md) \ No newline at end of file diff --git a/images/readme/header-small.jpg b/images/readme/header-small.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4d175ba41410e4606caad383a49677ba0d527384 Binary files /dev/null and b/images/readme/header-small.jpg differ diff --git a/images/readme/pizzaland-00.png b/images/readme/pizzaland-00.png new file mode 100644 index 0000000000000000000000000000000000000000..3d3fef54ea9f1ec0f9704f2c0a3cbea88b31ee62 Binary files /dev/null and b/images/readme/pizzaland-00.png differ