Master 2 Miage MBDS 2019-2020

De $1

Version de 04:29, 20 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

Introduction

Dans ce cours nous verrons le developpement de WebApps fullstack avec NodeJS/MongoDB/Firecloud-Firebase/cloud et avec les principaux frameworks JS front-end (React et Angular, VueJS ayant été étudié l'an dernier).

Séance 1 : rappels essentiels sur JavaScript asynchrone / premiers WebServices avec NodeJS

Rappels sur l'asynchronisme en JavaScript, les reqêtes Ajax

Support de cours :

  1. Des callbacks aux promesses et révision sur la gestion des erreurs, map/reduce, le parallélisme...
  2. async/await : des promesses plus simples au niveau syntaxique (mais moins puissantes) 
  3. Requêtes Ajax : de XmlHttpRequest à fetch,  la fetch API 
    • Exemples fait en classe en live coding :

Rappels sur les Web Services REST

Supports de cours :

  1. Les bonnes pratiques pour créer une API RESThttps://blog.octo.com/designer-une-api-rest/ (note : en cours on verra comme gérer les uploads de fichiers via des WS)

  2. On peut tester des appels Ajax avec des "Fake REST APis" comme https://jsonplaceholder.typicode.com/
  3. On testera des APIs REST avec un outil comme l'extension Google Chrome Postman 

Exercice à faire :

  1. Créez votre propre "fake API" en mettant un fichier JSON finissant par .db sur un de vos repositories github. Vous lirez la documentation de https://my-json-server.typicode.com pour y arriver.
    Exemple ici https://my-json-server.typicode.com/micbuffa/hobbies/db

On commence l'étude de NodeJS 

Support de cours :

  1. Transparents de présentation de NodeJS 
  2. Transparents de présentation de Express 
  3. Livres à demander au prof pour ceux qui sont déjà à l'aise avec NodeJS.

Exercice à faire :

  1.  Récupérez cette archive, dezippez là quelque part, avec la ligne de commande, faites cd dans le répertoire TP_ROUTAGE_EXPRESS_CRUD_AJAX créé, et exécutez la commande "npm install".

    Ceci devrait créer un sous directory node_modules contenant les modules nécessaires (dans notre cas: express et multer).
     
  2. Suivez les consignes du prof et les explications au tableau.

Premiers pas avec MongoDB

Support de cours :

Installer MongoDB sur sa machine

Exemple de code NodeJS pour faire le CRUD sur une base MongoDB

  1. Récupérez cette archive qui est une version modifiée de l'exercice précédent: TPRoutageExpressWithMongo3.zip 
     
  2.  Dezipper, allez dans le répertoire créé (TPRoutageExpressWithMongo3) et faites "npm install"
     
  3. Exécutez node serverCrudWithMongo (ou nodemon)
     
  4. Ouvrez localhost:8080

  5. Etudiez le code, regardez en particulier comment, quand on clique sur le premier bouton GET AJAX un tableau est construit dynamiquement. 

Ajouter le support "cross domain" à votre projet node/MongoDB

Ajouter les lignes suivantes dans la configuration de votre serveur (fichier serverCrudWithMongo.js), ça se passe dans la configuration de express, c'est l'équivalent des "Servlet Filters" en JavaEE :

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");

    next();
});

Note : vous pouvez également utiliser un des nombreux modules npm pour ajouter à votre projet le support cross-domain, par exemple le module cors. Notez bien qu'on va écrire presqu'autant de lignes de code qu'en le faisant à la main.

Exercice à faire : utiliser un outil pour générer la documentation HTML de vos API REST