Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 13:38, 29 Nov 2018 par MichelBuffa
0

Master 2 Miage INTENSE Casablanca 2018-2019

De $1

Table des matières
  1. 1. Introduction
  2. 2. Séance 1 : état des lieux du développement Web, intro à VueJS
    1. 2.1. Supports de cours
  3. 3. EMSI CENTRE
    1. 3.1. Séance 1 : rappels JavaScript, introdution à VueJS, comparaison avec JavaScript pur.
      1. 3.1.1. Petits exercices JavaScript faits en cours:
      2. 3.1.2. A faire pour la séance 2
    2. 3.2. Séance 2 : introduction à NodeJS et aux Web Services
      1. 3.2.1. Supports de cours
      2. 3.2.2. TP création de WebServices avec NodeJS, aujourd'hui en GET
      3. 3.2.3. CORRECTION FAITE EN CLASSE (client vueJS + serveur REST Node avec GET/POST/DELETE)
    3. 3.3. Séance 3: installation de MongoDB et d'un outil d'administration
      1. 3.3.1. TP : connexion du code serveur NodeJS à MongoDB
    4. 3.4. CORRECTION FAITE EN CLASSE
  4. 4. Séance 4 : on finit le CRUD, on apprend à faire des composants et à réutiliser des composants avec VueJS
      1. 4.1.1. CORRECTION PARTIELLE (delete, composant <app-restaurant>, debounce quand on recherche)
  5. 5. EMSI MAARIF
    1. 5.1. Séance 1 - présentation de NodeJS et premiers exercices simples
    2. 5.2. Ressource : des MOOCS!
    3. 5.3. Outils à installer
    4. 5.4. TP - routage avec le module ExpressJS, Web Services RESTFUL
    5. 5.5. Correction faite en classe : 
    6. 5.6. Séance 3: installation de MongoDB et d'un outil d'administration
      1. 5.6.1. TP à faire : le même que celui de la séance 3 de l'EMSI CENTRE (voir plus haut dans cette page)
  6. 6. Séance 4 : on finit le CRUD, on apprend à faire des composants et à réutiliser des composants avec VueJS
      1. 6.1.1. CORRECTION PARTIELLE (delete, composant <app-restaurant>, debounce quand on recherche)

Version de 17:44, 18 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2. Séance 1 : état des lieux du développement Web, intro à VueJS
    1. 2.1. Supports de cours
  3. 3. EMSI CENTRE
    1. 3.1. Séance 1 : rappels JavaScript, introdution à VueJS, comparaison avec JavaScript pur.
      1. 3.1.1. Petits exercices JavaScript faits en cours:
      2. 3.1.2. A faire pour la séance 2
    2. 3.2. Séance 2 : introduction à NodeJS et aux Web Services
      1. 3.2.1. Supports de cours
      2. 3.2.2. TP création de WebServices avec NodeJS, aujourd'hui en GET
      3. 3.2.3. CORRECTION FAITE EN CLASSE (client vueJS + serveur REST Node avec GET/POST/DELETE)
    3. 3.3. Séance 3: installation de MongoDB et d'un outil d'administration
      1. 3.3.1. TP : connexion du code serveur NodeJS à MongoDB
    4. 3.4. CORRECTION FAITE EN CLASSE
  4. 4. Séance 4 : on finit le CRUD, on apprend à faire des composants et à réutiliser des composants avec VueJS
      1. 4.1.1. CORRECTION PARTIELLE (delete, composant <app-restaurant>, debounce quand on recherche)
  5. 5. EMSI MAARIF
    1. 5.1. Séance 1 - présentation de NodeJS et premiers exercices simples
    2. 5.2. Ressource : des MOOCS!
    3. 5.3. Outils à installer
    4. 5.4. TP - routage avec le module ExpressJS, Web Services RESTFUL
    5. 5.5. Correction faite en classe : 
    6. 5.6. Séance 3: installation de MongoDB et d'un outil d'administration
      1. 5.6.1. TP à faire : le même que celui de la séance 3 de l'EMSI CENTRE (voir plus haut dans cette page)
  6. 6. Séance 4 : on finit le CRUD, on apprend à faire des composants et à réutiliser des composants avec VueJS
      1. 6.1.1. CORRECTION PARTIELLE (delete, composant <app-restaurant>, debounce quand on recherche)

Introduction

Dans ce cours, nous ferons une introduction à JavaScript, à NodeJS/MongoDB et nous verrons les bases de ce qu'on appelle "les frameworks JavaScript" front-end au travers de ReactJS.

