1
00:00:01,100 --> 00:00:03,220
‫Narratore: Successivamente, imparerai come

2
00:00:03,220 --> 00:00:07,150
‫integrare una bella mappa che mostra tutte le posizioni

3
00:00:07,150 --> 00:00:11,373
‫di un determinato tour nel nostro sito Web utilizzando Mapbox.

4
00:00:12,730 --> 00:00:14,150
‫Ma prima di

5
00:00:14,150 --> 00:00:18,160
‫farlo, dobbiamo prima correggere un piccolo bug che ho appena trovato.

6
00:00:18,160 --> 00:00:20,840
‫Quindi in questo momento siamo nel tour in camper

7
00:00:20,840 --> 00:00:23,477
‫del parco, ma vedete che quassù in realtà c'è

8
00:00:23,477 --> 00:00:27,180
‫scritto "The Forest Hiker" ok? E quindi, questo è

9
00:00:27,180 --> 00:00:28,991
‫ovviamente sbagliato e quindi,

10
00:00:28,991 --> 00:00:30,260
‫perché

11
00:00:30,260 --> 00:00:33,700
‫qui nel nostro gestore di tour get,

12
00:00:33,700 --> 00:00:36,900
‫passiamo sempre in questo titolo, quindi "The

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

14
00:00:38,530 --> 00:00:42,193
‫Il che ovviamente non è corretto, quindi risolviamolo.

15
00:00:44,850 --> 00:00:47,780
‫Ok, quindi diciamo qui

16
00:00:47,780 --> 00:00:50,190
‫tour. nome e poi

17
00:00:51,400 --> 00:00:52,283
‫tour.

18
00:00:54,520 --> 00:00:56,283
‫Rendiamolo maiuscolo in realtà.

19
00:00:57,150 --> 00:01:00,150
‫E così, ora dovremmo vedere il tour "The

20
00:01:02,620 --> 00:01:05,070
‫park camper" e sì, eccolo qui.

21
00:01:05,070 --> 00:01:07,740
‫E ora riguardo a quella mappa

22
00:01:07,740 --> 00:01:10,050
‫che verrà visualizzata qui in

23
00:01:10,050 --> 00:01:13,580
‫quest'area vuota, useremo una libreria molto carina chiamata "Mapbox"

24
00:01:13,580 --> 00:01:17,060
‫e quella libreria viene effettivamente eseguita nel front-end.

25
00:01:17,060 --> 00:01:19,030
‫E così, in questa

26
00:01:19,030 --> 00:01:21,070
‫lezione scriveremo un po' di codice

27
00:01:21,070 --> 00:01:23,330
‫front-end, e non tanto sul back-end.

28
00:01:23,330 --> 00:01:25,300
‫Ma questo è ancora

29
00:01:25,300 --> 00:01:27,890
‫molto importante perché ora imparerai come scrivere

30
00:01:27,890 --> 00:01:31,730
‫JavaScript per il lato client e poi integrarlo nei nostri modelli.

31
00:01:31,730 --> 00:01:32,710
‫Va bene?

32
00:01:32,710 --> 00:01:34,190
‫Quindi facciamolo

33
00:01:35,030 --> 00:01:39,130
‫e prima di tutto ricordiamo che tutti i dati, quindi

34
00:01:39,130 --> 00:01:42,140
‫tutte le risorse disponibili sul client, sono

35
00:01:42,140 --> 00:01:44,170
‫qui in questa cartella pubblica.

36
00:01:44,170 --> 00:01:47,830
‫Quindi, ad esempio, il nostro file CSS, le nostre immagini

37
00:01:47,830 --> 00:01:51,050
‫e abbiamo anche una cartella qui per JavaScript.

38
00:01:51,050 --> 00:01:53,470
‫E attualmente è vuoto, quindi

39
00:01:53,470 --> 00:01:56,230
‫ora creiamo un nuovo file qui chiamato

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

41
00:02:03,000 --> 00:02:06,525
‫va bene? E quindi questo è fondamentalmente

42
00:02:06,525 --> 00:02:08,700
‫un file JavaScript che integreremo nel nostro

43
00:02:08,700 --> 00:02:11,250
‫HTML e che verrà quindi eseguito sul lato client.

44
00:02:11,250 --> 00:02:14,140
‫Va bene? Quindi, proprio come il

45
00:02:14,140 --> 00:02:17,340
‫normale JavaScript che hai scritto per tutta la vita (ride) giusto?

