Programmable Web - Client side 2018-2019

PROPOSITION TRES INCOMPLETE DU PROJET FIL ROUGE

•  https://lms.univ-cotedazur.fr/<wbr/>mod/assign/view.php?id=14750

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

ICI UNE CORRECTION: https://codepen.io/w3devcampus/pen/b...m?editors=1010

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 progralle 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 !

• Ici correction (inclut fetch)  (desarchiver, cd dans le repertoire, npm install, npm start)

Support de cours

• Article de David Walsh sur l'API fetch 
• Utilisation de "fake REST APIs" avec https://jsonplaceholder.typicode.com/
• Les bonnes pratiques pour créer une API REST: https://blog.octo.com/designer-une-api-rest/
   
• Certains frameworks privilégient la librairie Axios pour faire des requêtes Ajax, mais Axios c'est juste fetch avant que fetch n'existe... à peu de choses près, et fetch est bcp plus complet (interactions avec streams API etc.)
• Les plus curieux pourront aussi aller voir du côté de GraphQLet Appolo)

Etude d'un Client et d'un serveur REST

1. Jouez avec l'application suivante : https://restaurantscloud.herokuapp.com/ l'application est sur le cloud heroku et la base de données sur le cloud mlabs.com. Vous verrez comment on peut faire ce type d'hébergement...

L'pplication est une application qui contient du code backend NodeJS/Express mais aussi du code front-end écrit en pur vanilla JS, et qui montre des cas typiques de consommation de WebService RESTful en consultation (GET), insertion (POST), modification (PUT) et suppression (DELETE) à l'aide du protocole HTTP et de l'API Ajax fetch aujourd'hui présente en standard dans tous vos navigateurs.

Etudiez le code source

Récupérez le code source ici HEROKU_simple.zip, vous n'avez pas besoin de l'exécuter puisque cette application est déjà déployée sur Heroku.

• Etudiez le code client (index.html et script.js). Où sont les requêtes Ajax ?
• Etudiez le code serveur. Où sont les WebServices ? Où se trouve le code qui utilise la base de données ?

OPTIONNEL : déployer ce code localement.

1. Le code utilise une collection de restaurants prises dans les tutoriaux de mongoDB. Vous pouvez récupérer cette collection et l'insérer dans votre MongoDB local en téléchargant cette archive  primer-dataset.jsonet en l'important dans votre mongoDB local soir à l'aide de la ligne de commande ci-dessous, soit avec l'aide d'un outil d'administration pour MongoDB tel que Compass, 3T Studio, RoboMongo etc. 
   
   

   mongoimport --db test --collection restaurants --drop --file primer-dataset.json

2. Allez dans le répertoire où vous avez dézippé HEROKU_simple.zip, faites "npm install" puis "node serverCrudWithMongo.js" ou "npm start". Si ça ne marche pas, c'est que le wifi de la fac ne vous laisse pas accèder à mongoDB dans le cloud (regardez dans le source l'URL de la BD !). Donc soit vous utilisez un VPN, soit votre tel en partage de connexion, soit changez l'URL de la base mongoDB dans le bon fichier pour utiliser non pas la base dans le cloud mais votre base local (dans : app_modules/crud-mongo.js)

Déploiement d'une application dans le cloud Heroku

• Déployer une BD MongoDB sur mlabs.com : regardez cette vidéo : https://www.youtube.com/watch?v=GDqtv1eGGpA
  
  Allez, allez, n'ayez pas peur, déployez donc la BD des restaurants sur mlabs.com ! Une fois que c'est fait, essayez d'y accéder à l'aide d'un outil d'administration. Si ça ne marche pas il se peut que le wifi de l'EPU ne laisse pas passer les ports. Essayez avec un VPN ou si vous n'en avez pas, en partage de connection 4G.
   
• Déployer ensuite l'application client Heroku.com (changez l'URL de la BD):  regardez cette vidéo : https://www.youtube.com/watch?v=MxfxiR8TVNU

Plus difficile : héberger votre application React sur Heroku

Mais non, c'est hyper facile! Cherchez donc sur Google! S'il y a bien un framework supporté day one par Heroku, c'est bien React ! 

2 : affichage d'une liste d'éléments

1. Regardez le fichier index.html, remarquez l'élément <app-root></app-root>, est-ce du HTML standard ?
2. Regardez les fichiers src/app.component.ts, src/app.component.html et src/app.component.css
3. Modifiez le fichier de templates app.components.html et faites ctrl-s,
4. Regardez le fichier app.module.ts, Angular va vous obliger à mettre à jour ce fichier très régulièrement.
5. Maintenant on va effacer le contenu du fichier de template, et on va essayer d'afficher une liste d'éléments : CA SE PASSE EN LIVE CODING (une correction sera postée ici à la fin), utilisation de *ngFor (<li *ngFor="let el of elements">...</li> si elements est la propriété du composant -un tableau de chaines de caractères-), un peu l'équivalent du v-for de VueJS.
6. Ajout d'un bouton pour ajouter un nouvel élément, utilisation de (click)="expression" comme attribut,
7. Regardons comment afficher une ligne verte, une ligne rouge, etc. Utilisation de [ngStyle]="{propriété CSS : expression}", écrire une fonction getColor(element) comme dans les exemples qu'on avait fait avec VueJS et React, et l'appeler dans l'expression).

