1
00:00:01,100 --> 00:00:03,200
‫Istruttore: Va bene, questa è la seconda parte

2
00:00:03,200 --> 00:00:05,313
‫di Creazione della pagina dei dettagli della pagina del tour.

3
00:00:06,670 --> 00:00:08,820
‫E abbiamo lasciato l'ultimo

4
00:00:08,820 --> 00:00:11,630
‫video dopo aver costruito questa parte Quick

5
00:00:11,630 --> 00:00:14,130
‫Facts usando alcuni mixin, giusto?

6
00:00:14,130 --> 00:00:16,550
‫E quindi ora è il momento

7
00:00:16,550 --> 00:00:19,010
‫di costruire questa parte qui delle guide.

8
00:00:19,010 --> 00:00:21,550
‫Ora non sappiamo in anticipo quante guide turistiche

9
00:00:21,550 --> 00:00:23,950
‫ci siano effettivamente in ogni tour.

10
00:00:23,950 --> 00:00:26,150
‫E quindi, proprio come nella pagina della

11
00:00:26,150 --> 00:00:27,930
‫panoramica, qui abbiamo bisogno

12
00:00:27,930 --> 00:00:30,260
‫di un altro ciclo per scorrere sostanzialmente tutte

13
00:00:30,260 --> 00:00:32,423
‫le guide associate a un determinato tour.

14
00:00:34,030 --> 00:00:36,220
‫Quindi, facciamolo.

15
00:00:36,220 --> 00:00:39,900
‫E in questo momento abbiamo effettivamente questi tre elementi.

16
00:00:39,900 --> 00:00:43,210
‫Quindi questi tre box, uno per ogni guida.

17
00:00:43,210 --> 00:00:47,570
‫Ma come abbiamo appena detto, non è così che vogliamo che funzioni.

18
00:00:47,570 --> 00:00:51,970
‫Quindi liberiamoci di questi due e poi creiamo un ciclo qui,

19
00:00:51,970 --> 00:00:55,210
‫che in ogni iterazione creerà una scatola,

20
00:00:55,210 --> 00:00:57,620
‫quindi un elemento come questo.

21
00:00:57,620 --> 00:00:59,553
‫E dovrebbe essere abbastanza facile.

22
00:01:00,460 --> 00:01:01,880
‫Quindi, di nuovo,

23
00:01:03,890 --> 00:01:06,923
‫usiamo ciascuno e poi il nome della variabile

24
00:01:08,505 --> 00:01:11,580
‫nell'iterazione corrente, in e quindi l'array che vogliamo scorrere.

25
00:01:11,580 --> 00:01:14,933
‫E quindi questo è il tour. guide.

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

27
00:01:18,230 --> 00:01:19,063
‫Allora,

28
00:01:20,080 --> 00:01:20,913
‫dov'è?

29
00:01:23,540 --> 00:01:26,620
‫Sì, quindi ecco la nostra gamma di guide.

30
00:01:26,620 --> 00:01:29,810
‫Che ovviamente nel database verranno poi popolati

31
00:01:29,810 --> 00:01:34,393
‫con gli utenti corrispondenti e non solo con gli ID, giusto?

32
00:01:35,260 --> 00:01:37,803
‫Quindi ora dobbiamo far rientrare tutto questo qui.

33
00:01:38,902 --> 00:01:40,350
‫E quindi ognuna di

34
00:01:40,350 --> 00:01:43,220
‫queste guide qui sarà fondamentalmente un documento utente.

35
00:01:43,220 --> 00:01:46,010
‫Quindi controlliamolo rapidamente in

36
00:01:46,010 --> 00:01:50,560
‫Compass perché non abbiamo quel tipo di dati nel

37
00:01:50,560 --> 00:01:53,390
‫nostro documento JSON perché, ovviamente, la

38
00:01:53,390 --> 00:01:57,520
‫popolazione avviene solo dietro le quinte usando Mongos, giusto?

39
00:01:57,520 --> 00:01:59,600
‫Quindi ciascuna delle guide è un utente.

40
00:01:59,600 --> 00:02:03,573
‫E quindi quello che vogliamo è il nome e la foto.

41
00:02:06,100 --> 00:02:09,893
‫Quindi qui vogliamo la foto, ovviamente.

42
00:02:10,890 --> 00:02:12,140
‫Che è, in

43
00:02:12,140 --> 00:02:16,683
‫questa pagina, in immagini/utenti e poi il nome della foto dell'utente.

44
00:02:20,180 --> 00:02:22,850
‫Quindi guida. foto.

45
00:02:22,850 --> 00:02:25,350
‫Che è qui, di nuovo, il

46
00:02:25,350 --> 00:02:27,540
‫nome della variabile nell'iterazione corrente.

47
00:02:27,540 --> 00:02:30,130
‫Quindi qui non so perché dice Guida

48
00:02:30,130 --> 00:02:33,223
‫guida, ma in realtà mettiamo qui il nome della persona.

49
00:02:37,030 --> 00:02:39,520
‫Quindi guida. nome.

50
00:02:39,520 --> 00:02:42,713
‫Quindi qui vogliamo di nuovo il nome della guida. nome.

51
00:02:45,997 --> 00:02:46,850
‫E poi vogliamo anche l'etichetta.

52
00:02:46,850 --> 00:02:49,330
‫E quindi fondamentalmente quella sarà guida principale quando

53
00:02:49,330 --> 00:02:50,940
‫è guida principale e semplicemente

54
00:02:50,940 --> 00:02:53,060
‫guida turistica quando è una guida normale.

55
00:02:53,060 --> 00:02:56,810
‫Ora lascia che ti mostri cosa succede quando mettiamo

56
00:02:56,810 --> 00:02:58,270
‫qui il ruolo.

57
00:02:58,270 --> 00:03:00,223
‫Quindi ricorda che il ruolo è la

58
00:03:02,300 --> 00:03:04,830
‫proprietà in cui diciamo se un utente è una guida

59
00:03:04,830 --> 00:03:07,040
‫o una guida principale o anche un amministratore.

