WEBVTT

00:00:01.584 --> 00:00:05.150
Salut, je suis James Long et je vais vous présenter Mortar.

00:00:06.230 --> 00:00:07.915
Mortar est un ensemble de modèles de projets

00:00:07.915 --> 00:00:10.417
destinés à débuter rapidement l'écriture d'une appli Web.

00:00:10.417 --> 00:00:13.098
Pour commencer, allez sur le site pour développeurs

00:00:13.098 --> 00:00:17.212
marketplace.firefox.com/developers.

00:00:17.212 --> 00:00:18.882
Cliquez sur "Build your app"

00:00:20.451 --> 00:00:24.118
puis sur "App Templates".

00:00:24.118 --> 00:00:27.179
Voici la liste des modèles disponibles

00:00:27.179 --> 00:00:30.553
et des instructions pour les installer.

00:00:30.553 --> 00:00:33.052
Il y a également un lien vers le dépôt contenant Mortar sur Github,

00:00:33.052 --> 00:00:36.886
qui contient tous les modèles disponibles comme des sous-projets.

00:00:36.886 --> 00:00:41.728
Il y a les modèles app-stub, game-stub, une liste et un affichage à onglets.

00:00:41.728 --> 00:00:44.318
Vous trouverez sur le site les instructions pour les installer

00:00:44.318 --> 00:00:48.052
et d'autres informations à leur sujet.

00:00:48.052 --> 00:00:50.970
Je vais commencer à partir d'ici.

00:00:50.970 --> 00:00:54.536
App Stub est un modèle minimaliste avec quelques fonctionnalités déjà branchées

00:00:54.536 --> 00:00:56.681
Voici à quoi il ressemble lorsque vous l'installez.

00:00:56.681 --> 00:00:58.781
Il n'y a qu'un bouton pour installer l'application

00:00:59.842 --> 00:01:02.543
En regardant le fichier index.html, on voit qu'il ne contient pas grand chose,

00:01:02.543 --> 00:01:05.851
juste le nécessaire : un peu de HTML,

00:01:05.851 --> 00:01:10.932
le bouton d'installation et la bibliothèque Require.js

00:01:10.932 --> 00:01:14.368
Si vous ne connaissez pas Require.js, allez faire un tour sur RequireJS.org.

00:01:14.368 --> 00:01:18.515
C'est un système de gestion de modules en JavaScript.

00:01:18.515 --> 00:01:22.661
Le modèle contient également un fichier manifest.webapp pré-renseigné

00:01:22.661 --> 00:01:25.693
et qu'il vous suffit de compléter

00:01:25.693 --> 00:01:28.785
Ces fichiers sont dans le dossier www.

00:01:28.785 --> 00:01:32.102
En retournant à la racine du projet, vous verrez d'autres dossiers et fichiers.

00:01:32.102 --> 00:01:36.215
Les dossiers node_modules et tools contiennent essentiellement des fichiers pour Volo_

00:01:36.215 --> 00:01:38.798
Tous vos fichiers seront dans www,

00:01:38.798 --> 00:01:41.863
les autres fichiers ne sont pas directement utiles.

00:01:41.863 --> 00:01:44.626
La plupart du temps vous travaillerez dans www.

00:01:44.626 --> 00:01:49.995
Une autre chose à savoir est que le modèle embarque Volo, que je vais vous montrer

00:01:49.995 --> 00:01:52.801
Volo est un outil de gestion de projets Web.

00:01:52.801 --> 00:01:54.151
Il est écrit en node.js.

00:01:54.151 --> 00:01:57.167
Si vous n'avez pas node vous allez devoir l'installer, mais c'est simple.

00:01:57.167 --> 00:02:02.786
Il suffit d'aller sur nodejs.org, cliquer sur Install et récupérer l'exécutable. Une fois que Node est installé,

00:02:02.786 --> 00:02:08.368
il suffit de taper "npm install -g volo".

00:02:08.368 --> 00:02:12.583
Cela va installer volo globalement.

00:02:12.583 --> 00:02:14.398
Voici quelques commandes Volo dont vous pourriez avoir besoin :

00:02:14.398 --> 00:02:15.937
volo create est l'une delle.

00:02:15.937 --> 00:02:18.146
Elle prend en paramètres le nom de votre application

00:02:18.146 --> 00:02:27.468
et une référence Github ou l'URL d'un modèle comme le brouillon d'application.