Séance 1 : état des lieux du développement Web, intro à VueJS

Supports de cours

EMSI CENTRE

Séance 1 : rappels JavaScript, introdution à VueJS, comparaison avec JavaScript pur.

Petits exercices JavaScript faits en cours:

A faire pour la séance 2

  • Vous inscrire au MOOC
     
  • Regarder les bouts de code faits en cours. Essayer de les modifier, essayer de comprendre ce qui a été fait.
     
  • Installer les logiciels suivants :

    • Visual Studio Code

    • NodeJS : allez sur https://nodejs.org/en/ et installez la version "recommended for most users".
       
    • Si vous êtes sous windows, un bon terminal, acceptant le copier/coller, la colorisation, le multi-onglet ou multi-fenêtre, par exemple je vous conseille http://cmder.net/, mais d'autres peuvent faire l'affaire : powershell (de microsoft, déjà installé sous win10), git bash, hyperterminal (payant), console2, powercmd, colorconsole, 

Séance 2 : introduction à NodeJS et aux Web Services

Supports de cours

TP création de WebServices avec NodeJS, aujourd'hui en GET

  • Vous allez créer des routes qui répondent en GET aux URIs suivants :

    1. /api/restaurants : renvoie un tableau de 10 restaurants
       
    2. /api/restaurants?page=xxx&pagesize=yyy&nom=zzz : dans un premier temps montrer qu'on a bien reçu les paramètres (renvoyer une réponse JSON qui contient un message qui montre qu'on a bien reçu les params). Dans un second temps, essayer d'implémenter une fonctionnalité (ex: envoyer 2 restaurants et pas 10 si pagesize = 2)

      • Un peu plus difficile : donner des valeurs par defaut (page = 0, pagesize=10, nom="") si des paramètres ne sont pas présents dans l'URI
         
    3. /api/restaurants/1 : renvoie le restaurant d'id = 1, attention, ça doit marcher si on met un autre id

CORRECTION FAITE EN CLASSE (client vueJS + serveur REST Node avec GET/POST/DELETE)

  1. Récupérez cette archive, dezippez là et allez dans le répertoire ainsi créé.
  2. Allez dans le répertoire serveur
  3. faites "npm install"
  4. Lancez le serveur : "node server.js" ou "nodemon server.js"
  5. Ouvrez le fichier restaurantsVueJS.html dans le répertoire du client avec votre navigateur.

Séance 3: installation de MongoDB et d'un outil d'administration

  • Voir cette page dédiée à l'installation de MongoDB et à l'importation d'une base de données de restaurants.

TP : connexion du code serveur NodeJS à MongoDB

  1. Tout d'abord, allez dans le répertoire "serveur" du TP, c'est là que nous allons travailler.
     
  2. Ensuite, vous allez installer le driver MongoDB pour NodeJS dans le projet en exécutant la commande suivante : "npm install -save mongodb". Cette commande n'installe pas MongoDB, elle installe juste le serveur.
     
  3. Créez un répertoire serveur/app_modules qui contiendra des "modules" que nous allons écrire, dans le code de notre application serveur.
     
  4. Dans ce répertoire, créez un fichier crud-mongo.js dans lequel nous allons mettre le code spécifique aux requêtes MongoDB
     
  5. Recopiez dans ce fichier le code suivant :
var MongoClient = require('mongodb').MongoClient;

// Connection URL

// Database Name
const dbName = 'test';

exports.findRestaurants = function findRestaurants(callback) {
MongoClient.connect(url, (err, client) => {
// On est connecté à la base
var db = client.db(dbName);

if (!err) {
db.collection('restaurants')
.find()
.limit(10)
.toArray()
.then(resultats => {
callback(resultats);
});
}else {
callback(-1);
}
});
};

Enfin, nous allons relier ce code avec le fichier server.js afin de pouvoir exécuter la fonction findRestaurant qui envoie une requête à la base, lorsque l'uri /api/restaurants est invoqué par une requête HTTP GET.

Je vous propose pour cela de rajouter en haut de votre fichier server.js les lignes pour importer le module crud-mongo.js dans le fichier server.js:

server.js (seules les deux dernières lignes sont nouvelles) :
 

var express = require('express');
var app = express();

// pour les formulaires multiparts
var multer = require('multer');
var multerData = multer();

// Mon module de connexion à MongoDB
const mongoDBModule = require('./app_modules/crud-mongo');

