1
00:00:01,060 --> 00:00:03,293
‫Istruttore: Ora finiamo finalmente questa parte

2
00:00:03,293 --> 00:00:05,413
‫della funzionalità di accesso.

3
00:00:06,980 --> 00:00:09,300
‫E ricorda come ho detto

4
00:00:09,300 --> 00:00:11,790
‫che in questo video volevo implementare un

5
00:00:11,790 --> 00:00:15,010
‫avviso davvero carino per quando l'utente accede con successo,

6
00:00:16,450 --> 00:00:19,210
‫e quindi per vedere che per ora

7
00:00:19,210 --> 00:00:21,663
‫disconnettiamo l'utente rimuovendo il cookie manualmente.

8
00:00:22,700 --> 00:00:24,760
‫Ricarichiamo, e così ora ovviamente l'utente

9
00:00:24,760 --> 00:00:26,883
‫non dovrebbe più essere loggato, e

10
00:00:28,840 --> 00:00:30,720
‫infatti non lo è.

11
00:00:30,720 --> 00:00:33,120
‫Come già sappiamo, è perché il cookie

12
00:00:33,120 --> 00:00:35,410
‫non è stato inviato nella richiesta.

13
00:00:35,410 --> 00:00:37,790
‫Quindi c'è un middleware loggato che abbiamo creato

14
00:00:37,790 --> 00:00:39,050
‫nell'ultimo video non

15
00:00:39,050 --> 00:00:42,840
‫ha messo in risposta l'oggetto utente. gente del posto,

16
00:00:42,840 --> 00:00:44,320
‫lo ricordi?

17
00:00:44,320 --> 00:00:47,810
‫Quindi, se non è presente, il manuale dell'utente non verrà visualizzato,

18
00:00:47,810 --> 00:00:50,650
‫e invece questa parte verrà visualizzata in modo che

19
00:00:50,650 --> 00:00:53,367
‫ora possiamo fare clic qui su Accedi.

20
00:00:53,367 --> 00:00:56,920
‫Quindi quell'avviso di cui parlavo prima voglio che venga

21
00:00:56,920 --> 00:00:59,760
‫visualizzato qui praticamente all'inizio e poi dopo

22
00:00:59,760 --> 00:01:01,470
‫un secondo e

23
00:01:01,470 --> 00:01:04,000
‫mezzo vogliamo ancora farlo ricaricare.

24
00:01:04,000 --> 00:01:07,610
‫Quindi passare alla homepage principale.

25
00:01:07,610 --> 00:01:09,550
‫Ad ogni modo creiamo

26
00:01:09,550 --> 00:01:13,800
‫alcune funzioni per questo avviso in un altro file separato.

27
00:01:13,800 --> 00:01:14,983
‫Quindi nuovo file,

28
00:01:16,607 --> 00:01:18,853
‫avviso. js.

29
00:01:20,210 --> 00:01:23,320
‫Va bene, ma ora, prima di poter andare avanti,

30
00:01:23,320 --> 00:01:24,510
‫dobbiamo pensare un

31
00:01:24,510 --> 00:01:26,890
‫po' alla nostra architettura di front-end qui.

32
00:01:26,890 --> 00:01:30,070
‫Ora questo corso, ovviamente, non riguarda il front-end, ma

33
00:01:30,070 --> 00:01:32,470
‫dobbiamo almeno preoccuparci un po' di

34
00:01:32,470 --> 00:01:34,170
‫questo qui, perché

35
00:01:34,170 --> 00:01:36,080
‫stiamo davvero iniziando a ricevere

36
00:01:36,080 --> 00:01:38,130
‫una buona quantità di file

37
00:01:38,130 --> 00:01:40,420
‫qui, e includendoli tutti nelle nostre

38
00:01:40,420 --> 00:01:42,550
‫pagine non è una buona pratica.

39
00:01:42,550 --> 00:01:43,383
‫Così

40
00:01:44,770 --> 00:01:46,700
‫come abbiamo fatto qui.

41
00:01:46,700 --> 00:01:48,710
‫Quindi questa non è una buona pratica.

42
00:01:48,710 --> 00:01:51,200
‫Dovremmo avere solo un grande file JavaScript

43
00:01:51,200 --> 00:01:53,340
‫che include tutto il codice.

44
00:01:53,340 --> 00:01:56,000
‫Quindi nel moderno sviluppo front-end JavaScript

45
00:01:56,000 --> 00:01:59,150
‫di solito usiamo qualcosa chiamato bundle di moduli.

46
00:01:59,150 --> 00:02:02,210
‫Il più popolare è probabilmente ancora Webpack, ma di

47
00:02:02,210 --> 00:02:04,700
‫solito Webpack ci dà molti problemi ed

48
00:02:04,700 --> 00:02:07,140
‫è davvero una seccatura configurarlo.

49
00:02:07,140 --> 00:02:11,380
‫Quindi in realtà c'è un nuovo ragazzo molto carino nel quartiere, per

50
00:02:11,380 --> 00:02:13,930
‫così dire, che si chiama Parcel.

51
00:02:13,930 --> 00:02:18,930
‫Quindi daremo un'occhiata a questo, vedremo se si presenta già,

52
00:02:19,680 --> 00:02:21,870
‫e infatti, è quello.

53
00:02:21,870 --> 00:02:26,490
‫Bundle di applicazioni web così velocissimo e senza configurazione.

54
00:02:26,490 --> 00:02:29,080
‫Quindi è esattamente quello che stiamo cercando.

55
00:02:29,080 --> 00:02:31,790
‫Semplicemente un bundler che non richiede

56
00:02:31,790 --> 00:02:34,240
‫configurazioni complesse, perché non vogliamo

57
00:02:34,240 --> 00:02:36,340
‫perdere tempo con quello.

58
00:02:37,470 --> 00:02:41,753
‫Va bene, quindi andiamo avanti e installiamolo qui.

59
00:02:42,940 --> 00:02:44,340
‫Quindi npm install e

60
00:02:46,010 --> 00:02:48,603
‫non sono sicuro che sia solo Parcel in realtà.

61
00:02:50,180 --> 00:02:51,013
‫Quindi

62
00:02:52,509 --> 00:02:53,459
‫torniamo qui.

63
00:02:55,860 --> 00:02:58,963
‫Probabilmente quello è il pacco. js o qualcosa

