Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 17:01, 12 Nov 2018 par MichelBuffa
0

Master 1 Miage 2018-2019

De $1

Table des matières
  1. 1. Introduction
  2. 2. Séance 1: Web Services RESTFUL et single page webapps
    1. 2.1. Supports de cours
    2. 2.2. TP 1 : Exercices avec VueJS et WebServices RESTFUL
      1. 2.2.1. Partie 1 : Faire fonctionner l'exemple vu en classe mais avec des fichiers et une table
      2. 2.2.2. Partie 2 : utilisation d'une base de données synchronisée dans le cloud (FireBase)
      3. 2.2.3. Partie 3 : installation de NodeJS et MongoDB
      4. 2.2.4. Suivez les installations propres à votre système d'exploitation situées sur cette page du site officiel. Ne choisissez pas l'installation manuelle. Une fois installé lancez la commande "mongod" en ligne de commande. Si le daemon mongoDB ne se lance pas, regardez les erreurs. Sur mon Mac j'ai fait: brew update brew install mongodb mkdir -p /data/db chmod 777 /data/db (pour autoriser un user lambda à écrire dedans) mongod (pour exécuter MongoDB)
      5. 2.2.5. Récupérez donc ce fichier (click droit et "sauvegarder sous") : primer-dataset.json. Vous allez devoir récupérer le fichier primer-dataset.json (assez gros, attention, ne pas faire copier/coller), et exécuter la commande suivante, qui créer une bd "test" et ajoute dedans la collection "restaurants" : mongoimport --db test --collection restaurants --drop --file primer-dataset.json
    3. 2.3.
      1. 2.3.1. ETAPE 4 : installer un outil d'administration sympa Je vous recommande fortement MongoChef, un produit commercial mais gratuit pour utilisation non commerciale. Le télécharger sur: https://studio3t.com/
    4. 2.4. 4 - Ouvrir 3T STudio et voir la collection que l'on vient d'importer
      1. 2.4.1. S'assurer que MongoDB tourne (mongod doit être lancé, ou bien vous devez avoir installé MongoDB en service) Lancer l'application 3T Studio, connectez-vous sur MongoDB. Les valeurs par défaut doivent être Ok, normalement. Ouvrir la collection "restaurants" dans la base "test" Quelques screenshots:  

Version de 08:54, 4 Déc 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2. Séance 1: Web Services RESTFUL et single page webapps
    1. 2.1. Supports de cours
    2. 2.2. TP 1 : Exercices avec VueJS et WebServices RESTFUL
      1. 2.2.1. Partie 1 : Faire fonctionner l'exemple vu en classe mais avec des fichiers et une table
      2. 2.2.2. Partie 2 : utilisation d'une base de données synchronisée dans le cloud (FireBase)
      3. 2.2.3. Partie 3 : installation de NodeJS et MongoDB
      4. 2.2.4. Suivez les installations propres à votre système d'exploitation situées sur cette page du site officiel. Ne choisissez pas l'installation manuelle. Une fois installé lancez la commande "mongod" en ligne de commande. Si le daemon mongoDB ne se lance pas, regardez les erreurs. Sur mon Mac j'ai fait: brew update brew install mongodb mkdir -p /data/db chmod 777 /data/db (pour autoriser un user lambda à écrire dedans) mongod (pour exécuter MongoDB)
      5. 2.2.5. Récupérez donc ce fichier (click droit et "sauvegarder sous") : primer-dataset.json. Vous allez devoir récupérer le fichier primer-dataset.json (assez gros, attention, ne pas faire copier/coller), et exécuter la commande suivante, qui créer une bd "test" et ajoute dedans la collection "restaurants" : mongoimport --db test --collection restaurants --drop --file primer-dataset.json
    3. 2.3.
      1. 2.3.1. ETAPE 4 : installer un outil d'administration sympa Je vous recommande fortement MongoChef, un produit commercial mais gratuit pour utilisation non commerciale. Le télécharger sur: https://studio3t.com/
    4. 2.4. 4 - Ouvrir 3T STudio et voir la collection que l'on vient d'importer
      1. 2.4.1. S'assurer que MongoDB tourne (mongod doit être lancé, ou bien vous devez avoir installé MongoDB en service) Lancer l'application 3T Studio, connectez-vous sur MongoDB. Les valeurs par défaut doivent être Ok, normalement. Ouvrir la collection "restaurants" dans la base "test" Quelques screenshots:  