Et voici par exemple une route supplémentaire pour tester si cela fonctionne :

app.get('/api/restaurantsbd', (req, res) => {
// paramètres optionnels passé en tant que
// query strings: ex /api/restaurants?page=2@pagesize=5&nom=Pizza

let page = req.query.page || 0;
let pagesize = req.query.pagesize || 10;
let nom = req.query.nom || "";
let cuisine = req.query.cuisine || "";

mongoDBModule.findRestaurants((data) => {
var reponse = {
msg: "restaurant recherchés avec succès",
data: data,
}
res.send(JSON.stringify(reponse));
});
})

Que remarquez-vous ? Comment est-ce qu'on appelle la fonction findRestaurants ? Quel est le paramètre d'appel de cette fonction ? Comment récupère-t-on les données en provenance de la base ?

Travail à faire avec le prof en live coding: implémenter la prise en compte des paramètres de pagination, la recherche par nom, coder le findRestaurantById, et voir comment faire les autres opérations du CRUD (insertion, modification, suppression)

CORRECTION FAITE EN CLASSE

  • Récupérez et dezippez NodeMongoDBVueEMSI_CENTRE.zip
  • allez dans serveur et faites "npm install"
  • lancez server.js
  • Ouvrez le fichier client/restaurantsVueJS.html avec un browser

Séance 4 : on finit le CRUD, on apprend à faire des composants et à réutiliser des composants avec VueJS

Première partie du TP :

  • On implémente la recherche "débouncée", c'est-à-dire qui se déclenche que quand on a arrêté de taper plus de 300ms. Pour cela on va utiliser la librairie JS "à tout faire" LODASH (https://lodash.com/) qui est quasiment indispensable à toute application front-end JavaScript tellement elle est pratique. 
    • On télécharge lodash et on copie le fichier obtenu dans le répertoire lib du projet client (depuis la page d'accueil, prenez  la version complète zippée de 24k, cela doit télécharger le fichier lodash.min.js.
    • On insère la ligne <script src="lib/lodash.min.js"></script> dans le fichier restaurantsVue.html
    • Enfin, on ajoute la méthode suivante dans le fichier restaurantsVueJS.js :

      // _.debounce vient de lodash et permet de n'appeler getRestaurantsFromServer que lorsqu'on a arrêté de taper
      // pendant 300ms, ça évite d'envoyer une requête au serveur à chaque touche...
      chercherRestaurants: _.debounce(
      function () {
      this.getRestaurants();
      }, 300),
       
    • Enfin, modifiez l'attribut v-on:input du champ de recherche, dans le fichier restaurantsVue.html, comme ceci: v-on:input="chercherRestaurants()" pour que lorsque on tape des caractères on appelle la fonction ci-dessus, au lieu d'appeler getRestaurants.
       
    • Sauvez, testez en tapant vite dans le champ de recherche... Vous verrez que les requêtes ne partent que quand on a arrêté de taper vite.
       
  •  On implémente l'ajout et la suppression de restaurants (live coding avec le prof)
     
  • On va commencer à voir comment on peut créer des composants custom avec VueJS. Par exemple :
     
Vue.component('app-restaurant', {
props: ['nom', 'cuisine', 'id'],
data: function () {
return {}
},
template: '<li v-on:click="removeRestaurant">{{ nom }}, cusine : {{cuisine}}</li>',
methods: {
removeRestaurant: function () {
this.nom = "Restaurant supprimé!"
// pas de majuscules dans le nom du restaurant
this.$emit('restaurantclicked', this.id);
}
}
});

CORRECTION PARTIELLE (delete, composant <app-restaurant>, debounce quand on recherche)

  • Récuperez cette archive, puis npm install dans le serveur, nodemon serveur.js et ouvrez le fichier restaurantsVueJS.html

EMSI MAARIF

Séance 1 - présentation de NodeJS et premiers exercices simples

Outils à installer

  • Un bon éditeur de code prêt pour le dev front-end: sublime text 3, visual studio code, atom, etc. Pensez à installer les packages emmet, babel, etc.
  • Si vous êtes sous windows, un bon terminal, acceptant le copier/coller, la colorisation, le multi-onglet ou multi-fenêtre, par exemple http://cmder.net/, powershell (de microsoft, déjà installé sous win10), hyperterminal (payant), console2, powercmd, colorconsole, mobaextrem, terminal wings, conemu, 

Casablanca : exemples JsBin sur les objets JavaScript, fait en cours: 

TP - routage avec le module ExpressJS, Web Services RESTFUL

Vous allez créer des routes qui répondent en GET aux URIs suivants :

  • /api/restaurants : renvoie un tableau de 10 restaurants
     
  • /api/restaurants?page=xxx&pagesize=yyy&nom=zzz : dans un premier temps montrer qu'on a bien reçu les paramètres (renvoyer une réponse JSON qui contient un message qui montre qu'on a bien reçu les params). Dans un second temps, essayer d'implémenter une fonctionnalité (ex: envoyer 2 restaurants et pas 10 si pagesize = 2)

    • Un peu plus difficile : donner des valeurs par defaut (page = 0, pagesize=10, nom="") si des paramètres ne sont pas présents dans l'URI
       
  • /api/restaurants/1 : renvoie le restaurant d'id = 1, attention, ça doit marcher si on met un autre id

