Programmable Web - Client side 2018-2019

Pages récentes

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

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

Voir le chapitre 2 de mon Mooc "JavaScript Introduction" (gratuit) : https://www.edx.org/course/javascript-introduction

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/

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

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 :

Générer la liste des restaurants non pas dans une liste mais dans un tableau à deux colonnes.
Utiliser quelques règles CSS pour que le tableau soit plus joli
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
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.
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.

<script src="https://gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>

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:""
},
// from vue-firebase https://github.com/vuejs/vuefire
firebase: {
restaurants: restaurantsRef
},
methods: {
supprimerRestaurant: function (r) {
//this.restaurants.splice(index, 1);
// See documentation https://github.com/vuejs/vuefire
// 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

Programmable Web - Client side 2018-2019

De $1

Table des matières