64
00:02:59,820 --> 00:03:02,810
‫del genere, perché ricordo che l'ultima volta

65
00:03:02,810 --> 00:03:06,850
‫che l'ho installato non ha funzionato subito, quindi controlliamolo.

66
00:03:06,850 --> 00:03:08,993
‫Sì, infatti, è Pacchetto-fascicolatore.

67
00:03:18,370 --> 00:03:20,300
‫Ora abbiamo qualche errore.

68
00:03:20,300 --> 00:03:25,300
‫Ok, quindi ho dimenticato di salvarlo come dipendenza di sviluppo.

69
00:03:27,070 --> 00:03:30,810
‫Quindi in realtà lo vogliamo come sviluppo di salvataggio, ok,

70
00:03:30,810 --> 00:03:33,910
‫e questo perché è uno strumento di sviluppo.

71
00:03:33,910 --> 00:03:35,483
‫Adesso ancora qualcosa è andato storto.

72
00:03:39,640 --> 00:03:41,313
‫Fammi provare con sudo qui.

73
00:03:50,150 --> 00:03:52,790
‫E quindi se non ha funzionato

74
00:03:52,790 --> 00:03:56,943
‫anche nel tuo caso, usa sudo per ottenere le autorizzazioni appropriate.

75
00:04:03,360 --> 00:04:05,910
‫Va bene, diamo un'occhiata al nostro pacchetto. json

76
00:04:07,060 --> 00:04:11,140
‫e infatti eccolo qui, tutto a posto.

77
00:04:11,140 --> 00:04:12,620
‫Ora, se stai

78
00:04:12,620 --> 00:04:14,810
‫guardando questo video qualche tempo dopo che

79
00:04:14,810 --> 00:04:17,550
‫l'ho registrato, potrebbero essere già passati alla versione numero

80
00:04:18,550 --> 00:04:20,200
‫due e, come già sappiamo,

81
00:04:20,200 --> 00:04:22,370
‫potrebbero introdurre alcune modifiche di rilievo.

82
00:04:22,370 --> 00:04:25,840
‫E quindi andando avanti da questo punto se ricevi errori che

83
00:04:25,840 --> 00:04:27,740
‫non hai visto qui nel

84
00:04:27,740 --> 00:04:30,940
‫video, vai avanti e installa questo pacchetto qui usando la

85
00:04:30,940 --> 00:04:32,533
‫versione . 1,

86
00:04:33,590 --> 00:04:34,750
‫va bene.

87
00:04:34,750 --> 00:04:35,860
‫Quindi in

88
00:04:38,610 --> 00:04:41,650
‫pratica aggiungine uno come questo, ok.

89
00:04:41,650 --> 00:04:45,630
‫Quindi questo ti avverte di imbatterti in questi strani errori e,

90
00:04:45,630 --> 00:04:48,100
‫si spera, mi salva anche da tonnellate

91
00:04:48,100 --> 00:04:50,110
‫di commenti negativi o recensioni

92
00:04:50,110 --> 00:04:54,330
‫negative che si aspettano che aggiorni tutti i miei video a settimane

93
00:04:54,330 --> 00:04:57,640
‫alterne solo perché alcuni strumenti vengono aggiornati e, naturalmente,

94
00:04:57,640 --> 00:04:59,560
‫ciò non è possibile.

95
00:04:59,560 --> 00:05:01,330
‫Molte volte la soluzione

96
00:05:01,330 --> 00:05:03,790
‫più semplice è semplicemente usare la

97
00:05:03,790 --> 00:05:07,030
‫stessa versione che sto usando nel video, va bene.

98
00:05:07,030 --> 00:05:10,420
‫Ad ogni modo, ora per utilizzare effettivamente

99
00:05:10,420 --> 00:05:12,973
‫Parcel aggiungiamo alcuni script qui.

100
00:05:15,410 --> 00:05:19,053
‫Quindi ne aggiungo uno da guardare o JavaScript.

101
00:05:20,890 --> 00:05:22,400
‫Ok, e per

102
00:05:24,380 --> 00:05:26,443
‫questo uso il comando Parcel watch.

103
00:05:28,100 --> 00:05:31,250
‫Questo in realtà funzionerebbe già bene, ma voglio

104
00:05:31,250 --> 00:05:33,810
‫ancora configurare un po ', perché

105
00:05:33,810 --> 00:05:36,890
‫altrimenti mi metterà il pacchetto finale in alcune

106
00:05:36,890 --> 00:05:39,270
‫cartelle che non li voglio.

107
00:05:39,270 --> 00:05:44,270
‫Quindi specifichiamo quale cartella dovrebbe effettivamente guardare.

108
00:05:45,920 --> 00:05:50,920
‫Quindi questo è public/JavaScript e quindi index. js, quindi questo è il nostro punto di

109
00:05:52,670 --> 00:05:54,190
‫ingresso e questo è

110
00:05:54,190 --> 00:05:56,490
‫il file che creeremo in un secondo.

111
00:05:56,490 --> 00:05:57,350
‫Va bene.

112
00:05:57,350 --> 00:05:59,670
‫Quindi anche la directory di output dovrebbe essere

113
00:06:03,432 --> 00:06:05,237
‫in public.

114
00:06:06,980 --> 00:06:07,900
‫js, ok.

115
00:06:07,900 --> 00:06:09,700
‫Molte volte avrai cartelle

116
00:06:09,700 --> 00:06:12,330
‫diverse per lo sviluppo e per l'output,

117
00:06:12,330 --> 00:06:15,550
‫ma in questo caso, poiché è un'architettura molto

118
00:06:15,550 --> 00:06:18,400
‫semplice, metterò il file bundle nello stesso

119
00:06:18,400 --> 00:06:20,550
‫posto dei file di sviluppo.

120
00:06:20,550 --> 00:06:23,000
‫Va bene, specifichiamo anche il file di

121
00:06:25,102 --> 00:06:25,935
‫output

122
00:06:26,860 --> 00:06:32,600
‫e quindi dovrebbe essere bundle. js, va bene.

123
00:06:32,600 --> 00:06:35,750
‫Quindi ora posso eseguirlo e quindi darà un'occhiata

124
00:06:35,750 --> 00:06:39,430
‫a questo file qui e vedrà se qualcosa cambia o

125
00:06:39,430 --> 00:06:41,330
‫in una delle dipendenze e

126
00:06:41,330 --> 00:06:43,110
‫ogni volta che

