[PDF] Master Miage NTDP 2016-2017: NodeJS et MongoDB - miageprojet2

View - Download Master Miage NTDP 2016-2017: NodeJS et MongoDB - miageprojet2

Previous PDF

Next PDF

Master Miage NTDP 2016-2017: NodeJS et

MongoDB

1.Introduction

2.1 - présentation de NodeJS et premiers exercices simples

3.2 - routage avec le module ExpressJS, Web Services RESTFUL

4.3 - MongoDB

4.1.Etape 1 - Installer MongoDB sur votre machine

4.2.Etape 2 - Créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)

4.3.Etape 3 - Installer un outil d'administration sympa

4.4.Etape 4 - Ouvrir MongoChef et voir la collection que l'on vient d'importer

4.5.Etape 5 - Installer le driver MongoDB pour NodeJS

4.6.Etape 6 - Tester des bouts de code JavaScript qui font le CRUD dans cette base

4.7.Etape 7 - Intégrer le code dans une application Node/Express qui fait du routage

5.Resources externes

5.1.MOOCS SUR MONGODB

5.1.1.Super MOOC sur Mongo DB + Mongoose + Node + Express + Angular + Ionic (applications hybrides

mobiles)

5.2.Créer un server Web (routage, Web Services, etc.)

5.3.Bases de données relationnelles

Introduction

1 - présentation de NodeJS et premiers exercices simples

•Supports de cours:transparents de présentation de NodeJS

•TP : faites les exercices du module npm learnyounode, instructions dans le dernier transparent de la

présentation ci-dessus.

2 - routage avec le module ExpressJS, Web Services RESTFUL

•Supports de cours:transparents de présentation de Express •TP:

1.Faites tournerles exemples de ce tutorial

2.Testez cet exemple qui fait de l'upload de fichiers. Pensez à installer les modules express et

multer dans le répertoire avant d'exécuter.

3.Préparez des routages pour faire du CRUD sur des objets situés dans une BD. Pour le moment

on va juste simuler.Details dans cette page! •Exemple angularJS simple:http://jsbin.com/vufaja/edit?html,js,output 1

3 - MongoDB

Vous allez, dans cette séance apprendre les bases de l'utilisation de MongoDB depuis une application

écrite en JavaScript et exécutée avec NodeJS. Dans un second temps, vous ré-utiliserez le code qui fait le

CRUD sur une base d'exemples de MongoDB, en le déplaçant dans des méthodes app.get, app.post etc

du TP de la séance 3, pour faire une application utilisable depuis des URLs. •Ressource externe pour aller plus loin: un super MOOC (en anglais) sur MongoDB/Node/Angular/ Ionic, gratuit, par un des auteurs de MongoDB.Inscrivez-vous ici!

Etape 1 - Installer MongoDB sur votre machine

Suivez les installations propres à votre système d'exploitation situéessur cette page du site officiel. Ne

choisissez pas l'installation manuelle.

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 2 - Créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)

•Suivre les instructions situéessur cette page. 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" :

•Une fois l'importation faite, garder l'onglet ouvert sur cette page, car on va continuer le tutorial à

l'étape 5. 2 Etape 3 - 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:http://3t.io/mongochef/ Etape 4 - Ouvrir MongoChef 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 Mongo Chef, connectez-vous sur MongoDB. Les valeurs par défaut doivent

être Ok, normalement.

•Ouvrir la collection "restaurants" dans la base "test"

Quelques screenshots:

Etape 5 - Installer le driver MongoDB pour NodeJS

•Créez un répertoiretpmongo •cd tpmongo •npm install mongodb Ca doit télécharger le module driver mongodb dans un sous-répertoirenode_modules. 3 Etape 6 - Tester des bouts de code JavaScript qui font le CRUD dans cette base

Suivre la suite du tutorial MongoDB, en commençant parla page montrant comment se connecter à la

base restaurant. Vous devez copier/coller le code dans un fichierconnect.jspuis l'exécuter avecnode connect.js. Si vous suivez bien les instructions de la page vous devriez obtenir: connect.js: var MongoClient = require('mongodb').MongoClient; var assert = require('assert'); var url = 'mongodb://localhost:27017/test';

