1
00:00:01,100 --> 00:00:03,200
‫Instructeur : Très bien, ceci fait partie de la deuxième

2
00:00:03,200 --> 00:00:05,313
‫partie de la page de détail de la page de visite.

3
00:00:06,670 --> 00:00:08,820
‫Et nous avons laissé la dernière

4
00:00:08,820 --> 00:00:11,630
‫vidéo après avoir construit cette partie Quick Facts ici

5
00:00:11,630 --> 00:00:14,130
‫en utilisant quelques mixins, n'est-ce pas ?

6
00:00:14,130 --> 00:00:16,550
‫Et donc ensuite, il est temps

7
00:00:16,550 --> 00:00:19,010
‫de construire cette partie ici des guides.

8
00:00:19,010 --> 00:00:21,550
‫Maintenant, nous ne savons pas à l'avance combien de guides

9
00:00:21,550 --> 00:00:23,950
‫touristiques il y a réellement sur chaque visite.

10
00:00:23,950 --> 00:00:26,150
‫Et donc, tout comme sur la page

11
00:00:26,150 --> 00:00:27,930
‫de présentation, nous avons

12
00:00:27,930 --> 00:00:30,260
‫besoin ici d'une autre boucle pour parcourir tous

13
00:00:30,260 --> 00:00:32,423
‫les guides associés à une certaine visite.

14
00:00:34,030 --> 00:00:36,220
‫Alors, faisons-le.

15
00:00:36,220 --> 00:00:39,900
‫Et en ce moment, nous avons en fait ces trois éléments.

16
00:00:39,900 --> 00:00:43,210
‫Donc ces trois boites, une pour chaque guide.

17
00:00:43,210 --> 00:00:47,570
‫Mais comme nous venons de le dire, ce n'est pas comme cela que nous voulons que cela fonctionne.

18
00:00:47,570 --> 00:00:51,970
‫Alors débarrassons-nous de ces deux-là, puis créons une boucle ici,

19
00:00:51,970 --> 00:00:55,210
‫qui à chaque itération créera une boîte,

20
00:00:55,210 --> 00:00:57,620
‫donc un élément comme celui-ci.

21
00:00:57,620 --> 00:00:59,553
‫Et cela devrait être assez facile.

22
00:01:00,460 --> 00:01:01,880
‫Encore une fois, nous

23
00:01:03,890 --> 00:01:06,923
‫utilisons chacun, puis le nom de la variable dans

24
00:01:08,505 --> 00:01:11,580
‫l'itération actuelle, dans, puis le tableau que nous voulons parcourir.

25
00:01:11,580 --> 00:01:14,933
‫Et donc c'est la tournée. guides.

26
00:01:16,980 --> 00:01:18,230
‫À droite?

27
00:01:18,230 --> 00:01:19,063
‫Alors, où

28
00:01:20,080 --> 00:01:20,913
‫est-ce ?

29
00:01:23,540 --> 00:01:26,620
‫Oui, voici donc notre gamme de guides.

30
00:01:26,620 --> 00:01:29,810
‫Lesquels, bien sûr, dans la base de données seront

31
00:01:29,810 --> 00:01:34,393
‫ensuite renseignés avec les utilisateurs correspondants et pas seulement les identifiants, n'est-ce pas ?

32
00:01:35,260 --> 00:01:37,803
‫Alors maintenant, nous devons mettre tout cela en retrait ici.

33
00:01:38,902 --> 00:01:40,350
‫Et donc chacun de

34
00:01:40,350 --> 00:01:43,220
‫ces guides ici sera essentiellement un document utilisateur.

35
00:01:43,220 --> 00:01:46,010
‫Alors vérifions rapidement cela dans Compass

36
00:01:46,010 --> 00:01:50,560
‫car nous n'avons pas ce genre de données dans notre document

37
00:01:50,560 --> 00:01:53,390
‫JSON car, bien sûr, la population ne

38
00:01:53,390 --> 00:01:57,520
‫se produit qu'en coulisses en utilisant Mongos, n'est-ce pas ?

39
00:01:57,520 --> 00:01:59,600
‫Ainsi chacun des guides est un utilisateur.

40
00:01:59,600 --> 00:02:03,573
‫Et donc ce que nous voulons, c'est le nom et la photo.

41
00:02:06,100 --> 00:02:09,893
‫Alors ici, nous voulons la photo, bien sûr.

42
00:02:10,890 --> 00:02:12,140
‫Qui se trouve,

43
00:02:12,140 --> 00:02:16,683
‫dans cette page, à images/users puis le nom de la photo de l'utilisateur.

44
00:02:20,180 --> 00:02:22,850
‫Alors guide. photo.

45
00:02:22,850 --> 00:02:25,350
‫Qui est ici, encore une fois, le nom

46
00:02:25,350 --> 00:02:27,540
‫de la variable dans l'itération en cours.

47
00:02:27,540 --> 00:02:30,130
‫Alors ici, je ne sais pas pourquoi il est écrit

48
00:02:30,130 --> 00:02:33,223
‫Lead guide, mais mettons en fait le nom de la personne ici.

49
00:02:37,030 --> 00:02:39,520
‫Alors guide. Nom.

50
00:02:39,520 --> 00:02:42,713
‫Ensuite, nous voulons à nouveau le nom du guide. Nom.

51
00:02:45,997 --> 00:02:46,850
‫Et puis nous voulons aussi l'étiquette.

52
00:02:46,850 --> 00:02:49,330
‫Et donc fondamentalement, ce sera le guide principal lorsqu'il s'agira

53
00:02:49,330 --> 00:02:50,940
‫d'un guide principal et simplement

54
00:02:50,940 --> 00:02:53,060
‫d'un guide touristique lorsqu'il s'agira d'un guide régulier.

55
00:02:53,060 --> 00:02:56,810
‫Maintenant, laissez-moi vous montrer ce qui se passe lorsque nous mettons

56
00:02:56,810 --> 00:02:58,270
‫simplement le rôle ici.

57
00:02:58,270 --> 00:03:00,223
‫Rappelez-vous donc que le rôle est la

58
00:03:02,300 --> 00:03:04,830
‫propriété où nous disons si un utilisateur est un guide

59
00:03:04,830 --> 00:03:07,040
‫ou un guide principal ou même un administrateur.

60
00:03:07,040 --> 00:03:09,333
‫D'accord?

