1
00:00:01,609 --> 00:00:04,900
‫-: [Jonas Schmedtman] Nous avons donc déjà des modèles HTML.

2
00:00:04,900 --> 00:00:07,790
‫Vient maintenant la partie la plus difficile,

3
00:00:07,790 --> 00:00:11,643
‫qui consiste à remplacer les espaces réservés par le contenu.

4
00:00:13,450 --> 00:00:16,610
‫Commençons donc par la vue d'ensemble.

5
00:00:16,610 --> 00:00:19,680
‫Et donnons-nous un peu de répit ici

6
00:00:19,680 --> 00:00:21,543
‫et ajoutons quelques commentaires.

7
00:00:21,543 --> 00:00:23,350
‫(en tapant sur

8
00:00:23,350 --> 00:00:27,943
‫un clavier) Donc page d'aperçu et quelques commentaires ici.

9
00:00:30,790 --> 00:00:35,790
‫Donc la page produit, et là nous avons l'API.

10
00:00:39,079 --> 00:00:42,079
‫Et puis ici, nous avons le Not found.

11
00:00:45,650 --> 00:00:48,990
‫Bon, ça a l'air déjà un peu mieux.

12
00:00:48,990 --> 00:00:52,820
‫Encore une fois, nous commençons par la page de présentation.

13
00:00:52,820 --> 00:00:54,100
‫Et donc, la

14
00:00:54,100 --> 00:00:58,580
‫première étape consiste à charger réellement la vue d'ensemble du modèle.

15
00:00:58,580 --> 00:01:01,770
‫D'accord, donc chaque fois qu'il y a une

16
00:01:01,770 --> 00:01:05,340
‫nouvelle demande pour cet itinéraire, donc l'itinéraire ajusté ou

17
00:01:05,340 --> 00:01:08,180
‫/Aperçu, la première chose que nous

18
00:01:08,180 --> 00:01:11,240
‫allons faire est de lire l'aperçu du modèle.

19
00:01:11,240 --> 00:01:14,020
‫Mais, comme avant, nous pouvons le

20
00:01:14,020 --> 00:01:16,860
‫faire en dehors de ce rappel, d'accord ?

21
00:01:16,860 --> 00:01:20,000
‫Parce que ces modèles, ils seront toujours les mêmes.

22
00:01:20,000 --> 00:01:22,050
‫Vous pouvez donc les lire

23
00:01:22,050 --> 00:01:25,280
‫en mémoire dès le début lorsque nous démarrons l'application.

24
00:01:25,280 --> 00:01:28,270
‫Et puis, si nécessaire, nous allons

25
00:01:28,270 --> 00:01:31,460
‫simplement de l'avant et remplaçons le contenu là-dedans.

26
00:01:31,460 --> 00:01:34,156
‫D'accord, comme nous l'avons fait avec les données ici, il

27
00:01:34,156 --> 00:01:36,720
‫n'est pas non plus nécessaire de lire les données

28
00:01:36,720 --> 00:01:38,528
‫à chaque fois qu'il y a

29
00:01:38,528 --> 00:01:41,403
‫une demande et la même chose se produit pour les modèles.

30
00:01:42,240 --> 00:01:43,120
‫D'accord?

31
00:01:43,120 --> 00:01:44,510
‫Je vais donc aller

32
00:01:44,510 --> 00:01:47,090
‫de l'avant et le faire pour les trois modèles

33
00:01:47,090 --> 00:01:49,260
‫ici afin que nous ayons cela à l'écart.

34
00:01:49,260 --> 00:01:54,260
‫Je vais donc aller de l'avant, et juste pour obtenir celui-ci, appelez-le temp

35
00:01:55,610 --> 00:01:57,040
‫pour un aperçu

36
00:01:59,000 --> 00:02:02,490
‫du modèle et le nom du DAR et

37
00:02:03,670 --> 00:02:05,743
‫nous avons ici des modèles.

38
00:02:09,370 --> 00:02:13,213
‫Et puis /template-overview.

39
00:02:15,460 --> 00:02:18,390
‫D'accord, alors dupliquez-le ici deux fois afin que

40
00:02:19,510 --> 00:02:20,650
‫nous en

41
00:02:22,320 --> 00:02:24,683
‫ayons un pour la carte, donc

42
00:02:26,980 --> 00:02:29,983
‫modèle-carte, puis un pour le modèle de produit.

43
00:02:35,460 --> 00:02:37,780
‫Produit, d'accord.

44
00:02:37,780 --> 00:02:39,870
‫Et encore une fois, gardez à l'esprit que

45
00:02:39,870 --> 00:02:42,380
‫nous pouvons le faire avec la version synchronisée car nous sommes