60
00:03:07,040 --> 00:03:09,333
‫Va bene?

61
00:03:10,430 --> 00:03:11,450
‫Quindi, di nuovo,

62
00:03:11,450 --> 00:03:14,030
‫vediamo per ora cosa succede quando la mettiamo così.

63
00:03:14,030 --> 00:03:16,130
‫E con ciò dovremmo essere pronti a testarlo effettivamente.

64
00:03:16,130 --> 00:03:19,963
‫Diamo un salvataggio.

65
00:03:21,450 --> 00:03:23,030
‫E qui andiamo.

66
00:03:23,030 --> 00:03:24,700
‫Quindi abbiamo le tre

67
00:03:24,700 --> 00:03:27,800
‫foto, i nomi, ma poi qui il ruolo

68
00:03:27,800 --> 00:03:30,440
‫di guida non sembra proprio buono, giusto?

69
00:03:30,440 --> 00:03:33,020
‫Quindi ricorda come, in

70
00:03:33,020 --> 00:03:37,640
‫effetti, vogliamo dire guida principale e guida turistica.

71
00:03:37,640 --> 00:03:38,883
‫Ok, quindi ora è il momento di usare un condizionale.

72
00:03:39,930 --> 00:03:43,270
‫Ora pug ha effettivamente dei condizionali incorporati, ma

73
00:03:43,270 --> 00:03:46,080
‫sono davvero semplici e non possiamo fare

74
00:03:46,080 --> 00:03:48,390
‫molte cose con loro.

75
00:03:48,390 --> 00:03:50,020
‫Ad esempio, non ci

76
00:03:50,020 --> 00:03:52,240
‫consentono nemmeno di verificare l'uguaglianza, ad esempio.

77
00:03:52,240 --> 00:03:54,990
‫Ma la cosa buona è che possiamo ancora

78
00:03:54,990 --> 00:03:56,520
‫usare JavaScript per quello.

79
00:03:56,520 --> 00:03:58,813
‫E così di nuovo, usiamo del codice non bufferizzato per questo.

80
00:03:59,770 --> 00:04:03,190
‫Quindi con la sintassi del trattino e quindi possiamo

81
00:04:03,190 --> 00:04:05,730
‫usare un normale JavaScript se qui.

82
00:04:05,730 --> 00:04:08,023
‫Quindi, di nuovo, come se stessimo scrivendo JavaScript.

83
00:04:08,890 --> 00:04:12,180
‫E così guida. ruolo e ora possiamo testare e dire

84
00:04:12,180 --> 00:04:16,340
‫se è una guida.

85
00:04:16,340 --> 00:04:19,873
‫Bene, allora qui vogliamo dire

86
00:04:22,130 --> 00:04:24,340
‫Guida principale, ok?

87
00:04:27,330 --> 00:04:28,753
‫E mettiamone un altro

88
00:04:32,309 --> 00:04:33,980
‫qui e diciamo che se

89
00:04:33,980 --> 00:04:37,320
‫il ruolo è solo guida, beh, allora vogliamo la guida turistica.

90
00:04:37,320 --> 00:04:40,690
‫E quindi è così che usiamo un JavaScript se scriviamo all'interno

91
00:04:40,690 --> 00:04:44,660
‫di pug e poi lo combiniamo con un output di pug come questo.

92
00:04:44,660 --> 00:04:48,823
‫Va bene?

93
00:04:50,237 --> 00:04:51,320
‫Quindi, vediamo.

94
00:04:51,320 --> 00:04:53,720
‫E infatti, è molto più bello.

95
00:04:53,720 --> 00:04:56,333
‫Va bene.

96
00:04:58,660 --> 00:04:59,830
‫Eliminiamo questo

97
00:04:59,830 --> 00:05:03,350
‫spazio vuoto qui e passiamo a quello successivo, che

98
00:05:03,350 --> 00:05:05,200
‫è la casella di descrizione.

99
00:05:05,200 --> 00:05:06,883
‫Quindi prima qui nell'intestazione

100
00:05:07,870 --> 00:05:09,750
‫abbiamo anche il nome del tour.

101
00:05:09,750 --> 00:05:12,320
‫Quindi questo qui è il nome del

102
00:05:12,320 --> 00:05:14,250
‫tour, quindi creiamo una

103
00:05:14,250 --> 00:05:16,310
‫stringa modello e lì mettiamo tour. nome.

104
00:05:16,310 --> 00:05:21,220
‫Ho pensato che avrebbe funzionato.

105
00:05:23,770 --> 00:05:25,070
‫Ma non è così.

106
00:05:26,870 --> 00:05:27,750
‫Funziona solo in JavaScript.

107
00:05:27,750 --> 00:05:29,250
‫Ok, e in realtà mi sono

108
00:05:30,650 --> 00:05:33,040
‫appena ricordato che vogliamo anche avere il tour proprio nel titolo principale.

109
00:05:33,040 --> 00:05:38,040
‫Quindi, proprio qui in realtà.

110
00:05:38,600 --> 00:05:42,573
‫Ok, allora facciamolo.

111
00:05:44,420 --> 00:05:45,983
‫Va bene.

112
00:05:51,040 --> 00:05:51,873
‫Ma comunque,

113
00:05:53,200 --> 00:05:55,500
‫spostiamoci qui e creiamo questi paragrafi.

114
00:05:56,550 --> 00:05:59,010
‫Ora, come vedi, in realtà abbiamo due paragrafi

115
00:05:59,010 --> 00:06:00,670
‫qui per questo testo.

116
00:06:00,670 --> 00:06:04,090
‫Quindi diamo solo un'occhiata a come

117
00:06:04,090 --> 00:06:06,950
‫lo abbiamo qui nella descrizione.

118
00:06:06,950 --> 00:06:08,230
‫E come vedi, ovviamente abbiamo solo una grossa corda.

119
00:06:08,230 --> 00:06:12,200
‫Ma l'abbiamo nel mezzo diviso con questi

120
00:06:12,200 --> 00:06:14,560
‫nuovi caratteri di linea.

121
00:06:14,560 --> 00:06:16,460
‫Va bene?