Introduction

Nous n'avons que trois cours et trois séances de TP cette année. C'est peu. Nous allons donc essayer de faire une introduction au technologies front-end et back end émergentes.

Séance 1: Web Services RESTFUL et single page webapps

Supports 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
  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/jiqowib/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 et WebServices RESTFUL

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

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

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 "M1MiageRestaurants" par exemple. Dans les fenêtres de dioaglogue ne cochez que la dernière case dans la première fenêtre, aucune dans la seconde.
     
  • Cliquez à gauche sur "database" et créer une "realtime database".
     
  • Choisissez le mode "test" sans authentification.
     
  • Cliquez sur "ignorer" pour virer le warning.
     
  • Cliquez à gauche sur l'icône à droite de "Project Overview", 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

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

 

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

ETAPE 3 : testez cette version en ouvrant :

  1. Dans un onglet, la page sur le site de FireBase où vous voyez votre BD,
  2. Dans un autre onglet votre application
  3. Dans un autre onglet, et même dans un autre navigateur, encore une fois votre application.
  4. Ajoutez / supprimez des restaurants, les vues doivent se mettre à jour en synchro.
  5. Utilisez l'interface FireBase pour modifier des valeurs -> les vues doivent se mettre à jour.

Partie 3 : installation de NodeJS et MongoDB

ETAPE 1 : installation de NodeJS

Allez sur le site https://nodejs.org et installez la version "recommended for most users".

Si tout se passe bien, après l'installation, ouvrez une fenêtre de terminal et tapez la commande "node -v". Ca doit afficher la version de nodeJS que vous venez d'installer.

ETAPE 2 (plus compliqué) : installation de MongoDB

Suivez les installations propres à votre système d'exploitation situées sur cette page du site officiel. Ne choisissez pas l'installation manuelle.

Une fois installé lancez la commande "mongod" en ligne de commande. Si le daemon mongoDB ne se lance pas, regardez les erreurs.

Sur mon Mac j'ai fait:

  • brew update
  • brew install mongodb
  • mkdir -p /data/db
  • chmod 777 /data/db (pour autoriser un user lambda à écrire dedans)
  • mongod (pour exécuter MongoDB)

ETAPE 3 : créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)

  • Récupérez donc ce fichier (click droit et "sauvegarder sous") : primer-dataset.json. Vous allez devoir récupérer le fichier primer-dataset.json (assez gros, attention, ne pas faire copier/coller), et exécuter la commande suivante, qui créer une bd "test" et ajoute dedans la collection "restaurants" : 
    • mongoimport --db test --collection restaurants --drop --file primer-dataset.json

ETAPE 4 : installer un outil d'administration sympa

Je vous recommande fortement MongoChef, un produit commercial mais gratuit pour utilisation non commerciale. Le télécharger sur: https://studio3t.com/

4 - Ouvrir 3T STudio et voir la collection que l'on vient d'importer

  • S'assurer que MongoDB tourne (mongod doit être lancé, ou bien vous devez avoir installé MongoDB en service)
  • Lancer l'application 3T Studio, connectez-vous sur MongoDB. Les valeurs par défaut doivent être Ok, normalement.
  • Ouvrir la collection "restaurants" dans la base "test"

Quelques screenshots:

MongoChef1.jpg

MongoChefRequestBuilder.jpg 

 

 
Powered by MindTouch Deki Open Source Edition v.8.08