61
00:03:10,430 --> 00:03:11,450
‫Donc, encore une fois, voyons

62
00:03:11,450 --> 00:03:14,030
‫pour l'instant ce qui se passe lorsque nous le disons simplement comme ça.

63
00:03:14,030 --> 00:03:16,130
‫Et avec cela, nous devrions être prêts à le tester réellement.

64
00:03:16,130 --> 00:03:19,963
‫Faisons une sauvegarde.

65
00:03:21,450 --> 00:03:23,030
‫Et c'est reparti.

66
00:03:23,030 --> 00:03:24,700
‫Nous avons donc les

67
00:03:24,700 --> 00:03:27,800
‫trois photos, les noms, mais ici le rôle de guide

68
00:03:27,800 --> 00:03:30,440
‫n'a pas vraiment l'air bien, n'est-ce pas ?

69
00:03:30,440 --> 00:03:33,020
‫Alors rappelez-vous comment, en

70
00:03:33,020 --> 00:03:37,640
‫fait, nous voulons dire guide principal et guide touristique.

71
00:03:37,640 --> 00:03:38,883
‫D'accord, et maintenant il est temps d'utiliser un conditionnel.

72
00:03:39,930 --> 00:03:43,270
‫Maintenant, pug a en fait des conditionnels intégrés, mais ils

73
00:03:43,270 --> 00:03:46,080
‫sont vraiment simples et nous ne pouvons pas

74
00:03:46,080 --> 00:03:48,390
‫faire beaucoup de choses avec eux.

75
00:03:48,390 --> 00:03:50,020
‫Par exemple, ils ne nous

76
00:03:50,020 --> 00:03:52,240
‫permettent même pas de tester l'égalité, par exemple.

77
00:03:52,240 --> 00:03:54,990
‫Mais la bonne chose est que nous pouvons toujours

78
00:03:54,990 --> 00:03:56,520
‫utiliser JavaScript pour cela.

79
00:03:56,520 --> 00:03:58,813
‫Et encore une fois, nous utilisons du code sans tampon pour cela.

80
00:03:59,770 --> 00:04:03,190
‫Donc, avec la syntaxe du tiret, puis nous pouvons

81
00:04:03,190 --> 00:04:05,730
‫utiliser un JavaScript normal si ici.

82
00:04:05,730 --> 00:04:08,023
‫Encore une fois, comme si nous écrivions simplement du JavaScript.

83
00:04:08,890 --> 00:04:12,180
‫Et donc guide. rôle et maintenant nous pouvons tester et dire

84
00:04:12,180 --> 00:04:16,340
‫si c'est un lead-guide.

85
00:04:16,340 --> 00:04:19,873
‫Eh bien, ici, nous voulons dire Guide

86
00:04:22,130 --> 00:04:24,340
‫principal, d'accord ?

87
00:04:27,330 --> 00:04:28,753
‫Et mettons-en un autre ici

88
00:04:32,309 --> 00:04:33,980
‫et disons que si le rôle

89
00:04:33,980 --> 00:04:37,320
‫est juste un guide, eh bien, alors nous voulons un guide touristique.

90
00:04:37,320 --> 00:04:40,690
‫Et c'est ainsi que nous utilisons un JavaScript si nous écrivons

91
00:04:40,690 --> 00:04:44,660
‫à l'intérieur de pug, puis le combinons avec une sortie de pug comme celle-ci.

92
00:04:44,660 --> 00:04:48,823
‫Très bien?

93
00:04:50,237 --> 00:04:51,320
‫Alors, voyons.

94
00:04:51,320 --> 00:04:53,720
‫Et en effet, c'est beaucoup plus agréable.

95
00:04:53,720 --> 00:04:56,333
‫D'accord.

96
00:04:58,660 --> 00:04:59,830
‫Débarrassons-nous ici

97
00:04:59,830 --> 00:05:03,350
‫de cet espace vide et passons au suivant, qui

98
00:05:03,350 --> 00:05:05,200
‫est la zone de description.

99
00:05:05,200 --> 00:05:06,883
‫Donc, tout d'abord ici dans le titre,

100
00:05:07,870 --> 00:05:09,750
‫nous avons également le nom de la tournée.

101
00:05:09,750 --> 00:05:12,320
‫Voici donc le nom de la tournée, et

102
00:05:12,320 --> 00:05:14,250
‫créons donc une chaîne de

103
00:05:14,250 --> 00:05:16,310
‫modèle, et y mettons la tournée. Nom.

104
00:05:16,310 --> 00:05:21,220
‫Je pensais que ça marcherait.

105
00:05:23,770 --> 00:05:25,070
‫Mais ce n'est pas le cas.

106
00:05:26,870 --> 00:05:27,750
‫Cela ne fonctionne qu'en JavaScript.

107
00:05:27,750 --> 00:05:29,250
‫D'accord, et en fait je viens de me

108
00:05:30,650 --> 00:05:33,040
‫rappeler que nous voulons aussi avoir la tournée directement dans le titre principal.

109
00:05:33,040 --> 00:05:38,040
‫Donc, juste ici en fait.

110
00:05:38,600 --> 00:05:42,573
‫D'accord, alors faisons-le.

111
00:05:44,420 --> 00:05:45,983
‫D'accord.

112
00:05:51,040 --> 00:05:51,873
‫Mais de

113
00:05:53,200 --> 00:05:55,500
‫toute façon, descendons ici et créons ces paragraphes.

114
00:05:56,550 --> 00:05:59,010
‫Maintenant, comme vous le voyez, nous avons en fait

115
00:05:59,010 --> 00:06:00,670
‫ici deux paragraphes pour ce texte.

116
00:06:00,670 --> 00:06:04,090
‫Voyons donc comment nous l'avons

117
00:06:04,090 --> 00:06:06,950
‫ici dans la description.

118
00:06:06,950 --> 00:06:08,230
‫Et comme vous le voyez, nous n'avons bien sûr qu'une seule grosse ficelle.

119
00:06:08,230 --> 00:06:12,200
‫Mais nous l'avons au milieu divisé avec ces

120
00:06:12,200 --> 00:06:14,560
‫nouveaux caractères de ligne.

121
00:06:14,560 --> 00:06:16,460
‫Très bien?

122
00:06:16,460 --> 00:06:17,293
‫Et donc ce

