 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 17:17, 29 Sep 2019 par MichelBuffa
Master 2 INTENSE 2019-2020 : Frameworks JavaScript et Server-Side JavaScript BD NoSQL Cloud etc.De $1Table des matières
IntroductionDans ce cours nous allons voir plusieurs aspects du développement Web Moderne :
A faire : si vous êtes sous windows, installer un bon terminal en ligne de commande comme http://cmder.net/ ou autre (github bash, etc.) si je vous vois avec une fenêtre DOS basique vous allez m'entendre ! Séance 1 : état des lieux du développement Web, intro à VueJS
Exemple de ce que peut apporter un framework par rapport à du pur JavaScript, ou à de simples librairies, ici le même exemple codé de trois manières différents:
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/) Avoir une vue de l'écosystème JavaScript (sites vus en cours)
Introduction à ReactSupports de cours : Exercices 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/xxKeJZW 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 !
Séance 2 : Utilisation de FireBase, une base de données basée cloud synchronisée
ETAPE 1 : Il faut commencer par modifier l'exemple des hobbies pour qu'il fonctionne non pas avec un tableau mais avec un objet. Firebase ne sais synchroniser que des objets, pas des tableaux: Dans App.js : this.state = {
hobbies : {
hobby0: 'tennis',
hobby1: 'golf'
}
// ...
};
Il faudra modifier plusieurs parties du code en conséquence...
Ex de code: addHobby() {
/* OLD VERSION WITH ARRAY
const oldHobbies = this.state.hobbies;
this.setState({
hobbies: oldHobbies.concat(this.state.input),
input : ""
});
*/
// faire une copie de l'objet hobbies
const hobbies = {...this.state.hobbies};
// Ajouter le nouveau hobby
const timestamp = Date.now();
hobbies[`hobby-${timestamp}`] = this.input.value;
this.setState({hobbies});
console.log(this.state.hobbies)
}
removeHobby(key) {
/* OLD VERSION WITH ARRAYS
const oldHobbies = this.state.hobbies;
const position = oldHobbies.indexOf(hobby);
this.setState({
hobbies: oldHobbies.filter((el, index) => {
return (index !== position)
}),
hobbyWasDeleted : true
});
*/
// faire une copie de l'objet hobbies
const hobbies = {...this.state.hobbies};
// Supprime le hobby dont la cle key a ete passee en parametres
//delete hobbies[key]; // ne marche pas avec firebase
hobbies[key] = null;
// Mettre a jour l'etat
// En ES6 vous pouvez juste taper {'hobbies'} au lieu de {hobbies:hobbies}
this.setState({hobbies});
}
Et pour render, exemple d'iterateur sur un objet, comparer par rapport au code qui itere sur un tableau, dans les exemples vus precedemment: // iterateur sur les proprietes de l'objet
let list = Object.keys(this.state.hobbies).map((key, index) => {
// key = element courant (propriete courante de l'objet)
consthobby = this.state.hobbies[key];
const liStyle = {
backgroundColor:index % 2 === 0 ? 'lightpink' : 'red'
};
return <li key={key} style={liStyle} onClick={() => this.removeHobby(key)}>{hobby}</li>
});
ETAPE 2 : on va devoir, comme pour les exemples faits avec vueJS, utiliser le "cycle de vie" du composant (https://reactjs.org/docs/react-component.html#the-component-lifecycle), et charger des données distantes depuis FireBase quand le composant est "monté", et aussi fermer la connexion quand il est "démonté". On va pour cela définir les méthodes App.js : componentWillMount() {
console.log("Will mount")
// this runs right before the <App> is rendered
}
componentWillUnmount() {
console.log("Will unmount")
}
Implémentez ces méthodes et vérifiez bien qu'elles sont appelées... ETAPE 3 : on va créer une base sur FireBase
ETAPE 4 : on ajoute au projet le code pour se connecter à la base: Dans votre projet, au même niveau que index.js, créez un fichier base.js, et mettez ceci dedans (attention a copier/coller les infos depuis le site, pour que cela corresponde à VOTRE BD) import Rebase from 're-base';
const base = Rebase.createClass({
// copier les 3 premières lignes de VOTRE config de votre base !!!
// NE PRENEZ PAS LES VALEURS QUI SONT ICI !!!
apiKey: "AIzaSyCW_WJJb16YVDlsdsd9c0YNNGnfdssorzWGFRU2ScU",
authDomain: "react-mbds-firebase.firebaseapp.com",
databaseURL: "https://react-mbds-firebase.firebaseio.com" // pas de , à la fin
});
export default base;
ETAPE 5 : on ajoute le module npm re-base pour "parler à firebase" On ajoute une ligne au fichier package.json pour installer la lib npm qui va bien: "dependencies": {
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-scripts": "1.0.17",
"re-base": "2.2.0"// -> ajouter cette ligne, mettez bien 2.2.0 !
},
Faites "npm install", ça va installer re-base dans node_modules ETAPE 6 : on va utiliser re-base pour synchroniser l'état du composant, c'est-à dire les hobbies: Dans App.js: ....
import base from './base';
....
componentWillMount() {
//alert("toto")
// this runs right before the <App> is rendered
this.ref = base.syncState("hobbies", {
context: this,
state: 'hobbies'
});
}
componentWillUnmount() {
base.removeBinding(this.ref);
}
Etape 7 : testez ! Sauvez, testez. Ouvrez dans un onglet votre base et regardez les données en sync. Ouvrez deux onglets avec l'appli React, regardez... Correction
Etape 8 (facultative) : héberger votre application sur firebase.com
A FAIRE POUR SEANCE SUIVANTE :
Séance 3 : Node, MongoDB, cloud, Web Services RESTful1 - installation (si ce n'est pas déjà fait) de MongoDB et d'un outil d'administrationNous allons poursuivre le cours en gérant maintenant un Back-End NoSQL, en l'occurence une base MongoDB, que nous utiliserons indifféremment localement ou dans le cloud. Pour vérifier que vous avez bien installé MongoDB:
2 - Exemple de client de ces WebServices, en pur HTML/CSS/JS et utilisation de l'API fetch
3 - Ajouter le support "cross domain" à votre projet node/MongoDBAjouter les lignes suivantes dans la configuration de votre serveur (fichier serverCrudWithMongo.js), ça se passe dans la configuration de express, c'est l'équivalent des "Servlet Filters" en JavaEE : app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE »);
next();
});
4 - Heberger la base Mongo dans le cloud sur mlab.com et modifier votre programme
5 - Développer un client qui fait le CRUD sur les restaurants, mais en ReactA RENDRE POUR SEANCE SUIVANTE. Noté. Vous allez créer un autre projet react, dans un autre répertoire, à l'aide de la commande Aide : refaire quelque chose de ce genre (ici en VueJS), mais avec React. Vous pourrez regarder les différents appels CRUD effectués à l'aide de la fetch API, que vous réutiliserez dans votre code React
Démarrer le codage du client React : vous commencerez pas simplement afficher des restaurants dans une table. Peu importe si ce n'est pas joli... En vous inspirant du TP de la séance prtécédente sur les Hobbies, vous devriez y arriver sans problèmes. On utilisera un tableau de restaurants dans le "state" de React en s'inspirant des exemples vus précédemment avec les hobbies. On utilisera la méthode componentDidMount() {
console.log("Composant avant premier affichage")
// ici aller chercher des données dans une source de données (ex: GET /api/restaurants)
}
Si vous avez récupéré le livre recommandé au début de cette section, il y a un chapitre qui s'intitule "Aller chercher les données" qui montre des exemples d'utilisation de fetch en React.
|
Powered by MindTouch Deki Open Source Edition v.8.08 |
