 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 13:15, 6 Nov 2018 par MichelBuffa
Master 2 Miage INTENSE Rabat 2018-2019De $1Table des matières
IntroductionDans 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 à VueJSSupports de cours
Petits exercices JavaScript faits en cours:
A faire pour la séance 2
Séance 2 : Introduction aux frameworks. DOM or not to DOM ?Ecriture en live coding d'un gestionnaire de todos de différentes manièresNous allons comparer plusieurs versions:
A propos de REST:
Remarque : on peu faire des requêtes REST avec XhR2, fetch API(pour les curieux : quelques mots sur GraphQLet Appolo) On peut aujourd'hui gérer la progression des uploads et downloads avec fetch et l'API des streams (voir https://streams.spec.whatwg.org/demos/) Séance 2 suite... - présentation de NodeJS et premiers exercices simples
TP - routage avec le module ExpressJS, Web Services RESTFULSupports de cours: transparents de présentation de Express
TP - MongoDB
1 - Installer MongoDB sur votre machineSuivez 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:
2 - Créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)
3 - Installer un outil d'administration sympaJe vous recommande fortement MongoChef, un produit commercial mais gratuit pour utilisation non commerciale. Le télécharger sur: https://studio3t.com/ 4 - Ouvrir 3T STudio et voir la collection que l'on vient d'importer
Quelques screenshots:
5 - Installer le driver MongoDB pour NodeJS
6 - Tester des requêtes CRUD avec NodeJS et expressFAIT EN LIVE CODING: inserer + supprimer des lignes d'une table HTML depuis JavaScript: http://jsbin.com/hinilet/edit?console,output
A FAIRE : essayer d'ajouter un findByName et un count à l'application précédente. Corrections pour le count et pour le findByName: Voir la doc de MongoDB pour les requêtes comprenant des expressions régulières: https://docs.mongodb.com/manual/refe...r/query/regex/ Dans serverCrudWithMongo.js: // ICI c'est autorisé par la norme REST car
// "count" est un mot réservé, on ne risque pas de
// le prendre pour une TABLE ou une collection
// cf la partie "reserved words" de
// https://blog.octo.com/designer-une-api-rest/
app.get('/api/restaurants/count', function(req, res) {
// on renvoie le nombre de restaurants
mongoDBModule.countRestaurants(function(data) {
var objdData = {
msg:"Count effectué avec succès",
data: data
}
res.send(JSON.stringify(objdData));
});
});
// On va récupérer des restaurants par un GET (standard REST)
// cette fonction d'API peut accepter des paramètres
// pagesize = nombre de restaurants par page
// page = no de la page
// Oui, on va faire de la pagination, pour afficher
// par exemple les restaurants 10 par 10
app.get('/api/restaurants', function(req, res) {
// Si présent on prend la valeur du param, sinon 1
let page = parseInt(req.query.page || 0);
// idem si present on prend la valeur, sinon 10
let pagesize = parseInt(req.query.pagesize || 10);
let nom = req.query.nom;
if(nom) {
// find by name
mongoDBModule.findRestaurantsByName(nom, page, pagesize, function(data) {
var objdData = {
msg:"restaurant recherchés par nom avec succès",
data: data
}
res.send(JSON.stringify(objdData));
});
} else {
// find normal
mongoDBModule.findRestaurants(page, pagesize, function(data) {
var objdData = {
msg:"restaurant recherchés avec succès",
data: data
}
res.send(JSON.stringify(objdData));
});
}
});
Dans app_modules/crud-mongo.js: exports.countRestaurants = function(callback) {
console.log("DANS COUNT")
MongoClient.connect(url, function(err, client) {
var db = client.db(dbName);
db.collection('restaurants')
.count(function(err, res) {
console.log("COUNT = " + res)
callback(res);
});
});
};
exports.findRestaurantsByName = function(nom,page, pagesize, callback) {
MongoClient.connect(url, function(err, client) {
var db = client.db(dbName);
console.log("pagesize = " + pagesize);
console.log("page = " + page);
console.log("FIND BY NAME nom=" + nom);
// syntaxe recommandée
// Cf doc mongodb: https://docs.mongodb.com/manual/reference/operator/query/regex/
// The $regex value needs to be either the string
// pattern to match or a regular expression object.
// When passing a string pattern, you don't include
// the / delimitters
// VERSION avec $regexp et $options
let myquery = {
"name": {
$regex: ".*" + nom + ".*",
$options:"i"
}
}
// VERSION avec objet RegExp
//let myquery = {'name' : new RegExp('^.*'+nom+'.*$',"i")};
// ou, si on veut être "case sensitive"
//let myquery = {'name' : new RegExp('^.*'+nom+'.*$')};
if(!err){
db.collection('restaurants')
.find(myquery)
.skip(page*pagesize)
.limit(pagesize)
.toArray()
.then(arr => callback(arr));
}
else{
callback(-1);
}
});
};
Seance 3: Introduction à ReactExercices d'introduction, dans une IDE en ligneOn peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !
Exercice à faire en vous aidant des exercices précédents :Pour vous donner une idée du résultat attendu,voici l'équivalent en VueJS: http://jsbin.com/guwetoy/1/edit?html,output Je conseille de partir de cet exemple React: le composant en classe ES6 En vous aidant de l'exemple fait en classe en live coding, voud devrez faire incrémentalement, en testant après chaque étape :
ICI UNE CORRECTION: https://codepen.io/w3devcampus/pen/b...m?editors=1010 Exercices avec un environnement "CLI"Si on va voir la page de facebook sur "how to start with React", il y a un chapitre qui concerne le mode "CLI": https://reactjs.org/docs/add-react-to-a-new-app.html
Exercice: refaire dans le projet les hobbies en mode CLI !
|
Powered by MindTouch Deki Open Source Edition v.8.08 |