123
00:06:17,293 --> 00:06:20,230
‫que nous allons faire est de diviser la chaîne par le caractère de nouvelle ligne.

124
00:06:20,230 --> 00:06:21,743
‫D'accord?

125
00:06:23,550 --> 00:06:24,750
‫Alors c'est facile, non ?

126
00:06:24,750 --> 00:06:26,923
‫Donc, du code sans tampon pour écrire du JavaScript.

127
00:06:29,330 --> 00:06:32,743
‫Les paragraphes sont égaux à la tournée. la description. divisé par le caractère de

128
00:06:35,340 --> 00:06:39,910
‫nouvelle ligne.

129
00:06:45,080 --> 00:06:46,853
‫Et donc cela va maintenant créer un tableau.

130
00:06:47,880 --> 00:06:50,400
‫Ainsi, les paragraphes sont un tableau, où chacun

131
00:06:50,400 --> 00:06:52,460
‫des éléments est essentiellement un paragraphe.

132
00:06:52,460 --> 00:06:55,893
‫D'accord?

133
00:06:56,950 --> 00:06:57,840
‫Et maintenant, tout ce que

134
00:06:57,840 --> 00:07:00,130
‫nous avons à faire est de parcourir tous ces paragraphes et d'imprimer leur contenu.

135
00:07:00,130 --> 00:07:03,940
‫Ainsi, chaque p, disons, dans les

136
00:07:03,940 --> 00:07:06,520
‫paragraphes sera p. description_text égal au paragraphe courant,

137
00:07:06,520 --> 00:07:10,280
‫qui est p.

138
00:07:13,870 --> 00:07:17,063
‫Alors, simple non ?

139
00:07:20,920 --> 00:07:22,343
‫Vérifions cela.

140
00:07:23,490 --> 00:07:24,653
‫Et on ne peut pas

141
00:07:27,560 --> 00:07:30,160
‫vraiment voir si c'est différent car je viens d'utiliser ce texte aveugle ici.

142
00:07:30,160 --> 00:07:32,870
‫Mais je peux vous dire que ceci devrait

143
00:07:32,870 --> 00:07:34,760
‫être le texte correct.

144
00:07:34,760 --> 00:07:36,340
‫Et si nous allons au circuit

145
00:07:36,340 --> 00:07:38,630
‫des randonneurs en forêt, en fait ici à Compass,

146
00:07:38,630 --> 00:07:39,880
‫alors où est-ce ?

147
00:07:42,320 --> 00:07:43,620
‫Ici.

148
00:07:45,370 --> 00:07:46,480
‫Donc, si nous allons ici

149
00:07:46,480 --> 00:07:48,613
‫à la description et essayons de la modifier, ajoutons simplement

150
00:07:49,637 --> 00:07:51,173
‫un autre nouveau caractère de ligne ici.

151
00:07:53,140 --> 00:07:58,140
‫Ensuite, mettons à jour et nous devrions voir

152
00:07:58,660 --> 00:08:03,460
‫un nouveau paragraphe apparaître quelque part ici.

153
00:08:03,460 --> 00:08:05,460
‫Changeons cela.

154
00:08:05,460 --> 00:08:07,090
‫Et cela ne s'est pas si bien passé.

155
00:08:07,090 --> 00:08:09,143
‫Je ne sais pas pourquoi.

156
00:08:09,143 --> 00:08:10,800
‫Je n'ai jamais essayé de le faire, donc ce que

157
00:08:10,800 --> 00:08:12,680
‫je viens de faire était la première fois que je l'ai essayé.

158
00:08:12,680 --> 00:08:16,560
‫Donc je ne suis pas sûr de ce qui s'est passé ici.

159
00:08:16,560 --> 00:08:19,875
‫Peut-être que nous avons juste besoin de créer une

160
00:08:19,875 --> 00:08:23,860
‫nouvelle ligne en appuyant sur Entrée, mais cela n'a pas vraiment

161
00:08:23,860 --> 00:08:25,190
‫fonctionné non plus.

162
00:08:25,190 --> 00:08:28,910
‫Voyons donc si nous avons réellement le nouveau caractère

163
00:08:28,910 --> 00:08:30,550
‫de ligne ici.

164
00:08:30,550 --> 00:08:32,223
‫Et c'est peut-être celui-ci ici.

165
00:08:33,460 --> 00:08:35,360
‫Eh bien, mais peu importe, faites-moi confiance là-dessus.

166
00:08:35,360 --> 00:08:38,723
‫Et maintenant, notre nouvelle ligne est toujours là,

167
00:08:41,450 --> 00:08:43,610
‫que se passe-t-il ?

168
00:08:43,610 --> 00:08:44,833
‫Très bien, c'est parti, mettons-le à jour.

169
00:08:49,740 --> 00:08:52,463
‫Très bien, maintenant notre autre nouvelle ligne que nous

170
00:08:57,830 --> 00:09:01,460
‫avions ici auparavant a également en quelque sorte disparu, mais peu importe.

171
00:09:01,460 --> 00:09:04,440
‫Je suppose que je n'aurais tout simplement pas dû utiliser Compass

172
00:09:04,440 --> 00:09:05,920
‫pour éditer ce texte ici.

173
00:09:05,920 --> 00:09:09,430
‫D'accord?

174
00:09:09,430 --> 00:09:10,690
‫Quoi qu'il en soit, passons maintenant aux images.

175
00:09:10,690 --> 00:09:13,630
‫Et pour le moment, nous ne les voyons pas ici, mais c'est

176
00:09:13,630 --> 00:09:15,960
‫à ça que ça doit ressembler, d'accord ?

177
00:09:15,960 --> 00:09:19,710
‫Nous avons donc ici trois images affichées côte à

178
00:09:19,710 --> 00:09:21,410
‫côte comme celle-ci.

179
00:09:21,410 --> 00:09:23,603
‫Et donc ce sont

180
00:09:24,670 --> 00:09:28,390
‫en fait les images qui sont quelque part ici.

181
00:09:29,690 --> 00:09:31,530
‫Alors oui, dans le champ des

182
00:09:31,530 --> 00:09:33,670
‫images, nous avons ce tableau de ces trois images.

183
00:09:33,670 --> 00:09:36,800
‫Donc, une fois de plus, nous allons utiliser

184
00:09:36,800 --> 00:09:39,160
‫une boucle pour les parcourir.

185
00:09:40,120 --> 00:09:42,360
‫Donc, assez simple.

186
00:09:42,360 --> 00:09:43,933
‫Ainsi, chaque image en tournée. images.

187
00:09:44,890 --> 00:09:49,890
‫Et donc pour chacun d'eux, nous voulons créer ceci.

188
00:09:51,190 --> 00:09:54,423
‫Alors voici la source.

189
00:09:56,690 --> 00:09:58,703
‫Et c'est image/tours, en fait.

190
00:10:00,680 --> 00:10:03,963
‫Et puis le nom de l'image courante,

191
00:10:07,800 --> 00:10:10,360
‫qui est image bien sûr.

192
00:10:10,360 --> 00:10:13,730
‫Et puis ici, dans le texte alternatif, nous avons en fait le numéro de

193
00:10:13,730 --> 00:10:15,760
‫la tournée et, plus important encore, ici dans

194
00:10:15,760 --> 00:10:17,500
‫le nom de la classe CSS.

195
00:10:17,500 --> 00:10:21,700
‫Et donc vous voyez que le suivant a cette image deux

196
00:10:21,700 --> 00:10:23,250
‫et l'image trois.

197
00:10:23,250 --> 00:10:25,693
‫D'accord?

198
00:10:26,750 --> 00:10:27,940
‫Alors comment allons-nous faire?

199
00:10:27,940 --> 00:10:29,900
‫Eh bien, dans une boucle carlin,

200
00:10:29,900 --> 00:10:32,250
‫nous pouvons en fait définir une deuxième variable.

201
00:10:32,250 --> 00:10:34,350
‫Et cette deuxième variable sera alors l'indice.

202
00:10:34,350 --> 00:10:37,723
‫Alors appelons ça i, très simplement.

203
00:10:38,880 --> 00:10:41,280
‫Et c'est donc un indice de base

204
00:10:41,280 --> 00:10:43,750
‫zéro, qui sera zéro pour le premier élément

205
00:10:43,750 --> 00:10:46,660
‫et un et deux pour les deux autres éléments.

206
00:10:46,660 --> 00:10:49,023
‫Et donc commençons d'abord par mettre ça là.

207
00:10:49,890 --> 00:10:53,233
‫C'est donc i, qui est l'indice, plus 1,

208
00:10:58,360 --> 00:11:02,460
‫parce que nous voulons que ce soit 1 et non zéro.

209
00:11:02,460 --> 00:11:05,560
‫Et maintenant, cette partie ici est un peu plus délicate,

210
00:11:05,560 --> 00:11:07,940
‫car nous ne pouvons pas utiliser

211
00:11:07,940 --> 00:11:11,420
‫cette syntaxe, et nous ne pouvons pas non plus utiliser l'autre

212
00:11:11,420 --> 00:11:14,580
‫syntaxe d'interpolation ici même dans le nom de la classe.

213
00:11:14,580 --> 00:11:16,330
‫Et donc à la place, ce que

214
00:11:16,330 --> 00:11:20,270
‫nous allons faire est de copier ceci et de le définir en fait comme un attribut de classe.

215
00:11:20,270 --> 00:11:23,143
‫D'accord, et c'est exactement la même chose.

216
00:11:25,610 --> 00:11:28,140
‫Mais ici, nous pouvons ensuite utiliser une

217
00:11:28,140 --> 00:11:30,860
‫chaîne de modèle afin de remplir celle-ci ici.

218
00:11:30,860 --> 00:11:33,363
‫Donc je + 1.

219
00:11:34,870 --> 00:11:37,393
‫Très bien, débarrassons-nous de ça.

220
00:11:39,360 --> 00:11:41,990
‫Et testons-le.

221
00:11:46,222 --> 00:11:47,122
‫Whoa, quelque chose ne va pas ici.

222
00:11:49,420 --> 00:11:51,473
‫Donc, nous avons nos images, mais elles ne semblent pas correctes.

223
00:11:53,490 --> 00:11:57,450
‫Mais le nom de la classe est en fait juste.

224
00:11:57,450 --> 00:11:59,850
‫Et aussi vous le voyez ici appliqué.

225
00:11:59,850 --> 00:12:02,010
‫Mais pour une raison quelconque, il n'a pas trouvé ces images.

226
00:12:02,010 --> 00:12:05,990
‫Ou en fait, il l'a fait.

227
00:12:05,990 --> 00:12:07,940
‫Ici-bas, il est dit que non.

228
00:12:07,940 --> 00:12:10,150
‫Ah, mais ce sont en fait d'autres images.

229
00:12:10,150 --> 00:12:12,057
‫Mais ce sont d'autres qui sont un peu plus bas.

230
00:12:12,057 --> 00:12:16,460
‫Quoi qu'il en soit, ce que je suppose n'est pas correct ici, c'est que cette image

231
00:12:16,460 --> 00:12:19,590
‫devrait être à l'intérieur de cette zone d'image, et donc je suppose

232
00:12:19,590 --> 00:12:22,340
‫que quelque chose dans notre indentation ici est faux.

233
00:12:22,340 --> 00:12:26,690
‫Et oui, en effet c'est.

234
00:12:26,690 --> 00:12:29,681
‫Vous voyez donc que cette image est au

235
00:12:29,681 --> 00:12:32,040
‫même niveau que cet élément div.

236
00:12:32,040 --> 00:12:33,820
‫Alors bien sûr, il y a une indentation manquante.

237
00:12:33,820 --> 00:12:36,613
‫Très bien.

238
00:12:38,090 --> 00:12:38,930
‫Et donc cela devrait maintenant être corrigé.

239
00:12:38,930 --> 00:12:40,530
‫Et c'est reparti.

240
00:12:43,470 --> 00:12:44,973
‫Très bien.

241
00:12:46,100 --> 00:12:47,050
‫Alors ça, juste pour voir que c'était ça le problème.

242
00:12:47,050 --> 00:12:49,973
‫Maintenant, en effet, l'image est à l'intérieur de la boîte d'image.

243
00:12:51,316 --> 00:12:53,916
‫Tellement bon.

244
00:12:55,380 --> 00:12:56,580
‫Ensuite vient la carte.

245
00:12:56,580 --> 00:12:57,720
‫Qui rappelez-vous, je vais

246
00:12:57,720 --> 00:13:02,170
‫partir pour la prochaine conférence, de sorte que pour l'instant nous pouvons nous soucier de mettre les

247
00:13:02,170 --> 00:13:04,330
‫critiques de la tournée ici dans cet élément.

248
00:13:04,330 --> 00:13:08,140
‫D'accord.

249
00:13:08,140 --> 00:13:09,600
‫Et donc, encore une fois, nous passons maintenant à cette partie ici.

250
00:13:09,600 --> 00:13:14,190
‫Maintenant, d'où viennent réellement ces critiques.

251
00:13:14,190 --> 00:13:16,953
‫Eh bien, rappelez-vous comment ici, dans le viewController, nous

252
00:13:17,810 --> 00:13:19,140
‫avons rempli le

253
00:13:19,140 --> 00:13:21,390
‫champ d'évaluation avec les données d'évaluation réelles.

254
00:13:21,390 --> 00:13:24,410
‫Et donc en ce moment nous avons des tournées. avis, qui est un tableau de tous

255
00:13:24,410 --> 00:13:27,420
‫les avis.

256
00:13:27,420 --> 00:13:29,766
‫Et comme vous pouvez probablement le

257
00:13:29,766 --> 00:13:32,320
‫deviner, nous allons maintenant créer une autre boucle

258
00:13:32,320 --> 00:13:35,460
‫ici même à l'intérieur de cet élément de révision.

259
00:13:35,460 --> 00:13:37,763
‫Donc, chaque examen en tournée. Commentaires.

260
00:13:39,640 --> 00:13:44,640
‫Et puis dans chacun d'eux, nous aurons cette carte de révision.

261
00:13:47,670 --> 00:13:52,670
‫Très bien.

262
00:13:53,150 --> 00:13:54,150
‫Maintenant, il y a

263
00:13:54,150 --> 00:13:56,460
‫beaucoup de code, ce qui nous distrait ici de notre contenu principal.

264
00:13:56,460 --> 00:13:59,870
‫Et donc encore une fois, créons en fait un mixin ici.

265
00:13:59,870 --> 00:14:02,943
‫Très bien.

266
00:14:04,550 --> 00:14:05,383
‫Alors, mettons-le

267
00:14:06,630 --> 00:14:07,780
‫ici en haut.

268
00:14:07,780 --> 00:14:09,230
‫Et vous verrez pourquoi dans une seconde.

269
00:14:11,040 --> 00:14:12,590
‫Alors révisezCard.

270
00:14:14,080 --> 00:14:15,520
‫Et ici, nous passons l'examen lui-même.

271
00:14:16,760 --> 00:14:20,193
‫Très bien.

272
00:14:21,480 --> 00:14:22,330
‫Et maintenant, nous devons réellement corriger ces indentations.

273
00:14:22,330 --> 00:14:25,330
‫Et au lieu de le faire manuellement, rappelez-vous, je

274
00:14:25,330 --> 00:14:26,870
‫vais utiliser ce package VS

275
00:14:26,870 --> 00:14:28,370
‫Code que nous avons.

276
00:14:28,370 --> 00:14:30,610
‫Et donc commande shift

277
00:14:30,610 --> 00:14:35,230
‫p ou control shift p sous Windows, puis Beautify pug.

278
00:14:35,230 --> 00:14:37,193
‫Et donc ça le répare.

279
00:14:38,580 --> 00:14:41,110
‫Et maintenant, nous devons créer cette

280
00:14:41,110 --> 00:14:43,960
‫revue ici sur la base des données.

281
00:14:43,960 --> 00:14:45,540
‫Mais avant de faire cela,

282
00:14:45,540 --> 00:14:48,790
‫appelons en fait le mixin ici à chaque itération de l'examen.

283
00:14:48,790 --> 00:14:50,890
‫Donc +reviewCard avec la critique actuelle, n'est-ce pas ?

284
00:14:50,890 --> 00:14:55,890
‫Voyons donc à quoi ressemble réellement

285
00:15:01,030 --> 00:15:03,090
‫une critique.

286
00:15:03,090 --> 00:15:05,970
‫Et nous avons les critiques ici.

287
00:15:05,970 --> 00:15:07,820
‫Mais effectivement, ils ne seront pas

288
00:15:07,820 --> 00:15:10,140
‫vraiment utiles car l'utilisateur n'est pas renseigné ici.

289
00:15:10,140 --> 00:15:12,773
‫Allons donc voir un

290
00:15:13,860 --> 00:15:17,160
‫facteur et examinons les dernières critiques remplies.

291
00:15:17,160 --> 00:15:21,830
‫Alors disons obtenir une critique en tournée.

292
00:15:21,830 --> 00:15:24,923
‫Parce que ce sera alors un examen complet.

293
00:15:29,250 --> 00:15:32,170
‫Nous avons donc le champ d'évaluation, la note, puis l'utilisateur.

294
00:15:32,170 --> 00:15:35,890
‫Et ce qui nous intéresse ici, c'est

295
00:15:35,890 --> 00:15:37,370
‫alors l'utilisateur. nom et utilisateur. photo.

296
00:15:37,370 --> 00:15:40,593
‫Très bien, et donc le nom d'utilisateur sera révisé. utilisateur. Nom.

297
00:15:41,440 --> 00:15:45,973
‫À droite?

298
00:15:48,010 --> 00:15:48,843
‫Alors revoyez. utilisateur. Nom.

299
00:15:51,130 --> 00:15:55,830
‫Et donc tout cela est nécessaire

300
00:15:55,830 --> 00:15:58,490
‫car, bien sûr, nous avons maintenant plusieurs ensembles de données liés

301
00:15:58,490 --> 00:16:02,340
‫les uns aux autres et donc avec la fonction de remplissage, ils sont tous maintenant en quelque

302
00:16:02,340 --> 00:16:04,050
‫sorte imbriqués les uns dans les autres.

303
00:16:04,050 --> 00:16:07,850
‫Utilisons donc son nom ici aussi.

304
00:16:07,850 --> 00:16:11,413
‫Très bien.

305
00:16:18,110 --> 00:16:19,080
‫Et puis ici,

306
00:16:19,080 --> 00:16:20,130
‫nous n'utiliserons pas son nom.

307
00:16:23,240 --> 00:16:24,940
‫Ah et