46
00:02:17,340 --> 00:02:20,760
‫Ma per ora, facciamo semplicemente qualche semplice console. log qui prima

47
00:02:20,760 --> 00:02:23,343
‫di connetterlo effettivamente con il nostro back-end.

48
00:02:25,540 --> 00:02:30,540
‫Quindi diciamo solo console. log ciao dal lato client.

49
00:02:33,360 --> 00:02:34,333
‫Va

50
00:02:35,400 --> 00:02:39,160
‫bene, e ora integriamolo nei nostri modelli.

51
00:02:39,160 --> 00:02:41,290
‫Ora potrebbe sembrare che il posto

52
00:02:41,290 --> 00:02:45,600
‫migliore per fare questa integrazione sia qui nel nostro modello di base, giusto?

53
00:02:45,600 --> 00:02:49,220
‫Ma in effetti, vogliamo solo includere lo script Mapbox nella

54
00:02:49,220 --> 00:02:51,230
‫pagina del tour, giusto?

55
00:02:51,230 --> 00:02:53,610
‫Quindi, come potremmo farlo?

56
00:02:53,610 --> 00:02:56,070
‫E la soluzione per questo è ancora una

57
00:02:56,070 --> 00:02:59,040
‫volta, estendere un blocco qui nel nostro modello di

58
00:02:59,040 --> 00:03:01,190
‫base, quindi creerò un nuovo

59
00:03:01,190 --> 00:03:05,850
‫blocco qui che estenderemo poi dal tour. Va bene?

60
00:03:05,850 --> 00:03:08,523
‫E in realtà questo blocco sarà proprio

61
00:03:10,670 --> 00:03:12,260
‫qui, e lo chiamo

62
00:03:12,260 --> 00:03:15,093
‫"testa" e tutto questo contenuto sarà effettivamente lì.

63
00:03:16,020 --> 00:03:18,740
‫Ora ti starai chiedendo perché lo stiamo

64
00:03:18,740 --> 00:03:20,410
‫facendo, perché quando estendiamo

65
00:03:20,410 --> 00:03:22,700
‫il blocco il contenuto all'interno scompare.

66
00:03:22,700 --> 00:03:26,350
‫Quindi è quello che è successo qui, giusto?

67
00:03:26,350 --> 00:03:29,440
‫Ma in realtà esiste un altro modo per estendere i

68
00:03:29,440 --> 00:03:32,350
‫blocchi, che aggiungerà semplicemente il nuovo contenuto alla fine

69
00:03:32,350 --> 00:03:34,060
‫o all'inizio del blocco.

70
00:03:34,060 --> 00:03:37,190
‫Va bene? Quindi vediamo come possiamo farlo.

71
00:03:37,190 --> 00:03:41,170
‫E quindi proprio all'inizio del nostro modello di

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

73
00:03:44,810 --> 00:03:46,120
‫diciamo ora: block

74
00:03:46,120 --> 00:03:50,900
‫head, e in realtà diciamo block append head, va bene?

75
00:03:50,900 --> 00:03:53,730
‫E quindi, qualunque cosa scriveremo in questo blocco

76
00:03:53,730 --> 00:03:55,960
‫qui verrà quindi aggiunta al contenuto che

77
00:03:55,960 --> 00:03:58,010
‫è già in quel blocco.

78
00:03:58,010 --> 00:04:00,510
‫Va bene? E potremmo anche

79
00:04:00,510 --> 00:04:04,500
‫usare "prepend" e poi verrebbe aggiunto all'inizio del blocco, ok?

80
00:04:04,500 --> 00:04:07,690
‫E quindi ora, tutto ciò che faremo qui sarà aggiungere

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

82
00:04:08,950 --> 00:04:11,890
‫Quindi, usando un tag di script e quindi

83
00:04:11,890 --> 00:04:14,410
‫specificando l'attributo di origine, e quindi

84
00:04:15,280 --> 00:04:23,760
‫questo è per ora "js/mapbox. js" va bene?

85
00:04:23,760 --> 00:04:27,400
‫Quindi di nuovo, questo modello qui estende già il nostro

86
00:04:27,400 --> 00:04:28,800
‫modello di base,

87
00:04:28,800 --> 00:04:32,070
‫e quindi con questo qui, possiamo sostanzialmente iniettare questa

88
00:04:32,070 --> 00:04:33,870
‫riga di codice, nel

89
00:04:33,870 --> 00:04:37,450
‫blocco head che è già nel nostro modello di base.