127
00:06:43,110 --> 00:06:45,260
‫ciò accade, raggrupperà nuovamente tutti

128
00:06:45,260 --> 00:06:49,090
‫i file in questo pacchetto. js, va bene.

129
00:06:49,090 --> 00:06:50,610
‫Allora duplichiamo

130
00:06:50,610 --> 00:06:53,720
‫anche questo, perché vogliamo anche una

131
00:06:53,720 --> 00:06:56,820
‫versione finale, diciamo di produzione, ok.

132
00:06:56,820 --> 00:06:59,040
‫Quindi questo ne eseguiremo di quelli in

133
00:06:59,040 --> 00:07:01,100
‫cui sono davvero finiti, ok.

134
00:07:01,100 --> 00:07:03,450
‫Quindi ci vuole un po' più di tempo,

135
00:07:03,450 --> 00:07:06,630
‫ma fa anche un po' di cose di ottimizzazione in più, ma

136
00:07:06,630 --> 00:07:08,710
‫ovviamente non ci servono per lo sviluppo.

137
00:07:08,710 --> 00:07:12,130
‫In fase di sviluppo, come sempre, vogliamo solo che funzioni.

138
00:07:12,130 --> 00:07:14,090
‫Quindi eseguiamo npm

139
00:07:15,970 --> 00:07:20,030
‫run watch:js, ma prima di farlo creiamo effettivamente

140
00:07:20,980 --> 00:07:22,473
‫l'indice. js.

141
00:07:23,370 --> 00:07:25,320
‫Chiudiamo qui alcune di queste cartelle.

142
00:07:26,170 --> 00:07:28,283
‫È un po' troppo confuso così.

143
00:07:31,340 --> 00:07:34,890
‫Quindi indice. js e facciamo solo una

144
00:07:36,640 --> 00:07:38,403
‫semplice console. accedi qui per ora.

145
00:07:39,670 --> 00:07:41,503
‫Ciao da Parcel, va

146
00:07:42,460 --> 00:07:43,293
‫bene.

147
00:07:45,480 --> 00:07:47,510
‫Quindi andiamo anche alla nostra base

148
00:07:47,510 --> 00:07:50,940
‫qui e poi in realtà ora commenteremo tutti questi

149
00:07:50,940 --> 00:07:52,140
‫e includeremo

150
00:07:53,810 --> 00:07:55,163
‫solo il file bundle.

151
00:07:57,720 --> 00:08:01,790
‫Quindi, di nuovo, un file che conterrà fondamentalmente tutto il codice presente

152
00:08:01,790 --> 00:08:04,000
‫in tutti gli altri file e

153
00:08:04,000 --> 00:08:05,533
‫tutte le loro dipendenze.

154
00:08:06,910 --> 00:08:10,860
‫Quindi diamo un salvataggio, e ora eseguiamolo, vediamo cosa

155
00:08:10,860 --> 00:08:12,033
‫otteniamo lì.

156
00:08:12,980 --> 00:08:17,170
‫E infatti, abbiamo ottenuto il nostro nuovo file, che è bundle. js e ha

157
00:08:17,170 --> 00:08:21,000
‫già tutto questo mucchio di codice lì dentro,

158
00:08:21,000 --> 00:08:25,663
‫ok, semplicemente per questa riga di codice a questo punto.

159
00:08:26,820 --> 00:08:29,203
‫Ma comunque ricarichiamo qui la nostra

160
00:08:31,510 --> 00:08:33,840
‫pagina, e ciao da Parcel.

161
00:08:33,840 --> 00:08:38,140
‫Quindi ha funzionato, quindi ora andiamo avanti e impostiamo

162
00:08:38,140 --> 00:08:40,343
‫effettivamente questo file qui.

163
00:08:42,200 --> 00:08:44,980
‫Quindi, per evitare confusione, chiudiamo questi file che non

164
00:08:44,980 --> 00:08:47,180
‫ci servono più per quello che stiamo

165
00:08:47,180 --> 00:08:48,923
‫facendo in questo momento.

166
00:08:51,320 --> 00:08:52,570
‫Quindi è tanta roba.

167
00:08:54,340 --> 00:08:56,900
‫Va bene, anche questo.

168
00:08:56,900 --> 00:09:00,560
‫Quindi ora l'idea è fondamentalmente che questo index. js è il

169
00:09:00,560 --> 00:09:02,930
‫nostro file di ingresso, quindi in

170
00:09:02,930 --> 00:09:05,500
‫questo non possiamo ottenere dati dall'interfaccia

171
00:09:05,500 --> 00:09:08,400
‫utente e quindi deleghiamo azioni ad alcune

172
00:09:08,400 --> 00:09:11,960
‫funzioni provenienti da questi altri moduli qui in pratica.

173
00:09:11,960 --> 00:09:13,870
‫Quindi ora abbiamo il modulo di accesso, abbiamo

174
00:09:13,870 --> 00:09:15,830
‫il nostro modulo di avvisi e così, proprio

175
00:09:15,830 --> 00:09:17,950
‫come in Node. js ora

176
00:09:17,950 --> 00:09:21,920
‫possiamo effettivamente esportare i dati da questi moduli.

177
00:09:21,920 --> 00:09:24,550
‫Quindi facciamolo, e quello che voglio esportare

178
00:09:24,550 --> 00:09:26,440
‫è questa funzione qui.

179
00:09:26,440 --> 00:09:28,030
‫Ora funziona in modo leggermente diverso da

180
00:09:28,030 --> 00:09:30,200
‫come funziona con Node. js

181
00:09:30,200 --> 00:09:33,160
‫perché Node. js usa qualcosa

182
00:09:33,160 --> 00:09:35,040
‫chiamato CommonJS per implementare i moduli.

183
00:09:35,040 --> 00:09:36,510
‫Non sono sicuro

184
00:09:36,510 --> 00:09:38,600
‫di averlo menzionato quando abbiamo parlato

185
00:09:38,600 --> 00:09:43,520
‫per la prima volta di moduli, ma qui in JavaScript front-end da ES2015

186
00:09:43,520 --> 00:09:47,000
‫o ES6 c'è anche qualcosa chiamato moduli in JavaScript.

187
00:09:47,000 --> 00:09:48,720
‫La sintassi è leggermente

188
00:09:48,720 --> 00:09:51,150
‫diversa, ma in realtà il modo in cui

