MBDS Madagascar 2018-2019

Séance 1 : Clients "légers", intro à VueJS / Librairies / consommer un Web Service REST / FireBase (back end mobile)

Support de cours :

• Etat des lieux des technologies front-end, de l'écosystème JavaScript
   
• Les "tendances" autours de JavaScript (frameworks, package npm, librairies, etc. oappréciées par les développeurs Web "front-end" ou "fulls stack"): https://risingstars.js.org
  
  
  • Voir aussi https://2018.stateofjs.com
     
• Support de cours (à la demande d'un étudiant) sur les "Promesses de JavaScript" 
  • Voir aussi : https://davidwalsh.name/promises et https://davidwalsh.name/async-await

Live coding: back end RESTFUL et clients légers.

Exemples fait en cours (liste de restaurants, avec ajout et suppression):

1. En pur JavaScript avec utilisation des APIs du DOM (append, createElement, removeChild, innerHTML) et de la sector API (document.querySelector...) : https://jsbin.com/pemaric/edit?html,js,output et ici version faite en live coding avec vous https://jsbin.com/howiyod/edit?js,output
   • Voir le chapitre 2 de mon Mooc "JavaScript Introduction" (gratuit) : https://www.edx.org/course/javascript-introduction
      
2. Le même exemple mais en utilisant des librairies pour simplifier certaines parties (ici utilisation de lodash pour la génération d'ids, de jQuery pour simplifier l'utilisation du DOM): https://jsbin.com/tiyirud/1/edit?html,js,output
   • Site web de lodash : https://lodash.com/
   • Site web de jQuery : http://jquery.com/
      
3. Enfin, encore le même exemple mais avec l'utilisation du framework VueJS en mode déclaratif : https://jsbin.com/jiqowib/edit?html,js,output
   • Site web officiel de VueJS: https://vuejs.org/

TP 1 : Exercices avec VueJS, Firebase et WebServices RESTFUL

Développer en mode "CLI" avec un environnement de build/testy  

   

• Page de documentation de vue-cli: https://github.com/vuejs/vue-cli
• Page générale sur VueJS: https://github.com/vuejs

Cette fois-ci, pour terminer l'introduction à VueJS, le plus élégant/simple des trois gros frameworks "industriels" modernes (React, VueJS, Angular), nous allons regarder comment on peut développer avec "un environnement de développement", qu'on appelle "CLI" pour "Command Line Environment". 

Les trois frameworks cités, mais aussi Polymer dont on vient de parler, proposent un environnement "CLI".

Travail à faire :

1. Installer Vue-cli: exécuter "npm install -g vue-cli", si vous êtes sous Linux ou Mac OS, il se peut que vous deviez faire "sudo npm install -g vue-cli" (essayez d'abord sans le sudo).
   
   Idem, sous windows il se peut que vous deviez avoir ouvert le terminal DOS en mode "administrateur".
    
2. Créez un répertoire pour le TP
    
3. Allez dans ce répertoire en mode ligne de commande, depuis votre terminal
    
4. On va maintenant créer une application VueJS avec le mode "webpack-simple" (cf la page de doc: https://github.com/vuejs/vue-cli), on peut en effet créer plusieurs types de projets avec vue-cli.
   
   La commande à exécuter est "vue init webpack-simple nom_de_votre_app", je suggère quelques chose comme nom qui ressemble à "my-app-vue-cli1" par exemple. Vous exécuterez donc la commande : "vue init webpack-simple my-app-vue-cli1"
   
   Vous devrez alors répondre à un petit questionnaire, en général vous faites "enter", répondez "non" si on vous demande d'utiliser "SAAS" (un pré-processeur CSS comme LESS).
   
   Cela va créer un sous-répertoire my-app-vue-cli qui contiendra tout ce qu'il faut pour démarrer :
   • Une application exemple,
   • un environnement de développement,
   • Des fichiers de configuration pour webpack etc.
      
5. Allez dans le répertoire de l'application et faites "npm install" pour installer les dépendances (de l'environnement de développement, et du framework)
   
    
6. Exécutez l'application de test avec "npm run dev". Si jamais vous avez une page qui affiche "ERR EMPTY RESPONSE", il se peut que vous deviez changer le port du serveur de dev. Allez dans le fichier webpack.config.js et ajoutez une ligne "port:3000" par exemple, dans la config du devserver. 
   
   Voici ce que j'ai dans ma config:
   
   devServer: {
       historyApiFallback: true,
       noInfo: true,
       overlay: true,
       port:3000
   },
    
7. Etudier le code du fichier main.js, index.html et App.vue
   
   
8. Créer dans src/components (vous créerez ce dossier) un composant User.vue qui affiche le nom d'un utilisateur
   Ici un exemple de code: User.vue
   
   
9. Créer un composant Info.vue qui affiche juste des infos supplémentaires sous forme de <p>, et qui soit LOCAL à User.vue (voir Live Coding) (vous le déclarerez dans un champ "components" de User.vue. Pensez à importer Info.vue dans User.vue
   
   
10. Déclarez User comme composanrt global dans le main.js, il sera ainsi utilisable partout, dans n'importe quel fichier .vue
    
    
11. Ajoutez <app-user></app-user> dans App.vue, pensez à faire un import de User.vue dans App.vue
    
    
12. Essayez d'ajouter le support pour <app-user nom="Michel"></app-user> par exemple, en déclarant une prop "nom" dans User.vue
     
13. En étant sûr d'être dans le répertoire du projet faites "npm install -save vue-router" pour installer le module de routage de vueJS.
    
    
14. Dans main.js ajoutez les lignes relatives au routeur (import, Vue.use, définition des routes, etc.) pour que le fichier ressemble à ceci :
    
    import Vue from 'vue';

    import VueRouter from 'vue-router';

    import App from './App.vue';

    import User from './components/User.vue';

    import Blog from './components/Blog.vue';

    import Compte from './components/Compte.vue';

    
    

    // Définition des routes

    Vue.use(VueRouter);

    
    

    const routes = [

        {path:'/blog', component: Blog},

        {path:'/compte', component: Compte},

        {path:'/', component: User},

    ]

    
    

    const router = new VueRouter({

        routes: routes,

        mode:'history'

    })

    // La ligne ci-dessous rend le composant User utilisable

    // partout, dans tous les fichiers .vue

    // C'est un GLOBAL COMPONENT

    Vue.component("app-user", User);

    
    

    new Vue({

    el: '#app',

    router:router,

    render: h => h(App)

    })
15. Remplacez le template de App.vue par le code suivant et testez:

<template>
  <div id="app">
    Hello {{msg}}

    <div>
      <router-link to="/">Home</router-link>
      <router-link to="/blog">Blog</router-link>
      <router-link to="/compte">compte</router-link>
    </div>

    <router-view></router-view>

    <app-user></app-user>
      <p>Ceci est un test</p>
  </div>
</template>

Correction de l'exercice: live conding...

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 !

• Exemple 1: comprendre le mécanisme de rendu de React
   
• Exemple 2: évenements et immutable DOM
   
• Exemple 3: premier composant
   
• Exemple 4 : on passe des "propriétés" au composant
  
• Exemple 5 : le composant en classe ES6
   
• Exemple 6: état d'un composant, on refait marcher le bouton
   
• Exemple 7: rendu conditionnel 
   
• Exemple 8: rendu de listes dynamiques  Là, si vous avez essayé de faire taper le code en même temps que moi, vous devez vous dire que c'est la merde à debugger, que les messages d'erreur ne sont pas clairs etc...
   
• Exemples 9 et 10 : styles CSS conditionnels et classes CSS conditionelles 
   
• Exemple 11: two way binding
  
• Exemple 12: deux composants (dont un "stateless") 
   
• Exemple 13: passer des infos d'un composant fils à son composant père 

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

Correction de cet exercice faite par les élyèves : https://codepen.io/miradoniaina/pen/...b?editors=0010

Exercice 1 : live coding de l'exemple des hobbies précédemment fait sur codepen (https://codepen.io/miradoniaina/pen/...b?editors=0010) mais en mode CLI

• Correction ici avec hobbies dans un tableau: téléchargez  cette archive, dézippez-là et faites cd dans le répertoire, puis "npm install" et "npm start" pour l'exécuter.
   
• Correction ici avec les hobbies sous forme d'objets : archive à dézipper et faire comme pour l'exemple précédent.

 Exercice 2 : persistence des hobbies dans FireBase

1. Voir demo du prof :-)
    
2. Vous allez le faire vous-même:

ETAPE 1 : Il faut commencer par modifier l'exemple des hobbies pour qu'il fonctionne non pas avec un tableau mais avec un objet. Firebase ne sais synchroniser que des objets, pas des tableaux. On a déjà préparé le terrain avec le dernier exercice de la partie précédente.

Dans App.js :

   this.state = {
      hobbies : {
        hobby0: 'tennis',
        hobby1: 'golf'
      }
      // ...
    };

 Il faut modifier plusieurs parties du code en conséquence...

• addHobbies, removeHobbies...
  
  Hints: vous pouvez utiliser l'opérateur ES6 ... pour cloner un objet. 
   
• render (il faudra itérer sur les propriétés d'un objet maintenant, excellent exercice !)
  
  Hint: Object.keys(this.state.hobbies).map((key, index) => {... }

Ex de code:

Et pour render, exemple d'iterateur sur un objet, comparer par rapport au code qui itere sur un tableau, dans les exemples vus precedemment:
 

ETAPE 2 : on va devoir, comme pour les exemples faits avec vueJS, utiliser le "cycle de vie" du composant (https://reactjs.org/docs/react-component.html#the-component-lifecycle), et charger des données distantes depuis FireBase quand le composant est "monté", et aussi fermer la connexion quand il est "démonté". On va pour cela définir les méthodes 

App.js : 

  componentWillMount() {
    console.log("Will mount")
    // this runs right before the <App> is rendered
  }

  componentWillUnmount() {
      console.log("Will unmount")
  }

  Implémentez ces méthodes et vérifiez bien qu'elles sont appelées...

ETAPE 3 : on va créer une base sur FireBase

• Comme pour le travail fait avec VueJS lors des précédentes séances (note: vous pouvez éventuellement utiliser la même base, mais effacez les données existantes avant).

ETAPE 4 : on ajoute au projet le code pour se connecter à la base:

Dans votre projet, créez un fichier base.js, et mettez ceci dedans (attention a copier/coller depuis le site)

import Rebase from 're-base';

const base = Rebase.createClass({
// copier les 3 premières lignes de VOTRE config de votre base !!!
 // NE PRENEZ PAS LES VALEURS QUI SONT ICI !!!
    apiKey: "AIzaSyCW_WJJb16YVDlsdsd9c0YNNGnfdssorzWGFRU2ScU",
    authDomain: "react-mbds-firebase.firebaseapp.com",
    databaseURL: "https://react-mbds-firebase.firebaseio.com" // pas de , à la fin
});


export default base;

ETAPE 5 : on ajoute le module npm re-base pour "parler à firebase"

On ajoute une ligne à package.json pour installer la lib npm qui va bien:

  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-scripts": "1.0.17",
    "re-base": "2.2.0"// -> ajouter cette ligne, mettez bien 2.2.0 !
  },

 Faites "npm install", ça va installer re-base dans node_modules

ETAPE 6 : on va utiliser re-base pour synchroniser l'état du composant, c'est-à dire les hobbies:

Dans App.js:

....
import base from './base';
....

componentWillMount() {
    //alert("toto")
    // this runs right before the <App> is rendered
    this.ref = base.syncState("hobbies", {
      context: this,
      state: 'hobbies'
    });
  }

  componentWillUnmount() {
    base.removeBinding(this.ref);
  }

Etape 7 : testez !

Sauvez, testez. Ouvrez dans un onglet votre base et regardez les données en sync. Ouvrez deux onglets avec l'appli React, regardez...

CORRECTION (mais qui utilise la base FireBase du prof) : récupérez cette archive.

Exercice 3 : refaire la GUI avec la librairie Material Design

• https://material-ui.com/

CORRECTION FAITE PAR LES ELEVES: récupérez cette archive, cd dans le répertoire, "npm install" et "npm start".