1
00:00:01,584 --> 00:00:05,150
Salut, je suis James Long et je vais vous présenter Mortar.

2
00:00:06,230 --> 00:00:07,915
Mortar est un ensemble de modèles de projets

3
00:00:07,915 --> 00:00:10,417
destinés à débuter rapidement l'écriture d'une appli Web.

4
00:00:10,417 --> 00:00:13,098
Pour commencer, allez sur le site pour développeurs

5
00:00:13,098 --> 00:00:17,212
marketplace.firefox.com/developers.

6
00:00:17,212 --> 00:00:18,882
Cliquez sur "Build your app"

7
00:00:20,451 --> 00:00:24,118
puis sur "App Templates".

8
00:00:24,118 --> 00:00:27,179
Voici la liste des modèles disponibles

9
00:00:27,179 --> 00:00:30,553
et des instructions pour les installer.

10
00:00:30,553 --> 00:00:33,052
Il y a également un lien vers le dépôt contenant Mortar sur Github,

11
00:00:33,052 --> 00:00:36,886
qui contient tous les modèles disponibles comme des sous-projets.

12
00:00:36,886 --> 00:00:41,728
Il y a les modèles app-stub, game-stub, une liste et un affichage à onglets.

13
00:00:41,728 --> 00:00:44,318
Vous trouverez sur le site les instructions pour les installer

14
00:00:44,318 --> 00:00:48,052
et d'autres informations à leur sujet.

15
00:00:48,052 --> 00:00:50,970
Je vais commencer à partir d'ici.

16
00:00:50,970 --> 00:00:54,536
App Stub est un modèle minimaliste avec quelques fonctionnalités déjà branchées

17
00:00:54,536 --> 00:00:56,681
Voici à quoi il ressemble lorsque vous l'installez.

18
00:00:56,681 --> 00:00:58,781
Il n'y a qu'un bouton pour installer l'application

19
00:00:59,842 --> 00:01:02,543
En regardant le fichier index.html, on voit qu'il ne contient pas grand chose,

20
00:01:02,543 --> 00:01:05,851
juste le nécessaire : un peu de HTML,

21
00:01:05,851 --> 00:01:10,932
le bouton d'installation et la bibliothèque Require.js

22
00:01:10,932 --> 00:01:14,368
Si vous ne connaissez pas Require.js, allez faire un tour sur RequireJS.org.

23
00:01:14,368 --> 00:01:18,515
C'est un système de gestion de modules en JavaScript.

24
00:01:18,515 --> 00:01:22,661
Le modèle contient également un fichier manifest.webapp pré-renseigné

25
00:01:22,661 --> 00:01:25,693
et qu'il vous suffit de compléter

26
00:01:25,693 --> 00:01:28,785
Ces fichiers sont dans le dossier www.

27
00:01:28,785 --> 00:01:32,102
En retournant à la racine du projet, vous verrez d'autres dossiers et fichiers.

28
00:01:32,102 --> 00:01:36,215
Les dossiers node_modules et tools contiennent essentiellement des fichiers pour Volo_

29
00:01:36,215 --> 00:01:38,798
Tous vos fichiers seront dans www,

30
00:01:38,798 --> 00:01:41,863
les autres fichiers ne sont pas directement utiles.

31
00:01:41,863 --> 00:01:44,626
La plupart du temps vous travaillerez dans www.

32
00:01:44,626 --> 00:01:49,995
Une autre chose à savoir est que le modèle embarque Volo, que je vais vous montrer

33
00:01:49,995 --> 00:01:52,801
Volo est un outil de gestion de projets Web.

34
00:01:52,801 --> 00:01:54,151
Il est écrit en node.js.

35
00:01:54,151 --> 00:01:57,167
Si vous n'avez pas node vous allez devoir l'installer, mais c'est simple.

36
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é,

37
00:02:02,786 --> 00:02:08,368
il suffit de taper "npm install -g volo".

38
00:02:08,368 --> 00:02:12,583
Cela va installer volo globalement.