00:02:27.468 --> 00:02:29.512
et crée l'arborescence d'une application à partir de ce modèle.

00:02:29.512 --> 00:02:33.816
C'est une méthode rapide pour créer des applications basées sur les modèles Mortar.

00:02:33.816 --> 00:02:39.245
Voilà, à présent nous pouvons faire un cd dans le dossier de l'application

00:02:39.245 --> 00:02:42.147
Une autre commande utile est volo serve

00:02:42.147 --> 00:02:44.338
Elle lance un serveur local

00:02:44.338 --> 00:02:51.285
qui vous permet de voir votre application dans un navigateur

00:02:51.285 --> 00:02:56.182
volo add ajoute des dépendances JavaScript.

00:02:56.182 --> 00:03:04.256
Par exemple pour utiliser Zepto tapez volo add zepto

00:03:04.256 --> 00:03:07.317
En allant dans le dossier js/lib vous y trouverez zepto.

00:03:10.132 --> 00:03:14.663
On peut à présent ajouter un require('zepto') au fichier app.js

00:03:14.663 --> 00:03:25.770
En fait il y est déjà, assurons-nous juste qu'il trouve Zepto

00:03:26.970 --> 00:03:28.818
Et voilà

00:03:28.818 --> 00:03:31.598
Vous remarquerez qu'on inclut Zepto avec la fonction require

00:03:31.598 --> 00:03:33.605
parce que nous utilisons require.js.

00:03:33.605 --> 00:03:37.731
De ce fait, toutes les bibliothèques doivent être définies comme des modules

00:03:37.731 --> 00:03:40.030
On utilise pour cela la fonction define().

00:03:40.030 --> 00:03:43.799
Mais que se passe-t-il si vous voulez utiliser une bibliothèque tierce qui n'est pas un module ?

00:03:43.799 --> 00:03:48.068
volo add peut encapsuler automatiquement une bibliothèque.

00:03:48.068 --> 00:03:54.550
Par exemple, si vous voulez inclure cette bibliothèque de gestion de fontes, vous pouvez passer son URL à volo add.

00:03:54.550 --> 00:03:59.654
Volo détecte qu'elle n'utilise pas de modules et vous demande quelles sont ses dépendances,

00:03:59.654 --> 00:04:02.832
et quelle variable globale vous voulez exposer.

00:04:02.832 --> 00:04:11.500
en fait, il modifie un objet jQuery pour qu'il n'exporte rien, mais on peut ignorer ça.

00:04:11.500 --> 00:04:13.823
À présent je peux utiliser la bibliothèque jQuery Flot avec require.

00:04:13.823 --> 00:04:18.263


00:04:18.263 --> 00:04:24.765
Notez que je ne me soucie pas de la valeur de retour

00:04:24.765 --> 00:04:28.083
Il y a deux commandes volo à essayer absolument.

00:04:28.083 --> 00:04:30.749
volo build crée une version optimisée de votre application.

00:04:30.749 --> 00:04:34.969
Il concatène et compresse tous les fichiers CSS et JavaScript

00:04:36.599 --> 00:04:40.587
et les place dans le dossier www-build.

00:04:40.587 --> 00:04:44.037
Tapez ensuite volo ghdeploy

00:04:44.037 --> 00:04:47.484
La première fois, il vous demande le nom du dépôt où déployer.

00:04:48.899 --> 00:04:51.746
S'il n'existe pas,

00:04:51.746 --> 00:04:54.632
il va le créer et déployer l'application sur Github Pages.

00:04:54.632 --> 00:04:59.055


00:04:59.055 --> 00:05:07.057
C'est tout, je peux aller sur mon appli sur Github et elle fonctionne !

00:05:07.057 --> 00:05:10.885
Notez l'URL où c'est hébergée sur Github.

00:05:10.885 --> 00:05:13.832
En 10 secondes, j'ai pu déployer mon application.

00:05:13.832 --> 00:05:16.158
Cela fonctionne que le dépôt existe ou pas,

00:05:16.158 --> 00:05:20.343
puis ça pousse l'application dans la branche gh-pages.

00:05:20.343 --> 00:05:22.988
Voilà, c'est tout pour Volo

00:05:22.988 --> 00:05:25.308
Il y a également un modèle de jeu.

00:05:25.308 --> 00:05:29.490
Si vous y jetez un œil, vous verrez qu'il contient un jeu très simple