308
00:16:24,940 --> 00:16:29,790
‫j'ai oublié l'interpolation, et puis là c'est la photo.

309
00:16:29,790 --> 00:16:32,683
‫Très bien.

310
00:16:33,554 --> 00:16:34,387
‫Ici, ce sera la description.

311
00:16:34,387 --> 00:16:37,063
‫Et c'est en fait un examen. avis, je crois.

312
00:16:39,350 --> 00:16:43,113
‫Donc voilà.

313
00:16:45,390 --> 00:16:46,790
‫Alors revoyez. passer en revue.

314
00:16:46,790 --> 00:16:48,980
‫Et c'est la

315
00:16:48,980 --> 00:16:52,510
‫partie facile et la partie la plus difficile ensuite sera

316
00:16:52,510 --> 00:16:55,760
‫d'afficher la note réelle, car nous devons afficher l'un

317
00:16:55,760 --> 00:16:59,610
‫de ces éléments ici pour chacun des nombres d'étoiles de la critique.

318
00:16:59,610 --> 00:17:02,730
‫Donc, une critique cinq étoiles a besoin de toutes ces cinq étoiles.

319
00:17:02,730 --> 00:17:06,330
‫Mais une revue quatre étoiles n'en a besoin que de quatre et

320
00:17:06,330 --> 00:17:09,130
‫en plus nous voulons aussi une étoile grise.

321
00:17:09,130 --> 00:17:12,420
‫Donc en gros pour dire quatre sur cinq, d'accord ?

322
00:17:12,420 --> 00:17:15,860
‫Mais regardons d'abord si cela fonctionne réellement.

323
00:17:15,860 --> 00:17:18,993
‫Donc tout sauf la cote.

324
00:17:19,900 --> 00:17:21,993
‫Rechargeons donc, et en effet, nous y

325
00:17:23,500 --> 00:17:27,290
‫sommes, avec les utilisateurs, puis le nom, et le texte de la critique lui-même.

326
00:17:27,290 --> 00:17:31,680
‫Et maintenant, occupons-nous également d'afficher

327
00:17:31,680 --> 00:17:34,190
‫la note.

328
00:17:34,190 --> 00:17:36,550
‫Donc, ce que nous allons faire ici, c'est imprimer

329
00:17:36,550 --> 00:17:38,270
‫le nombre d'étoiles dans une boucle.

330
00:17:38,270 --> 00:17:40,880
‫Il y a donc cinq étoiles possibles et donc

331
00:17:40,880 --> 00:17:42,920
‫on boucle de une à cinq.

332
00:17:42,920 --> 00:17:45,660
‫Ensuite, dans chaque étoile, nous testons si la

333
00:17:45,660 --> 00:17:49,270
‫note de la tournée est supérieure ou égale à l'étoile actuelle.

334
00:17:49,270 --> 00:17:52,260
‫Et si c'est le cas, nous imprimons une étoile

335
00:17:52,260 --> 00:17:54,630
‫verte, qui représente une véritable étoile.

336
00:17:54,630 --> 00:17:56,540
‫Et sinon, c'est une étoile grise.

337
00:17:56,540 --> 00:17:58,600
‫Encore une fois, ce qui n'est qu'une étoile inexistante.

338
00:17:58,600 --> 00:18:01,700
‫Par exemple, pour montrer trois sur cinq, d'accord ?

339
00:18:01,700 --> 00:18:06,120
‫Et cela semble probablement un peu abstrait,

340
00:18:06,120 --> 00:18:08,130
‫alors implémentons-le simplement.

341
00:18:08,130 --> 00:18:10,261
‫Donc, chaque étoile dedans.

342
00:18:10,261 --> 00:18:15,261
‫Et maintenant, nous n'avons pas encore de tableau, alors nous

343
00:18:15,580 --> 00:18:17,500
‫le créons simplement.

344
00:18:17,500 --> 00:18:19,000
‫Donc 1, 2,

345
00:18:19,000 --> 00:18:23,240
‫3, 4 et 5, qui sont toutes les étoiles possibles.

346
00:18:23,240 --> 00:18:25,003
‫Ensuite, copions ceci ici.

347
00:18:27,510 --> 00:18:31,160
‫Et maintenant, la différence entre une étoile verte et une

348
00:18:31,160 --> 00:18:34,380
‫étoile grise est que la verte a

349
00:18:34,380 --> 00:18:38,210
‫le modificateur actif ici, et la grise a le modificateur inactif.

350
00:18:38,210 --> 00:18:40,600
‫Et donc nous allons changer cela avec une chaîne de modèle, d'accord ?

351
00:18:40,600 --> 00:18:44,280
‫Et donc comme avant, nous avons en fait besoin de

352
00:18:44,280 --> 00:18:47,880
‫ce nom de classe comme attribut de classe ici.

353
00:18:47,880 --> 00:18:51,443
‫Très bien.

354
00:18:53,850 --> 00:18:54,683
‫Alors cela devrait aussi être ici.

355
00:18:56,830 --> 00:18:58,470
‫Débarrassons-nous de cela.

356
00:18:58,470 --> 00:18:59,743
‫Et maintenant, faisons ce test que nous venons de mentionner.

357
00:19:02,630 --> 00:19:05,570
‫Et encore une fois, le résultat sera

358
00:19:05,570 --> 00:19:08,650
‫que cette année est soit active, soit inactive.

359
00:19:08,650 --> 00:19:10,770
‫Et donc mettons un peu de JavaScript à ce stade.

360
00:19:10,770 --> 00:19:14,083
‫Et donc ce que nous allons faire ici est

361
00:19:16,360 --> 00:19:18,090
‫de tester si l'examen. note, qui est l'endroit

362
00:19:18,090 --> 00:19:22,130
‫où la note est stockée, est

363
00:19:22,130 --> 00:19:23,930
‫supérieure ou égale à l'étoile actuelle.

364
00:19:25,230 --> 00:19:28,483
‫Donc, fondamentalement, nous écrivons ici un opérateur de tournage.

365
00:19:30,010 --> 00:19:33,810
‫Et donc si c'est le cas,

366
00:19:33,810 --> 00:19:37,233
‫alors nous voulons dire ici, actif,

367
00:19:38,640 --> 00:19:40,210
‫et sinon,

368
00:19:40,210 --> 00:19:41,063
‫inactif.