46
00:02:42,380 --> 00:02:43,950
‫dans le code de niveau supérieur.

47
00:02:43,950 --> 00:02:47,400
‫Nous n'avons exécuté qu'une seule fois, dès le

48
00:02:47,400 --> 00:02:50,080
‫début lorsque nous chargeons ces applications.

49
00:02:50,080 --> 00:02:53,156
‫Nous ne pouvions donc pas faire cela à l'intérieur

50
00:02:53,156 --> 00:02:55,970
‫de cette fonction de rappel createServer, d'accord ?

51
00:02:55,970 --> 00:02:59,350
‫Car celui-ci est appelé à chaque fois qu'il y a une demande.

52
00:02:59,350 --> 00:03:03,047
‫Et si nous avons un million de requêtes en même temps, alors

53
00:03:03,047 --> 00:03:06,330
‫nous pourrions bloquer le code un million de fois, une

54
00:03:06,330 --> 00:03:08,040
‫fois pour chaque requête.

55
00:03:08,040 --> 00:03:11,450
‫Et c'est quelque chose que nous ne voulons pas.

56
00:03:11,450 --> 00:03:14,580
‫Donc, la vue d'ensemble, allons-y et

57
00:03:14,580 --> 00:03:16,740
‫tout d'abord juste

58
00:03:16,740 --> 00:03:21,010
‫pour la tester, envoyons ce tempOverview comme réponse.

59
00:03:21,010 --> 00:03:22,120
‫Maintenant, avant de

60
00:03:22,120 --> 00:03:26,853
‫pouvoir le faire, nous devons aller de l'avant et définir ce type de contenu sur HTML.

61
00:03:27,740 --> 00:03:30,453
‫Alors laissez-moi copier ce morceau de code ici.

62
00:03:32,400 --> 00:03:34,120
‫Le code d'état est donc

63
00:03:34,120 --> 00:03:37,063
‫200 et le type de contenu doit être text/html.

64
00:03:42,250 --> 00:03:44,040
‫Redémarrez donc le serveur

65
00:03:45,010 --> 00:03:47,943
‫ici et regardons maintenant, et en effet,

66
00:03:49,070 --> 00:03:50,670
‫c'est parti.

67
00:03:50,670 --> 00:03:52,650
‫Voici donc notre page

68
00:03:53,710 --> 00:03:56,700
‫stylisée que nous connaissons déjà de celle-ci.

69
00:03:56,700 --> 00:03:58,630
‫Maintenant, ce qui manque bien

70
00:03:58,630 --> 00:04:01,031
‫sûr ici, ce sont ces lignes, et

71
00:04:01,031 --> 00:04:03,770
‫c'est parce que nous avons toujours notre espace réservé.

72
00:04:03,770 --> 00:04:08,110
‫Et donc la tâche suivante consiste maintenant à remplacer cet espace réservé par

73
00:04:08,110 --> 00:04:09,293
‫les cartes réelles.

74
00:04:10,830 --> 00:04:12,560
‫Et comment allons-nous faire cela?

75
00:04:12,560 --> 00:04:15,640
‫Eh bien, rappelez-vous que dans l'objet de données, nous

76
00:04:15,640 --> 00:04:19,010
‫avons un tableau de tous les objets qui sont dans

77
00:04:19,010 --> 00:04:20,573
‫les données. JSON.

78
00:04:21,620 --> 00:04:26,560
‫Donc, tous ces cinq objets, tous dans des objets JavaScript, car nous

79
00:04:26,560 --> 00:04:31,000
‫avons déjà analysé ces données avec juste une chaîne.

80
00:04:31,000 --> 00:04:31,833
‫D'accord?

81
00:04:31,833 --> 00:04:34,150
‫Donc, l'objet de données est à nouveau un

82
00:04:34,150 --> 00:04:36,450
‫tableau de cinq objets à ce stade.

83
00:04:36,450 --> 00:04:37,790
‫Donc, ce que

84
00:04:37,790 --> 00:04:40,192
‫nous devons faire, c'est essentiellement parcourir

85
00:04:40,192 --> 00:04:42,977
‫ce tableau et, pour chacun d'eux, remplacer

86
00:04:42,977 --> 00:04:45,770
‫les espaces réservés dans le modèle par les

87
00:04:45,770 --> 00:04:48,500
‫données réelles du produit actuel, d'accord ?

88
00:04:48,500 --> 00:04:49,333
‫Avoir du sens ?

89
00:04:50,210 --> 00:04:53,533
‫Alors, mettons cela dans le code.

90
00:04:54,740 --> 00:04:59,740
‫Donc, objet de données, nous allons le parcourir avec une carte parce

91
00:05:00,160 --> 00:05:02,930
‫que nous voulons retourner quelque chose

92
00:05:02,930 --> 00:05:06,243
‫et ce quelque chose, nous allons l'enregistrer dans

93
00:05:08,060 --> 00:05:11,637
‫un nouveau tableau, appelons-le donc le cardsHtml, d'accord

94
00:05:16,210 --> 00:05:17,140
‫?

95
00:05:17,140 --> 00:05:22,140
‫Et donc je suis sûr que vous connaissez la méthode de la carte, d'accord ?

96
00:05:22,570 --> 00:05:26,147
‫Donc, ce que fait la carte est d'accepter une

97
00:05:26,147 --> 00:05:30,290
‫fonction de rappel et cette fonction de rappel obtient comme argument

98
00:05:30,290 --> 00:05:34,500
‫l'élément actuel, donc l'élément de la boucle actuelle et tout ce

99
00:05:34,500 --> 00:05:36,423
‫que nous retournons ici

100
00:05:36,423 --> 00:05:39,880
‫seront ensuite enregistrés dans un tableau, d'accord ?

101
00:05:39,880 --> 00:05:44,240
‫Disons donc qu'on boucle sur un tableau à cinq éléments ce qui

102
00:05:44,240 --> 00:05:45,434
‫est le

103
00:05:45,434 --> 00:05:48,074
‫cas ici, et pour chaque élément, on

104
00:05:48,074 --> 00:05:51,851
‫va retourner quelque chose, et que quelque chose sera alors

105
00:05:51,851 --> 00:05:55,990
‫mis à la même position mais dans ce nouveau tableau cardsHtml.

106
00:05:55,990 --> 00:05:59,970
‫Alors, que ferons-nous dans chacune de ces itérations ?

107
00:05:59,970 --> 00:06:03,048
‫Eh bien, nous voulons remplacer les espaces réservés, n'est-ce pas ?

108
00:06:03,048 --> 00:06:05,200
‫Et donc je vais en

109
00:06:05,200 --> 00:06:06,843
‫fait créer une

110
00:06:06,843 --> 00:06:09,787
‫fonction pour cela et qui s'appellera replaceTemplate.

111
00:06:13,881 --> 00:06:14,844
‫D'accord?

112
00:06:14,844 --> 00:06:18,761
‫Et replaceTemplate prendra en compte le HTML de la carte.

113
00:06:19,820 --> 00:06:22,203
‫Donc, fondamentalement, le tempCard.

114
00:06:24,890 --> 00:06:28,713
‫Et il prendra dans l'objet courant, donc element.

115
00:06:29,660 --> 00:06:30,493
‫D'accord?

116
00:06:30,493 --> 00:06:33,703
‫C'est donc cet élément qui contient les données, n'est-ce pas ?

117
00:06:34,900 --> 00:06:38,511
‫Encore une fois, chacun d'eux est maintenant un

118
00:06:38,511 --> 00:06:42,423
‫objet qui contient les données dans chacune de ces propriétés.

119
00:06:44,070 --> 00:06:44,903
‫D'accord?

120
00:06:44,903 --> 00:06:49,430
‫Et ne vous inquiétez pas, si cela n'a pas de sens à 100%

121
00:06:49,430 --> 00:06:54,130
‫maintenant, cela le sera une fois que nous aurons créé cette fonction replaceTemplate, d'accord ?

122
00:06:54,130 --> 00:06:56,993
‫Faisons-le maintenant ici aussi.

123
00:06:59,610 --> 00:07:03,100
‫Donc replaceTemplate est une fonction qui prend

124
00:07:03,100 --> 00:07:07,420
‫un modèle, je vais juste l'appeler temp ici et

125
00:07:07,420 --> 00:07:09,673
‫bien sûr un produit.

126
00:07:12,690 --> 00:07:13,523
‫Bien.

127
00:07:15,780 --> 00:07:18,520
‫Créons donc une variable appelée

128
00:07:19,500 --> 00:07:21,350
‫output et

129
00:07:22,510 --> 00:07:27,510
‫celle-ci sera un modèle. remplacer dans notre espace réservé.

130
00:07:29,620 --> 00:07:32,810
‫Et nous allons mettre ici tous les espaces

131
00:07:32,810 --> 00:07:36,343
‫réservés que nous avons, en commençant par PRODUCTNAME, d'accord ?

132
00:07:39,130 --> 00:07:43,963
‫Et pour que celui-ci soit remplacé par un produit. NOM DU PRODUIT.

133
00:07:45,230 --> 00:07:48,300
‫Donc produit, qui est cet argument que nous avons passé

134
00:07:48,300 --> 00:07:50,997
‫dans la fonction, . PRODUCTNAME parce que,

135
00:07:52,300 --> 00:07:54,890
‫eh bien, c'est le nom du champ

136
00:07:54,890 --> 00:07:57,350
‫où se trouve le nom du produit.

137
00:07:57,350 --> 00:07:58,250
‫Bien?

138
00:07:58,250 --> 00:08:02,160
‫Alors, allez-y et copiez celui-ci, et d'accord.

139
00:08:02,160 --> 00:08:05,014
‫Maintenant, une petite astuce que nous devons

140
00:08:05,014 --> 00:08:08,150
‫utiliser ici est de ne pas utiliser les

141
00:08:08,150 --> 00:08:11,730
‫guillemets, mais d'utiliser à la place une expression régulière.

142
00:08:11,730 --> 00:08:13,380
‫Et c'est parce qu'il

143
00:08:13,380 --> 00:08:16,517
‫peut y avoir plusieurs instances de cet espace

144
00:08:16,517 --> 00:08:21,517
‫réservé et donc l'astuce consiste à l'envelopper dans une expression régulière et à

145
00:08:22,660 --> 00:08:24,940
‫utiliser le drapeau g ensuite dessus.

146
00:08:24,940 --> 00:08:27,010
‫Ce qui signifie global et

147
00:08:27,010 --> 00:08:31,920
‫donc cela fera en sorte que tous ces espaces réservés seront remplacés et

148
00:08:31,920 --> 00:08:34,530
‫pas seulement le premier qui se produit.

149
00:08:34,530 --> 00:08:36,910
‫Donc, cela remplace le nom du

150
00:08:36,910 --> 00:08:39,663
‫produit, maintenant allons-y et remplaçons tous les autres.

151
00:08:41,050 --> 00:08:42,473
‫Donc

152
00:08:44,250 --> 00:08:48,140
‫sortie = sortie. remplacer, et maintenant nous

153
00:08:48,140 --> 00:08:49,900
‫allons simplement aller

154
00:08:49,900 --> 00:08:54,900
‫de l'avant et copier ceci pour me faciliter la vie.

155
00:08:56,360 --> 00:08:59,990
‫Donc image, et ça s'appelle image et

156
00:09:01,538 --> 00:09:04,863
‫pas en majuscule, donc comme ça.

157
00:09:06,000 --> 00:09:07,020
‫D'accord?

158
00:09:07,020 --> 00:09:09,070
‫Maintenant, ici, j'ai créé cette

159
00:09:09,070 --> 00:09:13,520
‫variable parce que je voulais remplacer ce nom de produit dans temp.

160
00:09:13,520 --> 00:09:16,785
‫Donc dans l'argument, et ce n'est pas une bonne

161
00:09:16,785 --> 00:09:19,760
‫pratique de manipuler directement les arguments que l'on

162
00:09:19,760 --> 00:09:21,760
‫passe à une fonction.

163
00:09:21,760 --> 00:09:24,180
‫Et donc j'ai créé une nouvelle variable

164
00:09:24,180 --> 00:09:25,750
‫et à partir

165
00:09:25,750 --> 00:09:29,100
‫de maintenant, je vais manipuler la première, d'accord ?

166
00:09:29,100 --> 00:09:31,820
‫Et c'est pourquoi ce n'est pas un const, mais un let.

167
00:09:31,820 --> 00:09:35,424
‫Alors laissez, nous pouvons muter après sa création, d'accord ?

168
00:09:35,424 --> 00:09:37,874
‫Maintenant, permettez-moi d'aller de l'avant, copiez-en quelques-uns.

169
00:09:40,720 --> 00:09:44,930
‫Donc le prix, et ça s'appelle le prix ici aussi, alors

170
00:09:44,930 --> 00:09:46,653
‫nous avons de,

171
00:09:50,790 --> 00:09:52,613
‫puis nous avons des nutriments.

172
00:09:58,500 --> 00:10:00,290
‫Bien sûr, je pourrais copier tout

173
00:10:00,290 --> 00:10:02,853
‫cela, mais je ne vais pas faire des allers-retours ici.

174
00:10:06,930 --> 00:10:08,033
‫Donc quantité, description,

175
00:10:13,674 --> 00:10:14,703
‫et je

176
00:10:17,200 --> 00:10:19,990
‫vais probablement faire une erreur ici en

177
00:10:19,990 --> 00:10:22,370
‫écrivant tout cela manuellement mais dans

178
00:10:23,410 --> 00:10:26,920
‫un petit produit, ce n'est pas grave du tout.

179
00:10:26,920 --> 00:10:29,470
‫Donc en fait, nous n'avons pas besoin de celui-ci,

180
00:10:29,470 --> 00:10:30,950
‫ou en fait nous

181
00:10:30,950 --> 00:10:33,120
‫en avons besoin parce que pour le

182
00:10:33,120 --> 00:10:34,830
‫bio, donc le bio qui

183
00:10:34,830 --> 00:10:37,870
‫manque, mais rappelez-vous que le bio était un peu spécial.

184
00:10:37,870 --> 00:10:41,743
‫Donc dans ce cas, si le produit n'est pas bio,

185
00:10:42,900 --> 00:10:44,890
‫alors produit. organique, si c'est

186
00:10:44,890 --> 00:10:45,883
‫faux, alors

187
00:10:47,450 --> 00:10:50,510
‫rappelez-vous, c'est en fait une mise en gras.

188
00:10:50,510 --> 00:10:53,130
‫Ainsi, par exemple, nous avons du vrai organique ici,

189
00:10:53,130 --> 00:10:55,180
‫mais nous avons du faux ici.

190
00:10:55,180 --> 00:10:56,013
‫D'accord?

191
00:10:56,013 --> 00:10:59,470
‫Et donc si c'est faux, eh bien dans ce cas, on

192
00:10:59,470 --> 00:11:03,273
‫veut alors remplacer le NOT. BIOLOGIQUE.

193
00:11:08,340 --> 00:11:13,340
‫Donc le NON. Espace réservé BIO avec tout simplement non-bio.

194
00:11:17,630 --> 00:11:20,160
‫Donc non bio car c'est le nom de la classe

195
00:11:20,160 --> 00:11:22,313
‫que je vous ai montré tout à l'heure.

196
00:11:24,070 --> 00:11:25,730
‫C'est

197
00:11:25,730 --> 00:11:28,153
‫donc celui-ci.

198
00:11:29,500 --> 00:11:30,520
‫D'accord?

199
00:11:30,520 --> 00:11:35,100
‫Il sera donc remplacé ici, d'accord ?

200
00:11:35,100 --> 00:11:37,350
‫Et encore une fois, au cas où

201
00:11:37,350 --> 00:11:39,797
‫ce n'est pas organique, eh bien, le nom

202
00:11:39,797 --> 00:11:44,043
‫de la classe NOT_ORGANIC sera ici et tout ce lot ne sera alors pas déplacé.

203
00:11:46,010 --> 00:11:47,623
‫D'accord, ça a du sens ?

204
00:11:48,490 --> 00:11:49,760
‫Voyons donc

205
00:11:49,760 --> 00:11:52,410
‫s'il w-- ah, désolé, le

206
00:11:52,410 --> 00:11:53,410
‫code

207
00:11:53,410 --> 00:11:55,143
‫réel est en dessous.

208
00:11:56,240 --> 00:11:59,890
‫Essayons donc de lui donner plus de sens.

209
00:11:59,890 --> 00:12:03,910
‫Encore une fois, nous bouclons cet objet de données déjà

210
00:12:03,910 --> 00:12:06,840
‫ici qui contient tous les produits et

211
00:12:06,840 --> 00:12:10,095
‫à chaque itération, nous remplacerons les espaces réservés

212
00:12:10,095 --> 00:12:13,890
‫dans la carte modèle par le produit actuel qui

213
00:12:13,890 --> 00:12:16,236
‫est l'élément, n'est-ce pas ?

214
00:12:16,236 --> 00:12:20,580
‫Et cette fonction flèche le renverra alors implicitement ici.

215
00:12:20,580 --> 00:12:24,150
‫Donc c'est la même chose que de revenir ici, d'accord ?

216
00:12:24,150 --> 00:12:26,130
‫Mais ce n'est pas

217
00:12:26,130 --> 00:12:29,341
‫vraiment nécessaire car dans une fonction flèche, si vous

218
00:12:29,341 --> 00:12:32,934
‫n'avez pas les accolades, cette valeur ici est automatiquement renvoyée.

219
00:12:32,934 --> 00:12:35,782
‫D'accord, juste au cas où vous ne

220
00:12:35,782 --> 00:12:40,782
‫le sauriez pas, je viens de me rappeler que nous avons oublié

221
00:12:41,210 --> 00:12:43,383
‫de renvoyer la sortie d'ici.

222
00:12:45,360 --> 00:12:46,193
‫D'accord?

223
00:12:46,193 --> 00:12:49,870
‫Alors bien sûr, nous saisissons le modèle et le produit, mais

224
00:12:49,870 --> 00:12:53,533
‫ensuite, bien sûr, nous devons sortir le HTML final.

225
00:12:54,700 --> 00:12:55,533
‫Droit?

226
00:12:55,533 --> 00:12:58,640
‫Et pour que cela soit ensuite branché

227
00:12:58,640 --> 00:13:01,420
‫ici, et finalement, tout cela ici

228
00:13:01,420 --> 00:13:05,850
‫remplacera un tableau, avec les cinq derniers HTML, chacun pour

229
00:13:05,850 --> 00:13:08,090
‫l'une des cinq cartes.

230
00:13:08,090 --> 00:13:12,580
‫Alors, chacun pour l'un des cinq produits, d'accord ?

231
00:13:12,580 --> 00:13:16,380
‫Maintenant, allons de l'avant et enregistrons-le dans la

232
00:13:16,380 --> 00:13:21,010
‫console avant de le mettre sur la page Web de présentation.

233
00:13:21,010 --> 00:13:25,433
‫Donc cardHtml juste pour s'assurer que tout fonctionne ici.

234
00:13:28,090 --> 00:13:28,923
‫D'accord?

235
00:13:30,190 --> 00:13:32,853
‫Nous devons donc recharger le serveur, ne l'oubliez pas.

236
00:13:35,810 --> 00:13:37,370
‫Tout cela fonctionne de

237
00:13:37,370 --> 00:13:39,940
‫la même manière, mais regardons maintenant la console.

238
00:13:39,940 --> 00:13:43,710
‫Et je commence à voir de belles choses ici.

239
00:13:43,710 --> 00:13:45,500
‫Nous avons donc un tableau,

240
00:13:45,500 --> 00:13:48,350
‫et nous avons en fait remplacé le matériel.

241
00:13:48,350 --> 00:13:50,170
‫Nous avons donc des avocats ici.

242
00:13:50,170 --> 00:13:52,720
‫Il est écrit ici FreshAvocados.

243
00:13:52,720 --> 00:13:55,773
‫Il y a les quatre avocats par boîte,

244
00:13:57,020 --> 00:13:59,940
‫le prix, et donc oui, tout cela

245
00:13:59,940 --> 00:14:02,500
‫est en fait très joli.

246
00:14:02,500 --> 00:14:03,840
‫Et en effet c'est aussi un tableau.

247
00:14:03,840 --> 00:14:05,860
‫Nous avons donc ce

248
00:14:05,860 --> 00:14:09,140
‫premier chiffre, puis une virgule et donc ici commence

249
00:14:09,140 --> 00:14:12,380
‫l'élément suivant donc le prochain chiffre, d'accord ?

250
00:14:12,380 --> 00:14:15,920
‫Nous avons donc maintenant un tableau de tous ces éléments mais ce

251
00:14:15,920 --> 00:14:18,880
‫que nous voulons n'est en fait pas un tableau

252
00:14:18,880 --> 00:14:22,273
‫mais nous voulons une grosse chaîne contenant tout ce code HTML.

253
00:14:24,250 --> 00:14:27,020
‫Donc, c'est en fait très simple à réaliser.

254
00:14:27,020 --> 00:14:30,910
‫Tout ce que nous avons à faire est à la fin de ce

255
00:14:30,910 --> 00:14:33,290
‫tableau, donc nous nous souvenons de tout

256
00:14:33,290 --> 00:14:36,283
‫cela ici renvoie ce tableau que nous voyons ici, et

257
00:14:37,550 --> 00:14:39,600
‫donc à la fin tout ce

258
00:14:39,600 --> 00:14:42,520
‫que nous faisons est de joindre par une chaîne

259
00:14:42,520 --> 00:14:46,080
‫vide, et donc cela rejoindra tout de ces éléments dans une chaîne.

260
00:14:46,080 --> 00:14:50,310
‫Et maintenant, cardsHtml est vraiment une chaîne.

261
00:14:50,310 --> 00:14:51,143
‫D'accord?

262
00:14:51,143 --> 00:14:54,070
‫Et maintenant, nous avons nos cartes prêtes

263
00:14:54,070 --> 00:14:56,790
‫et la dernière pièce du puzzle

264
00:14:56,790 --> 00:15:00,740
‫est d'aller de l'avant et de remplacer cet espace réservé.

265
00:15:00,740 --> 00:15:04,110
‫Donc ceci ici, en fait en le copiant maintenant, donc

266
00:15:04,110 --> 00:15:06,401
‫maintenant en remplaçant cet espace réservé

267
00:15:06,401 --> 00:15:09,413
‫par le code HTML que nous venons de créer.

268
00:15:11,050 --> 00:15:12,830
‫Appelons-le sortie ici et tout ce

269
00:15:13,760 --> 00:15:15,150
‫que nous avons à

270
00:15:15,150 --> 00:15:16,343
‫faire est tempOverview

271
00:15:18,060 --> 00:15:22,423
‫avec juste une chaîne qui contient le HTML de vue d'ensemble, n'est-ce pas ? remplacez-le et remplacez-le par

272
00:15:24,156 --> 00:15:25,553
‫cardsHtml.

273
00:15:27,330 --> 00:15:30,253
‫Bien?

274
00:15:32,490 --> 00:15:33,750
‫C'est ça.

275
00:15:33,750 --> 00:15:34,583
‫Maintenant, tout ce

276
00:15:34,583 --> 00:15:38,620
‫que nous avons à faire est de répondre avec la sortie et non avec ce que nous avions auparavant.

277
00:15:38,620 --> 00:15:41,933
‫D'accord, cool.

278
00:15:43,380 --> 00:15:44,730
‫Cela avait donc l'air un

279
00:15:44,730 --> 00:15:46,760
‫peu complexe, mais si vous y réfléchissez, j'espère que

280
00:15:46,760 --> 00:15:48,430
‫cela vous semble tout à fait logique.

281
00:15:48,430 --> 00:15:51,563
‫Et donc allons-y et testons cela maintenant et j'espère

282
00:15:52,920 --> 00:15:55,200
‫que je n'ai pas d'erreurs et

283
00:15:56,040 --> 00:15:58,395
‫que quelque chose s'est mal passé, d'accord.

284
00:15:58,395 --> 00:16:02,290
‫Alors qu'est-ce que c'est ?

285
00:16:02,290 --> 00:16:03,670
‫Bon, j'ai juste mal orthographié remplacer.

286
00:16:03,670 --> 00:16:07,000
‫C'est l'une des erreurs les plus courantes que je reçois tout le temps.

287
00:16:07,000 --> 00:16:10,863
‫Comme une petite faute d'orthographe.

288
00:16:12,310 --> 00:16:15,003
‫Rechargez et bam, c'est parti.

289
00:16:16,060 --> 00:16:18,740
‫Voici donc nos cinq rangées.

290
00:16:18,740 --> 00:16:22,670
‫Tellement beau, beau, beau.

291
00:16:22,670 --> 00:16:24,902
‫Maintenant, ça ne ressemble pas tout

292
00:16:24,902 --> 00:16:29,902
‫à fait à l'original parce que ce qui manque, c'est comme ça, cet organique ici.

293
00:16:30,050 --> 00:16:35,050
‫D'accord?

294
00:16:36,190 --> 00:16:37,023
‫Voyons donc ce qui ne va pas.

295
00:16:37,023 --> 00:16:40,070
‫Aussi pour une raison quelconque, je ne

296
00:16:40,070 --> 00:16:44,570
‫vois pas la quantité ici mais seulement si ce n'est pas bio.

297
00:16:44,570 --> 00:16:48,300
‫Eh bien, c'est bizarre, alors essayons d'enquêter sur ce qui se

298
00:16:48,300 --> 00:16:49,371
‫passe ici.

299
00:16:49,371 --> 00:16:53,420
‫L'erreur est donc probablement quelque part ici dans

300
00:16:53,420 --> 00:16:55,620
‫cette fonction replaceTemplate.

301
00:16:55,620 --> 00:16:58,820
‫Mais en fait, tout semble plutôt correct ici.

302
00:16:58,820 --> 00:17:02,210
‫Alors aussi ici sur ce remplacement non organique.

303
00:17:02,210 --> 00:17:06,293
‫Jetons donc un coup d'œil à notre carte modèle et,

304
00:17:07,220 --> 00:17:09,890
‫donc je vois ici que quand

305
00:17:11,410 --> 00:17:12,243
‫il

306
00:17:13,890 --> 00:17:17,830
‫y a ce NOT_ORGANIC, eh bien, en fait toute cette

307
00:17:17,830 --> 00:17:20,550
‫boîte ici, donc aussi ce H6 ne

308
00:17:20,550 --> 00:17:21,690
‫sera plus visible.

309
00:17:25,330 --> 00:17:26,783
‫Donc quelque chose ne

310
00:17:27,910 --> 00:17:30,980
‫va pas ici, jetons un coup d'œil à l'original juste

311
00:17:30,980 --> 00:17:33,080
‫pour inspecter le code HTML ici.

312
00:17:34,870 --> 00:17:37,183
‫Donc le détail de la carte est

313
00:17:39,730 --> 00:17:43,330
‫celui-ci et donc nous, oui, donc nous avons en fait trois

314
00:17:43,330 --> 00:17:45,150
‫détails de carte ici

315
00:17:45,150 --> 00:17:48,630
‫alors que dans le modèle, nous n'en avons qu'un, d'accord ?

316
00:17:48,630 --> 00:17:51,773
‫Alors allons-y et copiez celui-ci.

317
00:17:52,670 --> 00:17:56,270
‫Donc, dans les détails, vous pouvez réellement copier un élément

318
00:17:56,270 --> 00:17:59,160
‫et il copiera ensuite, comme ça, l'intégralité

319
00:18:00,410 --> 00:18:01,260
‫de l'élément.

320
00:18:03,300 --> 00:18:06,283
‫C'est donc à ça que ça doit ressembler.

321
00:18:07,400 --> 00:18:11,053
‫Et donc ici, il faut dire bio et non quantité

322
00:18:13,220 --> 00:18:14,840
‫par boîte, d'accord ?

323
00:18:14,840 --> 00:18:18,193
‫Celui-là est probablement le suivant.

324
00:18:18,193 --> 00:18:20,263
‫Alors, corrigeons cela

325
00:18:27,780 --> 00:18:29,193
‫rapidement.

326
00:18:30,730 --> 00:18:32,290
‫Et ici, bien

327
00:18:32,290 --> 00:18:35,760
‫sûr, nous ne voulons pas de cela, et alors

328
00:18:35,760 --> 00:18:38,920
‫oui, ça a l'air mieux, fermez-le, redémarrez le

329
00:18:38,920 --> 00:18:41,763
‫serveur et vérifions à nouveau celui-ci.

330
00:18:43,850 --> 00:18:48,143
‫Et maintenant, bam, on y va.

331
00:18:49,550 --> 00:18:51,660
‫Alors maintenant, cela fonctionne et en effet, cela fonctionne exactement de la même manière.

332
00:18:51,660 --> 00:18:56,660
‫Beau.

333
00:18:57,150 --> 00:18:58,370
‫Voilà, c'est vraiment sympa.

334
00:18:58,370 --> 00:19:01,070
‫Allons de l'avant et supprimons,

335
00:19:01,070 --> 00:19:06,070
‫par exemple, les avocats juste pour voir ce qui se passe.

336
00:19:06,990 --> 00:19:08,680
‫Je vais juste faire

337
00:19:08,680 --> 00:19:13,680
‫le contrôle, X pour le couper, le recharger ici, et ça ne

338
00:19:13,900 --> 00:19:17,410
‫change pas et c'est bien sûr parce que rappelez-vous

339
00:19:17,410 --> 00:19:20,040
‫que cela, ces données ne sont

340
00:19:20,890 --> 00:19:21,723
‫en

341
00:19:22,770 --> 00:19:24,420
‫fait lues qu'au début

342
00:19:24,420 --> 00:19:26,990
‫lorsque nous démarrons l'application, d'accord ?

343
00:19:26,990 --> 00:19:30,490
‫Donc, pour que cela prenne effet, nous devons

344
00:19:30,490 --> 00:19:32,250
‫effectivement redémarrer l'application.

345
00:19:32,250 --> 00:19:36,635
‫Bon, donc pas grave.

346
00:19:36,635 --> 00:19:38,853
‫Et maintenant c'est parti, d'accord ?

347
00:19:40,760 --> 00:19:43,200
‫Parce que ce n'est plus dans

348
00:19:43,200 --> 00:19:45,900
‫le fichier JSON qu'il est lu au

349
00:19:45,900 --> 00:19:47,920
‫moment où l'on démarre

350
00:19:47,920 --> 00:19:49,630
‫l'application OK ?

351
00:19:52,050 --> 00:19:52,883
‫Remettez-le

352
00:19:52,883 --> 00:19:57,563
‫ici, sauvez-le, redémarrez, ouvrez ce type, rechargez, et le voici de retour.

353
00:19:58,450 --> 00:20:02,630
‫Cela fonctionne donc maintenant vraiment de manière dynamique en lisant toutes ces

354
00:20:02,630 --> 00:20:05,580
‫données directement à partir du fichier JSON.

355
00:20:05,580 --> 00:20:09,660
‫Donc, celui-ci fonctionne, vérifions également les liens là-bas

356
00:20:09,660 --> 00:20:12,860
‫dans le coin inférieur gauche.

357
00:20:12,860 --> 00:20:15,810
‫Vous voyez que l'ID passe de zéro, un à,

358
00:20:15,810 --> 00:20:18,600
‫et ainsi de suite, mais si je clique

359
00:20:18,600 --> 00:20:20,750
‫ici, eh bien, lorsque nous obtenons

360
00:20:20,750 --> 00:20:22,320
‫la page introuvable.

361
00:20:22,320 --> 00:20:25,310
‫Et c'est parce que notre itinéraire n'est pas encore prêt pour cela.

362
00:20:25,310 --> 00:20:29,170
‫D'accord?

363
00:20:29,170 --> 00:20:30,010
‫Et donc

364
00:20:30,010 --> 00:20:33,320
‫faisons-le dans la vidéo suivante et implémentons la page de détail

365
00:20:33,320 --> 00:20:35,780
‫du produit pour chacun de ces produits.

366
00:20:35,780 --> 00:20:37,200
‫Alors, n'attendez pas et passons à autre chose maintenant.