 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 09:52, 27 Sep 2019 par MichelBuffa
Master 2 INTENSE 2019-2020 : Frameworks JavaScript et Server-Side JavaScript BD NoSQL Cloud etc.De $1IntroductionDans 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 :
|
Powered by MindTouch Deki Open Source Edition v.8.08 |