369
00:19:43,450 --> 00:19:44,653
‫Et ça a l'air un peu bizarre, je sais.

370
00:19:46,370 --> 00:19:49,790
‫Alors, illustrons simplement cela avec un exemple simple.

371
00:19:49,790 --> 00:19:53,530
‫Alors disons que nous avons trois étoiles sur cinq, d'accord ?

372
00:19:53,530 --> 00:19:58,530
‫Ainsi, dans la première itération, star est un.

373
00:19:58,660 --> 00:20:02,212
‫Et donc un est bien sûr moins que trois.

374
00:20:02,212 --> 00:20:06,330
‫Et donc la première étoile devrait, bien sûr, être une étoile

375
00:20:06,330 --> 00:20:08,630
‫verte, et c'est pourquoi ici

376
00:20:08,630 --> 00:20:12,360
‫nous mettons active, ce qui se traduira ensuite par reviews_star--active.

377
00:20:12,360 --> 00:20:16,610
‫D'accord?

378
00:20:16,610 --> 00:20:17,443
‫Puis la même chose avec la deuxième et la troisième étoile.

379
00:20:17,443 --> 00:20:20,910
‫Donc, à ce stade, nous avons trois étoiles vertes.

380
00:20:20,910 --> 00:20:23,320
‫Mais le quatrième et le cinquième devraient être gris.

381
00:20:23,320 --> 00:20:26,410
‫D'accord?

382
00:20:26,410 --> 00:20:27,243
‫Et donc, dans la quatrième itération, l'étoile vaut quatre.

383
00:20:27,243 --> 00:20:30,270
‫Le test est donc trois supérieur à quatre ?

384
00:20:30,270 --> 00:20:33,580
‫Non c'est faux et donc inactif.

385
00:20:33,580 --> 00:20:36,350
‫Et donc ce sera alors une étoile grise, et la même

386
00:20:36,350 --> 00:20:38,820
‫chose pour la dernière, donc la cinquième étoile.

387
00:20:38,820 --> 00:20:42,683
‫Très bien, alors testons ça.

388
00:20:43,720 --> 00:20:47,200
‫Et en fait, nous ne pouvons pas le tester ici, car

389
00:20:47,200 --> 00:20:49,480
‫ce randonneur forestier a une note

390
00:20:49,480 --> 00:20:51,410
‫parfaite de cinq sur cinq

391
00:20:51,410 --> 00:20:53,900
‫et donc toutes les critiques sont cinq étoiles.

392
00:20:53,900 --> 00:20:57,390
‫Et donc nous devons venir ici pour toutes les tournées.

393
00:20:57,390 --> 00:21:00,490
‫Et bien que ce lien ne

394
00:21:00,490 --> 00:21:03,970
‫fonctionne pas encore vraiment, vous ne voyez donc

395
00:21:03,970 --> 00:21:07,460
‫que des modifications comme celle-ci, ce hachage ici.

396
00:21:07,460 --> 00:21:08,677
‫Et donc allons-y rapidement et corrigeons cela.

397
00:21:08,677 --> 00:21:12,270
‫Et c'est dans l'en-tête, donc ici.

398
00:21:12,270 --> 00:21:15,830
‫Mais nous ne voulons pas de cela.

399
00:21:15,830 --> 00:21:17,200
‫Nous voulons simplement aller à notre page racine.

400
00:21:17,200 --> 00:21:20,330
‫Donc c'est juste la barre oblique.

401
00:21:20,330 --> 00:21:23,123
‫Alors rechargez.

402
00:21:24,690 --> 00:21:25,963
‫Et maintenant, là-bas, dans le

403
00:21:26,810 --> 00:21:29,340
‫lien, vous voyez que c'est exactement ce que nous avons.

404
00:21:29,340 --> 00:21:31,597
‫Et donc effectivement, nous revenons à notre page de présentation.

405
00:21:31,597 --> 00:21:34,853
‫Passons donc à une page avec une moyenne inférieure.

406
00:21:35,800 --> 00:21:39,220
‫Et c'est donc l'amateur de sport.

407
00:21:39,220 --> 00:21:40,843
‫Voyons voir.

408
00:21:42,390 --> 00:21:43,463
‫Et bien sûr, vous voyez

409
00:21:44,510 --> 00:21:46,790
‫que toutes les données sont maintenant correctes pour cette tournée spécifique.

410
00:21:46,790 --> 00:21:49,410
‫Donc encore une fois, vous voyez ce 3. 9 en moyenne.

411
00:21:49,410 --> 00:21:52,190
‫Vous voyez tous

412
00:21:52,190 --> 00:21:54,430
‫ces différents guides touristiques, les différentes photos, et

413
00:21:54,430 --> 00:21:55,823
‫vous voyez toutes les critiques.

414
00:21:56,850 --> 00:21:59,110
‫Et vous voyez aussi que les étoiles fonctionnent réellement.

415
00:21:59,110 --> 00:22:03,420
‫Donc, ce premier avis est un avis cinq étoiles.

416
00:22:03,420 --> 00:22:05,660
‫Et donc vous voyez cinq, quatre, un,

417
00:22:05,660 --> 00:22:08,053
‫puis un tas de critiques quatre étoiles ici.

418
00:22:09,570 --> 00:22:13,633
‫D'accord, alors, c'était un peu plus déroutant, cette partie,

419
00:22:15,290 --> 00:22:20,290
‫mais nous avons quand même réussi à le faire fonctionner, n'est-ce pas ?

420
00:22:20,490 --> 00:22:24,740
‫Maintenant, une chose que je voulais juste vous montrer, c'est que

421
00:22:24,740 --> 00:22:27,030
‫nous pouvons également exporter, essentiellement

422
00:22:27,030 --> 00:22:29,420
‫un mixin dans son fichier séparé.

423
00:22:29,420 --> 00:22:32,490
‫Et donc, copions simplement ceci et créons un

424
00:22:32,490 --> 00:22:34,100
‫nouveau mixin ici,

425
00:22:34,100 --> 00:22:36,600
‫ou en fait un nouveau fichier.

426
00:22:36,600 --> 00:22:37,973
‫Et donc puisque nous allons ensuite

427
00:22:39,410 --> 00:22:41,760
‫l'inclure, je vais à nouveau préfixer cela avec ce trait de soulignement.

428
00:22:41,760 --> 00:22:44,343
‫Et appelons ça reviewCard. carlin.

