MBDS Madagascar 2018-2019

De $1

Introduction

Dans ce cours nous allons jouer avec des technologies front-end dans le cadre d'une approche "moderne" de la programmation de WebApps. Nous allons uniquement utiliser des services dans le cloud, des plateformes de service, ou bien des clients RESTful de WebServices comme ceux que vous développerez dans le cadre du cours "Programmable Web - server side".

L'approche moderne ce sont donc des clients "webapps" single page, basés HTML/CSS/JavaScript. Au passage : ce sont les trois seuls langages "standards du Web" qu'un navigateur comprend.

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

Support de cours :

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

TP 1 : Exercices avec VueJS, Firebase et WebServices RESTFUL

Partie 1 : Faire fonctionner l'exemple VueJS vu en classe, mais avec des fichiers et une table HTML

Ceci est le dernier exemple vu en classe dans JsBin: https://jsbin.com/jiqowib/edit?html,js,output

Ici vous trouverez le fichier exo1_vueJS_table.zip  qui contient le même exemple mais fonctionnant avec des fichiers. Dezippez-le et utilisez un serveur Web pour ouvrir le fichier index.html. Je vous suggère d'utiliser un serveur ultra léger comme Web Server For Chrome (extension pour Google Chrome)

Travail à faire : 

  1. Générer la liste des restaurants non pas dans une liste mais dans un tableau à deux colonnes.
  2. Utiliser quelques règles CSS pour que le tableau soit plus joli
  3. Afficher dans le H1 le nombre de restaurants. Ce nombre devra être mis à jour automatiquement lorsqu'on ajoute ou enlève des restaurants à la liste
  4. Utiliser la syntaxe v-bind:style="{proprieteCSS:valeur}" pour changer le style des restaurants dynamiquement. La valeur peut être retournée par une fonction ou une expression comme par exemple: v-bind:style="{color:getColor(index)}". Essayez donc d'afficher de cette manière les lignes paires d'une certaine couleur, les lignes impaires d'une autre couleur.
  5. Idem, mais avec une classe CSS. Vous créerez la classe CSS "bordureRouge" dans le fichier css/styles.css, et vous n'ajoutrez cette classe CSS qu'à la 4ème ligne du tableau (qui s'affichera donc encadrée en rouge). Lisez donc la page de documentation suivante : https://vuejs.org/v2/guide/class-and-style.html

CORRECTION FAITE EN CLASSE (ne pas regarder avant d'avoir fini): 

  •  

Partie 2 : utilisation d'une base de données synchronisée dans le cloud (FireBase)

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

  • Allez sur https://firebase.google.com/
     
  • Cliquez sur "accèder à la console" ou "Get Started" selon la langue...
     
  • Cliquez sur "+" pour ajouter un projet, appelez-le "EPURestaurants" par exemple. Dans les fenêtres de dialogue cochez toutes les cases dans la fenêtre.
     
  • Faites défiler la page centrale et cliquez sur la case Jaune "Database"
     
  • Dans la page suivante, ne choisissez pas le premier choix mais faites défiler la page et choisissez la case en jaune "Realtime Database"
     
  • Choisissez le mode "test" sans authentification.
      
  • Cliquez à gauche en haut, sur l'icône à droite de "Project Overview", choisissez "paramètres du projet", et au milieu de la page sur "Ajouter Firebase à votre application Web", une fenêtre s'ouvre avec des bouts de JS. Voir cette image 
  • Gardez cet onglet ouvert, vous allez devoir coller la configuration à votre application.

ETAPE 2 : ajouter le support pour FireBase à votre application

Si vous aviez fait l'exercice 1 avec jsBin, voici ici une version avec des fichiers, que je vous conseille de récupérer: exo1_vueJS_table_corrige.zip 

On va donc utiliser FireBase mais aussi une librairie spéciale pour utiliser FireBase avec VueJS: vue-fire (documentation sur https://github.com/vuejs/vuefire).

Pour cela vous allez ajouter ces lignes à votre page HTML (dans le <head>...</head>, avant votre script à vous (script.js) : 

Mettez-les AVANT l'inclusion de votre fichier script.js !!! Ce dernier utilise des variables définies dans ces deux fichiers.

 

Ensuite, dans le fichier script.js, vous allez ajouter ces lignes (configuration de firebase) : pensez à mettre entre parenthèse une copie de la valeur de la BD que vous aurez créée :

 

window.onload = init;

// FIREBASE INIT
var firebaseApp = firebase.initializeApp(
// ICI COPIER LA VALEUR DE LA VARIABLE CONFIG DE FIREBASE (A PRENDRE SUR LE SITE DE VOTRE BD)
);
 
var db = firebaseApp.database();
var restaurantsRef = db.ref('restaurants');

Et enfin, voici le nouveau code de la vue :

 

function init() {
new Vue({
el: "#app",
data: {
nom: "",
cuisine:""
},
firebase: {
restaurants: restaurantsRef
},
methods: {
supprimerRestaurant: function (r) {
//this.restaurants.splice(index, 1);
// each elem of the array has a .key property generated by vue-fire
restaurantsRef.child(r['.key']).remove();

},
ajouterRestaurant: function () {
let nouveauRestaurant = {
nom:this.nom,
cuisine:this.cuisine,
id:_.uniqueId("restaurant_")
}

restaurantsRef.push(nouveauRestaurant);

// on remet à zéro les champs
this.nom = "";
this.cuisine = "";
}
}
});

Notez l'apparition d'une propriété "firebase" dans la l'objet passé en paramètre à la Vue. On travaillera dans le template HTML avec la propriété/modèle "restaurants" et dans le code JS sur la variable restaurantsRef qui correspond à la BD distance. Voir documentation de vue-fire pour plus de détails : https://github.com/vuejs/vuefire

 Séance 2: composants customs, développement en mode CLI

Nous avons vu des "Vues" (parties HTML "augmentées"), mais tous les frameworks modernes introduisent la notion de "composant".

Examinons un exemple simple sur JsBin (une liste de hobbies). On peut ajouter des hobbies ou cliquer sur un hobby pour le supprimer. C'est très proche de ce qu'on avait fait avec des restaurants lors de la première séance.

Et voici l'exemple avec un composant custom pour modéliser un hobby.

Et bien, on peut aller plus loin en commençant à "découper" l'application en "composants" réutilisables. Un composant est associé à un élément HTML "custom", par exemple <app-hobby name="tennis">. On rajoute toujours un "-" dans le nom des éléments HTML custom pour les distinguer des éléments standards HTML5. 

Chaque composant aura son propre template HTML, ses propres "modèles", ses propres méthodes, mais il peut en plus avoir des "props", c'est-à-dire des "modèles" construits à partir des valeurs des attributs HTML passés en paramètre.

Exemple : <app-hobby name="Jeux Vidéo"></app-hobby>

Voici un exemple de déclaration:

déclaration composant

 Dans de gros projets, on mettra les différents composants dans des fichiers différents. On ne travaillera plus en mode "déclaratif" mais en mode "CLI" (command line interface).

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

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

Recupérer des restaurants sur un Web Service REST

Support de cours : 

Ici vous avez des restaurants sous forme d'API: https://restaurantscloud.herokuapp.com/

Et là la "route" GET qui permet de récupérer les 10 premiers restaurants (il y en a plus de 25.000 dans la base de données distante) : https://restaurantscloud.herokuapp.c...pi/restaurants

Et ici un petit exemple JsBin qui affiche les 10 premiers restaurants en utilisant le Web Service REST précédent: https://jsbin.com/peromol/edit?js,output

Regardez le code pour comprendre l'utilisation du "cycle de vie d'un composant VueJS" et pour voir comment on utilise l'API fetch.

Travail à faire :

Modifier l'exemple compilé VueJS que vous venez de faire pour afficher des restaurants en provenance de ce Web Service, au lieu d'afficher des restaurants codés en dur.

CORRECTION AVEC PAGINATION ET INSERTION: https://jsbin.com/peromol/edit?html,output

Normalement vous avez fait votre propre correction avec des fichiers à compiler :

Séance 3 : introduction à REACT

Support de cours React

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

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

Séance 4 : React en mode 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

Travail à faire pour installer le mode CLI de React:

  1. 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.
       
  2. Maintenant on va étudier le code, regardez les fichiers html, js, les configs etc.
     
  3. 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 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:

addHobby() {
/* OLD VERSION WITH ARRAY
const oldHobbies = this.state.hobbies;
this.setState({
hobbies: oldHobbies.concat(this.state.input),
input : ""
});
*/
 
  // faire une copie de l'objet hobbies
const hobbies = {...this.state.hobbies};
// Ajouter le nouveau hobby
const timestamp = Date.now();
hobbies[`hobby-${timestamp}`] = this.input.value;
 
this.setState({hobbies});
console.log(this.state.hobbies)
}
removeHobby(key) {
/* OLD VERSION WITH ARRAYS
const oldHobbies = this.state.hobbies;
const position = oldHobbies.indexOf(hobby);
this.setState({
hobbies: oldHobbies.filter((el, index) => {
return (index !== position)
}),
hobbyWasDeleted : true
});
*/
  // faire une copie de l'objet hobbies
     const hobbies = {...this.state.hobbies};
 
// Supprime le hobby dont la cle key a ete passee en parametres
//delete hobbies[key]; // ne marche pas avec firebase
hobbies[key] = null;
 
// Mettre a jour l'etat
// En ES6 vous pouvez juste taper {'hobbies'} au lieu de {hobbies:hobbies}
this.setState({hobbies});
}

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

// iterateur sur les proprietes de l'objet
let list = Object.keys(this.state.hobbies).map((key, index) => {
// key = element courant (propriete courante de l'objet)
consthobby = this.state.hobbies[key];
const liStyle = {
backgroundColor:index % 2 === 0 ? 'lightpink' : 'red'
};
return <li key={key} style={liStyle} onClick={() => this.removeHobby(key)}>{hobby}</li>
});

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

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

Seance 5 : Mini Projet - un gestionnaire de menus / cartes pour des restaurants

Vous allez développer une appplication VueJS ou React (au choix) et à l'aide de la base de données Firebase.

Objectifs : application Web permettant en mode utilisateur de chercher des restaurants, et une fois qu'on a trouvé un restauranrt, de consulter ses menus et sa carte. En mode admin, on pourra créer / modifier des menus et des cartes.

Details :

  • Un restaurant a un nom, une descrioption, un type de cuisine, une adresse et un No de téléphone, et une photo
    • Optionnel : il a une adresse p^hysique (et aussi une longitude et une latitude pour le visualiser sur une carte Open Street Map / Leaflet ou Google Map (vous pourrez utiliser les services de revrse geo coding pour transformer une adresse physique en longitude / latitude)
  • Un restaurant a plusieurs menus
    • Un menu a un nom, prix, et propose un choix restreint de hors d'oeuvres, de plats et de desserts
  • Un restaurant a une carte (un ensemble de hors d'oeuvres, de plats et de desserts) et on pourra choisir librement de manger ce que l'on veut.
     
  • Les plats sont décrits comme suit :
    • Un nom: exemple "avocats mayonnaise"', "tomates en salade" pour un hors d'oeuvre, "entrecote de boeuf sauce au poivre" pour un plat, "tarte au citron" pour un dessert, etc.
    • Un type (hors d'oeuvre, plat, dessert)
    • Une description un peu plus détaillée (1 ligne de texte)
    • Une photo (un URL), optionnellement regarder comment uploader des photos sur firebase.
    • Un prix

En mode utilisateur, on pourra passer une commande : choisir un ou plusieurs menus, et des plats à la carte... la liste des plats ou menus sera ajouté à la commande, qui sera en temps réel mise à jour et affichée à l'écran avec le prix total.

Optionnel : mode admin pour créer des cartes, des menus, ajouter/modifier des plats (optionnel de l'optionnel : voir les options d'authentification de firebase, regardez des tutos sur YouTube, c'est TRES simple).

On doit pouvoir supprimer un élément de la commande une fois choisi (on a le droit de se tromper).

L'idéal serait qu'on ait à l'écran un moyen de consulter la carte et les menus, on clique sur les menus ou les plats et à droite de l'écran on voit la commande se mettre à jour...

CONTRAINTES : 

  • Au moins 50 restaurants, et au moins 3 menus par restaurants et au moins 30 plats par restaurants.
    • Utiliser des sites pour générer les données, comme https://www.json-generator.com/ ou https://generatedata.com/, vous pouvez aussi essayer de récupérer des menus ou des plats sur OpenFoodFacts ou des sources de données de l'Open Data. Ou bien vous pouvez écrire un générateur en JavaScript (c'est assez simple).
  • A faire en binome
  • Si vous utiliser des tutoriaux, des exemples du Web : donner les références
  • Vous devez aussi faire une contribution personelle et montrer que vous avez utilisé des techniques vues pendant le cours
  • Vous devez utiliser une bibliothèque pour les éléments de GUI (vuetify, react material, etc...)

Vous rendrez ce projet sur github, un gros plus si il est hébergé quelque part pour que je puisse le tester directement. (par exemple sur firecloud/firebase.com ou sur heroku.com)

Un README avec toutes les explications nécessaires

Date limite de rendu : 20 Avril 2019. Le délégué de classe m'enverra un fichier excel ou google spreadsheet en partage avec la liste des groupes et les repositories github et les URLs si les applications sont hébergées...