Vous n'êtes pas connecté. Connexion
|
|
Programmable Web - Client side 2018-2019De $1Table des matières
IntroductionDans 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):
TP 1 : Exercices avec VueJS, Firebase et WebServices RESTFULPartie 1 : Faire fonctionner l'exemple VueJS vu en classe, mais avec des fichiers et une table HTMLCeci 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 :
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
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:""
},
// 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 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: 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 :
<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... Séance 3 : introduction à React, quelques infos sur le cloud...Support de cours React Exercices d'introduction, dans une IDE en ligneOn 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 :
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
Exercice: refaire dans le projet les hobbies en mode CLI !
Séance 4 : utilisation de données d'un WebService RESTFUL en Ajax avec l'API standard du W3C fetchPremière étape étudier l'application suivante : https://restaurantscloud.herokuapp.com/ Cette application 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. Récupérez le code source ici HEROKU_simple.zip, vous n'avez pas besoin de l'exécuter puisqu'il est déjà déployé sur Heroku (vous pourrez le déployez sous NodeJS) OPTIONNEL : déployer localement : dezipper l'archive, cd dans le dossier, "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 vous importez dans mongoDB la base suivante, et vous la référencez via un URL local mongoDB: Cliquez sur les premiers liens. Si les données n'apparaissent pas, c'est sans doute que le WIFI ne laisse pas passer les ports...
|
Powered by MindTouch Deki Open Source Edition v.8.08 |