429
00:22:45,610 --> 00:22:49,423
‫Ensuite, collez-le ici.

430
00:22:50,720 --> 00:22:52,600
‫Et toute l'indentation est toujours

431
00:22:52,600 --> 00:22:55,300
‫correcte, et maintenant tout ce que nous

432
00:22:55,300 --> 00:22:57,923
‫avons à faire est de dire, d'inclure

433
00:22:59,140 --> 00:22:59,973
‫_reviewCard.

434
00:23:01,670 --> 00:23:02,670
‫Et donc si nous

435
00:23:03,850 --> 00:23:06,120
‫essayons cela maintenant, cela devrait toujours fonctionner, ce qui est le cas.

436
00:23:06,120 --> 00:23:09,123
‫Très bien.

437
00:23:11,090 --> 00:23:12,230
‫Nous avons donc écrit

438
00:23:12,230 --> 00:23:14,660
‫beaucoup de code jusqu'à présent et nous avons presque terminé.

439
00:23:14,660 --> 00:23:16,090
‫Tout ce qui reste à faire est cette section d'appel à l'action.

440
00:23:16,090 --> 00:23:20,010
‫Et ici, tout ce que nous avons vraiment besoin de

441
00:23:20,010 --> 00:23:22,360
‫changer, c'est cette durée ici.

442
00:23:22,360 --> 00:23:24,340
‫Nous avons donc ce joli slogan

443
00:23:24,340 --> 00:23:25,820
‫comme, 10 jours.

444
00:23:25,820 --> 00:23:26,653
‫1 aventure.

445
00:23:26,653 --> 00:23:27,520
‫Souvenirs infinis.

446
00:23:27,520 --> 00:23:29,200
‫Très bien?

447
00:23:29,200 --> 00:23:30,240
‫Mais nous devons en fait

448
00:23:30,240 --> 00:23:32,890
‫remplacer le nombre de jours afin qu'il soit correct pour cette tournée particulière.

449
00:23:32,890 --> 00:23:35,563
‫Créons donc une chaîne de modèle pour cela.

450
00:23:36,870 --> 00:23:39,020
‫Donc tournée. durée.

451
00:23:45,840 --> 00:23:47,720
‫Et puis aussi ici, nous avons quelques images de la tournée, d'accord ?

452
00:23:47,720 --> 00:23:52,350
‫Alors faisons-le aussi.

453
00:23:52,350 --> 00:23:54,650
‫C'est donc l'image. tours, ou

454
00:23:54,650 --> 00:23:59,470
‫/tours puis slash tour. images.

455
00:24:04,020 --> 00:24:05,200
‫Et rappelez-vous qu'il

456
00:24:05,200 --> 00:24:07,430
‫s'agit d'un tableau et que j'utiliserai simplement le premier et le deuxième élément.

457
00:24:07,430 --> 00:24:11,120
‫Ou en fait le deuxième et le troisième parce que j'ai

458
00:24:11,120 --> 00:24:13,010
‫découvert que ceux-ci ont généralement

459
00:24:13,010 --> 00:24:15,150
‫l'air un peu mieux dans la situation.

460
00:24:15,150 --> 00:24:17,223
‫Alors,

461
00:24:18,530 --> 00:24:20,980
‫copions ça.

462
00:24:20,980 --> 00:24:23,103
‫Mettez ça ici.

463
00:24:24,900 --> 00:24:25,833
‫Oh et il nous manque la parenthèse fermante ici.

464
00:24:26,961 --> 00:24:30,480
‫Et ajoutons simplement un texte alternatif.

465
00:24:30,480 --> 00:24:32,530
‫Photo de la tournée.

466
00:24:33,890 --> 00:24:34,973
‫Très bien.

467
00:24:36,540 --> 00:24:37,500
‫Et je pense que c'est effectivement ça.

468
00:24:37,500 --> 00:24:40,380
‫Alors juste un dernier essai.

469
00:24:40,380 --> 00:24:42,243
‫Vous voyez qu'ici c'est vide en ce moment.

470
00:24:44,040 --> 00:24:46,203
‫Mais maintenant en effet, nous avons les

471
00:24:47,200 --> 00:24:48,223
‫mêmes images ici.

472
00:24:49,075 --> 00:24:51,690
‫Cela devrait donc être le numéro deux.

473
00:24:51,690 --> 00:24:53,313
‫Mais encore, maintenant, il

474
00:24:54,450 --> 00:24:57,960
‫est dit 14 jours, et donc tout cela est correct maintenant.

475
00:24:57,960 --> 00:25:00,470
‫Impressionnant.

476
00:25:00,470 --> 00:25:01,530
‫C'est fantastique.

477
00:25:01,530 --> 00:25:03,010
‫C'était beaucoup de travail, mais

478
00:25:03,010 --> 00:25:04,920
‫je pense que ça a vraiment payé.

479
00:25:04,920 --> 00:25:06,610
‫Cette page, je pense, est absolument fantastique.

480
00:25:06,610 --> 00:25:10,530
‫C'est vraiment bluffant.

481
00:25:10,530 --> 00:25:12,200
‫Et maintenant, tout est connecté.

482
00:25:12,200 --> 00:25:14,050
‫Ainsi, à chaque tournée, nous pouvons

483
00:25:14,050 --> 00:25:17,260
‫revenir à toutes les tournées et jeter un œil à toutes les autres.

484
00:25:17,260 --> 00:25:20,100
‫Voyons le camping-car du parc.

485
00:25:20,100 --> 00:25:21,960
‫La visite du parc en camping-car.

486
00:25:21,960 --> 00:25:23,500
‫Tous les détails.

487
00:25:23,500 --> 00:25:24,540
‫Tous les différents guides,

488
00:25:24,540 --> 00:25:26,593
‫images, leurs avis, et bien sûr ces différentes images.

489
00:25:27,620 --> 00:25:32,173
‫Super.

490
00:25:33,400 --> 00:25:34,233
‫Vous voyez donc ce trou vide ici au milieu de notre page.

491
00:25:34,233 --> 00:25:38,230
‫Et c'est donc là que la carte va être la

492
00:25:38,230 --> 00:25:40,630
‫prochaine, et alors faisons-le, en

493
00:25:40,630 --> 00:25:43,500
‫fait dès maintenant dans la prochaine conférence.