39
00:02:12,583 --> 00:02:14,398
Voici quelques commandes Volo dont vous pourriez avoir besoin :

40
00:02:14,398 --> 00:02:15,937
volo create est l'une delle.

41
00:02:15,937 --> 00:02:18,146
Elle prend en paramètres le nom de votre application

42
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.

43
00:02:27,468 --> 00:02:29,512
et crée l'arborescence d'une application à partir de ce modèle.

44
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.

45
00:02:33,816 --> 00:02:39,245
Voilà, à présent nous pouvons faire un cd dans le dossier de l'application

46
00:02:39,245 --> 00:02:42,147
Une autre commande utile est volo serve

47
00:02:42,147 --> 00:02:44,338
Elle lance un serveur local

48
00:02:44,338 --> 00:02:51,285
qui vous permet de voir votre application dans un navigateur

49
00:02:51,285 --> 00:02:56,182
volo add ajoute des dépendances JavaScript.

50
00:02:56,182 --> 00:03:04,256
Par exemple pour utiliser Zepto tapez volo add zepto

51
00:03:04,256 --> 00:03:07,317
En allant dans le dossier js/lib vous y trouverez zepto.

52
00:03:10,132 --> 00:03:14,663
On peut à présent ajouter un require('zepto') au fichier app.js

53
00:03:14,663 --> 00:03:25,770
En fait il y est déjà, assurons-nous juste qu'il trouve Zepto

54
00:03:26,970 --> 00:03:28,818
Et voilà

55
00:03:28,818 --> 00:03:31,598
Vous remarquerez qu'on inclut Zepto avec la fonction require

56
00:03:31,598 --> 00:03:33,605
parce que nous utilisons require.js.

57
00:03:33,605 --> 00:03:37,731
De ce fait, toutes les bibliothèques doivent être définies comme des modules

58
00:03:37,731 --> 00:03:40,030
On utilise pour cela la fonction define().

59
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 ?

60
00:03:43,799 --> 00:03:48,068
volo add peut encapsuler automatiquement une bibliothèque.

61
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.

62
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,

63
00:03:59,654 --> 00:04:02,832
et quelle variable globale vous voulez exposer.

64
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.

65
00:04:11,500 --> 00:04:13,823
À présent je peux utiliser la bibliothèque jQuery Flot avec require.

66
00:04:13,823 --> 00:04:18,263


67
00:04:18,263 --> 00:04:24,765
Notez que je ne me soucie pas de la valeur de retour

68
00:04:24,765 --> 00:04:28,083
Il y a deux commandes volo à essayer absolument.

69
00:04:28,083 --> 00:04:30,749
volo build crée une version optimisée de votre application.

70
00:04:30,749 --> 00:04:34,969
Il concatène et compresse tous les fichiers CSS et JavaScript

71
00:04:36,599 --> 00:04:40,587
et les place dans le dossier www-build.

72
00:04:40,587 --> 00:04:44,037
Tapez ensuite volo ghdeploy

73
00:04:44,037 --> 00:04:47,484
La première fois, il vous demande le nom du dépôt où déployer.

74
00:04:48,899 --> 00:04:51,746
S'il n'existe pas,

75
00:04:51,746 --> 00:04:54,632
il va le créer et déployer l'application sur Github Pages.

76
00:04:54,632 --> 00:04:59,055


77
00:04:59,055 --> 00:05:07,057
C'est tout, je peux aller sur mon appli sur Github et elle fonctionne !

78
00:05:07,057 --> 00:05:10,885
Notez l'URL où c'est hébergée sur Github.

79
00:05:10,885 --> 00:05:13,832
En 10 secondes, j'ai pu déployer mon application.

80
00:05:13,832 --> 00:05:16,158
Cela fonctionne que le dépôt existe ou pas,

81
00:05:16,158 --> 00:05:20,343
puis ça pousse l'application dans la branche gh-pages.

