Skip to content
Snippets Groups Projects
Commit 433a0a29 authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

maj Préparatifs

parent 09fac77b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 64 additions and 41 deletions
A-preparatifs.md
+ 64
− 41
View file @ 433a0a29
# TP 2 - POO - modules - typage <!-- omit in toc -->
# TP 2 : A. Préparatifs <!-- omit in toc -->
- [A. Préparatifs](#a-préparatifs)
- [A.1. *Préparatifs :* Installation](#a1-préparatifs--installation)
- [A.2. *Préparatifs :* Le fichier `package.json`](#a2-préparatifs--le-fichier-packagejson)
- [A.3. *Préparatifs :* Créer un script de build personnalisé](#a3-préparatifs--créer-un-script-de-build-personnalisé)
- [A.1. Configuration du projet](#a1-configuration-du-projet)
- [A.2. Lancement de l'application](#a2-lancement-de-lapplication)
- [A.3. Le fichier `package.json`](#a3-le-fichier-packagejson)
- [A.4. Créer un script de build personnalisé](#a4-créer-un-script-de-build-personnalisé)
- [Étape suivante](#Étape-suivante)
## A. Préparatifs
## A.1. Configuration du projet
***Si vous avez terminé le TP précédent, que vous êtes fier de vous, et <u>qu'un professeur a validé votre code et votre installation de Babel</u>, alors vous pouvez repartir de vos propres fichiers. <br>Si <u>une de ces conditions</u> n'est pas remplie, alors vous pouvez récupérer le dossier "demarrage" de ce TP qui contient une solution (commentée) du précédent TP.***
*Si vous avez terminé le TP précédent, que vous êtes fier de vous, et **qu'un professeur a validé votre code et votre installation de Babel**, alors vous pouvez repartir de vos propres fichiers.*
### A.1. *Préparatifs :* Installation
1. **Si vous utilisez le dossier de démarrage fourni dans ce repo (cad. que vous ne repartez pas de vos fichiers du TP précédent), une fois les fichiers récupérés, il faut installer les outils JS néccessaires au bon fonctionnement du projet, notamment le compilateur [Babel](https://babeljs.io).**
*Si **une seule de ces conditions** n'est pas remplie, alors repartez des fichiers de ce repo (il s'agit d'une solution commentée du TP précédent):*
```bash
mkdir -p ~/ws-js/tp2
git clone https://gitlab.univ-lille.fr/js/tp2.git ~/ws-js/tp2
```
Ouvrez ensuite le projet dans VSCodium :
```bash
codium ~/ws-js/tp2
```
*(en cas d'échec, vérifiez que vous avez bien suivi les instructions du TP1 sur [l'installation de VSCodium](https://gitlab.univ-lille.fr/js/tp1/blob/master/A-preparatifs.md#a3-installation-ide))*
## A.2. Lancement de l'application
1. Si vous êtes repartis de la solution de ce repo (cad. que vous ne repartez pas de vos fichiers du TP précédent), une fois le clone terminé, il faut **installer les paquets npm nécessaires au bon fonctionnement du projet** (notamment le compilateur [Babel](https://babeljs.io)).
Ouvrez un terminal directement dans VSCodium à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>*</kbd> (ce terminal intégré utilise le terminal par défaut du système, mais vous pouvez le configurer pour utiliser un autre terminal comme Git bash sous windows par exemple).
L'avantage du terminal intégré, c'est qu'il s'ouvre directement dans le dossier du projet dans lequel vous travaillez (ici ça doit être ~/ws-js/tp2).Tapez ensuite :
Ouvrez un terminal directement dans Visual Studio Code à l'aide du raccourci <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>*</kbd> (ce terminal intégré utilise le terminal par défaut du système, mais vous pouvez le configurer pour utiliser un autre terminal comme Git bash sous windows par exemple) puis tapez :
```bash
cd /chemin/vers/votre/dossier/demarrage
npm install
```
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 notamment à partir des sections "dependencies" et "devDependencies" qui indiquent quels sont les paquets qui ont été installés précédemment.
2. **Lancez un serveur http dans le dossier de votre TP** :
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.
2. **Compilez ensuite votre projet** à l'aide de la commande :
```bash
cd /chemin/vers/votre/dossier/demarrage
python3 -m http.server 8000
./node_modules/.bin/babel js -d build --verbose --watch --source-maps
```
*Si vous avez des questions sur le lancement de ce serveur, ou comment le faire sur votre propre machine, relisez attentivement le [README du précédent TP](../01-premiers-pas-en-js/README.md#Préparatifs) !*
3. **Vérifiez dans le navigateur que la page index.html fournie s'affiche correctement** en ouvrant l'url http://localhost:8000. Le résultat attendu (si vous aviez fini le TP précédent !) est le suivant : <br><a href="images/pizzaland-00.jpg"><img src="images/pizzaland-00.jpg" width="80%"></a>
4. **Lancez un serveur http** dans le dossier de votre TP :
```bash
npx serve -l 8000
```
5. **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 : <br><a href="images/pizzaland-00.jpg"><img src="images/readme/pizzaland-00.jpg" width="80%"></a>
***NB: Si la page ne s'affiche pas correctement**, vérifiez que vous avez bien lancé python dans le dossier de démarrage, 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.*
***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.*
4. **Effacez le contenu du fichier `js/main.js`** et ne conservez dedans que la déclaration du tableau `data` contenant les 3 objets littéraux de pizzas :
6. **Effacez le contenu du fichier `js/main.js`** et ne conservez dedans que la déclaration du tableau `data` contenant les 3 objets littéraux de pizzas :
```js
const data = [
{
nom: 'Regina',
base: 'tomate',
prix_petite: 5.5,
prix_grande: 7.5
prix_petite: 6.5,
prix_grande: 9.95,
image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
},
{
nom: 'Napolitaine',
base: 'tomate',
prix_petite: 6.2,
prix_grande: 8
prix_petite: 6.5,
prix_grande: 8.95,
image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
},
{
nom: 'Spicy',
base: 'crème',
prix_petite: 6.5,
prix_grande: 9.95
},
prix_petite: 5.5,
prix_grande: 8,
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300'
}
];
```
### A.2. *Préparatifs :* Le fichier `package.json`
## A.3. Le fichier `package.json`
Lors du précédent TP nous avons créé un fichier `package.json` à la racine du dossier `demarrage` grâce à la commande `npm init`.
**Lors du précédent TP nous avons créé un fichier `package.json` dans le projet grâce à la commande `npm init`.**
Ce fichier sert à plusieurs choses et notamment :
1. **Il permet de conserver l'historique de tous les paquets qui sont installés dans le projet. C'est en quelque sorte l'équivalent du fichier `pom.xml` de maven.** Vérifiez que dans la section `devDependencies` sont bien listés les paquets suivants :
1. **Il permet de conserver l'historique de tous les paquets qui sont installés dans le projet.** C'est en quelque sorte l'équivalent du fichier `pom.xml` de maven. Vérifiez que dans la section `devDependencies` sont bien listés les paquets suivants :
- @babel/cli
- @babel/core
- @babel/preset-env
À chaque fois qu'on installe un paquet npm, le paquet en question se télécharge dans le dossier `node_modules`, puis le nom du paquet ainsi que sa version sont automatiquement ajoutés dans le fichier `package.json`. Le dossier `node_modules` n'est <u>jamais</u> versionné (c'est en général un dossier relativement volumineux) mais le `package.json` est lui bien versionné car il servira de "recette" pour indiquer aux développeurs qui rejoindraient le projet quels sont les paquets nécessaires.
À chaque fois qu'on installe un paquet npm, le paquet en question se télécharge dans le dossier `node_modules`, puis le nom du paquet ainsi que sa version sont automatiquement ajoutés dans le fichier `package.json`. <br>Le dossier `node_modules` n'est **jamais** versionné (c'est en général un dossier relativement volumineux) mais le `package.json` lui l'est car il servira de "recette" pour indiquer aux développeurs qui rejoindraient le projet quels sont les paquets nécessaires.
En effet, un nouveau développeur n'aurait qu'à exécuter la commande `npm install` (sans préciser de nom de paquet) pour installer automatiquement toutes les dépendances du projet !
En effet, avec un `package.json` renseigné, un nouveau développeur n'a qu'à exécuter la commande `npm install` (sans préciser de nom de paquet) pour installer automatiquement toutes les dépendances du projet (ce que vous avez fait plus haut) !
2. **Dans ce fichier on va également pouvoir ajouter des "scripts personnalisés" que l'on pourra lancer à l'aide de la commande `npm run xxxxx`.** C'est cette dernière possibilité que l'on va maintenant utiliser pour nous simplifier la vie dans la suite du TP.
### A.3. *Préparatifs :* Créer un script de build personnalisé
## A.4. Créer un script de build personnalisé
Jusque là pour lancer la compilation avec [Babel](https://babeljs.io), nous lancions une des deux commandes suivantes :
```bash
......@@ -84,7 +105,7 @@ ou
Avec le `package.json` on va créer des "raccourcis" pour lancer ces commandes plus facilement.
1. Dans Visual Studio Code, **ouvrez le fichier `package.json`** en tapant <kbd>CTRL</kbd>+<kbd>P</kbd> puis le nom du fichier ( <kbd>Enter</kbd> pour ouvrir le fichier)
1. Dans VSCodium, **ouvrez le fichier `package.json`** en tapant <kbd>CTRL</kbd>+<kbd>P</kbd> puis le nom du fichier ( <kbd>Enter</kbd> pour ouvrir le fichier)
2. **Localisez la section "scripts" du fichier**. Elle doit ressembler à :
```json
"scripts": {
......@@ -96,24 +117,26 @@ Avec le `package.json` on va créer des "raccourcis" pour lancer ces commandes p
npm run test
```
Vous verrez la commande `"echo \"Error: no test specified\" && exit 1"` s'exécuter dans le terminal.
<img src="images/npm-run-test.gif" style="width:80%"/><br>
<img src="images/readme/npm-run-test.gif" style="width:80%"/><br>
`"test"` est donc une sorte d'alias permettant de lancer une commande plus complexe.
4. **Ajoutez dans le `package.json` un nouveau script nommé "build"** qui permettra de lancer la compilation Babel :
4. **Ajoutez maintenant dans le `package.json` un nouveau script qu'on appellera "build"** et qui permettra de lancer la compilation Babel :
```json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel js -d build"
},
```
*Vous noterez que le chemin `./node_modules/.bin/' n'est plus nécessaire !*
5. **Lancez la commande `npm run build` et constatez avec émerveillement que la compilation babel se lance.**
*Vous noterez que le chemin `./node_modules/.bin/' n'est pas nécessaire !*
5. **Lancez la commande `npm run build`** et constatez avec émerveillement que la compilation babel se lance !
*Si la compilation ne se lance pas, plusieurs raisons possibles : soit Babel n'est pas correctement installé, soit la section "scripts" n'est pas correctement formatée (pensez qu'il s'agit d'un fichier json, par conséquent l'oubli d'une virgule entre chaque script ou au contraire l'ajout d'une virgule à la fin du dernier script, sont considérés comme des erreurs de syntaxe).*
1. **Ajoutez un nouveau script nommé `"watch"` qui permette de lancer la commande** :
*Si la compilation ne se lance pas, plusieurs raisons possibles :*
- *soit Babel n'est pas correctement installé, *
- *soit la section "scripts" n'est pas correctement formatée (pensez qu'il s'agit d'un fichier JSON, par conséquent l'oubli d'une virgule entre chaque script ou au contraire l'ajout d'une virgule à la fin du dernier script, sont considérés comme des erreurs de syntaxe).*
1. **Ajoutez un nouveau script nommé `"watch"`** qui permettra de lancer la commande :
```bash
./node_modules/.bin/babel js -d build --verbose --watch --source-maps
```
Lancez la commande `npm run watch` et vérifiez que lorsque vous modifiez le fichier `js/main.js`, le fichier `build/main.js` est bien mis à jour.
Lancez la commande `npm run watch` dans votre temrinal et vérifiez que lorsque vous modifiez le fichier `js/main.js`, le fichier `build/main.js` est bien mis à jour.
## Étape suivante
Si la compilation fonctionne, vous pouvez passer à l'étape suivante : [La POO](B-poo.md)
\ No newline at end of file
Si la compilation fonctionne, vous pouvez passer à l'étape suivante : [B. La POO](B-poo.md)
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment