1
00:00:01,100 --> 00:00:03,220
‫Narrateur : Ensuite, vous allez

2
00:00:03,220 --> 00:00:07,150
‫apprendre à intégrer une jolie carte qui affiche tous les

3
00:00:07,150 --> 00:00:11,373
‫emplacements d'une certaine visite dans notre site Web à l'aide de Mapbox.

4
00:00:12,730 --> 00:00:14,150
‫Mais avant de faire

5
00:00:14,150 --> 00:00:18,160
‫cela, nous devons d'abord corriger un petit bug que je viens de trouver.

6
00:00:18,160 --> 00:00:20,840
‫Donc, en ce moment, nous sommes dans la tournée des

7
00:00:20,840 --> 00:00:23,477
‫camping-cars du parc, mais vous voyez qu'ici, il est

8
00:00:23,477 --> 00:00:27,180
‫écrit "The Forest Hiker", d'accord ? Et donc, c'est évidemment

9
00:00:27,180 --> 00:00:28,991
‫faux et donc, c'est

10
00:00:28,991 --> 00:00:30,260
‫parce

11
00:00:30,260 --> 00:00:33,700
‫qu'ici dans notre gestionnaire de tournée get, nous

12
00:00:33,700 --> 00:00:36,900
‫passons toujours par ce titre, donc "The

13
00:00:36,900 --> 00:00:38,530
‫Forest Hiker Tour".

14
00:00:38,530 --> 00:00:42,193
‫Ce qui, bien sûr, n'est pas correct, alors corrigeons cela.

15
00:00:44,850 --> 00:00:47,780
‫D'accord, et alors disons ici

16
00:00:47,780 --> 00:00:50,190
‫la tournée. nom puis

17
00:00:51,400 --> 00:00:52,283
‫tournée.

18
00:00:54,520 --> 00:00:56,283
‫Mettons ça en majuscule en fait.

19
00:00:57,150 --> 00:01:00,150
‫Et donc, maintenant nous devrions voir la tournée "The

20
00:01:02,620 --> 00:01:05,070
‫park camper" et ouais la voici.

21
00:01:05,070 --> 00:01:07,740
‫Et maintenant, à propos de cette carte

22
00:01:07,740 --> 00:01:10,050
‫qui va être affichée ici dans

23
00:01:10,050 --> 00:01:13,580
‫cette zone vide, nous allons utiliser une très belle bibliothèque appelée

24
00:01:13,580 --> 00:01:17,060
‫"Mapbox" et cette bibliothèque fonctionne en fait dans le front-end.

25
00:01:17,060 --> 00:01:19,030
‫Et donc, dans cette conférence, nous

26
00:01:19,030 --> 00:01:21,070
‫allons en fait écrire un peu de

27
00:01:21,070 --> 00:01:23,330
‫code frontal, et pas tellement sur le back-end.

28
00:01:23,330 --> 00:01:25,300
‫Mais cela reste très important

29
00:01:25,300 --> 00:01:27,890
‫car vous allez maintenant apprendre à écrire du

30
00:01:27,890 --> 00:01:31,730
‫JavaScript pour le côté client, puis à l'intégrer dans nos modèles.

31
00:01:31,730 --> 00:01:32,710
‫D'accord?

32
00:01:32,710 --> 00:01:34,190
‫Faisons-le et

33
00:01:35,030 --> 00:01:39,130
‫rappelons-nous d'abord que toutes les données, donc tous les

34
00:01:39,130 --> 00:01:42,140
‫actifs disponibles sur le client, se trouvent

35
00:01:42,140 --> 00:01:44,170
‫ici dans ce dossier public.

36
00:01:44,170 --> 00:01:47,830
‫Ainsi, par exemple, notre fichier CSS, nos images et nous

37
00:01:47,830 --> 00:01:51,050
‫avons également un dossier ici pour JavaScript.

38
00:01:51,050 --> 00:01:53,470
‫Et actuellement, c'est vide et créons

39
00:01:53,470 --> 00:01:56,230
‫donc maintenant un nouveau fichier ici appelé

40
00:01:58,697 --> 00:02:00,190
‫Mapbox.

41
00:02:03,000 --> 00:02:06,525
‫js d'accord? Et donc il s'agit essentiellement

42
00:02:06,525 --> 00:02:08,700
‫d'un fichier JavaScript que nous allons intégrer dans

43
00:02:08,700 --> 00:02:11,250
‫notre HTML et qui sera ensuite exécuté côté client.

44
00:02:11,250 --> 00:02:14,140
‫Très bien? Donc, tout comme le JavaScript

45
00:02:14,140 --> 00:02:17,340
‫normal que vous avez écrit toute votre vie (Rires) N'est-ce pas ?

46
00:02:17,340 --> 00:02:20,760
‫Mais pour l'instant, faisons simplement une console simple. connectez-vous ici avant

47
00:02:20,760 --> 00:02:23,343
‫de le connecter réellement à notre back-end.

48
00:02:25,540 --> 00:02:30,540
‫Alors disons simplement console. log bonjour du côté client.

49
00:02:33,360 --> 00:02:34,333
‫Très

50
00:02:35,400 --> 00:02:39,160
‫bien, et maintenant intégrons-le dans nos modèles.

51
00:02:39,160 --> 00:02:41,290
‫Maintenant, il peut sembler que le meilleur

52
00:02:41,290 --> 00:02:45,600
‫endroit pour faire cette intégration est ici dans notre modèle de base, n'est-ce pas ?

53
00:02:45,600 --> 00:02:49,220
‫Mais en fait, nous voulons seulement inclure le script Mapbox sur la page

54
00:02:49,220 --> 00:02:51,230
‫de la visite, n'est-ce pas ?

55
00:02:51,230 --> 00:02:53,610
‫Alors, comment pourrions-nous faire cela?

56
00:02:53,610 --> 00:02:56,070
‫Et la solution pour cela est encore une fois

57
00:02:56,070 --> 00:02:59,040
‫d'étendre un bloc ici dans notre modèle de base, donc je

58
00:02:59,040 --> 00:03:01,190
‫vais créer un nouveau bloc ici que

59
00:03:01,190 --> 00:03:05,850
‫nous allons ensuite étendre à partir de la visite. D'accord?

60
00:03:05,850 --> 00:03:08,523
‫Et en fait, ce bloc sera juste ici,

61
00:03:10,670 --> 00:03:12,260
‫et je l'appelle "tête"

62
00:03:12,260 --> 00:03:15,093
‫et tout ce contenu sera en fait là-dedans.

63
00:03:16,020 --> 00:03:18,740
‫Maintenant, vous vous demandez peut-être pourquoi nous faisons cela,

64
00:03:18,740 --> 00:03:20,410
‫car lorsque nous étendons

65
00:03:20,410 --> 00:03:22,700
‫le bloc, le contenu à l'intérieur disparaît.

66
00:03:22,700 --> 00:03:26,350
‫C'est donc ce qui s'est passé ici, n'est-ce pas ?

67
00:03:26,350 --> 00:03:29,440
‫Mais en fait, il existe une autre façon d'étendre les blocs,

68
00:03:29,440 --> 00:03:32,350
‫qui ajoutera alors simplement le nouveau contenu à la fin

69
00:03:32,350 --> 00:03:34,060
‫ou au début du bloc.

70
00:03:34,060 --> 00:03:37,190
‫Très bien? Voyons donc comment nous pouvons le faire.

71
00:03:37,190 --> 00:03:41,170
‫Et donc juste au début de notre modèle de

72
00:03:41,170 --> 00:03:42,073
‫visite, disons

73
00:03:44,810 --> 00:03:46,120
‫maintenant : bloc

74
00:03:46,120 --> 00:03:50,900
‫tête, et en fait nous disons bloc ajouter tête, d'accord ?

75
00:03:50,900 --> 00:03:53,730
‫Et donc, tout ce que nous écrirons dans ce

76
00:03:53,730 --> 00:03:55,960
‫bloc ici sera alors ajouté au contenu

77
00:03:55,960 --> 00:03:58,010
‫qui est déjà dans ce bloc.

78
00:03:58,010 --> 00:04:00,510
‫D'accord? Et nous pourrions également

79
00:04:00,510 --> 00:04:04,500
‫utiliser "prepend" et ensuite il serait ajouté au début du bloc, d'accord ?

80
00:04:04,500 --> 00:04:07,690
‫Et maintenant, tout ce que nous allons faire ici est d'ajouter

81
00:04:07,690 --> 00:04:08,950
‫un nouveau script.

82
00:04:08,950 --> 00:04:11,890
‫Donc en utilisant une balise de script

83
00:04:11,890 --> 00:04:14,410
‫puis en spécifiant l'attribut source, et

84
00:04:15,280 --> 00:04:23,760
‫c'est donc pour l'instant "js/mapbox. js" d'accord ?

85
00:04:23,760 --> 00:04:27,400
‫Encore une fois, ce modèle ici étend déjà notre modèle

86
00:04:27,400 --> 00:04:28,800
‫de base, et

87
00:04:28,800 --> 00:04:32,070
‫donc avec cela ici, nous pouvons fondamentalement injecter cette

88
00:04:32,070 --> 00:04:33,870
‫ligne de code, dans le

89
00:04:33,870 --> 00:04:37,450
‫bloc d'en-tête qui est déjà dans notre modèle de base.

90
00:04:37,450 --> 00:04:40,930
‫Et donc, nous l'ajoutons, et il apparaîtra alors ici à

91
00:04:40,930 --> 00:04:44,380
‫la fin de ce bloc d'en-tête, donc juste ici.

92
00:04:44,380 --> 00:04:46,453
‫Et en fait, essayons cela maintenant.

93
00:04:47,940 --> 00:04:49,053
‫Donc, quand je

94
00:04:50,520 --> 00:04:53,610
‫recharge, nous devrions maintenant recevoir ce message dans

95
00:04:53,610 --> 00:04:56,760
‫notre console et en effet, "Bonjour du côté

96
00:04:56,760 --> 00:04:57,593
‫client"

97
00:04:58,700 --> 00:05:02,080
‫Super. Ensuite, nous voulons réellement accéder aux données de

98
00:05:02,080 --> 00:05:03,850
‫localisation de la visite

99
00:05:03,850 --> 00:05:06,140
‫que nous essayons actuellement d'afficher, ici

100
00:05:06,140 --> 00:05:08,170
‫même dans le fichier JavaScript.

101
00:05:08,170 --> 00:05:10,390
‫Alors comment vas-tu faire ça ?

102
00:05:10,390 --> 00:05:13,590
‫Eh bien, alors nous pouvons faire une requête Ajax, donc essentiellement

103
00:05:13,590 --> 00:05:16,410
‫un appel à notre API et obtenir les données

104
00:05:16,410 --> 00:05:17,870
‫à partir de là.

105
00:05:17,870 --> 00:05:20,760
‫Mais ce n'est pas vraiment nécessaire dans ce cas.

106
00:05:20,760 --> 00:05:23,590
‫Et donc, laissez-moi vous montrer une très belle astuce.

107
00:05:23,590 --> 00:05:25,750
‫Donc ici, dans notre modèle de visite,

108
00:05:25,750 --> 00:05:28,870
‫nous avons déjà toutes les données sur la visite elle-même

109
00:05:28,870 --> 00:05:30,840
‫et maintenant nous pouvons simplement mettre

110
00:05:30,840 --> 00:05:33,270
‫ces données dans notre code HTML afin que