189
00:09:51,150 --> 00:09:54,470
‫funziona dietro le quinte, ma in realtà se capisci come

190
00:09:54,470 --> 00:09:57,060
‫funziona con CommonJS, questo qui sarà molto simile.

191
00:09:57,060 --> 00:10:00,740
‫Quindi i moduli ES6 usano la sintassi di import export.

192
00:10:00,740 --> 00:10:04,070
‫Quindi qui tutto ciò che dobbiamo fare è dire esporta e

193
00:10:05,120 --> 00:10:08,430
‫poi tutto ciò che vogliamo esportare da questo file, e

194
00:10:08,430 --> 00:10:10,110
‫questo è davvero tutto.

195
00:10:10,110 --> 00:10:13,170
‫Ora questo pezzo di codice qui lo useremo

196
00:10:13,170 --> 00:10:15,100
‫effettivamente nel file indice.

197
00:10:15,100 --> 00:10:17,720
‫Quindi ricorda come ho detto che questo file

198
00:10:17,720 --> 00:10:20,630
‫qui è più per ottenere dati dall'interfaccia utente

199
00:10:20,630 --> 00:10:22,420
‫e quindi delegare l'azione.

200
00:10:22,420 --> 00:10:26,203
‫Quindi è esattamente quello che stiamo facendo qui, ok.

201
00:10:27,490 --> 00:10:30,320
‫Quindi qui abbiamo solo questo tipo di modulo

202
00:10:30,320 --> 00:10:32,950
‫che quindi esporta la funzione di accesso.

203
00:10:32,950 --> 00:10:35,350
‫Quindi possiamo importarlo qui e chiamare login

204
00:10:36,370 --> 00:10:39,700
‫proprio qui in index. js

205
00:10:39,700 --> 00:10:41,620
‫e funziona così.

206
00:10:41,620 --> 00:10:44,210
‫Quindi import invece di require

207
00:10:44,210 --> 00:10:47,690
‫quindi il nome della variabile che vogliamo importare.

208
00:10:47,690 --> 00:10:49,283
‫Quindi sto usando le parentesi graffe qui.

209
00:10:50,466 --> 00:10:51,960
‫Quindi si chiama

210
00:10:55,420 --> 00:10:57,970
‫login e quindi dal nome del file.

211
00:10:57,970 --> 00:11:01,493
‫Che in questo caso, stessa directory, login.

212
00:11:03,080 --> 00:11:06,363
‫Ora disattiviamo anche qui di nuovo eslint, e ho

213
00:11:10,730 --> 00:11:13,570
‫usato queste parentesi graffe qui, fondamentalmente perché stiamo

214
00:11:13,570 --> 00:11:16,840
‫eseguendo l'esportazione in questo modo, ma c'è anche qualcosa

215
00:11:16,840 --> 00:11:20,070
‫di simile a module. export che è

216
00:11:20,070 --> 00:11:22,140
‫il tipo di esportazione predefinita.

217
00:11:22,140 --> 00:11:26,780
‫Quindi nei moduli ES6 si chiama effettivamente esportazione predefinita.

218
00:11:26,780 --> 00:11:30,320
‫Quindi in quel caso non avremmo bisogno di queste parentesi graffe.

219
00:11:30,320 --> 00:11:31,153
‫Va bene.

220
00:11:31,153 --> 00:11:33,750
‫In questo momento dobbiamo farlo in questo

221
00:11:33,750 --> 00:11:37,200
‫modo, perché questo è il nome di questa funzione che

222
00:11:37,200 --> 00:11:39,110
‫abbiamo esportato, va bene.

223
00:11:39,110 --> 00:11:42,860
‫Ora qualcosa di veramente importante anche in questo login è che

224
00:11:42,860 --> 00:11:44,350
‫abbiamo usato axios.

225
00:11:44,350 --> 00:11:47,250
‫E ricorda come ho detto che

226
00:11:47,250 --> 00:11:51,040
‫lo avremmo installato effettivamente da npm come modulo npm, giusto?

227
00:11:51,040 --> 00:11:54,340
‫Quindi facciamolo ora, e in realtà perché abbiamo

228
00:11:54,340 --> 00:11:56,660
‫già commentato axios da qui.

229
00:11:56,660 --> 00:11:59,560
‫Quindi in questo momento il login non può usare axios.

230
00:11:59,560 --> 00:12:03,060
‫Bene, perché non l'abbiamo più incluso qui.

231
00:12:03,060 --> 00:12:06,070
‫Quindi aggiungiamo, apriamo un nuovo terminale e

232
00:12:06,070 --> 00:12:08,903
‫installiamo axios nel nostro progetto.

233
00:12:18,310 --> 00:12:23,280
‫Quindi ora tutto ciò che dobbiamo fare è dire importare axios da

234
00:12:25,830 --> 00:12:27,773
‫axios, e questo è tutto,

235
00:12:29,290 --> 00:12:30,260
‫va bene.

236
00:12:30,260 --> 00:12:33,900
‫Quindi questo file, almeno per ora, è fatto

237
00:12:33,900 --> 00:12:36,530
‫ma non chiudiamolo perché ci servirà

238
00:12:36,530 --> 00:12:38,540
‫ancora molto presto.

239
00:12:38,540 --> 00:12:42,020
‫Successivamente dovremmo anche installare un polyfill, che farà

240
00:12:42,020 --> 00:12:44,420
‫funzionare alcune delle nuove funzionalità

241
00:12:44,420 --> 00:12:47,120
‫JavaScript anche nei browser più vecchi.

242
00:12:47,120 --> 00:12:50,360
‫Quindi diciamo npm install e poi questo

243
00:12:50,360 --> 00:12:52,850
‫qui sembra un po 'strano.

244
00:12:52,850 --> 00:12:57,850
‫Quindi aggiungiamo babele/polyfill, in questo

245
00:12:57,980 --> 00:12:59,240
‫modo.

246
00:12:59,240 --> 00:13:03,433
‫Allora quassù importeremo proprio così,

247
00:13:06,180 --> 00:13:09,070
‫va bene.

248
00:13:09,070 --> 00:13:12,290
‫Quindi questo qui non lo salviamo in nessuna variabile,

249
00:13:12,290 --> 00:13:14,200
‫perché non è affatto necessario.

250
00:13:14,200 --> 00:13:17,640
‫Tutto ciò che vogliamo fare è fondamentalmente essere

