Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 14:18, 22 Sep 2019 par MichelBuffa
0

Technologies Web M1 Miage 2019-2020

De $1

Version de 16:48, 21 Nov 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
      1. 2.1.1. Partie 2 : découverte de VueJS en mode CLI (command line interface)
      2. 2.1.2. Etape 2 : Création d'une application simple en mode CLI, utilisant la base de données synchronisée Google Firestore
    2. 2.2. TRAVAIL A FAIRE POUR LA SEMAINE PROCHAINE

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

Partie 1 Live coding: de JavaScript aux librairies aux frameworks

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/tiyirud/1/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
  4. Un autre exemple mais qui utilise cette fois-ci des "components" : https://jsbin.com/guwetoy/edit?html,js,output

Partie 2 : découverte de VueJS en mode CLI (command line interface)

ETAPE 1 : installation de NodeJS (nécessaire pour développement CLI)

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.

Vérifiez que vous avez bien:

  1. Une version de node >= 10.16 (commande à taper : "node -v)
  2. Une version de npm >= 6.11   (commande à taper : "npm -v")

Etape 2 : Création d'une application simple en mode CLI, utilisant la base de données synchronisée Google Firestore

Travail à faire :

  1. suivre ce tutorial 
  2. Essayez de modifier ce tutorial pour faire la création et la modification non pas "d'expenses" mais d'une liste de restaurants/cuisines, on pourra rajouter le prix moyen du menu aux propriétés des restaurants. Je vous conseille de travailler sur une nouvelle collection "restaurants" dans FireStore.

ETAPE 3 (à terminer pour la semaine prochaine) : installer MongoDB sur votre machine

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

ETAPE 5 : 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 

ETAPE 6: test de WebServices RESTful sur les restaurants

Récuperez ce projet  serveurNodeMongoRESTful.zip (le code sera expliqué lors du cours No 2), qui implémente avec NodeJS des WebServices RESTful pour gérer les restaurants situés dans la base MongoDB que nous venons de voir.

Une fois dezippé allez dans le répertoire obtenu et exécutez les commandes suivantes :

  1. npm install
  2. node serverCrudWithMongo.js
  3. Ouvrez http://localhost:8080 dans votre navigateur. Une page Web devrait apparaitre. Cliquez sur un des premiers liens, des données (des restaurants) devraient s'afficher au format JSON.
  4. Regardez le code de serverCrudWithMongo.js en particulier la définition des "URIs" des WebServices (lignes app.get, app.post, app.delete, app.put)

ETAPE 7: branchement de votre application sur ces Web Services

  • Live coding avec le prof

TRAVAIL A FAIRE POUR LA SEMAINE PROCHAINE

Je ferai passer quelques personnes au tableau pour répondre à quelques questions...

  1. Terminer l'installation de nodeJS, MongoDB, faire tourner les WebServices (étape 6), regarder le code source même si vous ne comprenez pas tout.
     
  2. Idem, même si vous ne comprenez pas tout, allez voir les sites Web des librairies graphiques pour VueJS sur le site https://risingstars.js.org Plus tard vous aurez à jouer avec alors c'est le moment ! :-)
     
  3. Lisez ou du moins parcourez ces lectures:

 

 
Powered by MindTouch Deki Open Source Edition v.8.08