111
00:05:33,270 --> 00:05:36,630
‫JavaScript puisse ensuite les lire à partir de là, d'accord ?

112
00:05:36,630 --> 00:05:39,570
‫Donc, fondamentalement, nous allons exposer les données de localisation,

113
00:05:39,570 --> 00:05:42,327
‫ici sous forme de chaîne dans le code HTML

114
00:05:42,327 --> 00:05:45,080
‫et notre JavaScript les récupérera ensuite à

115
00:05:45,080 --> 00:05:49,500
‫partir de là sans avoir à le faire, comme n'importe quel appel d'API séparément.

116
00:05:49,500 --> 00:05:52,760
‫Alors, revenons ici à notre classe

117
00:05:52,760 --> 00:05:56,270
‫de cartes ou à notre section, d'accord ?

118
00:05:56,270 --> 00:05:59,950
‫Donc cette section ici, et elle a déjà un élément

119
00:05:59,950 --> 00:06:01,460
‫Diff avec une

120
00:06:01,460 --> 00:06:05,410
‫classe de carte, et vous verrez pourquoi c'est un ID un

121
00:06:05,410 --> 00:06:08,800
‫peu plus tard, d'accord ? Mais pour l'instant, je veux réellement

122
00:06:08,800 --> 00:06:10,870
‫spécifier un attribut de données ici, d'accord ?

123
00:06:10,870 --> 00:06:13,470
‫Il existe donc une astuce très intéressante en

124
00:06:13,470 --> 00:06:17,030
‫JavaScript où nous pouvons spécifier un attribut de données en HTML,

125
00:06:17,030 --> 00:06:19,580
‫puis lire cet attribut en utilisant JavaScript

126
00:06:19,580 --> 00:06:21,100
‫de manière très simple.

127
00:06:21,100 --> 00:06:23,010
‫Et c'est comme ça que

128
00:06:23,010 --> 00:06:25,710
‫ça marche, donc on peut dire "données/" et

129
00:06:25,710 --> 00:06:27,730
‫puis ici comme on veut l'appeler,

130
00:06:27,730 --> 00:06:29,593
‫dans ce cas on dit

131
00:06:31,800 --> 00:06:36,560
‫"lieux" d'accord ? Et puis nous avons mis cela à notre tournée. Emplacements.

132
00:06:36,560 --> 00:06:38,410
‫Maintenant, avant de faire

133
00:06:38,410 --> 00:06:42,840
‫cela, nous devons transformer ce tableau en une chaîne, n'est-ce pas ?

134
00:06:42,840 --> 00:06:45,540
‫Alors, jetons un coup d'œil à cela rapidement.

135
00:06:45,540 --> 00:06:50,170
‫Donc, nos emplacements sont tout ce tableau avec

136
00:06:50,170 --> 00:06:51,930
‫ces objets là-dedans.

137
00:06:51,930 --> 00:06:55,320
‫Mais en HTML, bien sûr, nous ne pouvons pas avoir de

138
00:06:55,320 --> 00:06:58,480
‫tableaux ou d'objets ou quelque chose comme ça, et donc

139
00:06:58,480 --> 00:07:00,010
‫ce que nous devons

140
00:07:00,010 --> 00:07:02,740
‫faire est de convertir tout cela en une chaîne.

141
00:07:02,740 --> 00:07:05,003
‫Et c'est heureusement assez facile, tout

142
00:07:06,230 --> 00:07:12,513
‫ce que nous avons à faire est "JSON. stringifier " d'accord ?

143
00:07:13,417 --> 00:07:16,960
‫Et puis voici la tournée. emplacement, ou en fait ce

144
00:07:16,960 --> 00:07:17,793
‫sont

145
00:07:17,793 --> 00:07:19,610
‫des emplacements. Très bien?

146
00:07:19,610 --> 00:07:21,063
‫Et si nous