251
00:13:17,640 --> 00:13:20,840
‫incluso nel nostro pacchetto finale per riempire correttamente

252
00:13:20,840 --> 00:13:23,337
‫alcune delle funzionalità di JavaScript.

253
00:13:23,337 --> 00:13:26,320
‫Va bene, ed è anche per questo che è

254
00:13:26,320 --> 00:13:29,220
‫qui nella prima riga di queste importazioni.

255
00:13:29,220 --> 00:13:33,960
‫Ad ogni modo, ora importiamo anche questa mapbox.

256
00:13:33,960 --> 00:13:36,800
‫Per questo dobbiamo prima creare

257
00:13:36,800 --> 00:13:40,640
‫una funzione che farà tutte queste cose qui.

258
00:13:40,640 --> 00:13:41,790
‫Va bene.

259
00:13:41,790 --> 00:13:43,190
‫Quindi creiamo

260
00:13:45,450 --> 00:13:46,283
‫displayMap

261
00:13:50,660 --> 00:13:54,363
‫di esportazione, che includerà l'array di posizioni.

262
00:13:55,620 --> 00:14:02,290
‫Quindi questo verrà effettivamente letto nell'indice. js, va bene.

263
00:14:02,290 --> 00:14:06,510
‫Quindi, di nuovo, index. js è più per ottenere

264
00:14:06,510 --> 00:14:09,030
‫dati dall'interfaccia utente, quindi dal sito

265
00:14:09,030 --> 00:14:13,110
‫Web, e quindi delegare alcune azioni in questi altri moduli,

266
00:14:13,110 --> 00:14:14,230
‫va bene.

267
00:14:14,230 --> 00:14:18,653
‫Quindi, questa roba qui sarà fatta all'interno di index.

268
00:14:21,010 --> 00:14:22,883
‫Facciamolo quassù.

269
00:14:28,750 --> 00:14:32,723
‫Quindi importa displayMap mapbox,

270
00:14:37,420 --> 00:14:40,690
‫va bene.

271
00:14:40,690 --> 00:14:42,640
‫Quindi chiamiamolo

272
00:14:45,980 --> 00:14:48,470
‫anche con le posizioni.

273
00:14:48,470 --> 00:14:52,420
‫Ora ricordi quando abbiamo effettivamente creato questa mappa e ricordi

274
00:14:52,420 --> 00:14:55,400
‫come ci ha chiesto se volevamo usare

275
00:14:55,400 --> 00:14:57,760
‫la libreria mapbox su npm?

276
00:14:57,760 --> 00:15:00,670
‫Quindi ora potremmo andare avanti e usare

277
00:15:00,670 --> 00:15:04,590
‫effettivamente quello invece di questo che stiamo usando in questo momento.

278
00:15:04,590 --> 00:15:06,450
‫Quindi bene non

279
00:15:06,450 --> 00:15:07,993
‫è qui.

280
00:15:09,850 --> 00:15:10,693
‫Sì, quindi questo.

281
00:15:10,693 --> 00:15:13,170
‫Quindi questa è la libreria mapbox che

282
00:15:13,170 --> 00:15:15,330
‫stiamo attualmente utilizzando, ma di nuovo

283
00:15:15,330 --> 00:15:17,290
‫c'è anche una versione npm.

284
00:15:17,290 --> 00:15:20,290
‫Quindi non avremmo bisogno di avere questo.

285
00:15:20,290 --> 00:15:22,620
‫Tuttavia, per qualche motivo c'è un

286
00:15:22,620 --> 00:15:26,410
‫problema con l'utilizzo di questa libreria insieme a Parcel, ok.

287
00:15:26,410 --> 00:15:29,430
‫Quindi altre persone si imbattono effettivamente in questo problema.

288
00:15:29,430 --> 00:15:32,370
‫Quindi non possiamo usare la libreria mapbox

289
00:15:32,370 --> 00:15:34,080
‫npm insieme a Parcel.

290
00:15:34,080 --> 00:15:36,993
‫Quindi questo è un motivo per cui sto ancora facendo così.

291
00:15:38,850 --> 00:15:39,810
‫Va bene.

292
00:15:39,810 --> 00:15:43,360
‫Quindi mapbox è completato con questo.

293
00:15:43,360 --> 00:15:45,533
‫Anche questo non ci serve più.

294
00:15:46,470 --> 00:15:49,150
‫Ora sbarazziamoci di alcuni di questi errori che

295
00:15:49,150 --> 00:15:50,593
‫abbiamo visto quaggiù.

296
00:15:51,510 --> 00:15:53,060
‫Bene, ora non sono

297
00:15:53,060 --> 00:15:55,500
‫più qui, ma per esempio abbiamo avuto

298
00:15:55,500 --> 00:15:57,630
‫il problema che questo codice qui

299
00:15:57,630 --> 00:16:02,280
‫creava degli errori quando eravamo su pagine che non avevano questa mappa qui, giusto.

300
00:16:02,280 --> 00:16:05,310
‫Perché ovviamente nella pagina dei dettagli ha questa mappa quindi questo

301
00:16:05,310 --> 00:16:07,890
‫elemento, ma poi questo codice ovviamente viene eseguito su

302
00:16:07,890 --> 00:16:09,203
‫tutte le altre

303
00:16:09,203 --> 00:16:10,973
‫pagine, che quindi creeranno errori lì.

304
00:16:11,840 --> 00:16:13,700
‫Quindi risolviamolo.

305
00:16:13,700 --> 00:16:15,980
‫Quindi quello che sto facendo qui è prima creare

306
00:16:15,980 --> 00:16:18,950
‫un elemento con questo e poi testare se esiste effettivamente prima

307
00:16:18,950 --> 00:16:20,933
‫di eseguire questa riga di codice.

308
00:16:23,610 --> 00:16:25,660
‫Quindi creeremo alcuni elementi DOM qui.

309
00:16:32,415 --> 00:16:33,248
‫E

310
00:16:34,820 --> 00:16:35,683
‫qui direi delega.

311
00:16:39,750 --> 00:16:41,380
‫Quindi, se mapbox

312
00:16:43,370 --> 00:16:46,623
‫e solo allora a queste due azioni qui,

313
00:16:47,690 --> 00:16:48,790
‫va bene.

314
00:16:48,790 --> 00:16:50,350
‫Qui c'è anche mapbox e questo