122
00:06:16,460 --> 00:06:17,293
‫E quindi quello

123
00:06:17,293 --> 00:06:20,230
‫che faremo è dividere la stringa per il carattere della nuova riga.

124
00:06:20,230 --> 00:06:21,743
‫Va bene?

125
00:06:23,550 --> 00:06:24,750
‫Quindi è facile, no?

126
00:06:24,750 --> 00:06:26,923
‫Quindi, codice non bufferizzato per scrivere JavaScript.

127
00:06:29,330 --> 00:06:32,743
‫Paragrafi è uguale a tour. descrizione. diviso dal carattere della nuova

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

129
00:06:45,080 --> 00:06:46,853
‫E quindi questo ora creerà un array.

130
00:06:47,880 --> 00:06:50,400
‫Quindi i paragrafi sono un array, in cui ciascuno

131
00:06:50,400 --> 00:06:52,460
‫degli elementi è fondamentalmente un paragrafo.

132
00:06:52,460 --> 00:06:55,893
‫Va bene?

133
00:06:56,950 --> 00:06:57,840
‫E quindi ora tutto

134
00:06:57,840 --> 00:07:00,130
‫ciò che dobbiamo fare è scorrere tutti questi paragrafi e stamparne il contenuto.

135
00:07:00,130 --> 00:07:03,940
‫Quindi ogni p, diciamo, nei

136
00:07:03,940 --> 00:07:06,520
‫paragrafi sarà p. descrizione_testo uguale al paragrafo corrente,

137
00:07:06,520 --> 00:07:10,280
‫che è p.

138
00:07:13,870 --> 00:07:17,063
‫Quindi, semplice no?

139
00:07:20,920 --> 00:07:22,343
‫Verifichiamolo.

140
00:07:23,490 --> 00:07:24,653
‫E non possiamo davvero

141
00:07:27,560 --> 00:07:30,160
‫vedere se è diverso perché ho appena usato questo testo cieco qui.

142
00:07:30,160 --> 00:07:32,870
‫Ma posso dirvi che questo qui dovrebbe

143
00:07:32,870 --> 00:07:34,760
‫essere il testo corretto.

144
00:07:34,760 --> 00:07:36,340
‫E se andiamo al tour

145
00:07:36,340 --> 00:07:38,630
‫escursionistico della foresta, in realtà qui a

146
00:07:38,630 --> 00:07:39,880
‫Compass, allora dov'è?

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

148
00:07:45,370 --> 00:07:46,480
‫Quindi, se andiamo

149
00:07:46,480 --> 00:07:48,613
‫qui alla descrizione e proviamo a modificarla, aggiungiamo qui

150
00:07:49,637 --> 00:07:51,173
‫un altro nuovo carattere di riga.

151
00:07:53,140 --> 00:07:58,140
‫Quindi aggiorniamoci e poi dovremmo vedere un nuovo

152
00:07:58,660 --> 00:08:03,460
‫paragrafo spuntare da qualche parte qui.

153
00:08:03,460 --> 00:08:05,460
‫Cambiamo quello.

154
00:08:05,460 --> 00:08:07,090
‫E non è andata così bene.

155
00:08:07,090 --> 00:08:09,143
‫Non sono sicuro del perché.

156
00:08:09,143 --> 00:08:10,800
‫Non ho mai provato a farlo, quindi quello

157
00:08:10,800 --> 00:08:12,680
‫che ho fatto è stata la prima volta che l'ho provato.

158
00:08:12,680 --> 00:08:16,560
‫Quindi non sono sicuro di cosa sia andato storto qui.

159
00:08:16,560 --> 00:08:19,875
‫Forse abbiamo solo bisogno di creare

160
00:08:19,875 --> 00:08:23,860
‫una nuova riga premendo invio, ma neanche questo

161
00:08:23,860 --> 00:08:25,190
‫ha funzionato.

162
00:08:25,190 --> 00:08:28,910
‫Quindi vediamo se abbiamo effettivamente il carattere della

163
00:08:28,910 --> 00:08:30,550
‫nuova linea qui.

164
00:08:30,550 --> 00:08:32,223
‫E forse è questo qui.

165
00:08:33,460 --> 00:08:35,360
‫Beh, ma non importa, fidati di me su questo.

166
00:08:35,360 --> 00:08:38,723
‫E ora la nostra nuova linea è ancora

167
00:08:41,450 --> 00:08:43,610
‫lì, cosa sta succedendo?

168
00:08:43,610 --> 00:08:44,833
‫Va bene, ci siamo, aggiorniamolo.

169
00:08:49,740 --> 00:08:52,463
‫Bene, ora anche l'altra nostra nuova linea

170
00:08:57,830 --> 00:09:01,460
‫che avevamo qui prima è un po' scomparsa, ma non importa.

171
00:09:01,460 --> 00:09:04,440
‫Immagino che non avrei dovuto usare Compass per modificare

172
00:09:04,440 --> 00:09:05,920
‫questo testo qui.

173
00:09:05,920 --> 00:09:09,430
‫Va bene?

174
00:09:09,430 --> 00:09:10,690
‫Comunque, ora passiamo alle immagini.

175
00:09:10,690 --> 00:09:13,630
‫E in questo momento non li vediamo qui, ma

176
00:09:13,630 --> 00:09:15,960
‫è così che dovrebbe apparire, ok?

177
00:09:15,960 --> 00:09:19,710
‫Quindi abbiamo tre immagini qui visualizzate fianco a fianco

178
00:09:19,710 --> 00:09:21,410
‫in questo modo.

179
00:09:21,410 --> 00:09:23,603
‫E quindi queste sono in

180
00:09:24,670 --> 00:09:28,390
‫realtà le immagini che sono da qualche parte qui.

181
00:09:29,690 --> 00:09:31,530
‫Quindi sì, nel campo delle immagini

182
00:09:31,530 --> 00:09:33,670
‫abbiamo questa serie di queste tre immagini.

183
00:09:33,670 --> 00:09:36,800
‫Quindi ancora una volta useremo un

184
00:09:36,800 --> 00:09:39,160
‫ciclo per scorrerli.