90
00:04:37,450 --> 00:04:40,930
‫E quindi, lo aggiungiamo, e quindi apparirà qui alla fine

91
00:04:40,930 --> 00:04:44,380
‫di questo blocco di testa, quindi proprio qui.

92
00:04:44,380 --> 00:04:46,453
‫E in realtà proviamo che il nostro ora.

93
00:04:47,940 --> 00:04:49,053
‫Quindi, quando

94
00:04:50,520 --> 00:04:53,610
‫ricarico, ora dovremmo ricevere quel messaggio nella

95
00:04:53,610 --> 00:04:56,760
‫nostra console e in effetti, "Ciao dal lato

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

97
00:04:58,700 --> 00:05:02,080
‫Ottimo Quindi, ora vogliamo effettivamente accedere ai dati

98
00:05:02,080 --> 00:05:03,850
‫sulla posizione del tour

99
00:05:03,850 --> 00:05:06,140
‫che stiamo attualmente cercando di visualizzare,

100
00:05:06,140 --> 00:05:08,170
‫proprio qui nel file JavaScript.

101
00:05:08,170 --> 00:05:10,390
‫Quindi come lo farete?

102
00:05:10,390 --> 00:05:13,590
‫Bene, allora possiamo fare una richiesta Ajax, quindi fondamentalmente

103
00:05:13,590 --> 00:05:16,410
‫una chiamata alla nostra API e ottenere i

104
00:05:16,410 --> 00:05:17,870
‫dati da lì.

105
00:05:17,870 --> 00:05:20,760
‫Ma non è davvero necessario in questo caso.

106
00:05:20,760 --> 00:05:23,590
‫E quindi, lascia che ti mostri un vero bel trucco.

107
00:05:23,590 --> 00:05:25,750
‫Quindi qui nel nostro modello di

108
00:05:25,750 --> 00:05:28,870
‫tour, abbiamo già tutti i dati sul tour stesso

109
00:05:28,870 --> 00:05:30,840
‫e quindi ora possiamo

110
00:05:30,840 --> 00:05:33,270
‫semplicemente inserire quei dati nel nostro codice

111
00:05:33,270 --> 00:05:36,630
‫HTML in modo che JavaScript possa leggerli da lì, ok?

112
00:05:36,630 --> 00:05:39,570
‫Quindi, in pratica, esporremo i dati sulla

113
00:05:39,570 --> 00:05:42,327
‫posizione, proprio qui come una stringa nell'HTML

114
00:05:42,327 --> 00:05:45,080
‫e il nostro JavaScript li

115
00:05:45,080 --> 00:05:49,500
‫riprenderà da lì senza doverlo fare, come qualsiasi chiamata API separatamente.

116
00:05:49,500 --> 00:05:52,760
‫Quindi, veniamo qui alla nostra classe

117
00:05:52,760 --> 00:05:56,270
‫di mappe o addirittura alla sezione, ok?

118
00:05:56,270 --> 00:05:59,950
‫Quindi questa sezione qui, e ha già un elemento

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

120
00:06:01,460 --> 00:06:05,410
‫una classe mappa, e vedrai perché è un ID un

121
00:06:05,410 --> 00:06:08,800
‫po' più tardi, ok? Ma per ora voglio effettivamente

122
00:06:08,800 --> 00:06:10,870
‫specificare un attributo di dati qui, ok?

123
00:06:10,870 --> 00:06:13,470
‫Quindi c'è un trucco molto carino in JavaScript

124
00:06:13,470 --> 00:06:17,030
‫in cui possiamo specificare un attributo di dati in HTML e

125
00:06:17,030 --> 00:06:19,580
‫quindi leggere detto attributo usando JavaScript in

126
00:06:19,580 --> 00:06:21,100
‫un modo molto semplice.

127
00:06:21,100 --> 00:06:23,010
‫Ed è così che

128
00:06:23,010 --> 00:06:25,710
‫funziona, quindi possiamo dire "data/" e

129
00:06:25,710 --> 00:06:27,730
‫poi qui come vogliamo chiamarlo,

130
00:06:27,730 --> 00:06:29,593
‫in questo caso diciamo

131
00:06:31,800 --> 00:06:36,560
‫"locations" va bene? E poi l'abbiamo impostato per il nostro tour. posizioni.

132
00:06:36,560 --> 00:06:38,410
‫Ora, prima di