315
00:16:52,420 --> 00:16:53,853
‫è molto più carino.

316
00:16:57,190 --> 00:16:58,850
‫Qui mettiamo anche

317
00:16:58,850 --> 00:17:00,630
‫i valori, e metterò questi

318
00:17:00,630 --> 00:17:03,690
‫due perché in realtà potremmo averne bisogno o

319
00:17:03,690 --> 00:17:07,140
‫in realtà ne avremo bisogno anche per altre cose.

320
00:17:07,140 --> 00:17:08,803
‫Quindi in questo modo è un po' più pulito.

321
00:17:10,170 --> 00:17:13,230
‫Aggiungiamo anche questo listener di eventi

322
00:17:13,230 --> 00:17:16,660
‫qui solo se questo elemento esiste, giusto.

323
00:17:16,660 --> 00:17:20,683
‫Perché bene, di nuovo, creerà un errore se non lo fa.

324
00:17:22,260 --> 00:17:23,777
‫Quindi loginform, e

325
00:17:27,750 --> 00:17:28,583
‫quindi

326
00:17:29,610 --> 00:17:30,443
‫se

327
00:17:33,770 --> 00:17:37,460
‫e poi riutilizziamolo qui, salviamolo e così

328
00:17:37,460 --> 00:17:39,363
‫ora sembra migliore.

329
00:17:40,270 --> 00:17:41,103
‫Va bene.

330
00:17:42,355 --> 00:17:44,113
‫Chiudiamo effettivamente questo terminale.

331
00:17:45,500 --> 00:17:48,010
‫Questo dovresti continuare a raggruppare il nostro codice ogni

332
00:17:48,010 --> 00:17:49,480
‫volta che c'è un salvataggio.

333
00:17:49,480 --> 00:17:50,980
‫Salviamolo di nuovo qui.

334
00:17:53,600 --> 00:17:56,440
‫Ok, spero che ora sia cambiato.

335
00:17:56,440 --> 00:17:58,203
‫Quindi andiamo avanti e proviamolo.

336
00:18:00,610 --> 00:18:03,800
‫Quindi, se puoi ancora accedere bene a questo

337
00:18:03,800 --> 00:18:06,563
‫punto, significa che ha funzionato davvero.

338
00:18:13,470 --> 00:18:15,850
‫Beh, forse no.

339
00:18:15,850 --> 00:18:17,263
‫Proviamo di nuovo qui.

340
00:18:21,360 --> 00:18:25,113
‫Va bene, quindi c'è qualcosa che non va qui.

341
00:18:26,430 --> 00:18:29,620
‫Quindi, come sempre, registriamo questa e-mail e la password

342
00:18:29,620 --> 00:18:31,093
‫nella console qui.

343
00:18:32,570 --> 00:18:35,300
‫Voglio dire, perché sappiamo già che

344
00:18:35,300 --> 00:18:38,233
‫in realtà questa funzione qui è chiamata, giusto.

345
00:18:39,260 --> 00:18:41,360
‫Altrimenti, non otterremmo nemmeno l'errore.

346
00:18:45,380 --> 00:18:49,560
‫Giusto, perché quell'errore proviene chiaramente dalla nostra API.

347
00:18:49,560 --> 00:18:53,403
‫Quindi tutto ciò che abbiamo qui funziona davvero, credo.

348
00:19:03,010 --> 00:19:04,763
‫Diamo un'occhiata alla console.

349
00:19:10,830 --> 00:19:14,610
‫Quindi sembra che in realtà non ci siano nome

350
00:19:14,610 --> 00:19:16,193
‫utente e password.

351
00:19:18,320 --> 00:19:19,153
‫Va bene.

352
00:19:21,640 --> 00:19:22,640
‫Non sono sicuro del perché.

353
00:19:22,640 --> 00:19:26,003
‫Diamo un'occhiata se effettivamente otteniamo qualcosa.

354
00:19:26,870 --> 00:19:29,350
‫Quindi accedi

355
00:19:31,140 --> 00:19:33,963
‫e registrerò anche questi

356
00:19:34,950 --> 00:19:38,763
‫proprio qui, non qui ma qui.

357
00:19:50,730 --> 00:19:52,600
‫E quindi a quanto pare

358
00:19:52,600 --> 00:19:55,060
‫il problema deve essere che nome utente

359
00:19:55,060 --> 00:19:57,220
‫e password non sono realmente definiti.

360
00:19:57,220 --> 00:20:00,140
‫Oh, e ora, naturalmente, posso capire perché è così.

361
00:20:00,140 --> 00:20:01,483
‫Che stupido errore.

362
00:20:02,440 --> 00:20:04,900
‫Quindi stiamo cercando di leggere questi valori

363
00:20:04,900 --> 00:20:07,340
‫qui, proprio all'inizio quando la pagina

364
00:20:07,340 --> 00:20:11,223
‫viene caricata, e ovviamente a questo punto questi valori non sono definiti.

365
00:20:12,230 --> 00:20:15,400
‫Quindi possiamo ovviamente definirli solo

366
00:20:15,400 --> 00:20:19,103
‫qui nel nostro ascoltatore di eventi, giusto.

367
00:20:20,370 --> 00:20:22,800
‫Quindi, quando questa funzione qui viene

368
00:20:22,800 --> 00:20:25,690
‫chiamata bene, ovviamente e-mail e password sono impostate, quindi

369
00:20:25,690 --> 00:20:28,143
‫è il momento in cui possiamo leggerle.

370
00:20:31,210 --> 00:20:33,423
‫Quindi è stato un po' stupido,

371
00:20:36,870 --> 00:20:39,470
‫ma, sai, a volte succedono cose del genere.

372
00:20:46,560 --> 00:20:48,673
‫Ora copiamo questo qui.

373
00:20:50,830 --> 00:20:53,460
‫Questa volta abbiamo effettuato l'accesso con successo, il

374
00:20:53,460 --> 00:20:56,373
‫che significa che il nostro codice qui funziona ancora.

375
00:20:57,740 --> 00:21:01,500
‫Fantastico, quindi ora facciamo la parte finale che volevamo

376
00:21:01,500 --> 00:21:03,310
‫fare in questa

377
00:21:03,310 --> 00:21:07,373
‫lezione, che in realtà è creare questi avvisi, va bene.

378
00:21:08,700 --> 00:21:13,700
‫Quindi creiamo una funzione chiamata show alert ed esportiamola.