185
00:09:40,120 --> 00:09:42,360
‫Quindi, abbastanza semplice.

186
00:09:42,360 --> 00:09:43,933
‫Quindi, ogni immagine in tour. immagini.

187
00:09:44,890 --> 00:09:49,890
‫E quindi per ognuno di loro vogliamo creare questo.

188
00:09:51,190 --> 00:09:54,423
‫Quindi ecco la fonte.

189
00:09:56,690 --> 00:09:58,703
‫E questo è image/tours, in realtà.

190
00:10:00,680 --> 00:10:03,963
‫E poi il nome dell'immagine corrente,

191
00:10:07,800 --> 00:10:10,360
‫che è image ovviamente.

192
00:10:10,360 --> 00:10:13,730
‫E poi qui nel testo alternativo abbiamo effettivamente il numero del

193
00:10:13,730 --> 00:10:15,760
‫tour e, cosa più importante, anche qui

194
00:10:15,760 --> 00:10:17,500
‫nel nome della classe CSS.

195
00:10:17,500 --> 00:10:21,700
‫E così vedi che il prossimo ha quell'immagine due

196
00:10:21,700 --> 00:10:23,250
‫e l'immagine tre.

197
00:10:23,250 --> 00:10:25,693
‫Va bene?

198
00:10:26,750 --> 00:10:27,940
‫Allora come lo faremo?

199
00:10:27,940 --> 00:10:29,900
‫Bene, in un ciclo pug

200
00:10:29,900 --> 00:10:32,250
‫possiamo effettivamente definire una seconda variabile.

201
00:10:32,250 --> 00:10:34,350
‫E quella seconda variabile sarà quindi l'indice.

202
00:10:34,350 --> 00:10:37,723
‫Quindi chiamiamolo io, molto semplicemente.

203
00:10:38,880 --> 00:10:41,280
‫Quindi questo è un indice a base

204
00:10:41,280 --> 00:10:43,750
‫zero, che sarà zero per il primo elemento

205
00:10:43,750 --> 00:10:46,660
‫e uno e due per gli altri due elementi.

206
00:10:46,660 --> 00:10:49,023
‫E quindi iniziamo prima mettendolo lì.

207
00:10:49,890 --> 00:10:53,233
‫Quindi questo è i, che è l'indice, più

208
00:10:58,360 --> 00:11:02,460
‫1, perché vogliamo che questo sia 1 e non zero.

209
00:11:02,460 --> 00:11:05,560
‫E ora questa parte qui è un po'

210
00:11:05,560 --> 00:11:07,940
‫più complicata, perché non possiamo

211
00:11:07,940 --> 00:11:11,420
‫usare questa sintassi, e non possiamo nemmeno usare l'altra

212
00:11:11,420 --> 00:11:14,580
‫sintassi di interpolazione proprio qui nel nome della classe.

213
00:11:14,580 --> 00:11:16,330
‫E così, invece, quello che

214
00:11:16,330 --> 00:11:20,270
‫faremo è copiare questo e definirlo effettivamente come un attributo di classe.

215
00:11:20,270 --> 00:11:23,143
‫Ok, quindi è esattamente lo stesso.

216
00:11:25,610 --> 00:11:28,140
‫Ma qui possiamo quindi usare

217
00:11:28,140 --> 00:11:30,860
‫una stringa modello per poi riempirla qui.

218
00:11:30,860 --> 00:11:33,363
‫Quindi io + 1.

219
00:11:34,870 --> 00:11:37,393
‫Va bene, liberiamoci di questo.

220
00:11:39,360 --> 00:11:41,990
‫E proviamolo.

221
00:11:46,222 --> 00:11:47,122
‫Whoa, qualcosa non va qui.

222
00:11:49,420 --> 00:11:51,473
‫Quindi, abbiamo le nostre immagini, ma non sembrano corrette.

223
00:11:53,490 --> 00:11:57,450
‫Ma il nome della classe è effettivamente corretto.

224
00:11:57,450 --> 00:11:59,850
‫E lo vedi anche qui applicato.

225
00:11:59,850 --> 00:12:02,010
‫Ma per qualche ragione non ha trovato queste immagini.

226
00:12:02,010 --> 00:12:05,990
‫O in realtà lo ha fatto.

227
00:12:05,990 --> 00:12:07,940
‫Quaggiù dice di no.

228
00:12:07,940 --> 00:12:10,150
‫Ah, ma queste sono in realtà altre immagini.

229
00:12:10,150 --> 00:12:12,057
‫Ma questi sono alcuni altri che sono un po' più in basso.

230
00:12:12,057 --> 00:12:16,460
‫Ad ogni modo, quello che immagino non sia corretto qui è che questa immagine dovrebbe

231
00:12:16,460 --> 00:12:19,590
‫essere all'interno di questa scatola di immagini, e quindi immagino

232
00:12:19,590 --> 00:12:22,340
‫che qualcosa nel nostro rientro qui sia sbagliato.

233
00:12:22,340 --> 00:12:26,690
‫E sì, in effetti lo è.

234
00:12:26,690 --> 00:12:29,681
‫Quindi vedi che questa immagine è allo stesso

235
00:12:29,681 --> 00:12:32,040
‫livello di questo elemento div.

236
00:12:32,040 --> 00:12:33,820
‫Quindi, ovviamente, c'è una rientranza mancante.

237
00:12:33,820 --> 00:12:36,613
‫Va bene.

238
00:12:38,090 --> 00:12:38,930
‫E quindi ora dovrebbe essere risolto.

239
00:12:38,930 --> 00:12:40,530
‫E qui andiamo.

240
00:12:43,470 --> 00:12:44,973
‫Va bene.

241
00:12:46,100 --> 00:12:47,050
‫Quindi, solo per vedere che questo era il problema.

242
00:12:47,050 --> 00:12:49,973
‫Ora in effetti l'immagine è all'interno della scatola delle immagini.

243
00:12:51,316 --> 00:12:53,916
‫Così fantastico.

244
00:12:55,380 --> 00:12:56,580
‫Il prossimo è la mappa.

245
00:12:56,580 --> 00:12:57,720
‫Il che ricorda,

246
00:12:57,720 --> 00:13:02,170
‫partirò per la prossima conferenza, così per ora possiamo preoccuparci di mettere le recensioni

247
00:13:02,170 --> 00:13:04,330
‫del tour qui in questo elemento.

248
00:13:04,330 --> 00:13:08,140
‫Va bene.

249
00:13:08,140 --> 00:13:09,600
‫E così, di nuovo, ora passiamo a questa parte qui.

250
00:13:09,600 --> 00:13:14,190
‫Ora, da dove provengono effettivamente queste recensioni.

251
00:13:14,190 --> 00:13:16,953
‫Bene, ricorda come qui nel viewController abbiamo popolato

252
00:13:17,810 --> 00:13:19,140
‫il campo delle

253
00:13:19,140 --> 00:13:21,390
‫recensioni con i dati effettivi della recensione.

254
00:13:21,390 --> 00:13:24,410
‫E quindi in questo momento abbiamo dei tour. recensioni, che è una serie di tutte

255
00:13:24,410 --> 00:13:27,420
‫le recensioni.

256
00:13:27,420 --> 00:13:29,766
‫E quindi, come probabilmente puoi

257
00:13:29,766 --> 00:13:32,320
‫immaginare, ora creeremo un altro ciclo

258
00:13:32,320 --> 00:13:35,460
‫proprio qui all'interno di questo elemento di recensione.

259
00:13:35,460 --> 00:13:37,763
‫Quindi, ogni recensione in tour. recensioni.

260
00:13:39,640 --> 00:13:44,640
‫E poi in ognuno di essi avremo questa scheda di revisione.

261
00:13:47,670 --> 00:13:52,670
‫Va bene.

262
00:13:53,150 --> 00:13:54,150
‫Questo qui è un

263
00:13:54,150 --> 00:13:56,460
‫sacco di codice, che ci sta distraendo dal nostro contenuto principale.

264
00:13:56,460 --> 00:13:59,870
‫E quindi cerchiamo di nuovo, in realtà, di creare un mixin qui.

265
00:13:59,870 --> 00:14:02,943
‫Va bene.

266
00:14:04,550 --> 00:14:05,383
‫Quindi, mettiamolo

267
00:14:06,630 --> 00:14:07,780
‫qui in alto.

268
00:14:07,780 --> 00:14:09,230
‫E vedrai perché in un secondo.

269
00:14:11,040 --> 00:14:12,590
‫Quindi recensisciCard.

270
00:14:14,080 --> 00:14:15,520
‫E qui passiamo la recensione stessa.

271
00:14:16,760 --> 00:14:20,193
‫Va bene.

272
00:14:21,480 --> 00:14:22,330
‫E ora abbiamo davvero bisogno di correggere queste rientranze.

273
00:14:22,330 --> 00:14:25,330
‫E invece di farlo manualmente, ricorda, userò

274
00:14:25,330 --> 00:14:26,870
‫quel pacchetto VS Code

275
00:14:26,870 --> 00:14:28,370
‫che abbiamo.

276
00:14:28,370 --> 00:14:30,610
‫E quindi comanda shift

277
00:14:30,610 --> 00:14:35,230
‫p o control shift p su Windows e poi Beautify pug.

278
00:14:35,230 --> 00:14:37,193
‫E così lo risolve.

279
00:14:38,580 --> 00:14:41,110
‫E quindi ora dobbiamo creare

280
00:14:41,110 --> 00:14:43,960
‫questa recensione qui in base ai dati.

281
00:14:43,960 --> 00:14:45,540
‫Ma prima di farlo,

282
00:14:45,540 --> 00:14:48,790
‫chiamiamo il mixin qui in ogni iterazione della recensione.

283
00:14:48,790 --> 00:14:50,890
‫Quindi +reviewCard con la recensione attuale, giusto?

284
00:14:50,890 --> 00:14:55,890
‫Quindi, diamo un'occhiata a come appare effettivamente

285
00:15:01,030 --> 00:15:03,090
‫una recensione.

286
00:15:03,090 --> 00:15:05,970
‫E abbiamo le recensioni qui.

287
00:15:05,970 --> 00:15:07,820
‫Ma in effetti, non saranno

288
00:15:07,820 --> 00:15:10,140
‫davvero utili perché l'utente non è popolato qui.

289
00:15:10,140 --> 00:15:12,773
‫Quindi andiamo davvero da un postino

290
00:15:13,860 --> 00:15:17,160
‫e diamo un'occhiata alle recensioni finali compilate lì dentro.

291
00:15:17,160 --> 00:15:21,830
‫Quindi diciamo di avere una recensione in tour.

292
00:15:21,830 --> 00:15:24,923
‫Perché quella sarà quindi una recensione completa.

293
00:15:29,250 --> 00:15:32,170
‫Quindi abbiamo il campo della recensione, la valutazione e poi l'utente.

294
00:15:32,170 --> 00:15:35,890
‫E ciò che ci interessa qui

295
00:15:35,890 --> 00:15:37,370
‫è l'utente. nome e utente. foto.

296
00:15:37,370 --> 00:15:40,593
‫Va bene, quindi il nome utente sarà rivisto. utente. nome.

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

298
00:15:48,010 --> 00:15:48,843
‫Quindi recensione. utente. nome.

299
00:15:51,130 --> 00:15:55,830
‫E quindi tutto questo

300
00:15:55,830 --> 00:15:58,490
‫è necessario perché ovviamente ora abbiamo più set

301
00:15:58,490 --> 00:16:02,340
‫di dati correlati tra loro e quindi con la funzione popola ora

302
00:16:02,340 --> 00:16:04,050
‫sono tutti annidati l'uno nell'altro.

303
00:16:04,050 --> 00:16:07,850
‫Quindi usiamo anche qui il suo nome.

304
00:16:07,850 --> 00:16:11,413
‫Va bene.

305
00:16:18,110 --> 00:16:19,080
‫E poi qui

