Pages récentes

Modifier
la page

Nouvelle
page

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

Master 2 Miage INTENSE Casablanca 2018-2019

De $1

Version de 16:31, 21 Nov 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
  4. 4. EMSI MAARIF
    1. 4.1. Séance 1 - présentation de NodeJS et premiers exercices simples
    2. 4.2. Ressource : des MOOCS!
    3. 4.3. Outils à installer
    4. 4.4. TP - routage avec le module ExpressJS, Web Services RESTFUL
    5. 4.5. Correction faite en classe : 

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.

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

 

 
Powered by MindTouch Deki Open Source Edition v.8.08