Master 2 Miage INTENSE Casablanca 2018-2019

De $1

Version de 23:06, 19 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

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

 

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