|
Master 2 INTENSE 2019-2020 : Frameworks JavaScript et Server-Side JavaScript BD NoSQL Cloud etc.
De $1
Table des matières- 1. Introduction
- 2. Séance 1 : état des lieux du développement Web, intro à VueJS
- 2.1. Avoir une vue de l'écosystème JavaScript (sites vus en cours)
- 2.2. Introduction à React
- 2.2.1. Exercices d'introduction, dans une IDE en ligne
- 2.2.2. Exercice à faire en vous aidant des exercices précédents:
- 2.2.3. Exercices avec un environnement "CLI"
- 3. Séance 2 : Utilisation de FireBase, une base de données basée cloud synchronisée
- 3.1.1. A FAIRE POUR SEANCE SUIVANTE :
- 4. Séance 3 : Node, MongoDB, cloud, Web Services RESTful
- 4.1. 1 - installation (si ce n'est pas déjà fait) de MongoDB et d'un outil d'administration
- 4.2. 2 - Exemple de client de ces WebServices, en pur HTML/CSS/JS et utilisation de l'API fetch
- 4.3. 3 - Ajouter le support "cross domain" à votre projet node/MongoDB
- 4.4. 4 - Heberger la base Mongo dans le cloud sur https://cloud.mongodb.com et modifier votre programme
- 4.5. 4 - quelques rappels sur les Promesses et async/await
- 4.6. 6 - A RENDRE POUR SEANCE SUIVANTE. Noté : développer un client qui fait le CRUD sur les restaurants, mais en React
- 5. Séance 4 Premiers pas avec Angular
- 5.1. 1 : création d'une application "squelette"
- 5.2. 2 : affichage d'une liste d'éléments
- 5.3. 3 : création d'un nouveau composant
- 5.4. 4 : définition d'un événement qui sera envoyé du composant "fils" vers le composant "père"
- 5.5. 5 : binding bi-directionnel avec [(ngModel)]="nom"
- 5.6. 6 : Completer l'exemple des hobbies complet, mais en angular
- 5.7. Séance 5 : démarrage du mini projet
- 5.8. Séance 6 : on continue le mini projet, hébergement sur Heroku
- 1. Introduction
- 2. Séance 1 : état des lieux du développement Web, intro à VueJS
- 2.1. Avoir une vue de l'écosystème JavaScript (sites vus en cours)
- 2.2. Introduction à React
- 2.2.1. Exercices d'introduction, dans une IDE en ligne
- 2.2.2. Exercice à faire en vous aidant des exercices précédents:
- 2.2.3. Exercices avec un environnement "CLI"
- 3. Séance 2 : Utilisation de FireBase, une base de données basée cloud synchronisée
- 3.1.1. A FAIRE POUR SEANCE SUIVANTE :
- 4. Séance 3 : Node, MongoDB, cloud, Web Services RESTful
- 4.1. 1 - installation (si ce n'est pas déjà fait) de MongoDB et d'un outil d'administration
- 4.2. 2 - Exemple de client de ces WebServices, en pur HTML/CSS/JS et utilisation de l'API fetch
- 4.3. 3 - Ajouter le support "cross domain" à votre projet node/MongoDB
- 4.4. 4 - Heberger la base Mongo dans le cloud sur https://cloud.mongodb.com et modifier votre programme
- 4.5. 4 - quelques rappels sur les Promesses et async/await
- 4.6. 6 - A RENDRE POUR SEANCE SUIVANTE. Noté : développer un client qui fait le CRUD sur les restaurants, mais en React
- 5. Séance 4 Premiers pas avec Angular
- 5.1. 1 : création d'une application "squelette"
- 5.2. 2 : affichage d'une liste d'éléments
- 5.3. 3 : création d'un nouveau composant
- 5.4. 4 : définition d'un événement qui sera envoyé du composant "fils" vers le composant "père"
- 5.5. 5 : binding bi-directionnel avec [(ngModel)]="nom"
- 5.6. 6 : Completer l'exemple des hobbies complet, mais en angular
- 5.7. Séance 5 : démarrage du mini projet
- 5.8. Séance 6 : on continue le mini projet, hébergement sur Heroku
Introduction
Dans ce cours nous allons voir plusieurs aspects du développement Web Moderne :
- Frameworks front end React, Angular, (VueJS a été vu l'an dernier)
- Server Side JavaScript : NodeJS et principaux packages
- Utilisation de la BD NoSQL MongoDB
- Utilisation de base de données dans le cloud adaptées aux applis mobiles (syncrhonisées) comme FireBase
- Hébergement dans le cloud, authentification via des services en ligne comme Oauth2
- Développement en mode PAAS (Platform As A Service)
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:
- Avec pur JavaScript + DOM API : http://jsbin.com/gaqugic/edit
- Avec des librairies comme jQuery et Lodash : http://jsbin.com/posowem/edit?html,js
- Avec VueJS (et API Rest) : http://jsbin.com/dizigehata/1/edit?h...console,output
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 à React
Supports de cours :
Exercices d'introduction, dans une IDE en ligne
On 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 :
- Créez un <div> et affichez dedans un composant Root avec React (l'App des exemples)
- Affichez un tableau de hobbies dans ce <div> (foot, tennis, jeux video, etc.) sous la forme d'une liste. Chaque hobby sera un <li>. Vous fournirez des hobbies par défaut.
- Ajoutez un bouton 'Nouveau Hobby' et un champ input pour saisir le nom du hobbie à rajouter. La liste doit se mettre à jour.
- Rendez les hobbies clickables pour qu'on puisse les supprimer
- Un message <p>Hobby supprimé !</p> devra apparaitre lorsqu'un hobby est supprimé
- Ajoutez un compteur de hobbies (<p>Hobbies: 4</p>) au-dessus de la liste des hobbies, qui indiquera le nombre de hobbies dans la liste.
- Vous changerez les styles CSS des éléments de la liste pour qu'ils s'affichent en rouge et vert à chaque ligne, en alternance. Vous utiliserez aussi des classes CSS dynamiques pour afficher le compteur en rouge si le nombre de hobbies est supérieur à trois, en vert sinon.
- Chaque <li>, chaque hobby, sera maintenant dans un composant <Hobby/>
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
- Vous devez avoir nodeJS correctement installé (node, npm, etc, tout ceci doit fonctionner...)
- Installez l'extension Google Chrome "React Developer Tools" (https://chrome.google.com/webstore/d...jfkapdkoienihi), elle existe aussi pour Firefox.
- Installez une bonne fenêtre terminal pour Windows -si vous êtes sous windows comme http://cmder.net/ ou autre (github bash, etc.) si je vous vois avec une fenêtre DOS basique vous allez m'entendre !
- Installer les packages "babel" et "emmet" si vous êtres sous Sublime Text 3 ou Atom. Ca doit etre ok pour Visual Studio Code, WebStorm etc.
- Ouvrir la ligne de commande et exécuter la commande "npm install -g create-react-app",
- Pour vérifier que ça fonctionne, créez un autre répertoire nommé "react_cli" et cd dedans,
- Executez "
create-react-app hello-world " (ça prend du temps, quelques minutes)... - Allez dans le répertoire créé (
cd hello-world ), et faites "npm install " (là aussi, quelques minutes) - Exécutez le programme en tapant "
npm start ", ça doit ouvrir automatiquement le browser sur le port 3000 et afficher une page avec le logo React qui tourne. - Editez le code du fichier
src/App.js , changez le texte et sauvez -> la page Web de l'application doit se rafraichir automatiquement. - Maintenant on va étudier le code, regardez les fichiers html, js, les configs etc.
- Essayez de modifier la partie "render" de App.js... hmmm ok. Bon, on va faire un simple composant
<Username name="toto"/> qu'on va mettre dans un sous répertoire "components" dans les sources, il va simplement afficher un nom passé en attribut/props dans un paragraphe en couleur. Vous ajouterez dans <App/> Plusieurs instances de ce composant.
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
- Voir demo du prof :-)
- Vous allez le faire vous-même:
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...
- addHobbies, removeHobbies...
Hints: vous pouvez utiliser l'opérateur ES6 ... pour cloner un objet. - render (il faudra itérer sur les propriétés d'un objet maintenant, excellent exercice !)
Hint: Object.keys(this.state.hobbies).map((key, index) => {... }
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
- Allez sur https://firebase.google.com/
- Cliquez sur "accèder à la console" ou "Get Started" selon la langue...
- Cliquez sur "+" pour ajouter un projet, appelez-le "React-INTENSE-hobbies" par exemple. Dans les fenêtres de dioaglogue ne cochez que la dernière case dans la première fenêtre, aucune dans la seconde.
- Cliquez à gauche sur "database" et créer une "realtime database". Pas le choix en haut de la fenêtre (FireCloud)
- Choisissez le mode "test" sans authentification.
- Cliquez sur "ignorer" pour virer le warning.
- Cliquez à gauche sur "Project Overview", et au milieu de la page sur "Ajouter Firebase à votre application Web", une fenêtre s'ouvre avec des bouts de JS. Voir cette image
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 :
- Regarder le livre sur React (celui sur les bases)
- Regarder https://material-ui.com le site de la librairie de composants graphiques pour react la plus populaire. Ici un livre pour démarrer .
- Essayer d'inclure cette librairie dans votre projet CLI et utiliser quelques composants graphiques pour le rendu.
Séance 3 : Node, MongoDB, cloud, Web Services RESTful
1 - installation (si ce n'est pas déjà fait) de MongoDB et d'un outil d'administration
Nous 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:
- Ouvrir une fenêtre de terminal et taper la commande "mongod"
- Si tout va bien, cela devrait afficher une liste de traces et ne pas rendre la main. Bravo, MongoDB est correctement installé.
- Si vous avez "command not found", vérifiez que 1) vous avez déjà installé MongoDB et 2) que votre variable PATH est correctement positionnée.
- Lancez un outil d'administration (peu importe celui que vous utilisez, l'outil officiel MongoDB Compass, ou un outil comme Studio 3T, ou un autre...)
- Vérifiez que vous avez encore la base de données de test des restaurants de l'année dernière, on va l'utiliser pour le TP... si ce n'est pas le cas, voici le fichier à importer: primer-dataset.json
Commande pour importer : -
2 - Exemple de client de ces WebServices, en pur HTML/CSS/JS et utilisation de l'API fetch
- Récupérez cette archive qui est une version modifiée de l'exercice précédent: TPRoutageExpressWithMongo3.zip
- Dezipper, allez dans le répertoire créé (
TPRoutageExpressWithMongo3 ) et faites "npm install " - Exécutez
node serverCrudWithMongo (ou nodemon) - Ouvrez localhost:8080
- Etudiez le code, regardez en particulier comment, quand on clique sur le premier bouton GET AJAX un tableau est construit dynamiquement.
3 - Ajouter le support "cross domain" à votre projet node/MongoDB
Ajouter 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 https://cloud.mongodb.com et modifier votre programme
- Allez sur cloud.mongodb.com et ouvrez un compte
- Suivez les instructions pour créer un cluster gratuit
- Suivez les instructions du prof (user admin/admin, autoriser tout le monde, etc.)
- Importez des données d'exemple (menu déroulant)
- Une fois le cluster créé, dans le menu déroulant, utiliser "command line tools" et regardez comment importer une base JSON
- Vous importerez en ligne de commande la base primer-dataset.json
- Lancez l'outil d'administration de MongoDB (atlas) et connectez-vous sur le cluster que vous venez de créér
- Regardez aussi à partir de la page "command line tools" comment vous connecter depuis votre application.
- Modifier le programme précédent (partie app-modules/crud-mongo.js) pour utiliser maintenant la BD située dans le cloud, sur mlabs.com. Attention vous devrez sans doute ouvrir un VPN ou utiliser votre téléphone en partgae de connexion car mlabs expose les BDs sur un port qui ne passe pas par unice-hotspot ou eduroam.
- Comment faire pour que votre programme travaille indifféremment sur cloud.mongodb.com ou en local sans le modifier ?
4 - quelques rappels sur les Promesses et async/await
6 - A RENDRE POUR SEANCE SUIVANTE. Noté : développer un client qui fait le CRUD sur les restaurants, mais en React
Vous allez créer un autre projet react, dans un autre répertoire, à l'aide de la commande create-react-app .
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
- Récupérez cette archive
- Dezippez-là
- Allez dans le répertoire et faites "npm install"
- Assurez-vous que MongoDB tourne (lancer mongod dans une fenêtre si ce n'est pas le cas)
- Exécutez "node serverCrudWithMongo.js"
- Ouvrez localhost:8080/tableVue.html
- Testez les fonctionnalités
- Regardez le code de tableVue.html pour une application VueJS assez "classique" réalisée sans utiliser le mode CLI de VueJS.
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() pour faire un fetch sur les restaurants avant l'affichage du composant principal (voit cycle de vie des composants React):
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.
Séance 4 Premiers pas avec Angular
Supports de cours :
1 : création d'une application "squelette"
-
Installer angular-cli : dans une fenêtre de terminal, tapez la commande "npm install -g @angular/cli " (éventuellement avec "sudo" avant si vous êtes sous Linux ou Mac OS) - Créez un répertoire "exo1Angular" et faites cd dans ce répertoire,
- Générez une application "squelette" angular en tapant la commande "
ng new angular-framework-intro " - Faites
cd angular-framework-intro et ouvrez visual studio code sur ce répertoire (commande "code . " sur Mac) - Faites
npm install pour installer les modules nécessaires (pour l'application et pour l'environnement de développement) - Exécutez le projet en lançant la commande
ng serve --open dans le répertoire - Ok, maintenant faites "view source" sur la page, que remarquez-vous ? Comparez avec React et VueJS... Qu'en déduisez-vous ? A propos, est-ce qu'on a installé une extension dans le browser ?
- Etudions maintenant la structure du projet....
2 : affichage d'une liste d'éléments
- Regardez le fichier
index.html , remarquez l'élément <app-root></app-root> , est-ce du HTML standard ? - Regardez les fichiers
src/app.component.ts , src/app.component.html et src/app.component.css - Modifiez le fichier de templates
app.components.html et faites ctrl-s, - Regardez le fichier app.module.ts, Angular va vous obliger à mettre à jour ce fichier très régulièrement.
- Maintenant on va effacer le contenu du fichier de template, et on va essayer d'afficher une liste d'éléments : CA SE PASSE EN LIVE CODING (une correction sera postée ici à la fin), utilisation de *ngFor (
<li *ngFor="let el of elements">...</li> si elements est la propriété du composant -un tableau de chaines de caractères-), un peu l'équivalent du v-for de VueJS. - Ajout d'un bouton pour ajouter un nouvel élément, utilisation de
(click)="expression" comme attribut, - Regardons comment afficher une ligne verte, une ligne rouge, etc. Utilisation de
[ngStyle]="{propriété CSS : expression}" , écrire une fonction getColor(element) comme dans les exemples qu'on avait fait avec VueJS et React, et l'appeler dans l'expression).
3 : création d'un nouveau composant
-
On va créer "manuellement" un nouveau composant intitulé "username", qui sera juste un<li> qui affichera la valeur de la propriété username. Pour cela, créer le fichier "app/username.component.ts, et il doit ressembler à cela. REMARQUE: vous pouvez utiliser la ligne de commande pour ajouter un nouveau composant: > ng generate component username
import { Component, Input } from "@angular/core";
@Component ({
selector: 'app-username',
template:`
<p>{{username}}</p>
`
})
export class UsernameComponent {
@Input() username :string;
}
Remarquez qu'on n'a pas utilisé ici de template html séparé, à la place on a mis le template directement sous forme de chaine de caractère entre les caractères `....`
Le @Input sert à définir une propriété qu'on pourra passer via des attributs HTML, c'est l'équivalent des "props" de VueJS et de React.
Maintenant, ajoutez des instances de ce composant dans le template app.components.html:
<app-username [username]="'Michel'"></app-username>
<app-username [username]="'John'"></app-username>
Regardez ce que cela donne....
Regardez aussi le fichier app.module.ts, le composant a été ajouté dans la liste des composants par la commande ng add component username.
Maintenant on veut pouvoir cliquer sur un nom et afficher un message dans le template du composant principal. On va faire comme en VueJS : envoyer un événement quand on clique sur le nom.
4 : définition d'un événement qui sera envoyé du composant "fils" vers le composant "père"
- Dans le composant (app/username/username.component.ts), définir un événement comme ceci:
export class UsernameComponent {
@Input() username :string;
@Output() userClicked = new EventEmitter<string>(); // définition d'un événement
onUsernameClicked() {
this.userClicked.emit(this.username); // émission de l'événément
}
}
Et dans le template (app/username/username.component.ts ) :
template:`
<p (click)="onUsernameClicked()">{{username}}</p>
`
Ainsi, dans le template du composant (app.component.html ) qui instancie ce composant, on pourra écouter l'événement "userClicked" :
<app-username [username]="'Michel1'" (userClicked)="onUserWasClicked($event)"></app-username>
<app-username [username]="'John'" (userClicked)="onUserWasClicked($event)"></app-username>
Et maintenant on peut écrire la méthode onUserWasClicked(username) dans app.component.ts :
onUserWasClicked(username: string) {
alert(username);
}
Testez l'application : en cliquant sur un nom, ça doit afficher une alerte avec la valeur associée.
5 : binding bi-directionnel avec [(ngModel)]="nom"
- Définissez un champs de saisie dans le template pour une propriété "nom" que vous ajouterez dans le fichier .ts de app.component.ts
- Dans le template, affichez la valeur de cette propriété en-dessous du champs de saisie.
- Tapez quelque chose dans le champ de saisie
- Plus simple qu'en React non ? Ca ressemble au v-model de VueJS non ?
ICI UNE CORRECTION DES ETAPES PRECEDENTES (exemple fait en live). Dezippez, cd dans le repertoire, npm install puis ng serve --open
6 : Completer l'exemple des hobbies complet, mais en angular
En vous aidant de l'exemple précédent :
- Ajouter un compteur de hobbies (<p>Nombre de Hobbies: ...</p>) au-dessus de la liste des hobbies
- Changez le style CSS du compteur, selon sa valeur: vert si moins de 3 hobbies, rouge sinon
- Transformez les éléments <li> en un composant réutilisable <app-hobby>
- On veut remplir les hobbies au démarrage de l'application en récupérant les hobbies au format JSON sur l'URL :
https://my-json-server.typicode.com/...ffa/hobbies/db (au passage, j'ai utilisé les services de jsonplaceholder.typicode.com pour servir un fichier json qui se trouve sur un de mes repository github). LIVE CODING AVEC LE PROF pour voir comment créer un service - Commande pour créer un service : "ng generate service hobby" (va créer le fichier hobby.service.ts et le fichier pour les tests)
- Pour aller récupérer le JSON des hobbies sur le WebService on va utiliser une méthode "simple" (angular propose aussi des méthodes plus complexes permettant de typer les données lorsqu'elles arrivent):
- Importez le module HttpClient en ajoutant "
import { HttpClient } from "@angular/common/http"; " en haut de votre fichier hobby.service.ts - Modifiez le code de la classe du service comme suit :
export class HobbyService { constructor(private http: HttpClient) {} getHobbies(): Promise<any> { // on va chercher par GET le fichier JSON sur un REST endpoint return this.http.get(this.url).toPromise(); } } - Modifiez le fichier app.module.ts pour rajouter le module "HttpClient" à l'application: import { HttpClientModule } from "@angular/common/http";
import { HobbyService } from "./hobby.service"; et ajoutez aussi le service HobbyService et ml module HttpClient e aussi à la directive @NgModule: @NgModule({ declarations: [AppComponent, UsernameComponent], imports: [BrowserModule, FormsModule, HttpClientModule], providers: [HobbyService], bootstrap: [AppComponent] }) - Enfin, dans le composant principal app.component.ts, qui affiche les hobbies, il faut aussi importer HobbyService:
import { HobbyService } from './hobby.service'; "Injecter le service" via le constructeur : // On "injecte le service" qui servira par la suite à // récupérer des données sur le Web constructor( private hobbyService: HobbyService) {} Indiquer qu'on va charger les hobbies avant d'afficher la liste : // Appelé lorsque le composant est créé ngOnInit(): void { this.getHobbies(); } et voici la méthode getHobbies() qui utilise le service, l'ajouter aussi au fichier getHobbies() { this.hobbyService.getHobbies().then(response => { this.hobbies = response.data; }); -
- Correction de cet exercice
- Au choix : suivre maintenant https://angular.io/tutorial
- Ou bien pour vous faire la main : afficher les restaurants de votre base MongoDB (juste les noms pour commencer) à la place des hobbies... à partir de l'exemple fait en cours sur les hobbies...
- Si vous avez des soucis de cross origin, ajouter ces lignes dans le fichier serverCrodWithMongo.js d'un des TPs précédents, après les autres lignes de la configuration express qui font des app.use...
-
// Pour autoriser le cross origin 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(); });
Séance 5 : démarrage du mini projet
Sujet du mini projet : outil de visualisation de données musicales
Il reste 6 séances (à vérifier), la dernière étant celle de présentation des projets, le 10/12. Il se peut que deux séances qui sont à déplacer arrivent un peu tard... préparez-vous psychologiquement à une remise dans ces eaux-là.
Séance 6 : on continue le mini projet, hébergement sur Heroku
Ici des exemples de projets prêts à être hébergés sur Heroku. Lire les README.txt de chaque projet.
|