379
00:21:13,720 --> 00:21:16,790
‫Quindi in login importeremo questa funzione e la

380
00:21:16,790 --> 00:21:17,793
‫useremo lì.

381
00:21:18,890 --> 00:21:21,070
‫Quindi showAlert e questo come

382
00:21:23,583 --> 00:21:27,557
‫input otterranno un tipo e un messaggio, quindi

383
00:21:29,090 --> 00:21:31,010
‫proprio come questo.

384
00:21:31,010 --> 00:21:32,230
‫E questo

385
00:21:34,070 --> 00:21:35,600
‫tipo è successo

386
00:21:38,170 --> 00:21:39,253
‫o errore,

387
00:21:40,210 --> 00:21:41,043
‫ok.

388
00:21:41,043 --> 00:21:44,020
‫Perché a seconda di questo input avremo quindi CSS

389
00:21:44,020 --> 00:21:46,890
‫diversi per ciascuno di questi avvisi e lo

390
00:21:46,890 --> 00:21:48,590
‫vedrai in un secondo.

391
00:21:49,450 --> 00:21:52,360
‫Quindi quello che faremo è fondamentalmente creare del

392
00:21:52,360 --> 00:21:56,233
‫markup HTML qui e poi inserirlo nel nostro HTML, quindi è

393
00:21:57,210 --> 00:21:58,733
‫qualcosa di veramente facile.

394
00:22:00,530 --> 00:22:04,520
‫Quindi un markup e la stringa del modello e

395
00:22:04,520 --> 00:22:07,280
‫ora un bel codice HTML.

396
00:22:07,280 --> 00:22:11,370
‫Quindi è semplicemente un div con una classe di

397
00:22:13,110 --> 00:22:14,680
‫alert e poi alert

398
00:22:14,680 --> 00:22:18,110
‫-- quindi un modificatore con il nostro

399
00:22:18,110 --> 00:22:19,113
‫tipo.

400
00:22:21,890 --> 00:22:24,450
‫Ok, ecco perché deve

401
00:22:24,450 --> 00:22:27,070
‫essere un successo o un errore.

402
00:22:27,070 --> 00:22:29,650
‫Quindi permettetemi di mostrarlo rapidamente

403
00:22:29,650 --> 00:22:32,800
‫in CSS, perché penso che sia davvero

404
00:22:32,800 --> 00:22:36,530
‫importante sapere davvero come funziona tutto questo insieme, ok.

405
00:22:36,530 --> 00:22:38,520
‫Quindi qui abbiamo la nostra classe

406
00:22:38,520 --> 00:22:41,863
‫di avviso e quindi avviso di successo e errore di avviso.

407
00:22:43,300 --> 00:22:44,880
‫Va bene.

408
00:22:44,880 --> 00:22:48,273
‫Come sempre disabilitiamo eslint qui, ok, e

409
00:22:49,840 --> 00:22:52,700
‫liberiamoci di questo e ora ovviamente

410
00:22:54,530 --> 00:22:57,570
‫qui va il messaggio che passiamo a

411
00:22:57,570 --> 00:22:59,193
‫questa funzione.

412
00:23:00,190 --> 00:23:01,970
‫Ovviamente potremmo andare avanti

413
00:23:01,970 --> 00:23:04,470
‫e usarlo in tutta l'applicazione, ma in questo

414
00:23:04,470 --> 00:23:08,150
‫caso in realtà ne abbiamo bisogno solo qui per il nostro login.

415
00:23:08,150 --> 00:23:11,053
‫Quindi documento. queryselector, e quindi

416
00:23:11,890 --> 00:23:13,990
‫ora qui selezioniamo l'elemento in

417
00:23:13,990 --> 00:23:17,900
‫cui vogliamo includere questo HTML che abbiamo appena creato.

418
00:23:17,900 --> 00:23:19,950
‫Quindi è proprio all'inizio

419
00:23:19,950 --> 00:23:21,530
‫dell'elemento corpo.

420
00:23:21,530 --> 00:23:23,153
‫Quindi proprio in cima alla pagina.

421
00:23:24,570 --> 00:23:25,473
‫Quindi

422
00:23:27,570 --> 00:23:32,380
‫corpo, quindi inserisci HTML adiacente, quindi questo qui.

423
00:23:32,380 --> 00:23:34,720
‫Se hai seguito il mio corso JavaScript

424
00:23:34,720 --> 00:23:37,793
‫completo, tutto questo qui non sarà nulla di nuovo per

425
00:23:38,890 --> 00:23:39,810
‫te, ok.

426
00:23:39,810 --> 00:23:42,670
‫Quindi qui possiamo specificare un paio di parole chiave,

427
00:23:42,670 --> 00:23:45,080
‫e in questo caso vogliamo afterbegin.

428
00:23:45,080 --> 00:23:46,900
‫Quindi fondamentalmente ciò significa

429
00:23:46,900 --> 00:23:50,763
‫che è all'interno del corpo, ma proprio all'inizio, va bene.

430
00:23:52,580 --> 00:23:54,800
‫Quindi l'HTML, quindi il

431
00:23:54,800 --> 00:23:57,070
‫markup, che in realtà vogliamo includere.

432
00:23:57,070 --> 00:23:57,903
‫Grande.

433
00:23:57,903 --> 00:24:00,760
‫Quindi questo creerà un avviso molto semplice basato

434
00:24:00,760 --> 00:24:04,900
‫sul tipo e sul metodo, ma ora in realtà vogliamo anche una

435
00:24:04,900 --> 00:24:07,193
‫funzione per nascondere gli avvisi.

436
00:24:08,380 --> 00:24:11,410
‫Quindi creiamolo anche qui, esportiamo, e probabilmente non ne

437
00:24:11,410 --> 00:24:14,103
‫abbiamo nemmeno bisogno al di fuori di qui,

438
00:24:14,980 --> 00:24:18,480
‫ma comunque per la riutilizzabilità è sempre una buona idea

439
00:24:18,480 --> 00:24:19,773
‫esportare tutto questo.

440
00:24:21,410 --> 00:24:25,173
‫Questo non ha bisogno di prendere in alcun argomento.

441
00:24:27,250 --> 00:24:31,220
‫Quindi ora tutto ciò che faremo è

442
00:24:31,220 --> 00:24:33,780
‫selezionare l'elemento con la

