//-----------------------------------------------------
Ce fichier contient les 10 premiers TP JavaScript-Node-Express :
Usage du fichier, pour voir la structure :
sur PC :
ctrl-k-0 : pour le plan
ctrl-k-k : pour tout ouvrir
sur mac
cmd-a + cmd-k-0 : pour le plan
cmd-a + cmd-k-j : pour tout ouvrir
//-----------------------------------------------------
TP-0) Installations de base : Chrome, VS Code, Sublime Text
Installer Chrome
Installer VS Code : éditeur amélioré = IDE
Installer Sublime Text : édtieur basique très bien
//-----------------------------------------------------
TP-1) Le JavaScript : le langage associé au HTML
=> donc "côté client"
Ouvrir 24-25-Sem2-GC-5-Node-Express-J1 dans VS Code
Regardez l''exemple w3s.html dans VS Code
Dans ce cas, c''est du JavaScript côté client
Ouvrez la page HTML dans Chrome
L'objectif est d'afficher la liste des films ci-dessous donné au format JSON :
const movies = [ // [ ] : c'est un tableau
{ // { } : c'est un objet
title:'Don\'t look up',
year:2021
},
{
title:'Une vérité qui dérange',
year:2006
},
// on compacte un peu la suite
{title:'Melencholia', year:2011},
{title:'Beasts of the southern wild', year:2012},
{title:'Sauve qui peut (la vie)', year:1980},
{title:'Nope', year:2022},
{title:'L\'amour à mort', year:1984},
]
On ouvre avec Visual Studio Code
On regarde le code de façon détaillée
//-----------------------------------------------------
TP-2) Installer Node.js
Node.js : interpréteur JavaScript : comme du python
l'interpréteur JS : il y en a un dans les navigateurs
L'interpréteur JS hors navigateur c'est Node.js
Node.js c'est le JavaScript côté serveur
Installer Node.js (ça installe aussi npm)
Node = noeud
npm : node package manager
(package = bibliothèque ou librairie = ensemble de fonctions et d'objets qu'on pourra utiliser)
Aller sur le site Node.js, et installer !
vérifier que c'est fait :
dans un terminal :
node -v
npm -v
Node.js : c'est la première couche :
ensuite on ajoute des couches en plus :
des packages en plus qu'on ajoute avec npm
Autres couches classiques (populaires) :
express
react
angular
react-native
//-----------------------------------------------------
TP-3) Node.js comme interpréteur de JavaScript
Dans un terminal = shell = invite de commande
Démarrez Node.js : l'interpréteur comprend le langage JavaScript
On peut créer le tableau movies dans Node : faites-le !
Affichez-le
Affichez le troisième film (movies[2])
Affichez tous les titres avec 3 types de boucle :
utilisez une boucle for(let i=0; ...)
utilisez une boule forEach avec une fonction classique
utilisez une boucle forEach avec une fonction fléchée
//-----------------------------------------------------
TP-4) Premières application Node.js côté serveur :
Dans l'introduction, on a vu un exemple :
// Importation du module http de Node.js
const http = require('http');
// Création du serveur
const server = http.createServer((req, res) => {
// Définit l'en-tête HTTP (code de statut et type de contenu)
res.writeHead(200, { 'Content-Type': 'text/plain' });
// Envoi de la réponse "Hello World" au navigateur
res.end('Hello World Node.js');
});
// Le serveur écoute sur le port 3000
server.listen(3000, () => {
console.log('Serveur en cours d\'exécution sur http://localhost:3000');
});
Exécutez ce code
regardez ce qui s'affiche dans le terminal : serveur en cours d'exécution...
affichez le Hello World dans Chrome
Faites une 2ème version avec :
res.end('Hello World Node.js
');
en remplaçant 'text/plain' par 'text/html'
//-----------------------------------------------------
TP-5) Installation d''une application Express :
Créez un dossier expressmovies/J1 (ou J2, J3, etc. selon la journée de cours)
Vous pouvez le mettre là ou était 24-25-Sem2-GC-5-Node-Express-J1
Par exemple : C:/Users/vous/Documents/GC-5/express/expressmovies/j1
On ouvre un Visual avec le dossier "expressmovies/j1"
On ouvre un terminal dans visual :
on est dans le dossier expressmovies/j1
Passez la commande : npm init
npm init
des q? et des réponses par défaut
desc : app for movie fans
point d''entrée : app.js
keyword : des mots clés pour référencer le site
auteur : qui on veut
licence: par défaut, ISC : logiciel libre, GNU
nmp init -y (équivalent à npm init --yes)
Ca ne pose pas de question et ça met des valeurs par défaut
cette commande crée :
un fichier package.json
on pourra changer le contenu du fichier package.json
un dossier node_modules
Il contient les packages nécessaires à Node.js
Il est gros (2,2 MO de base, plus de 60 dossiers, plus de 600 éléments)
On peut le supprimer et le recharger :
nmp install
On verra une autre solution avec yarn
Installez le package express :
Le package express va nous permettre de créer un serveur web avec Node.js
encore plus facilement qu''avec Node.js tout seul.
Passez la commande : npm install express --save
le --save permet d''ajouter une entrée dans le package.json pour express dans les dependencies
Ca permettra de faire des npm update si on se sépare du dossier node_modules
//-----------------------------------------------------
TP-6) Première application Express
Création d''une application web : app.js
Créez un fichier app.js : c''est le main
Contenu du fichier app.js :
Mettez le code ci-dessous dans app.js :
Lisez-le !
const express = require('express');
const app = express();
// Ces 2 premières lignes créent un objet app
// qui permet d'accéder à plein de méthodes.
app.get('/', function(req, res){
console.log("url: ", req.url)
res.send('hello world')
});
// '/'c'est la route
// la function est un "callback" :
// une fonction appelée par la methode get
// cette fonction est définie directement dans l'appel
// d'où le }) à la fin
// req : c'est la requete issue du navigateur - req.url, c'est l'url
// res : c'est le résultat
// on écoute sur le port 3000 : localhost:3000 dans un navigateur
app.listen(3000, function() {
console.log("listening on port 3000")
});
Exécutez le code : node app.js dans le terminal visual
Dans le terminal, ça affiche : listening on port 3000
Dans le navigateur, allez sur: localhost:3000
Ca affiche "hello world"
Dans l''inspecteur du navigateur, choisissez : network
inspecteur - network - all - localhostet
Vous voyez l''url, la méthode get, le code status
Visualiser l''élément HTML
Visualisez le code source HTML : uniquement "hello world"
Variantes :
On peut mettre "hello world
"
On peut aussi mettre :
res.send(`
test
hello world
`)
Avec des "backstick"
C''est un peu nul : on perd la coloration syntaxique !
On fera mieux tout à l''heure avec un TEMPLATE !
//-----------------------------------------------------
TP-7) Quelques évolution de syntaxe Node.js
Modifiez le code que vous avez écrit pour obtenir celui-ci :
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
console.log(`url: ${req.url}`)
res.send('hello world !!!')
});
app.listen(PORT, () => {
console.log(`listening on port ${PORT}`)
});
Les nouveautés :
La constante PORT
Les backsticks et les ${}
a = 10;
console.log(`coucou ${a}`);
Les fonctions fléchées
() => {
//-----------------------------------------------------
TP-8) nodemon
L'objectif est d'avoir à éviter de relancer le serveur
pour tester un code qu'on vient de modifier.
nodemon fait ça : c'est l'équivalent de node,
mais il se relance tout seul en cas de modification du code
Installez nodemon :
npm install -g nodemon
l'option -g permet d'installer nodemon de façon globale, une fois pour toute
Démarrez votre application avec nodemon :
nodemon app.js (à la place de node app.js) : c'est tout !!!
Vérifiez que ça fonctionne
en modifiant quelque chose dans votre application
En plus, dans VS Code, on sélectionne : fichier/enregistrement automatique
Comme ça, tout est automatique !!!
Erreur possible :
l’exécution de scripts est désactivée sur ce système =>
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
//-----------------------------------------------------
TP-9) Démarrages génériques
1) "start" : pour démarrer avec npm start
Le but est de mettre le nom du "main" : app.js dans package.json
Dans package.json :
"scripts": {
"start": "node app.js",
// on ajoute la propriété start en précisant : node app.js
Pour exécuter, on peut faire un générique : : npm start
npm start c''est une simplification autorisé de npm run start
On n''a plus besoin de faire : node app.js
2) "scripts": pour démarrer avec npm run dev
Le but est d'écrire la commande qu'on veut : par exemple nodemon app.js
Dans package.json :
"scripts": {
"dev": "nodemon app.js",
// on ajoute la propriété dev en précisant : nodemon app.js
Pour exécuter, on peut faire un générique : npm run dev
On n''a plus besoin de faire : nodemon app.js
3) On peut mettre ce qu''on veut dans script
"test" : pour démarrer avec npm run test
"scripts": {
"test": "node app.js Toto",
Si dans app.get, on a : res.send(`hello ${process.argv[2]}`)
Alors npm run test fournira "Toto" pour process.argv[2]
Testez les 3 possibilités.
//-----------------------------------------------------
TP-10) yarn
Rechargement : npm update
On peut supprimer node_modules et package-lock.json pour réduire la taille de notre projet
Pour recharger tout il suffit de faire : npm update
yarn : plus pratique que npm
Pour installer yarn, on passe par le site chore-update qui propose un msi
On peut supprimer node_modules et yarn.lock
Pour recharger tout, il suffit de faire :
yarn
Installez yarn et testez le.
3-02
//-----------------------------------------------------
TP-11) Routage : 3 premiers exemples
1) Ajouter la route : localhost:3000/movie
Testez localhost:3000/movie dans le navigateur :
On a un message d''erreur
Dans l''inspecteur, on a une erreur 404 : ça veut dire pas de route
Ajoutez après la route / (ou avant)
app.get('/movies', (req, res) => {
console.log(`url: ${req.url}`)
console.log('Bientôt des films : affichage en terminal)
res.send('Bientôt des films')
});
Notez la présence des back-sticks
Testes : localhost:3000/movie
On a l'affichage dans le navigateur
Dans l'inspecteur, on voit bien l'url
Dans le terminal, on a aussi le message
2) Une route par film : /movies/1, /movies/2, etc.
Ce qui serai bien, ce serait d'avoir une route par film :
/movies/1, /movies/2, etc.
Comment faire ?
app.get('/movies/:id', (req, res) => {
console.log(`url: ${req.url}`)
const id = req.params.id;
res.send(`Bientôt le film numéro ${id}`)
});
Testez ce code
Comprennez bien le :id, le req.params, les back-sticks et le ${id}
Affichez tout req.params dans le terminal du serveur
3) Route /movies/add
On veut une route pour ajouter un film : /movies/add
Faites le vous même avec la même logique d'affichage que dans le TP 12
Dans un premier temps, mettez la nouvelle route après celle du TP-12
Que constatez-vous ?
Pourquoi ?
Dans un 2ème temps, mettez la nouvelle route avant la route :id
Que constatez-vous ?
Pourquoi ?