306
00:16:19,080 --> 00:16:20,130
‫non useremo il suo nome.

307
00:16:23,240 --> 00:16:24,940
‫Oh e

308
00:16:24,940 --> 00:16:29,790
‫ho dimenticato l'interpolazione, e poi ecco la foto.

309
00:16:29,790 --> 00:16:32,683
‫Va bene.

310
00:16:33,554 --> 00:16:34,387
‫Qui sarà la descrizione.

311
00:16:34,387 --> 00:16:37,063
‫E questa è in realtà una recensione. recensione, credo.

312
00:16:39,350 --> 00:16:43,113
‫Quindi, sì.

313
00:16:45,390 --> 00:16:46,790
‫Quindi recensione. recensione.

314
00:16:46,790 --> 00:16:48,980
‫E questa è

315
00:16:48,980 --> 00:16:52,510
‫la parte facile e la parte difficile successiva sarà visualizzare

316
00:16:52,510 --> 00:16:55,760
‫la valutazione effettiva, perché dobbiamo visualizzare uno di questi

317
00:16:55,760 --> 00:16:59,610
‫elementi qui per ciascuno del numero di stelle che ha la recensione.

318
00:16:59,610 --> 00:17:02,730
‫Quindi una recensione a cinque stelle ha bisogno di tutte queste cinque stelle.

319
00:17:02,730 --> 00:17:06,330
‫Ma una recensione a quattro stelle ne richiede solo quattro e

320
00:17:06,330 --> 00:17:09,130
‫poi in più vogliamo anche una stella grigia.

321
00:17:09,130 --> 00:17:12,420
‫Quindi praticamente per dire quattro su cinque, ok?

322
00:17:12,420 --> 00:17:15,860
‫Ma diamo prima un'occhiata, se funziona davvero.

323
00:17:15,860 --> 00:17:18,993
‫Quindi tutto tranne la valutazione.

324
00:17:19,900 --> 00:17:21,993
‫Quindi ricarichiamo, e infatti, eccoci qui,

325
00:17:23,500 --> 00:17:27,290
‫con gli utenti, quindi il nome e il testo della recensione stessa.

326
00:17:27,290 --> 00:17:31,680
‫E ora ci occupiamo di visualizzare effettivamente

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

328
00:17:34,190 --> 00:17:36,550
‫Quindi quello che faremo qui è stampare la quantità

329
00:17:36,550 --> 00:17:38,270
‫di stelle in un ciclo.

330
00:17:38,270 --> 00:17:40,880
‫Quindi ci sono cinque possibili stelle e quindi

331
00:17:40,880 --> 00:17:42,920
‫passiamo da uno a cinque.

332
00:17:42,920 --> 00:17:45,660
‫Quindi in ogni stella testiamo se la

333
00:17:45,660 --> 00:17:49,270
‫valutazione del tour è maggiore o uguale alla stella corrente.

334
00:17:49,270 --> 00:17:52,260
‫E se è così, stampiamo una stella verde,

335
00:17:52,260 --> 00:17:54,630
‫che sta per una vera stella.

336
00:17:54,630 --> 00:17:56,540
‫E se no, è una stella grigia.

337
00:17:56,540 --> 00:17:58,600
‫Quindi di nuovo, che è solo una stella inesistente.

338
00:17:58,600 --> 00:18:01,700
‫Ad esempio, per mostrare tre su cinque, ok?

339
00:18:01,700 --> 00:18:06,120
‫E probabilmente suona un po' astratto,

340
00:18:06,120 --> 00:18:08,130
‫quindi implementiamolo.

341
00:18:08,130 --> 00:18:10,261
‫Quindi ogni stella dentro.

342
00:18:10,261 --> 00:18:15,261
‫E ora non abbiamo ancora un array, quindi

343
00:18:15,580 --> 00:18:17,500
‫lo creiamo semplicemente.

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

345
00:18:19,000 --> 00:18:23,240
‫3, 4 e 5, che sono tutte le possibili stelle.

346
00:18:23,240 --> 00:18:25,003
‫Avanti, copiamo questo qui.

347
00:18:27,510 --> 00:18:31,160
‫E ora la differenza tra una stella verde e

348
00:18:31,160 --> 00:18:34,380
‫una grigia è che il verde ha

349
00:18:34,380 --> 00:18:38,210
‫il modificatore attivo qui e quello grigio ha inattivo.

350
00:18:38,210 --> 00:18:40,600
‫E quindi lo cambieremo con una stringa modello, ok?

351
00:18:40,600 --> 00:18:44,280
‫E quindi, proprio come prima, abbiamo effettivamente bisogno di questo

352
00:18:44,280 --> 00:18:47,880
‫nome di classe come attributo di classe qui.

353
00:18:47,880 --> 00:18:51,443
‫Va bene.

354
00:18:53,850 --> 00:18:54,683
‫Allora dovrebbe esserci anche questo.

355
00:18:56,830 --> 00:18:58,470
‫Eliminiamo questo.

356
00:18:58,470 --> 00:18:59,743
‫E quindi ora facciamo quel test che abbiamo appena menzionato.

357
00:19:02,630 --> 00:19:05,570
‫E ancora, il risultato sarà

358
00:19:05,570 --> 00:19:08,650
‫che quest'anno sarà attivo o inattivo.

359
00:19:08,650 --> 00:19:10,770
‫E quindi mettiamo un po' di JavaScript proprio a questo punto.

360
00:19:10,770 --> 00:19:14,083
‫E quindi quello che faremo qui è testare

361
00:19:16,360 --> 00:19:18,090
‫se la recensione. valutazione, che è dove

362
00:19:18,090 --> 00:19:22,130
‫è memorizzata la valutazione, è maggiore

363
00:19:22,130 --> 00:19:23,930
‫o uguale alla stella corrente.

364
00:19:25,230 --> 00:19:28,483
‫Quindi in pratica stiamo scrivendo un operatore di tornitura qui.

365
00:19:30,010 --> 00:19:33,810
‫E quindi se lo è, allora

366
00:19:33,810 --> 00:19:37,233
‫qui vogliamo dire attivo e, in