3 : création d'un nouveau composant

• On va créer "manuellement" un nouveau composant intitulé "username", qui sera juste un<li> qui affichera la valeur de la propriété username. Pour cela, créer le fichier "app/username.component.ts, et il doit ressembler à cela.
  REMARQUE: vous pouvez utiliser la ligne de commande pour ajouter un nouveau composant: 
  
  > ng generate component username

import { Component, Input } from "@angular/core";

@Component ({
    selector: 'app-username',
    template:`
    <p>{{username}}</p>
    `
})

export class UsernameComponent {
    @Input() username :string;
}

Remarquez qu'on n'a pas utilisé ici de template html séparé, à la place on a mis le template directement sous forme de chaine de caractère entre les caractères `....`

Le @Input sert à définir une propriété qu'on pourra passer via des attributs HTML, c'est l'équivalent des "props" de VueJS et de React.

Maintenant, ajoutez des instances de ce composant dans le template app.components.html:

<app-username [username]="'Michel'"></app-username>

<app-username [username]="'John'"></app-username>

Regardez ce que cela donne.... rien, ouvrez la console de debug...

C'est normal, il faut déclarer le composant dans le fichier app.module.ts (c'est pénible... mais vous verrez qu'on peut automatiser cela en créant les composants avec la ligne de commande)... Ajoutez le composant dans app.module.ts et cela devrait fonctionner.

Maintenant on veut pouvoir cliquer sur un nom et afficher un message dans le template du composant principal. On va faire comme en VueJS : envoyer un événement quand on clique sur le nom.

4 : définition d'un événement qui sera envoyé du composant "fils" vers le composant "père"

1. Dans le composant (app/username/username.component.ts), définir un événement comme ceci: 

export class UsernameComponent {
    @Input() username :string;
    @Output() userClicked = new EventEmitter<string>(); // définition d'un événement

    onUsernameClicked() {
        this.userClicked.emit(this.username);            // émission de l'événément
    }
}

Et dans le template (app/username/username.component.ts) :

    template:`
       <p (click)="onUsernameClicked()">{{username}}</p>
    `

Ainsi, dans le template du composant (app.component.html) qui instancie ce composant, on pourra écouter l'événement "userClicked" :

<app-username [username]="'Michel1'" (userClicked)="onUserWasClicked($event)"></app-username>
<app-username [username]="'John'"    (userClicked)="onUserWasClicked($event)"></app-username>

Et maintenant on peut écrire la méthode onUserWasClicked(username) dans app.component.ts :

onUserWasClicked(username: string) {
    alert(username);
}

Testez l'application : en cliquant sur un nom, ça doit afficher une alerte avec la valeur associée.

5 : binding bi-directionnel avec [(ngModel)]="nom"

• Définissez un champs de saisie dans le template pour une propriété "nom" que vous ajouterez dans le fichier .ts de app.component.ts
• Dans le template, affichez la valeur de cette propriété en-dessous du champs de saisie. 
• Tapez quelque chose dans le champ de saisie
• Plus simple qu'en React non ? Ca ressemble au v-model de VueJS non ?

ICI UNE CORRECTION DES ETAPES PRECEDENTES (exemple fait en live). Dezippez, cd dans le repertoire, npm install puis ng serve --open

6 : refaire l'exemple des hobbies complet, mais en angular

 En vous aidant de l'exemple précédent : 

1. Dans le composant app.component (.ts/html/), définissez un tableau de hobbies et affichez-les dans une liste (fournissez quelques hobbies par défaut)
    
2. Ajoutez un bouton 'Nouveau Hobby'  + un champ <input>. Quand on clique le bouton on ajoutera le hobby et la vue se mettra à jour
    
3. Rendez chaque hobby clickable. Si on clique un hobby on le supprime 
    
4. Faites apparaitre un message <p>Hobby supprimé! dans un </p> qui ne sera visible que lorsque au moins un hobby a été supprimé (soyez créatifs! Il y a plusieurs manières de faire)
    
5. Ajouter un compteur de hobbies (<p>Nombre de Hobbies: ...</p>) au-dessus de la liste des hobbies
    
6. Changez le style CSS du compteur, selon sa valeur: vert si moins de 3 hobbies, rouge sinon
    
7. Transformez les éléments <li> en un composant réutilisable <app-hobby>
    
8. On veut remplir les hobbies au démarrage de l'application en récupérant les hobbies au format JSON sur l'URL : https://my-json-server.typicode.com/...ffa/hobbies/db (au passage, j'ai utilisé les services de jsonplaceholder.typicode.com pour servir un fichier json qui se trouve sur un de mes repository github). LIVE CODING AVEC LE PROF pour voir comment créer un service
   • Commande pour créer un service : "ng generate service hobby" (va créer le fichier hobby.service.ts et le fichier pour les tests)
   • Correction de cet exercice