Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 19:36, 11 Nov 2019 par MichelBuffa
0

Master 2 Miage MBDS 2019-2020

De $1

Version de 17:16, 21 Nov 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2. Séance 1 : rappels essentiels sur JavaScript asynchrone / premiers WebServices avec NodeJS
    1. 2.1. Rappels sur l'asynchronisme en JavaScript, les reqêtes Ajax
    2. 2.2. Rappels sur les Web Services REST
    3. 2.3. On commence l'étude de NodeJS 
    4. 2.4. Premiers pas avec MongoDB
    5. 2.5. Exemple de code NodeJS pour faire le CRUD sur une base MongoDB
      1. 2.5.1. Récupérez cette archive qui est une version modifiée de l'exercice précédent: TPRoutageExpressWithMongo3.zip     Dezipper, allez dans le répertoire créé (TPRoutageExpressWithMongo3) et faites "npm install"   Exécutez node serverCrudWithMongo (ou nodemon)   Ouvrez localhost:8080 Etudiez le code, regardez en particulier comment, quand on clique sur le premier bouton GET AJAX un tableau est construit dynamiquement. 
    6. 2.6. Ajouter le support "cross domain" à votre projet node/MongoDB
      1. 2.6.1. 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(); });
    7. 2.7. Exercice à faire : utiliser un outil pour générer la documentation HTML de vos API REST

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) 
    • Exemples fait en classe en live coding :
       
  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 REST: https://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

 

 
Powered by MindTouch Deki Open Source Edition v.8.08