Commit d6a497a357800f75aefe96abbae999fbf786034a

Authored by Rémi Emonet
1 parent 457a34c4c3
Exists in master

pub cm8

Showing 3 changed files with 255 additions and 0 deletions

cours-08.html View file @ d6a497a
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <meta charset="utf-8">
  5 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 +
  7 + <title>Programmation Web Avancée   vue-resource, vuex</title>
  8 + <meta name="cours-n" content="8">
  9 +
  10 + <meta name="author" content="Rémi Emonet">
  11 + <meta name="venue" content="PWA M1 DSC">
  12 + <meta name="date" content="2017">
  13 + <meta name="affiliation" content="Université Jean Monnet − Laboratoire Hubert Curien">
  14 +
  15 + <style type="text/css">
  16 + .slide.densish>ul {font-size: 70%;}
  17 + .commented-fs p {margin: 1em; }
  18 + .frflag {
  19 + background-image: url(media/frflag.svg);
  20 + width: 1em;
  21 + height: .75em;
  22 + display: inline-block;
  23 + background-size: contain;
  24 + }
  25 + </style>
  26 +
  27 + <!--
  28 + <script src="deck.js/extensions/includedeck/load.js"></script>
  29 + <script src="extensions/slides-dev.js"></script>
  30 + -->
  31 + <script src="extensions/deck-packed.js"></script>
  32 + <script src="extensions/slides.js"></script>
  33 + <script>go()</script>
  34 + </head>
  35 +
  36 +<body>
  37 +
  38 +<div class="deck-container">
  39 +
  40 + <div class="deck-loading-splash" style="background: black; color: chartreuse;"><span class="vcenter" style="font-size: 30px; font-family: Arial; ">Please wait, while our marmots are preparing the hot chocolate…</span></div>
  41 +
  42 +<section class="smart">
  43 +
  44 +# @chunk: chunks/title.md
  45 +
  46 +# Questions ? <br/> Commentaires ? {no-print}
  47 +
  48 +# @chunk: chunks/objectives.md
  49 +
  50 +## Programmation Web Avancée <span>{var-cours-n}</span> : Plan {#plan overview}
  51 +- Questions Vue ? {rappelvue}
  52 +- Questions REST ? {rappelrest}
  53 +- Client REST JSON en Vue {restjs}
  54 +- Écosystème vue {vueeco}
  55 +# @copy:#plan
  56 +
  57 +
  58 +
  59 +<!-- ################################### -->
  60 +# @copy:#plan: %+class:inred: .rappelvue
  61 +
  62 +## Pourquoi Vue ? (dans ce cours) {libyli}
  63 +- Framework intéressant
  64 + - complet
  65 + - utilisé
  66 + - documentations dans plusieurs languages
  67 +- vs Angular
  68 + - 2 versions d'Angular
  69 + - Angular utilise typescript (proche de Spring etc)
  70 + - nous voulons apprendre/pratiquer javascript
  71 +- vs React.js
  72 + - react troublant avec : JSX, CSS, objet JS
  73 + - problème de licence dans React ?
  74 + - hum... <a href="https://code.facebook.com/posts/112130496157735/explaining-react-s-license/">août 2017</a> <a href="raw/cache-react-aout-2017.txt">_</a>
  75 + - ok (MIT) en <a href="https://github.com/facebook/react/commit/b765fb25ebc6e53bb8de2496d2828d9d01c2774b#diff-9879d6db96fd29134fc802214163b95a">septembre 2017</a>
  76 +
  77 +# <a href="cours-07.html#slide-38" target="_blank">slides précédents</a> {no-print}
  78 +
  79 +<!-- ################################### -->
  80 +# @copy:#plan: %+class:inred: .rappelrest
  81 +
  82 +# <a href="cours-07.html#slide-88" target="_blank">slides précédents</a> {no-print}
  83 +
  84 +
  85 +<!-- ################################### -->
  86 +# @copy:#plan: %+class:inred: .restjs
  87 +
  88 +# Accès à l'API github avec Vue
  89 +
  90 +## Accès « REST » avec Vue et vue-resource {libyli}
  91 +- En *vue*, utilisation de `vue-resource`
  92 + - inclure `vue-resource.js` l'intègre automatiquement dans vue
  93 + - une fonction pour chaque *méthode*
  94 + - HTTP (GET⇒get(), DELETE⇒delete(), ..., POST⇒save())
  95 + - utilisation de « promesses » (*promises*)
  96 +- Mode 1: `this.$http`
  97 +```javascript
  98 + this.$http.get('https://......../1')
  99 + .then(response => {
  100 + // OK: get body data from response.body
  101 + }, response => {
  102 + // ERROR: ...
  103 + });
  104 +{slide dense}
  105 +```
  106 +- Mode 2: constructeur `this.$resource` (configurable)
  107 +```javascript
  108 + var r = this.$resource('http://........{/id}')
  109 + r.get({id: 1}).then(response => {
  110 + // OK: get body data
  111 + }, response => {
  112 + // ERROR: ...
  113 + });
  114 +{slide dense}
  115 +```
  116 +
  117 +## Accès à l'API github avec Vue {libyli}
  118 +- API Github (v3)
  119 + - infos d'un utilisateur :
  120 + - `https://api.github.com/users/???????` {no}
  121 + - dépots d'un utilisateur :
  122 + - `https://api.github.com/users/???????/repos` {no}
  123 + - dépots en particulier :
  124 + - `https://api.github.com/repos/??USER??/??REPO??` {no}
  125 + - ...
  126 +- C'est parti ! {libyli}
  127 + - inclure vue et vue-resource
  128 + - récupérer les infos d'une repository
  129 + - afficher ces infos
  130 + - `name`, `description`, `owner` (`login`, `avatar_url`)
  131 + - un « cache » dans le « local storage »
  132 + - `JSON.parse(localStorage.getItem('....'))`
  133 + - `localStorage.setItem('....', JSON.stringify(...))`
  134 +
  135 +## Accès à l'API github avec Vue (Suite) {libyli}
  136 +- C'est l'heure du picnic !
  137 +- Un composant `repo`
  138 +- Un composant `user` ?
  139 +- Plusieurs utilisateurs // USERS: "tifa90 SachaCo Tsompani BelaihouMohamed AbdelilahChet Kahi-Na MNour7 SouleymaneNianfo Touaibia khameds Raiden70 DavyUVD dimitribruyere Echyx ChrisJeamme"
  140 + - requêtes en parallèle
  141 + - `Promise.all(...)`
  142 +- Multicolonnes
  143 + - `columns: 4 ; column-rule: 1px solid black`
  144 +
  145 +## Accès à notre server Spring {libyli}
  146 +- Rappel : hotels
  147 + - entité Hotel (name, nrooms), repository
  148 + - accessible en « REST » JSON sur `/api`, par ex, GET `/api/hotels`
  149 +```javascript
  150 +{
  151 + "_embedded": {
  152 + "hotels": [
  153 + {
  154 + "name": "ibis",
  155 + ...
  156 +{slide denser}
  157 +```
  158 +- TODO : ajouter des données (sur `/data`)
  159 +- Un client en Vue (afficher la liste)
  160 + - NB: client sur une autre url : *Cross-origin resource sharing* (<a target="_blank" href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>)
  161 + - CORS: 2 solutions, cf <a href="https://stackoverflow.com/questions/31724994/spring-data-rest-and-cors/42403956#42403956" target="_blank">stackoverflow</a>
  162 + - CORS: solution concise : ajouter `@CrossOrigin("*")` à la repo
  163 +- Ajout depuis Vue
  164 + - binding `newHotel: {name: "H", nrooms: 10}{}`
  165 + - POST ⇒ `.save(...)`
  166 +
  167 +## Accès à notre server Spring (suite) {libyli}
  168 +- Ajout : ne pas devoir rafraichir
  169 + - ajout direct, validation/invalidation selon la requête
  170 + - astuces JS + Vue (changer et **rafraichir**)
  171 +```javascript
  172 +# js : copier un objet et changer/ajouter des propriétées
  173 +var nouv = {...existant, nouvprop: 'bidule'};
  174 +
  175 +# modifier un élément d une liste
  176 +nouv.truc = "machin"
  177 +this.hotels = [...this.hotels]
  178 +
  179 +# ajouter dans une liste
  180 +this.hotels = [...this.hotels, nouv]
  181 +
  182 +# enlever d une liste
  183 +this.hotels = this.hotels.filter(h => h!==nouv)
  184 +
  185 +# remplacer dans une liste
  186 +this.hotels = this.hotels.map(h => h!==nouv ? h : nouvnouv)
  187 +{slide dense}
  188 +```
  189 +- Supprimer un hotel
  190 + - HATEOAS : `...$http.delete(h._links.self.href)`
  191 +
  192 +<!-- ################################### -->
  193 +# @copy:#plan: %+class:inred: .vueeco
  194 +
  195 +## Aller plus loin avec Vue {libyli}
  196 +- Vue cli (command line interface)
  197 + - <a href="https://vuejs.org/v2/guide/installation.html#CLI" target="_blank">https://vuejs.org/v2/guide/installation.html#CLI</a>
  198 + - pour générer des projets à partir de templates
  199 + - et outils js « usine à gaz » (webpack, babel, ...)
  200 +- Vue router
  201 + - <a href="https://router.vuejs.org/en/" target="_blank">https://router.vuejs.org/en/</a>
  202 + - <a href="https://router.vuejs.org/fr/" target="_blank">https://router.vuejs.org/fr/</a> <span class="frflag"/>
  203 +- Vuex
  204 + - <a href="https://vuex.vuejs.org/en/" target="_blank">https://vuex.vuejs.org/en/</a>
  205 + - <a href="https://vuex.vuejs.org/fr/" target="_blank">https://vuex.vuejs.org/fr/</a> <span class="frflag"/>
  206 +- Applications natives avec Vue.js ?
  207 + - Weex <a href="https://weex.incubator.apache.org/">https://weex.incubator.apache.org/</a>
  208 + - Nativescript+Vue <a href="https://nativescript-vue.org/">https://nativescript-vue.org/</a>
  209 +
  210 +
  211 +
  212 +
  213 +
  214 +</section>
  215 +
  216 + <!-- deck.status snippet -->
  217 + <p class="deck-status deck-progress-10"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> − <span class="var-author">will be replaced by the author</span> − <span class="var-title">will be replaced by the title</span></p>
  218 +
  219 + <a data-progress-size=": spe.top(15, 555); height: 45*designRatio; left: slide.right - 90*designRatio; width: 90*designRatio" class="ccby" href="http://en.wikipedia.org/wiki/Creative_Commons_license" title="This work is under CC-BY licence." target="_blank"></a>
  220 +
  221 + <a class="ujm" data-progress-size=": spe.top(15, 525); height: 65*designRatio; left: slide.left; width: 130*designRatio" target="_blank"></a>
  222 +
  223 +</div>
  224 +<!-- clicky Cla -->
  225 +<script type="text/javascript">
  226 +var clicky_site_ids = clicky_site_ids || [];
  227 +clicky_site_ids.push(100779706);
  228 +(function() {
  229 + var s = document.createElement('script');
  230 + s.type = 'text/javascript';
  231 + s.async = true;
  232 + s.src = '//static.getclicky.com/js';
  233 + ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
  234 +})();
  235 +</script>
  236 +<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>
  237 +
  238 +
  239 +<!-- Histats.com START (aync)-->
  240 +<script type="text/javascript">var _Hasync= _Hasync|| [];
  241 +_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
  242 +_Hasync.push(['Histats.fasi', '1']);
  243 +_Hasync.push(['Histats.track_hits', '']);
  244 +(function() {
  245 +var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
  246 +hs.src = ('http://s10.histats.com/js15_as.js');
  247 +(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
  248 +})();</script>
  249 +<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
  250 +<!-- Histats.com END -->
  251 +</body>
  252 +</html>
... ... @@ -51,6 +51,8 @@
51 51 <a class="tile" href="cours-git.html">Slides GIT <br/> (not so standalone)</a>
52 52 <a class="tile" href="raw/https-secu-utilisateurs.zip">Code <br/> (https, secu, users)</a>
53 53 <a class="tile" href="cours-06.html">Slides 6 <br/> DI, Security, JS</a>
  54 + <a class="tile" href="cours-07.html">Slides 7 <br/> Vue, Rest</a>
  55 + <a class="tile" href="cours-08.html">Slides 8 <br/> Vue, github, hotels, etc</a>
54 56 </div>
55 57  
56 58 <h2>Code des séances</h2>
... ... @@ -60,6 +62,7 @@
60 62 <a class="tile" data-code-date="10-13"></a>
61 63 <a class="tile" data-code-date="10-20-js"></a>
62 64 <a class="tile" data-code-date="10-20-api"></a>
  65 + <a class="tile" data-code-date="10-27"></a>
63 66 </div>
64 67 <!--
65 68 <a href="raw/cours-2.zip">Fichiers HTML et CSS du cours</a>
raw/Cours-20171027.zip View file @ d6a497a

No preview for this file type