On fera aussi une route en POST sur /api/restaurants pour insérer une restaurant, et on la testera avec l'outil POSTMAN

On fera une route en DELETE sur /api/restaurant/xxx pour supprimer un restaurant par id

On fera une route en PUT sur /api/restaurant/xxx pour modifier un restaurant dont on passe l'URI.

Correction faite en classe : 

  • Telechargez cette archive 
  • Allez dans "serveur" et faites "npm install" pour installer les modules nécessaires (express et multer)
  • Lancez "node serveur.js" ou "nodemon serveur.js"
  • Ouvrez le fichier restaurantVue.html dans le répertoire client. Il y a aussi le client "pur JS" dans restaurants.html

Séance 3: installation de MongoDB et d'un outil d'administration

  • Voir cette page dédiée à l'installation de MongoDB et à l'importation d'une base de données de restaurants.

TP à faire : le même que celui de la séance 3 de l'EMSI CENTRE (voir plus haut dans cette page)

  • Correction faite en cours :
    1. Dezippez cette archive 
    2. allez dans le répertoire serveur
    3. Faites "nom install" puis "node server.js" ou "nodemon server.js"
    4. Ouvrez avec votre navigateur le fichier exo1ClientJS/restaurantsVue.html

 

Séance 4 : on finit le CRUD, on apprend à faire des composants et à réutiliser des composants avec VueJS

Première partie du TP :

  • On implémente la recherche "débouncée", c'est-à-dire qui se déclenche que quand on a arrêté de taper plus de 300ms. Pour cela on va utiliser la librairie JS "à tout faire" LODASH (https://lodash.com/) qui est quasiment indispensable à toute application front-end JavaScript tellement elle est pratique. 
    • On télécharge lodash et on copie le fichier obtenu dans le répertoire lib du projet client (depuis la page d'accueil, prenez  la version complète zippée de 24k, cela doit télécharger le fichier lodash.min.js.
    • On insère la ligne <script src="lib/lodash.min.js"></script> dans le fichier restaurantsVue.html
    • Enfin, on ajoute la méthode suivante dans le fichier restaurantsVueJS.js :

      // _.debounce vient de lodash et permet de n'appeler getRestaurantsFromServer que lorsqu'on a arrêté de taper
      // pendant 300ms, ça évite d'envoyer une requête au serveur à chaque touche...
      chercherRestaurants: _.debounce(
      function () {
      this.getRestaurants();
      }, 300),
       
    • Enfin, modifiez l'attribut v-on:input du champ de recherche, dans le fichier restaurantsVue.html, comme ceci: v-on:input="chercherRestaurants()" pour que lorsque on tape des caractères on appelle la fonction ci-dessus, au lieu d'appeler getRestaurants.
       
    • Sauvez, testez en tapant vite dans le champ de recherche... Vous verrez que les requêtes ne partent que quand on a arrêté de taper vite.
       
  •  On implémente l'ajout et la suppression de restaurants (live coding avec le prof)
     
  • On va commencer à voir comment on peut créer des composants custom avec VueJS. Par exemple :
     
Vue.component('app-restaurant', {
props: ['nom', 'cuisine', 'id'],
data: function () {
return {}
},
template: '<li v-on:click="removeRestaurant">{{ nom }}, cusine : {{cuisine}}</li>',
methods: {
removeRestaurant: function () {
this.nom = "Restaurant supprimé!"
// pas de majuscules dans le nom du restaurant
this.$emit('restaurantclicked', this.id);
}
}
});

CORRECTION PARTIELLE (delete, composant <app-restaurant>, debounce quand on recherche)

 

 
Powered by MindTouch Deki Open Source Edition v.8.08