Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 08:52, 17 Déc 2019 par MichelBuffa
0

Master 2 Miage MBDS 2019-2020

De $1

Version de 18:11, 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 
  3. 3. Seance 2 : Premiers pas avec MongoDB, Node et React
    1. 3.1. Exemple de code NodeJS pour faire le CRUD sur une base MongoDB
    2. 3.2. Ajouter le support "cross domain" à votre projet node/MongoDB
    3. 3.3. Séances 3 et 4 Introduction à React
      1. 3.3.1. Exercices d'introduction, dans une IDE en ligne
      2. 3.3.2. Exercice à faire en vous aidant des exercices précédents:
      3. 3.3.3. Exercices avec un environnement "CLI"

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 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.

Seance 2 : Premiers pas avec MongoDB, Node et React

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.

Séances 3 et 4 Introduction à React

Supports de cours :

Exercices d'introduction, dans une IDE en ligne

On peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !

Exercice à faire en vous aidant des exercices précédents:

Pour vous donner une idée du résultat attendu,voici l'équivalent en VueJS: http://jsbin.com/guwetoy/1/edit?html,output

Je conseille de partir de cet exemple React: le composant en classe ES6 

En vous aidant de l'exemple fait en classe en live coding, voud devrez faire incrémentalement, en testant après chaque étape :

  1. Créez un <div> et affichez dedans un composant Root avec React (l'App des exemples)
     
  2. Affichez un tableau de hobbies dans ce <div> (foot, tennis, jeux video, etc.) sous la forme d'une liste. Chaque hobby sera un <li>. Vous fournirez des hobbies par défaut.
     
  3. Ajoutez un bouton 'Nouveau Hobby' et un champ input pour saisir le nom du hobbie à rajouter. La liste doit se mettre à jour.
     
  4. Rendez les hobbies clickables pour qu'on puisse les supprimer
     
  5. Un message <p>Hobby supprimé !</p> devra apparaitre lorsqu'un hobby est supprimé
     
  6. Ajoutez un compteur de hobbies (<p>Hobbies: 4</p>) au-dessus de la liste des hobbies, qui indiquera le nombre de hobbies dans la liste.
     
  7. Vous changerez les styles CSS des éléments de la liste pour qu'ils s'affichent en rouge et vert à chaque ligne, en alternance. Vous utiliserez aussi des classes CSS dynamiques pour afficher le compteur en rouge si le nombre de hobbies est supérieur à trois, en vert sinon. 
     
  8. Chaque <li>, chaque hobby, sera maintenant dans un composant <Hobby/> 

ICI UNE CORRECTION: https://codepen.io/w3devcampus/pen/xxKeJZW

Exercices avec un environnement "CLI"

Si on va voir la page de facebook sur "how to start with React", il y a un chapitre qui concerne le mode "CLI": https://reactjs.org/docs/add-react-to-a-new-app.html

  1. Vous devez avoir nodeJS correctement installé (node, npm, etc, tout ceci doit fonctionner...)
     
  2. Installez l'extension Google Chrome "React Developer Tools" (https://chrome.google.com/webstore/d...jfkapdkoienihi), elle existe aussi pour Firefox.
     
  3. Installez une bonne fenêtre terminal pour Windows -si vous êtes sous windows comme http://cmder.net/ ou autre (github bash, etc.) si je vous vois avec une fenêtre DOS basique vous allez m'entendre !
     
  4. Installer les packages "babel" et "emmet" si vous êtres sous Sublime Text 3 ou Atom. Ca doit etre ok pour Visual Studio Code, WebStorm etc.
     
  5. Ouvrir la ligne de commande et exécuter la commande "npm install -g create-react-app",
    • Pour vérifier que ça fonctionne, créez un autre répertoire nommé "react_cli" et cd dedans,
    • Executez "create-react-app hello-world" (ça prend du temps, quelques minutes)...
    • Allez dans le répertoire créé (cd hello-world), et faites "npm install" (là aussi, quelques minutes)
    • Exécutez le programme en tapant "npm start", ça doit ouvrir automatiquement le browser sur le port 3000 et afficher une page avec le logo React qui tourne.
    • Editez le code du fichier src/App.js, changez le texte et sauvez -> la page Web de l'application doit se rafraichir automatiquement.
       
  6. Maintenant on va étudier le code, regardez les fichiers html, js, les configs etc.
     
  7. Essayez de modifier la partie "render" de App.js... hmmm ok. Bon, on va faire un simple composant <Username name="toto"/> qu'on va mettre dans un sous répertoire "components" dans les sources, il va simplement afficher un nom passé en attribut/props dans un paragraphe en couleur. Vous ajouterez dans <App/> Plusieurs instances de ce composant.

Exercice: refaire dans le projet les hobbies en mode CLI !

Exercice: afficher les restaurants avec un fetch, en mode CLI !

Exercice: remplacer la table par une jolie table faite avec la librairie MaterialUI, très populaire au sein des développeurs React

  1. Regarder le getting started du site Web de MaterialUI pour voir comment inclure cette librairie de composants graphiques dans votre projet.
  2. Regarder la doc de l'élément table, elle contient de nombreux exemples avec le code source.
  3. Regardez aussi s'il y a un chapitre concernant les tables dans le livre "MaterialUI Cookbook" qui vous a été distribué.
     
  4. Ajoutez maintenant une table MaterialUI dans un composant à vous intitulé MyTable.js pour tester, et ajoutez-le au template d'un de vos composants existants pour tester.
    • Vous commencerez au début avec une table statique, puis regarderez ensuite comment utiliser des données passées en paramètre, ou bien en les chargeant par fetch comme dans les exemples vus dans le TP. Il  se peut que vous ayez besoin d'utiliser des "hooks". Voir le paragraphe en rouge ci-dessous.
       
    • On trouve de nombreuses vidéos d'exemple d'utilisation de l'élément table de Material UI.

A voir aussi : React depuis la version 16.18 propose une manière simplifiée de gérer les états, un peu "à la VueJS/Angular", avec les "'hooks":

 

 
Powered by MindTouch Deki Open Source Edition v.8.08