diff --git a/cours-08.html b/cours-08.html new file mode 100644 index 0000000..d7b4ec2 --- /dev/null +++ b/cours-08.html @@ -0,0 +1,252 @@ + + + + + + + Programmation Web Avancée   vue-resource, vuex + + + + + + + + + + + + + + + + + +
+ +
Please wait, while our marmots are preparing the hot chocolate…
+ +
+ +# @chunk: chunks/title.md + +# Questions ?
Commentaires ? {no-print} + +# @chunk: chunks/objectives.md + +## Programmation Web Avancée {var-cours-n} : Plan {#plan overview} +- Questions Vue ? {rappelvue} +- Questions REST ? {rappelrest} +- Client REST JSON en Vue {restjs} +- Écosystème vue {vueeco} +# @copy:#plan + + + + +# @copy:#plan: %+class:inred: .rappelvue + +## Pourquoi Vue ? (dans ce cours) {libyli} +- Framework intéressant + - complet + - utilisé + - documentations dans plusieurs languages +- vs Angular + - 2 versions d'Angular + - Angular utilise typescript (proche de Spring etc) + - nous voulons apprendre/pratiquer javascript +- vs React.js + - react troublant avec : JSX, CSS, objet JS + - problème de licence dans React ? + - hum... août 2017 _ + - ok (MIT) en septembre 2017 + +# slides précédents {no-print} + + +# @copy:#plan: %+class:inred: .rappelrest + +# slides précédents {no-print} + + + +# @copy:#plan: %+class:inred: .restjs + +# Accès à l'API github avec Vue + +## Accès « REST » avec Vue et vue-resource {libyli} +- En *vue*, utilisation de `vue-resource` + - inclure `vue-resource.js` l'intègre automatiquement dans vue + - une fonction pour chaque *méthode* + - HTTP (GET⇒get(), DELETE⇒delete(), ..., POST⇒save()) + - utilisation de « promesses » (*promises*) +- Mode 1: `this.$http` +```javascript + this.$http.get('https://......../1') + .then(response => { + // OK: get body data from response.body + }, response => { + // ERROR: ... + }); +{slide dense} +``` +- Mode 2: constructeur `this.$resource` (configurable) +```javascript + var r = this.$resource('http://........{/id}') + r.get({id: 1}).then(response => { + // OK: get body data + }, response => { + // ERROR: ... + }); +{slide dense} +``` + +## Accès à l'API github avec Vue {libyli} +- API Github (v3) + - infos d'un utilisateur : + - `https://api.github.com/users/???????` {no} + - dépots d'un utilisateur : + - `https://api.github.com/users/???????/repos` {no} + - dépots en particulier : + - `https://api.github.com/repos/??USER??/??REPO??` {no} + - ... +- C'est parti ! {libyli} + - inclure vue et vue-resource + - récupérer les infos d'une repository + - afficher ces infos + - `name`, `description`, `owner` (`login`, `avatar_url`) + - un « cache » dans le « local storage » + - `JSON.parse(localStorage.getItem('....'))` + - `localStorage.setItem('....', JSON.stringify(...))` + +## Accès à l'API github avec Vue (Suite) {libyli} +- C'est l'heure du picnic ! +- Un composant `repo` +- Un composant `user` ? +- Plusieurs utilisateurs // USERS: "tifa90 SachaCo Tsompani BelaihouMohamed AbdelilahChet Kahi-Na MNour7 SouleymaneNianfo Touaibia khameds Raiden70 DavyUVD dimitribruyere Echyx ChrisJeamme" + - requêtes en parallèle + - `Promise.all(...)` +- Multicolonnes + - `columns: 4 ; column-rule: 1px solid black` + +## Accès à notre server Spring {libyli} +- Rappel : hotels + - entité Hotel (name, nrooms), repository + - accessible en « REST » JSON sur `/api`, par ex, GET `/api/hotels` +```javascript +{ + "_embedded": { + "hotels": [ + { + "name": "ibis", + ... +{slide denser} +``` +- TODO : ajouter des données (sur `/data`) +- Un client en Vue (afficher la liste) + - NB: client sur une autre url : *Cross-origin resource sharing* (CORS) + - CORS: 2 solutions, cf stackoverflow + - CORS: solution concise : ajouter `@CrossOrigin("*")` à la repo +- Ajout depuis Vue + - binding `newHotel: {name: "H", nrooms: 10}{}` + - POST ⇒ `.save(...)` + +## Accès à notre server Spring (suite) {libyli} +- Ajout : ne pas devoir rafraichir + - ajout direct, validation/invalidation selon la requête + - astuces JS + Vue (changer et **rafraichir**) +```javascript +# js : copier un objet et changer/ajouter des propriétées +var nouv = {...existant, nouvprop: 'bidule'}; + +# modifier un élément d une liste +nouv.truc = "machin" +this.hotels = [...this.hotels] + +# ajouter dans une liste +this.hotels = [...this.hotels, nouv] + +# enlever d une liste +this.hotels = this.hotels.filter(h => h!==nouv) + +# remplacer dans une liste +this.hotels = this.hotels.map(h => h!==nouv ? h : nouvnouv) +{slide dense} +``` +- Supprimer un hotel + - HATEOAS : `...$http.delete(h._links.self.href)` + + +# @copy:#plan: %+class:inred: .vueeco + +## Aller plus loin avec Vue {libyli} +- Vue cli (command line interface) + - https://vuejs.org/v2/guide/installation.html#CLI + - pour générer des projets à partir de templates + - et outils js « usine à gaz » (webpack, babel, ...) +- Vue router + - https://router.vuejs.org/en/ + - https://router.vuejs.org/fr/ +- Vuex + - https://vuex.vuejs.org/en/ + - https://vuex.vuejs.org/fr/ +- Applications natives avec Vue.js ? + - Weex https://weex.incubator.apache.org/ + - Nativescript+Vue https://nativescript-vue.org/ + + + + + +
+ + +

/ will be replaced by the authorwill be replaced by the title

+ + + + + +
+ + + + + + + + + + + diff --git a/index.html b/index.html index e51f6f1..4772ca9 100644 --- a/index.html +++ b/index.html @@ -51,6 +51,8 @@ Slides GIT
(not so standalone)
Code
(https, secu, users)
Slides 6
DI, Security, JS
+ Slides 7
Vue, Rest
+ Slides 8
Vue, github, hotels, etc

Code des séances

@@ -60,6 +62,7 @@ +