367
00:19:38,640 --> 00:19:40,210
‫caso contrario,

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

369
00:19:43,450 --> 00:19:44,653
‫E questo sembra un po' strano, lo so.

370
00:19:46,370 --> 00:19:49,790
‫Quindi cerchiamo di esemplificarlo con un semplice esempio.

371
00:19:49,790 --> 00:19:53,530
‫Quindi diciamo che abbiamo tre stelle su cinque, ok?

372
00:19:53,530 --> 00:19:58,530
‫Quindi nella prima iterazione, la stella è una.

373
00:19:58,660 --> 00:20:02,212
‫E quindi uno è ovviamente meno di tre.

374
00:20:02,212 --> 00:20:06,330
‫E quindi la prima stella dovrebbe, ovviamente, essere verde,

375
00:20:06,330 --> 00:20:08,630
‫ed è per questo

376
00:20:08,630 --> 00:20:12,360
‫che qui pubblichiamo active, che si tradurrà in review_star--active.

377
00:20:12,360 --> 00:20:16,610
‫Va bene?

378
00:20:16,610 --> 00:20:17,443
‫Poi la stessa cosa con la seconda e la terza stella.

379
00:20:17,443 --> 00:20:20,910
‫Quindi a quel punto abbiamo tre stelle verdi.

380
00:20:20,910 --> 00:20:23,320
‫Ma il quarto e il quinto dovrebbero essere grigi.

381
00:20:23,320 --> 00:20:26,410
‫Va bene?

382
00:20:26,410 --> 00:20:27,243
‫E così nella quarta iterazione qui la stella è quattro.

383
00:20:27,243 --> 00:20:30,270
‫Quindi il test è tre maggiore di quattro?

384
00:20:30,270 --> 00:20:33,580
‫No è falso e quindi è inattivo.

385
00:20:33,580 --> 00:20:36,350
‫E quindi quella sarà una stella grigia, e la

386
00:20:36,350 --> 00:20:38,820
‫stessa cosa per l'ultima, quindi la quinta stella.

387
00:20:38,820 --> 00:20:42,683
‫Va bene, allora proviamolo.

388
00:20:43,720 --> 00:20:47,200
‫E in realtà non possiamo testarlo qui, perché questo escursionista

389
00:20:47,200 --> 00:20:49,480
‫della foresta ha una valutazione perfetta

390
00:20:49,480 --> 00:20:51,410
‫di cinque su cinque e

391
00:20:51,410 --> 00:20:53,900
‫quindi tutte le recensioni sono cinque stelle.

392
00:20:53,900 --> 00:20:57,390
‫E quindi dobbiamo venire qui a tutti i tour.

393
00:20:57,390 --> 00:21:00,490
‫E anche se questo collegamento non

394
00:21:00,490 --> 00:21:03,970
‫funziona ancora, quindi vedi che viene modificato

395
00:21:03,970 --> 00:21:07,460
‫solo in questo modo, questo hash qui.

396
00:21:07,460 --> 00:21:08,677
‫E quindi andiamo rapidamente avanti e risolviamo il problema.

397
00:21:08,677 --> 00:21:12,270
‫E questo è nell'intestazione, quindi proprio qui.

398
00:21:12,270 --> 00:21:15,830
‫Ma non lo vogliamo.

399
00:21:15,830 --> 00:21:17,200
‫Vogliamo semplicemente andare alla nostra pagina principale.

400
00:21:17,200 --> 00:21:20,330
‫Quindi questo è solo lo slash.

401
00:21:20,330 --> 00:21:23,123
‫Quindi ricarica.

402
00:21:24,690 --> 00:21:25,963
‫E ora laggiù nel

403
00:21:26,810 --> 00:21:29,340
‫link vedi che è esattamente quello che abbiamo.

404
00:21:29,340 --> 00:21:31,597
‫E così in effetti, torniamo alla nostra pagina di panoramica.

405
00:21:31,597 --> 00:21:34,853
‫Quindi andiamo a una pagina con una media inferiore.

406
00:21:35,800 --> 00:21:39,220
‫E quindi questo è l'amante dello sport.

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

408
00:21:42,390 --> 00:21:43,463
‫E ovviamente vedi che

409
00:21:44,510 --> 00:21:46,790
‫tutti i dati ora sono corretti per questo tour specifico.

410
00:21:46,790 --> 00:21:49,410
‫Quindi di nuovo vedi questo 3. 9 nella media.

411
00:21:49,410 --> 00:21:52,190
‫Vedi tutte queste

412
00:21:52,190 --> 00:21:54,430
‫diverse guide turistiche, le diverse immagini e

413
00:21:54,430 --> 00:21:55,823
‫vedi tutte le recensioni.

414
00:21:56,850 --> 00:21:59,110
‫E vedi anche che le stelle funzionano davvero.

415
00:21:59,110 --> 00:22:03,420
‫Quindi questa prima recensione è una recensione a cinque stelle.

416
00:22:03,420 --> 00:22:05,660
‫E così vedi cinque, quattro, uno e

417
00:22:05,660 --> 00:22:08,053
‫poi un mucchio di recensioni a quattro stelle quaggiù.

418
00:22:09,570 --> 00:22:13,633
‫Ok, quindi, questa parte è stata un po'

419
00:22:15,290 --> 00:22:20,290
‫più confusa, ma siamo comunque riusciti a farlo funzionare, giusto?

420
00:22:20,490 --> 00:22:24,740
‫Ora una cosa che volevo mostrarti è che possiamo effettivamente

421
00:22:24,740 --> 00:22:27,030
‫anche esportare, fondamentalmente un

422
00:22:27,030 --> 00:22:29,420
‫mixin nel suo file separato.

423
00:22:29,420 --> 00:22:32,490
‫Quindi copiamo questo e creiamo un nuovo

424
00:22:32,490 --> 00:22:34,100
‫mixin qui, o

425
00:22:34,100 --> 00:22:36,600
‫in realtà un nuovo file.

426
00:22:36,600 --> 00:22:37,973
‫E quindi poiché lo includeremo

