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 author − will be replaced by the title