147
00:07:23,040 --> 00:07:28,040
‫lui donnons maintenant une sauvegarde, ouvrons-la ici et inspectons cette carte ici, et

148
00:07:28,290 --> 00:07:31,120
‫maintenant vous voyez les emplacements des données, et

149
00:07:31,120 --> 00:07:33,620
‫nous avons cette énorme chaîne ici,

150
00:07:33,620 --> 00:07:36,493
‫qui contient essentiellement toutes nos données de localisation.

151
00:07:38,050 --> 00:07:39,670
‫Très bien, et maintenant,

152
00:07:39,670 --> 00:07:42,420
‫dans notre JavaScript, nous pouvons l'obtenir

153
00:07:42,420 --> 00:07:44,023
‫très facilement.

154
00:07:46,950 --> 00:07:49,670
‫Ainsi, les emplacements sont au

155
00:07:50,670 --> 00:07:52,983
‫document. getElementById puis

156
00:07:56,260 --> 00:07:59,810
‫map, et maintenant cela fait partie de l'astuce, car

157
00:07:59,810 --> 00:08:04,800
‫tout ce que nous mettons dans un attribut de données comme celui-ci, sera

158
00:08:04,800 --> 00:08:07,820
‫ensuite stocké dans la propriété dataset, et

159
00:08:07,820 --> 00:08:11,020
‫dans ce cas dataset. emplacements,

160
00:08:11,020 --> 00:08:15,813
‫car cela s'appelle data/ ou data-location.

161
00:08:16,980 --> 00:08:20,470
‫D'accord? Donc juste comme

162
00:08:20,470 --> 00:08:26,533
‫ça, ensemble de données. emplacements, d'accord?

163
00:08:26,533 --> 00:08:28,210
‫Et maintenant, nous obtenons ici

164
00:08:28,210 --> 00:08:29,453
‫toutes ces erreurs

165
00:08:30,347 --> 00:08:33,480
‫provenant d'ESlint, et c'est parce que ESlint est configuré

166
00:08:33,480 --> 00:08:35,900
‫pour Node. js et non

167
00:08:35,900 --> 00:08:37,900
‫pour JavaScript , et donc

168
00:08:37,900 --> 00:08:40,973
‫ce que nous pouvons faire ici est de désactiver

169
00:08:41,923 --> 00:08:46,210
‫essentiellement ESlint pour tout ce fichier, jusqu'à ce que nous disions essentiellement

170
00:08:48,300 --> 00:08:52,670
‫avec un commentaire au début ici, ESlint désactivé et donc oui, il comprendra

171
00:08:52,670 --> 00:08:57,000
‫alors cela et le tournera complètement désactivé pour tout ce fichier, d'accord ?

172
00:08:57,000 --> 00:08:59,100
‫Ce sont donc les données d'emplacement

173
00:08:59,100 --> 00:09:01,320
‫ici que nous venons de mettre dans

174
00:09:01,320 --> 00:09:03,460
‫notre HTML, mais rappelez-vous qu'il s'agit

175
00:09:03,460 --> 00:09:07,285
‫d'une chaîne et que nous devons donc la reconvertir en JSON, et

176
00:09:07,285 --> 00:09:09,660
‫donc en JSON. analyser et

177
00:09:11,410 --> 00:09:13,683
‫puis tout ce qui est ici.

178
00:09:15,960 --> 00:09:20,160
‫Très bien, et maintenant jetons un coup d'œil à cela juste

179
00:09:20,160 --> 00:09:22,510
‫pour voir si tout fonctionne correctement.

180
00:09:26,720 --> 00:09:27,823
‫Rechargeons, et

181
00:09:28,770 --> 00:09:32,873
‫maintenant quelque chose s'est mal passé ici dans notre fichier Mapbox,

182
00:09:33,740 --> 00:09:36,063
‫eh bien cela semble également correct