82
00:05:20,343 --> 00:05:22,988
Voilà, c'est tout pour Volo

83
00:05:22,988 --> 00:05:25,308
Il y a également un modèle de jeu.

84
00:05:25,308 --> 00:05:29,490
Si vous y jetez un œil, vous verrez qu'il contient un jeu très simple

85
00:05:29,490 --> 00:05:32,082
qui vous permet de contrôler une boîte avec les touches fléchées.

86
00:05:32,082 --> 00:05:34,897
C'est encore très basique, mais si vous regardez le code,

87
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.

88
00:05:41,676 --> 00:05:46,181
Ce qui aide beaucoup.

89
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.

90
00:05:58,308 --> 00:06:01,398
Ce modèle aide à créer un jeu basique.

91
00:06:01,398 --> 00:06:03,775
Les 2 derniers modèles permettent de créer des listes et des vues par onglets.

92
00:06:03,775 --> 00:06:09,078
Ils contiennent la même chose que le modèle App Stub,

93
00:06:09,078 --> 00:06:10,946
plus une bibliothèque avec des composants d'interface

94
00:06:10,946 --> 00:06:16,524
Voici le modèle liste détaillée.

95
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.

96
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.

97
00:06:27,675 --> 00:06:30,227
ous pouvez les éditer,

98
00:06:30,227 --> 00:06:31,980
vos modifications sont prises en compte,

99
00:06:31,980 --> 00:06:35,086
et la liste rafraichie.

100
00:06:45,948 --> 00:06:47,874
Vous pouvez également ajouter de nouveaux items

101
00:06:47,874 --> 00:06:48,748
Et voilà !

102
00:06:48,748 --> 00:06:55,184
Vous trouverez plus de détails sur la bibliothèque d'interface

103
00:06:55,184 --> 00:06:59,059
dans le projet Mortar Layouts, dont le lien est dans le fichier README.

104
00:06:59,059 --> 00:07:04,071
Il implémente cette interface utilisateur

105
00:07:04,071 --> 00:07:06,631
et décrit comment l'utiliser et la modifier.

106
00:07:06,631 --> 00:07:09,354
Je vais vous montrer comment l'écran d'affichage détaillé l'utilise.

107
00:07:09,354 --> 00:07:12,482
Voici le fichier index.html.

108
00:07:12,482 --> 00:07:18,902
Il y a deux balises spécifiques, x-view et x-listview.

109
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,

110
00:07:24,487 --> 00:07:28,499
et vous pouvez mélanger ces vues, en mettre une à l'intérieur de l'autre.

111
00:07:28,499 --> 00:07:35,802
Il y a également des attributs spécifiques, comme data-view sur un bouton,

112
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.

113
00:07:40,790 --> 00:07:43,666
Vous trouverez plus d'informations dans le dépôt de Mortar Layouts.

114
00:07:43,666 --> 00:07:46,608
L'autre modèle est la vue par onglets,

115
00:07:46,608 --> 00:07:50,990
qui est très similaire à la vue par liste, seul le HTML change un peu.

116
00:07:50,990 --> 00:07:54,042
Il comporte une vue de liste comme le précédent,

117
00:07:54,042 --> 00:07:58,101
mais elle est imbriquée dans la vue principale, qui comporte plusieurs sections,

118
00:07:58,194 --> 00:08:03,590
pour simuler des onglets. Donc, si vous entrez là et consultez cet item,

119
00:08:03,590 --> 00:08:04,983
puis changez de section,

120
00:08:04,983 --> 00:08:10,910
vous remarquerez qu'il mémorise où j'étais et que je peux y revenir.

121
00:08:11,306 --> 00:08:14,205
Tout cela est inclus dans la bibliothèque Mortar Layouts.

122
00:08:15,220 --> 00:08:17,304
Voilà, si vous avez des problèmes,

123
00:08:17,304 --> 00:08:19,159
n'hésitez pas àcréer des tickets sur Github.

124
00:08:19,558 --> 00:08:21,001
Merci de votre attention !