00:05:29.490 --> 00:05:32.082
qui vous permet de contrôler une boîte avec les touches fléchées.

00:05:32.082 --> 00:05:34.897
C'est encore très basique, mais si vous regardez le code,

00:05:34.897 --> 00:05:41.676
il contient une boucle de jeu complète, et une très utile bibliothèque de gestion des entrées.

00:05:41.676 --> 00:05:46.181
Ce qui aide beaucoup.

00:05:46.181 --> 00:05:51.371
Il y a également une fonction de rendu et une fonction principale qui contient la boucle principale du jeu.

00:05:58.308 --> 00:06:01.398
Ce modèle aide à créer un jeu basique.

00:06:01.398 --> 00:06:03.775
Les 2 derniers modèles permettent de créer des listes et des vues par onglets.

00:06:03.775 --> 00:06:09.078
Ils contiennent la même chose que le modèle App Stub,

00:06:09.078 --> 00:06:10.946
plus une bibliothèque avec des composants d'interface

00:06:10.946 --> 00:06:16.524
Voici le modèle liste détaillée.

00:06:16.587 --> 00:06:19.321
C'est ce que vous voyez lorsque vous l'installez. C'est une application fonctionnelle avec une liste et des vues détaillées.

00:06:19.321 --> 00:06:22.015
Vous avez une liste d'items, sur lesquels vous pouvez cliquer pour en voir le détail.

00:06:27.675 --> 00:06:30.227
ous pouvez les éditer,

00:06:30.227 --> 00:06:31.980
vos modifications sont prises en compte,

00:06:31.980 --> 00:06:35.086
et la liste rafraichie.

00:06:45.948 --> 00:06:47.874
Vous pouvez également ajouter de nouveaux items

00:06:47.874 --> 00:06:48.748
Et voilà !

00:06:48.748 --> 00:06:55.184
Vous trouverez plus de détails sur la bibliothèque d'interface

00:06:55.184 --> 00:06:59.059
dans le projet Mortar Layouts, dont le lien est dans le fichier README.

00:06:59.059 --> 00:07:04.071
Il implémente cette interface utilisateur

00:07:04.071 --> 00:07:06.631
et décrit comment l'utiliser et la modifier.

00:07:06.631 --> 00:07:09.354
Je vais vous montrer comment l'écran d'affichage détaillé l'utilise.

00:07:09.354 --> 00:07:12.482
Voici le fichier index.html.

00:07:12.482 --> 00:07:18.902
Il y a deux balises spécifiques, x-view et x-listview.

00:07:18.902 --> 00:07:24.487
x-listview implémente une structure listview, qui implémente un élément avec un en-tête et un pied de page,

00:07:24.487 --> 00:07:28.499
et vous pouvez mélanger ces vues, en mettre une à l'intérieur de l'autre.

00:07:28.499 --> 00:07:35.802
Il y a également des attributs spécifiques, comme data-view sur un bouton,

00:07:35.807 --> 00:07:40.790
qui déclenche l'affichage d'une vue lorsque le bouton est pressé. Sa valeur est un sélecteur CSS.

00:07:40.790 --> 00:07:43.666
Vous trouverez plus d'informations dans le dépôt de Mortar Layouts.

00:07:43.666 --> 00:07:46.608
L'autre modèle est la vue par onglets,

00:07:46.608 --> 00:07:50.990
qui est très similaire à la vue par liste, seul le HTML change un peu.

00:07:50.990 --> 00:07:54.042
Il comporte une vue de liste comme le précédent,

00:07:54.042 --> 00:07:58.101
mais elle est imbriquée dans la vue principale, qui comporte plusieurs sections,

00:07:58.194 --> 00:08:03.590
pour simuler des onglets. Donc, si vous entrez là et consultez cet item,

00:08:03.590 --> 00:08:04.983
puis changez de section,

00:08:04.983 --> 00:08:10.910
vous remarquerez qu'il mémorise où j'étais et que je peux y revenir.

00:08:11.306 --> 00:08:14.205
Tout cela est inclus dans la bibliothèque Mortar Layouts.

00:08:15.220 --> 00:08:17.304
Voilà, si vous avez des problèmes,

00:08:17.304 --> 00:08:19.159
n'hésitez pas àcréer des tickets sur Github.

00:08:19.558 --> 00:08:21.001
Merci de votre attention !