133
00:06:38,410 --> 00:06:42,840
‫farlo, dobbiamo trasformare quell'array in una stringa, giusto?

134
00:06:42,840 --> 00:06:45,540
‫Quindi, diamo rapidamente un'occhiata a questo.

135
00:06:45,540 --> 00:06:50,170
‫Quindi le nostre posizioni sono l'intero array con questi

136
00:06:50,170 --> 00:06:51,930
‫oggetti lì dentro.

137
00:06:51,930 --> 00:06:55,320
‫Ma in HTML, ovviamente, non possiamo avere array o

138
00:06:55,320 --> 00:06:58,480
‫oggetti o qualcosa del genere, quindi quello che

139
00:06:58,480 --> 00:07:00,010
‫dobbiamo fare è

140
00:07:00,010 --> 00:07:02,740
‫convertire tutto questo in una stringa.

141
00:07:02,740 --> 00:07:05,003
‫E fortunatamente è abbastanza facile,

142
00:07:06,230 --> 00:07:12,513
‫tutto ciò che dobbiamo fare è "JSON. stringify " va bene?

143
00:07:13,417 --> 00:07:16,960
‫E poi qui tour. posizione, o in realtà

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

145
00:07:17,793 --> 00:07:19,610
‫le posizioni. Va bene?

146
00:07:19,610 --> 00:07:21,063
‫E se ora

147
00:07:23,040 --> 00:07:28,040
‫gli diamo un salvataggio, apriamolo qui e ispezioniamo questa mappa qui, così ora

148
00:07:28,290 --> 00:07:31,120
‫vedete le posizioni dei dati, e abbiamo

149
00:07:31,120 --> 00:07:33,620
‫questa enorme stringa qui, che fondamentalmente

150
00:07:33,620 --> 00:07:36,493
‫contiene tutti i nostri dati sulla posizione.

151
00:07:38,050 --> 00:07:39,670
‫Va bene, quindi

152
00:07:39,670 --> 00:07:42,420
‫ora nel nostro JavaScript possiamo ottenerlo

153
00:07:42,420 --> 00:07:44,023
‫molto facilmente.

154
00:07:46,950 --> 00:07:49,670
‫Quindi, le posizioni sono al

155
00:07:50,670 --> 00:07:52,983
‫documento. getElementById e

156
00:07:56,260 --> 00:07:59,810
‫poi mappa, e ora qui va la parte del trucco,

157
00:07:59,810 --> 00:08:04,800
‫perché qualunque cosa inseriamo in un attributo di dati come questo, verrà quindi archiviato

158
00:08:04,800 --> 00:08:07,820
‫nella proprietà del set di dati, e in questo

159
00:08:07,820 --> 00:08:11,020
‫caso nel set di dati. posizioni,

160
00:08:11,020 --> 00:08:15,813
‫perché si chiama data/ o data-location.

161
00:08:16,980 --> 00:08:20,470
‫Va bene? Quindi proprio

162
00:08:20,470 --> 00:08:26,533
‫così, set di dati. posizioni, ok?

163
00:08:26,533 --> 00:08:28,210
‫E ora riceviamo tutti questi

164
00:08:28,210 --> 00:08:29,453
‫errori qui provenienti

165
00:08:30,347 --> 00:08:33,480
‫da ESlint, e questo perché ESlint è configurato

166
00:08:33,480 --> 00:08:35,900
‫per Node. js e

167
00:08:35,900 --> 00:08:37,900
‫non per JavaScript , quindi

168
00:08:37,900 --> 00:08:40,973
‫quello che possiamo fare qui è sostanzialmente

169
00:08:41,923 --> 00:08:46,210
‫disabilitare ESlint per questo intero file, fino a quando non diciamo

170
00:08:48,300 --> 00:08:52,670
‫fondamentalmente con un commento all'inizio qui, ESlint disabilita e quindi sì,

171
00:08:52,670 --> 00:08:57,000
‫lo capirà e lo trasformerà completamente off per l'intero file, ok?

172
00:08:57,000 --> 00:08:59,100
‫Quindi questi sono i dati sulla

173
00:08:59,100 --> 00:09:01,320
‫posizione qui che abbiamo appena inserito

174
00:09:01,320 --> 00:09:03,460
‫nel nostro codice HTML, ma ricorda

175
00:09:03,460 --> 00:09:07,285
‫che è una stringa e quindi dobbiamo riconvertirla in JSON, e

176
00:09:07,285 --> 00:09:09,660
‫quindi JSON. analizza e poi

177
00:09:11,410 --> 00:09:13,683
‫tutto quello che c'è qui dentro.

178
00:09:15,960 --> 00:09:20,160
‫Va bene, quindi ora diamo un'occhiata a questo solo per

179
00:09:20,160 --> 00:09:22,510
‫vedere se tutto funziona correttamente.

180
00:09:26,720 --> 00:09:27,823
‫Ricarichiamo, e

181
00:09:28,770 --> 00:09:32,873
‫ora qualcosa è andato storto qui nel nostro file Mapbox,

182
00:09:33,740 --> 00:09:36,063
‫beh, anche questo sembra corretto in

183
00:09:37,120 --> 00:09:42,120
‫realtà, quindi testiamo solo se effettivamente si chiama map qui e in

184
00:09:45,030 --> 00:09:47,830
‫effetti è un ID con map, quindi

185
00:09:47,830 --> 00:09:51,160
‫credo che probabilmente il problema sia che al

186
00:09:51,160 --> 00:09:53,360
‫momento abbiamo chiamato o ottenuto

187
00:09:53,360 --> 00:09:55,803
‫l'elemento per ID, quindi questo qui,

188
00:09:56,690 --> 00:09:58,560
‫quindi probabilmente in questo

189
00:09:58,560 --> 00:10:01,210
‫momento il DOM in realtà non è

190
00:10:01,210 --> 00:10:04,060
‫già caricato, ok? E questo

191
00:10:04,060 --> 00:10:08,530
‫perché abbiamo il nostro script integrato proprio all'inizio del file, quindi

192
00:10:08,530 --> 00:10:09,963
‫questo script qui è

193
00:10:11,440 --> 00:10:14,300
‫proprio nella testa, mentre in realtà dovrebbe

194
00:10:14,300 --> 00:10:17,580
‫essere in fondo alla pagina. Va bene?

195
00:10:17,580 --> 00:10:19,760
‫Quindi fammi effettivamente copiare questo qui

196
00:10:19,760 --> 00:10:21,720
‫e metterlo manualmente nella base,

197
00:10:21,720 --> 00:10:24,580
‫quindi lo copio e lo commento, ma

198
00:10:24,580 --> 00:10:27,610
‫non preoccuparti, useremo ancora questa tecnica di aggiunta

199
00:10:27,610 --> 00:10:31,270
‫di blocchi qui un po' più avanti nel video, perché

200
00:10:31,270 --> 00:10:34,100
‫ci sono alcune cose provenienti da Mapbox

201
00:10:34,100 --> 00:10:35,750
‫che dobbiamo ancora mettere

202
00:10:36,920 --> 00:10:40,170
‫in testa, ok? Ma per ora mettiamo

203
00:10:40,170 --> 00:10:42,483
‫questo script proprio in fondo alla pagina.

204
00:10:44,600 --> 00:10:45,433
‫Va bene?

205
00:10:47,220 --> 00:10:48,750
‫Quello (ride) ovviamente,

206
00:10:48,750 --> 00:10:51,200
‫volevo solo passare a un altro

207
00:10:51,200 --> 00:10:54,360
‫file, quindi potrei salvarlo in modo che il server

208
00:10:54,360 --> 00:10:56,180
‫si ricarichi effettivamente perché questi

209
00:10:56,180 --> 00:10:57,880
‫file pug, come probabilmente

210
00:10:57,880 --> 00:11:00,610
‫avrai notato qui, non attivano un riavvio

211
00:11:00,610 --> 00:11:03,010
‫del nostro server , Tutto ok?

212
00:11:03,010 --> 00:11:06,805
‫Ad ogni modo, sono fiducioso che ora funzionerà e

213
00:11:06,805 --> 00:11:09,150
‫in effetti lo fa.

214
00:11:09,150 --> 00:11:11,070
‫Quindi abbiamo un array qui,

215
00:11:11,070 --> 00:11:15,060
‫e in effetti queste sono le quattro località del nostro tour.

216
00:11:15,060 --> 00:11:18,190
‫Ok, ora abbiamo tutto ben integrato e tutto

217
00:11:18,190 --> 00:11:21,170
‫pronto per integrare Mapbox e creare la

218
00:11:21,170 --> 00:11:23,010
‫nostra mappa qui.

219
00:11:23,010 --> 00:11:25,960
‫Ma per non creare un video troppo

220
00:11:25,960 --> 00:11:28,113
‫lungo, lo farò nel prossimo.