427
00:22:39,410 --> 00:22:41,760
‫di nuovo, lo premetterò di nuovo con questo carattere di sottolineatura.

428
00:22:41,760 --> 00:22:44,343
‫E chiamiamola reviewCard. carlino.

429
00:22:45,610 --> 00:22:49,423
‫Quindi incollalo qui.

430
00:22:50,720 --> 00:22:52,600
‫E tutto il rientro

431
00:22:52,600 --> 00:22:55,300
‫è ancora corretto, e ora tutto ciò

432
00:22:55,300 --> 00:22:57,923
‫che dobbiamo fare è dire, includi

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

434
00:23:01,670 --> 00:23:02,670
‫E quindi, se

435
00:23:03,850 --> 00:23:06,120
‫lo proviamo ora, dovrebbe funzionare ancora, cosa che fa.

436
00:23:06,120 --> 00:23:09,123
‫Va bene.

437
00:23:11,090 --> 00:23:12,230
‫Quindi abbiamo scritto

438
00:23:12,230 --> 00:23:14,660
‫molto codice finora e abbiamo quasi finito.

439
00:23:14,660 --> 00:23:16,090
‫Tutto ciò che resta da fare è questa sezione di invito all'azione.

440
00:23:16,090 --> 00:23:20,010
‫E qui tutto ciò che dobbiamo veramente cambiare

441
00:23:20,010 --> 00:23:22,360
‫è questa durata qui.

442
00:23:22,360 --> 00:23:24,340
‫Quindi abbiamo questo simpatico slogan

443
00:23:24,340 --> 00:23:25,820
‫tipo, 10 giorni.

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

445
00:23:26,653 --> 00:23:27,520
‫Ricordi infiniti.

446
00:23:27,520 --> 00:23:29,200
‫Va bene?

447
00:23:29,200 --> 00:23:30,240
‫Ma in realtà dobbiamo sostituire

448
00:23:30,240 --> 00:23:32,890
‫il numero di giorni in modo che sia corretto per questo particolare tour.

449
00:23:32,890 --> 00:23:35,563
‫Quindi creiamo una stringa modello per questo.

450
00:23:36,870 --> 00:23:39,020
‫Quindi tour. durata.

451
00:23:45,840 --> 00:23:47,720
‫E poi anche qui abbiamo alcune delle immagini del tour, ok?

452
00:23:47,720 --> 00:23:52,350
‫Quindi facciamolo anche noi.

453
00:23:52,350 --> 00:23:54,650
‫Quindi questa è l'immagine. tour, o /tours

454
00:23:54,650 --> 00:23:59,470
‫e poi slash tour. immagini.

455
00:24:04,020 --> 00:24:05,200
‫E ricorda che

456
00:24:05,200 --> 00:24:07,430
‫questo è un array e userò semplicemente il primo e il secondo elemento.

457
00:24:07,430 --> 00:24:11,120
‫O in realtà il secondo e il terzo perché ho scoperto

458
00:24:11,120 --> 00:24:13,010
‫che questi di solito

459
00:24:13,010 --> 00:24:15,150
‫sembrano un po' migliori nella situazione.

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

461
00:24:18,530 --> 00:24:20,980
‫copiamo quello.

462
00:24:20,980 --> 00:24:23,103
‫Mettilo qui.

463
00:24:24,900 --> 00:24:25,833
‫Oh, e qui ci manca la parentesi di chiusura.

464
00:24:26,961 --> 00:24:30,480
‫E aggiungiamo solo del testo alternativo.

465
00:24:30,480 --> 00:24:32,530
‫Foto del tour.

466
00:24:33,890 --> 00:24:34,973
‫Va bene.

467
00:24:36,540 --> 00:24:37,500
‫E penso che sia davvero così.

468
00:24:37,500 --> 00:24:40,380
‫Quindi solo un ultimo tentativo.

469
00:24:40,380 --> 00:24:42,243
‫Vedi che qui è vuoto adesso.

470
00:24:44,040 --> 00:24:46,203
‫Ma ora, in effetti, abbiamo le stesse

471
00:24:47,200 --> 00:24:48,223
‫immagini qui.

472
00:24:49,075 --> 00:24:51,690
‫Quindi questo dovrebbe essere il numero due.

473
00:24:51,690 --> 00:24:53,313
‫Ma ancora, ora dice

474
00:24:54,450 --> 00:24:57,960
‫14 giorni, e quindi tutto questo è corretto ora.

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

476
00:25:00,470 --> 00:25:01,530
‫È fantastico.

477
00:25:01,530 --> 00:25:03,010
‫È stato un sacco di

478
00:25:03,010 --> 00:25:04,920
‫lavoro, ma penso che sia stato davvero ripagato.

479
00:25:04,920 --> 00:25:06,610
‫Questa pagina, penso sia assolutamente fantastica.

480
00:25:06,610 --> 00:25:10,530
‫È davvero sbalorditivo.

481
00:25:10,530 --> 00:25:12,200
‫E così ora tutto è connesso.

482
00:25:12,200 --> 00:25:14,050
‫Quindi in ogni tour possiamo tornare

483
00:25:14,050 --> 00:25:17,260
‫a tutti i tour e dare un'occhiata a tutti gli altri.

484
00:25:17,260 --> 00:25:20,100
‫Vediamo il camper del parco.

485
00:25:20,100 --> 00:25:21,960
‫Il tour in camper del parco.

486
00:25:21,960 --> 00:25:23,500
‫Tutti i dettagli.

487
00:25:23,500 --> 00:25:24,540
‫Tutte le diverse guide,

488
00:25:24,540 --> 00:25:26,593
‫immagini, le loro recensioni e in effetti queste diverse immagini.

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

490
00:25:33,400 --> 00:25:34,233
‫Quindi vedete questo buco vuoto qui al centro della nostra pagina.

491
00:25:34,233 --> 00:25:38,230
‫Ed ecco dove sarà la prossima mappa,

492
00:25:38,230 --> 00:25:40,630
‫e quindi facciamolo,

493
00:25:40,630 --> 00:25:43,500
‫proprio ora nella prossima lezione.