443
00:24:33,780 --> 00:24:36,700
‫classe alert e poi rimuoverlo.

444
00:24:36,700 --> 00:24:38,167
‫Quindi allerta

445
00:24:40,120 --> 00:24:40,953
‫queryselector.

446
00:24:43,710 --> 00:24:45,803
‫Quindi esattamente lo stesso nome di classe di qui.

447
00:24:46,720 --> 00:24:49,430
‫Quindi abbiamo bisogno di usare un trucco

448
00:24:49,430 --> 00:24:52,610
‫JavaScript in cui dobbiamo spostare un livello fino all'elemento

449
00:24:52,610 --> 00:24:55,700
‫genitore e poi da lì rimuovere un elemento figlio.

450
00:24:55,700 --> 00:24:59,380
‫Quindi, se c'è un elemento, allora

451
00:24:59,380 --> 00:25:02,147
‫elemento. parentElement. removeChild

452
00:25:06,728 --> 00:25:08,478
‫e poi l'elemento.

453
00:25:09,413 --> 00:25:10,910
‫Va bene.

454
00:25:10,910 --> 00:25:14,070
‫Quindi, di nuovo, dovrebbe essere solo JavaScript di base

455
00:25:14,070 --> 00:25:16,230
‫o una manipolazione DOM di base.

456
00:25:16,230 --> 00:25:18,150
‫Quindi, dal momento che questo

457
00:25:18,150 --> 00:25:20,393
‫è un corso nodo, non ne approfondirò.

458
00:25:21,680 --> 00:25:23,770
‫Ad ogni modo, quello che voglio fare

459
00:25:23,770 --> 00:25:25,670
‫qui ora è nascondere tutti gli

460
00:25:25,670 --> 00:25:28,393
‫avvisi già esistenti ogni volta che mostriamo un avviso.

461
00:25:30,400 --> 00:25:32,340
‫Quindi dobbiamo sempre solo

462
00:25:32,340 --> 00:25:34,353
‫assicurarci di eseguire sempre hideAlert.

463
00:25:35,310 --> 00:25:39,150
‫Poi finalmente anche io voglio sempre nascondere tutti gli avvisi

464
00:25:39,150 --> 00:25:40,383
‫dopo cinque secondi.

465
00:25:42,370 --> 00:25:44,480
‫Quindi window

466
00:25:46,885 --> 00:25:50,220
‫setTimeout hideAlert dopo cinque

467
00:25:50,220 --> 00:25:51,790
‫secondi.

468
00:25:51,790 --> 00:25:54,533
‫Va bene, e ora importiamolo qui.

469
00:25:58,030 --> 00:26:00,220
‫Visualizza avviso è stato chiamato, giusto?

470
00:26:00,220 --> 00:26:03,193
‫Oh showAlert, con tipo e messaggio.

471
00:26:05,900 --> 00:26:06,973
‫Quindi mostraAlert

472
00:26:08,140 --> 00:26:08,973
‫da

473
00:26:12,280 --> 00:26:15,730
‫destra da quello e così ...

474
00:26:15,730 --> 00:26:19,010
‫Sì, quindi vogliamo usarlo proprio in questo posto.

475
00:26:19,010 --> 00:26:21,970
‫Quindi invece dell'avviso JavaScript vogliamo fare

476
00:26:23,297 --> 00:26:25,650
‫showAlert, va bene, e qui

477
00:26:25,650 --> 00:26:27,180
‫lo stesso.

478
00:26:27,180 --> 00:26:29,220
‫Dobbiamo ancora specificare il

479
00:26:29,220 --> 00:26:30,380
‫tipo qui,

480
00:26:32,925 --> 00:26:35,467
‫quindi questo è successo in questo

481
00:26:40,220 --> 00:26:42,630
‫caso e qui è errore.

482
00:26:42,630 --> 00:26:44,193
‫Abbiamo raggiunto il completamento automatico.

483
00:26:46,450 --> 00:26:47,963
‫Ok, è meglio.

484
00:26:48,890 --> 00:26:50,483
‫Quindi proviamolo.

485
00:26:53,580 --> 00:26:56,923
‫E prima di tutto dobbiamo disconnetterci cancellando questo cookie.

486
00:27:01,160 --> 00:27:02,990
‫Ricarica, accedi e ora

487
00:27:02,990 --> 00:27:03,993
‫lo

488
00:27:11,400 --> 00:27:13,900
‫sto testando prima con una password

489
00:27:15,500 --> 00:27:17,290
‫errata e ci siamo.

490
00:27:17,290 --> 00:27:21,400
‫Quindi e-mail o password errate proprio nel nostro simpatico avviso e

491
00:27:21,400 --> 00:27:24,400
‫hai visto che dopo cinque secondi è scomparsa.

492
00:27:24,400 --> 00:27:26,160
‫Ovviamente avremmo potuto mettere

493
00:27:26,160 --> 00:27:28,400
‫qualche bella animazione lì e tutto il

494
00:27:28,400 --> 00:27:31,830
‫resto, ma penso che così sia già più che sufficiente.

495
00:27:31,830 --> 00:27:33,950
‫Quindi vediamolo di nuovo

496
00:27:33,950 --> 00:27:36,113
‫velocemente, ed ecco come sarà, ma

497
00:27:37,600 --> 00:27:40,400
‫quando è corretto, ovviamente dovrebbe essere verde.

498
00:27:42,030 --> 00:27:44,930
‫Quindi sì, effettuato correttamente l'accesso e vediamo

499
00:27:44,930 --> 00:27:47,890
‫una ricarica dopo un secondo e mezzo

500
00:27:47,890 --> 00:27:50,320
‫e quindi ora funziona davvero.

501
00:27:50,320 --> 00:27:53,593
‫Questa è la nostra autenticazione completa sul front-end.

502
00:27:54,880 --> 00:27:59,430
‫È stato un sacco di lavoro, ma se me lo chiedi ne vale assolutamente la pena.

503
00:27:59,430 --> 00:28:02,070
‫Ora l'unica cosa che manca è

504
00:28:02,070 --> 00:28:05,690
‫che ci disconnettiamo quando facciamo clic su questo pulsante qui.

505
00:28:05,690 --> 00:28:07,510
‫Quindi in questo momento non è

506
00:28:07,510 --> 00:28:10,133
‫così e quindi nel prossimo video risolviamo questo problema.