183
00:09:37,120 --> 00:09:42,120
‫en fait, alors testons simplement si cela s'appelle réellement map ici et en

184
00:09:45,030 --> 00:09:47,830
‫effet c'est un ID avec map, et donc

185
00:09:47,830 --> 00:09:51,160
‫je pense que le problème est probablement qu'au moment

186
00:09:51,160 --> 00:09:53,360
‫où nous avons appelé ou obtenu

187
00:09:53,360 --> 00:09:55,803
‫l'élément par ID, donc ceci ici, donc

188
00:09:56,690 --> 00:09:58,560
‫probablement à ce moment-là,

189
00:09:58,560 --> 00:10:01,210
‫le DOM n'est en fait pas déjà

190
00:10:01,210 --> 00:10:04,060
‫chargé, d'accord ? Et c'est parce

191
00:10:04,060 --> 00:10:08,530
‫que nous avons notre script intégré juste au début du fichier, donc ce

192
00:10:08,530 --> 00:10:09,963
‫script ici est juste

193
00:10:11,440 --> 00:10:14,300
‫dans la tête, alors qu'il devrait vraiment être

194
00:10:14,300 --> 00:10:17,580
‫au bas de la page. D'accord?

195
00:10:17,580 --> 00:10:19,760
‫Alors laissez-moi copier celui-ci ici et

196
00:10:19,760 --> 00:10:21,720
‫le mettre manuellement dans la base,

197
00:10:21,720 --> 00:10:24,580
‫donc je vais le copier et le commenter, mais

198
00:10:24,580 --> 00:10:27,610
‫ne vous inquiétez pas, nous utiliserons toujours cette technique d'ajout

199
00:10:27,610 --> 00:10:31,270
‫de bloc ici un peu plus tard dans la vidéo, car il

200
00:10:31,270 --> 00:10:34,100
‫y a des trucs provenant de Mapbox que nous

201
00:10:34,100 --> 00:10:35,750
‫devons encore mettre dans la

202
00:10:36,920 --> 00:10:40,170
‫tête, d'accord ? Mais pour l'instant, plaçons

203
00:10:40,170 --> 00:10:42,483
‫ce script juste en bas de la page.

204
00:10:44,600 --> 00:10:45,433
‫D'accord?

205
00:10:47,220 --> 00:10:48,750
‫Cela (Rires) bien

206
00:10:48,750 --> 00:10:51,200
‫sûr, je voulais juste aller dans un

207
00:10:51,200 --> 00:10:54,360
‫autre fichier, afin que je puisse le sauvegarder pour que

208
00:10:54,360 --> 00:10:56,180
‫le serveur se recharge réellement car

209
00:10:56,180 --> 00:10:57,880
‫ces fichiers pug, comme vous

210
00:10:57,880 --> 00:11:00,610
‫l'avez probablement remarqué ici, ne déclenchent pas un

211
00:11:00,610 --> 00:11:03,010
‫redémarrage de notre serveur , très bien?

212
00:11:03,010 --> 00:11:06,805
‫Quoi qu'il en soit, j'espère que maintenant ça va

213
00:11:06,805 --> 00:11:09,150
‫marcher et effectivement, ça marche.

214
00:11:09,150 --> 00:11:11,070
‫Nous avons donc un tableau

215
00:11:11,070 --> 00:11:15,060
‫ici, et en effet ce sont les quatre endroits de notre tournée.

216
00:11:15,060 --> 00:11:18,190
‫Bon, maintenant nous avons tout bien intégré, et tout

217
00:11:18,190 --> 00:11:21,170
‫est prêt à intégrer Mapbox et à créer

218
00:11:21,170 --> 00:11:23,010
‫notre propre carte ici.

219
00:11:23,010 --> 00:11:25,960
‫Mais afin de ne pas créer une vidéo trop longue,

220
00:11:25,960 --> 00:11:28,113
‫je le ferai dans la prochaine.