Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 07:39, 7 Nov 2019 par MichelBuffa
0

Master 2 INTENSE CASABLACA 2019-2020

De $1

Table des matières
  1. 1. Séance 1: Single page webapps avec VueJS, bases de données synchronisées dans le cloud
    1. 1.1. Supports de cours
    2. 1.2. Partie 1 Live coding: de JavaScript aux librairies aux frameworks
    3. 1.3. Partie 2 : découverte de VueJS en mode CLI (command line interface)
  2. 2.  
      1. 2.1.1. ETAPE 1 : installation de NodeJS (nécessaire pour développement CLI)
      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
  3. 3. Travail à faire : suivre ce tutorial , choisissez npm comme outil d'installation des modules lorsque vous aurez le choix yarn/npm Ici autre tuto du même auteur qui montre comment gérer l'autthentification avec FireCloud : https://codeconstructionahead.com/vue-authentication-with-firebase-auth/ 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. Ici exercice chat multi-participants Suivre ce tuto (chat multi room avec Google Firebase - moins puissante que Firecloud). Attention, la partie sur le routeur n'est pas à jour car la commande "vue add router" installe une version un peu plus récentte. Voir dans la correction faite en classe le fichier router/index.js qui est légèrement différent. Correction : téléchargez cette archive, lisez le README.txt.   Une fois que l'appli fonctionne, essayez de comprendre dans le détail comment elle fonctionne.
      1. 3.1.1. ETAPE 4 : - Créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)
      2. 3.1.2. ETAPE 5 : Installer un outil d'administration sympa
      3. 3.1.3. ETAPE 6 : Ouvrir 3T STudio et voir la collection que l'on vient d'importer
    2. 3.2.  Séance 3 : 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)

Version de 08:45, 20 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

Séance 1: Single page webapps avec VueJS, bases de données synchronisées dans le cloud

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/kurovin/edit?html,js
  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" : 

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 , choisissez npm comme outil d'installation des modules lorsque vous aurez le choix yarn/npm
  2. Ici autre tuto du même auteur qui montre comment gérer l'autthentification avec FireCloud : https://codeconstructionahead.com/vue-authentication-with-firebase-auth/
  3. 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.

Ici exercice chat multi-participants

  • Suivre ce tuto (chat multi room avec Google Firebase - moins puissante que Firecloud). Attention, la partie sur le routeur n'est pas à jour car la commande "vue add router" installe une version un peu plus récentte. Voir dans la correction faite en classe le fichier router/index.js qui est légèrement différent.

    Correction : téléchargez cette archive, lisez le README.txt.

     
  • Une fois que l'appli fonctionne, essayez de comprendre dans le détail comment elle fonctionne.

ETAPE 3 : installer MongoDB sur votre machine

Support de cours pour apprendre MongoDB avec NodeJS : https://university.mongodb.com/ et suivez "MongoDB for javaScript Developpers"

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 4 : - 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 5 : 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 6 : 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 

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

Supports de cours

Exercices faits en classe :

  • Exercices de base NodeJS et Express : télécharger cette archive, dezippez-là, allez dans les répertoires, faites "npm install" avant de lancer les exercices avec node exo1.js etc....

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 navigateu

 

 
Powered by MindTouch Deki Open Source Edition v.8.08