MongoClient.connect(url, function(err, db) {

assert.equal(null, err); console.log("Connected correctly to server", url); db.close(); Vous le testerez en exécutantnode connect.jset ça devrait afficher sur la console "Connected correctly to server". Vous passerez ensuite à la page de tutorial suivante, et ainsi de suite... Chaque page va vous proposer des bouts de code JavaScript pour chercher, modifier, supprimer et

insérer des données dans la base des restaurants. Je vous conseille à chaque fois de faire un fichier

différent et le tester ensuite avec la commande node: •node connect.js •node insert_document.js •node find_all.js •node find_some.js •node update.js •node delete.js •node aggregation.js •node indexes.js 4

Correction de cette partie:

•connect_driver.js •find_all.js •find_some.js •insert_document.jsavecvella.jsqui contient la définition d'un restaurant (utilisé par insert_document.js) •aggregate.js Etape 7 - Intégrer le code dans une application Node/Express qui fait du routage

Vous devrez insérer le code qui fait le CRUD dans MongoDB dans les fonctions de routage vues lors du

cours sur Express. Vous renverrez les résultats en JSON. Pour les POSTs vous devrez produire un

formulaire et vous pourrez tester dans un premier temps les updates et delete via GET, en tapant l'URL

dans votre navigateur. Pour les PUT et DELETE, vous installerez une extension à votre navigateur pour

tester les requêtes AVANT de programmer des requêtes AJAX en JavaScript (ex: application "postman"

ou "REST client" pour Google Chrome).

Allez-y incrémentalement, petit à petit.

1.Mettez un bouton "connexion à MongoDB" dans la page d'accueil. On clique dessus et ça doit

renvoyer "connexion effectuée".

2.Ajoutez un bouton "voir 10 données" qui doit afficher les 10 premiers restaurants, pour voir si cela

fonctionne. Pour cela : copier/coller le code de l'exemplefind_all.jsprécédent dans un fichier

server.js, dans lequel on aura préalablement déjà copié / collé le code pour faire un serveur Web

basique avec le module Express. Ici une correction possible du code du serveur :findServer.js

3.Maintenant on essaie d'envoyer une requête en Ajax et on essaie de retourner les résultats en JSON.

On les affichera avec console.log dans un premier temps. Requête Ajax en XhR2. Les curieux pourront

regarder la "fetch API" récente qui va remplacer XhR2 à terme. Exemple de correction de la page

client qui affiche les restaurants après une requête Xhr2 GET: le fichier restaurants.html qui est dans

ce zip :Restaurants.zipRegardez comment on fait la conversation

4.Maintenant on essaie de les afficher dans un tableau HTML construit dynamiquement en utilisant

l'API du DOM. Voir un exemple dans le fichier restaurants2.html du zip précédent. 5

5.Maintenant on essaie de rajouter dans le tableau un bouton "supprimer" et quand on clique dessus ça

appelle l'URL pour supprimer une donnée. On re-affichera les données pour vérifier que le restaurant

a disparu.

6.On fera un formulaire pour ajouter un restaurant, un autre pour modifier un restaurant..

A RENDRE POUR LUNDI PROCHAIN :

•Ce TP avec les options suivantes (au choix), faites ce que vous pouvez : •Un peu de CSS pour rendre le tableau joli •Des boutons next/previous pour afficher les résultats paginés, attention, chaque bouton renvoie une requête AJAX pour charger les restaurants 0-10, 11-20, 21-30 etc.... Du coup on doit pouvoir se promener dans l'ensemble de la collection. •Ajouter un champ de recherche sur le nom des restaurants, ou sur d'autres critères •Utiliser AngularJS pour faire le templating et remplir les trous. Ici un petit exemple :http://jsbin.com/vufaja/1/edit?html,js,outputet si vous voulez en savoir plussur Angular

1, je recommande ce MOOC :https://www.coursera.org/learn/singl...with-angularjs

Resources externes

MOOCS SUR MONGODB

MOOCpour bien débuter, donné par les auteurs de MongoDB Super MOOC sur Mongo DB + Mongoose + Node + Express + Angular + Ionic (applications hybrides mobiles)

Pas pour débutants en JavaScript !

Fait par un des auteurs de MongoDB. C'est gratuit, c'est sur EDx:https://www.edx.org/course/ introduct...mongodbx-m101x Créer un server Web (routage, Web Services, etc.)

•Module express (http://expressjs.com/). Beaucoup dedocumentation en français sur le site officiel,

notamment des tutoriaux de base pour faire un routage simple. •Bon tutorial sur le routage simple:https://codeforgeek.com/2015/05/expr...uter-tutorial/, comment récupérer des paramètres passés dans l'URL, comment gérer les erreurs 404, comment définir de simples services REST 6 •Très bon tuto sur le routage, explique static_files, RESTFUL, multipart, •Un tuto sur openclassroom express de base et ejs (moteur de

Bases de données relationnelles

•Module Knex (http://knexjs.org/), permet de manipuler des données relationnelles avec Postgres,

MySQL, MariaDB, SQLite3, et Oracle. Supporte les transactions via des promesses, très bien adapté à

JavaScript.

•Voir par exemple cette vidéo de création d'un blog avec express et Récupéré depuis "http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/ 7quotesdbs_dbs4.pdfusesText_8

[PDF] mongodb typescript driver

[PDF] mongodb typescript find

[PDF] mongodb typescript nodejs

[PDF] mongodb typescript orm

[PDF] mongodb typescript tutorial

[PDF] mongodb typescript types

[PDF] mongoose typescript connect

[PDF] monocle travel guide tokyo pdf download

[PDF] monocular 3d reconstruction github

[PDF] mons. loris francesco capovilla

[PDF] monsignor loris francesco capovilla

[PDF] monthly blood sugar log sheet pdf

[PDF] montparnasse 56 tower paris restaurant

[PDF] montreal airport address

[PDF] montreal airports map