1
00:00:01,060 --> 00:00:03,293
‫Instrutor: Agora vamos finalmente terminar esta

2
00:00:03,293 --> 00:00:05,413
‫parte da funcionalidade de login.

3
00:00:06,980 --> 00:00:09,300
‫E lembre-se de como eu disse

4
00:00:09,300 --> 00:00:11,790
‫que neste vídeo eu queria implementar um

5
00:00:11,790 --> 00:00:15,010
‫alerta muito bom para quando o usuário efetuar login com

6
00:00:16,450 --> 00:00:19,210
‫sucesso e, para ver que vamos desconectar o

7
00:00:19,210 --> 00:00:21,663
‫usuário por enquanto, removendo o cookie manualmente.

8
00:00:22,700 --> 00:00:24,760
‫Vamos recarregar, e agora é claro que

9
00:00:24,760 --> 00:00:26,883
‫o usuário não deve mais estar logado,

10
00:00:28,840 --> 00:00:30,720
‫e de fato não está.

11
00:00:30,720 --> 00:00:33,120
‫Como já sabemos, isso ocorre porque o

12
00:00:33,120 --> 00:00:35,410
‫cookie não foi enviado na solicitação.

13
00:00:35,410 --> 00:00:37,790
‫Portanto, o middleware registrado que criamos no último

14
00:00:37,790 --> 00:00:39,050
‫vídeo não colocou

15
00:00:39,050 --> 00:00:42,840
‫o objeto do usuário em resposta. moradores locais, lembra

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

17
00:00:44,320 --> 00:00:47,810
‫Portanto, se não estiver lá, o manual do usuário não será

18
00:00:47,810 --> 00:00:50,650
‫renderizado e, em vez disso, esta parte será renderizada

19
00:00:50,650 --> 00:00:53,367
‫para que agora possamos clicar aqui em Login.

20
00:00:53,367 --> 00:00:56,920
‫Então, esse alerta de que eu estava falando antes, quero

21
00:00:56,920 --> 00:00:59,760
‫que apareça aqui basicamente no início e depois

22
00:00:59,760 --> 00:01:01,470
‫de um segundo e

23
00:01:01,470 --> 00:01:04,000
‫meio ainda queremos fazer aquele recarregamento.

24
00:01:04,000 --> 00:01:07,610
‫Então, indo para a página inicial principal.

25
00:01:07,610 --> 00:01:09,550
‫De qualquer forma, vamos

26
00:01:09,550 --> 00:01:13,800
‫criar algumas funções para este alerta em outro arquivo separado.

27
00:01:13,800 --> 00:01:14,983
‫Novo arquivo,

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

29
00:01:20,210 --> 00:01:23,320
‫Tudo bem, mas agora, antes de podermos realmente prosseguir,

30
00:01:23,320 --> 00:01:24,510
‫precisamos pensar um

31
00:01:24,510 --> 00:01:26,890
‫pouco sobre nossa arquitetura de front-end aqui.

32
00:01:26,890 --> 00:01:30,070
‫Agora, este curso, é claro, não é sobre o

33
00:01:30,070 --> 00:01:32,470
‫front-end, mas ainda precisamos nos preocupar um

34
00:01:32,470 --> 00:01:34,170
‫pouco com isso aqui,

35
00:01:34,170 --> 00:01:36,080
‫porque estamos realmente começando a

36
00:01:36,080 --> 00:01:38,130
‫obter uma boa quantidade de arquivos

37
00:01:38,130 --> 00:01:40,420
‫aqui, e incluindo todos eles em nossas

38
00:01:40,420 --> 00:01:42,550
‫páginas não é uma boa prática.

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

40
00:01:44,770 --> 00:01:46,700
‫como estamos fazendo aqui.

41
00:01:46,700 --> 00:01:48,710
‫Portanto, esta não é uma boa prática.

42
00:01:48,710 --> 00:01:51,200
‫Devemos ter apenas um grande arquivo JavaScript

43
00:01:51,200 --> 00:01:53,340
‫que inclui todo o código.

44
00:01:53,340 --> 00:01:56,000
‫Portanto, no desenvolvimento de front-end de

45
00:01:56,000 --> 00:01:59,150
‫JavaScript moderno, geralmente usamos algo chamado empacotador de módulo.

46
00:01:59,150 --> 00:02:02,210
‫O mais popular provavelmente ainda é o Webpack, mas

47
00:02:02,210 --> 00:02:04,700
‫geralmente o Webpack nos dá muitos problemas

48
00:02:04,700 --> 00:02:07,140
‫e é realmente difícil configurá-lo.

49
00:02:07,140 --> 00:02:11,380
‫Então, há na verdade um novo garoto muito legal no quarteirão, por

50
00:02:11,380 --> 00:02:13,930
‫assim dizer, que se chama Parcel.

51
00:02:13,930 --> 00:02:18,930
‫Então, vamos dar uma olhada nisso, ver se já aparece e,

52
00:02:19,680 --> 00:02:21,870
‫de fato, é esse.

53
00:02:21,870 --> 00:02:26,490
‫Empacotador de aplicativos da web extremamente rápido e sem configuração.

54
00:02:26,490 --> 00:02:29,080
‫Então é exatamente isso que estamos procurando.

55
00:02:29,080 --> 00:02:31,790
‫Simplesmente um bundler que não requer

56
00:02:31,790 --> 00:02:34,240
‫configurações complexas, porque não queremos

57
00:02:34,240 --> 00:02:36,340
‫perder tempo com isso.

58
00:02:37,470 --> 00:02:41,753
‫Tudo bem, então vamos instalá-lo aqui.

59
00:02:42,940 --> 00:02:44,340
‫Então npm install e

60
00:02:46,010 --> 00:02:48,603
‫não tenho certeza se é apenas Parcel, na verdade.

61
00:02:50,180 --> 00:02:51,013
‫Então,

62
00:02:52,509 --> 00:02:53,459
‫vamos voltar aqui.

63
00:02:55,860 --> 00:02:58,963
‫Provavelmente é Parcel. js ou algo

64
00:02:59,820 --> 00:03:02,810
‫assim, porque me lembro da última vez

65
00:03:02,810 --> 00:03:06,850
‫que instalei não funcionou de imediato, então vamos verificar isso.

66
00:03:06,850 --> 00:03:08,993
‫Sim, de fato, é Parcel-bundler.

67
00:03:18,370 --> 00:03:20,300
‫Agora temos algum erro.

68
00:03:20,300 --> 00:03:25,300
‫Ok, então esqueci de salvá-lo como uma dependência de desenvolvimento.

69
00:03:27,070 --> 00:03:30,810
‫Então, na verdade, queremos isso como um save dev, ok,

70
00:03:30,810 --> 00:03:33,910
‫e isso porque é uma ferramenta de desenvolvimento.

71
00:03:33,910 --> 00:03:35,483
‫Ainda assim, algo deu errado.

72
00:03:39,640 --> 00:03:41,313
‫Deixe-me tentar com o sudo aqui.

73
00:03:50,150 --> 00:03:52,790
‫E se não funcionou no seu

74
00:03:52,790 --> 00:03:56,943
‫caso também, use o sudo para obter as permissões adequadas.

75
00:04:03,360 --> 00:04:05,910
‫Tudo bem, então vamos dar uma olhada em nosso pacote. json

76
00:04:07,060 --> 00:04:11,140
‫e de fato aqui está, certo.

77
00:04:11,140 --> 00:04:12,620
‫Agora, se você estiver

78
00:04:12,620 --> 00:04:14,810
‫assistindo a este vídeo algum tempo depois de

79
00:04:14,810 --> 00:04:17,550
‫eu ter gravado, eles já podem ter ido para a

80
00:04:18,550 --> 00:04:20,200
‫versão número dois e, como

81
00:04:20,200 --> 00:04:22,370
‫já sabemos, podem apresentar algumas mudanças importantes.

82
00:04:22,370 --> 00:04:25,840
‫E assim, a partir deste ponto, se você receber algum erro

83
00:04:25,840 --> 00:04:27,740
‫que não viu aqui no

84
00:04:27,740 --> 00:04:30,940
‫vídeo, vá em frente e instale este pacote aqui usando

85
00:04:30,940 --> 00:04:32,533
‫a versão.

86
00:04:33,590 --> 00:04:34,750
‫1, ok.

87
00:04:34,750 --> 00:04:35,860
‫Então,

88
00:04:38,610 --> 00:04:41,650
‫basicamente, adicione um como este, ok.

89
00:04:41,650 --> 00:04:45,630
‫Então, isso anuncia que você está encontrando esses erros estranhos e,

90
00:04:45,630 --> 00:04:48,100
‫com sorte, também me poupa de toneladas

91
00:04:48,100 --> 00:04:50,110
‫de comentários negativos ou análises negativas

92
00:04:50,110 --> 00:04:54,330
‫que esperam que eu atualize todos os meus vídeos a cada duas

93
00:04:54,330 --> 00:04:57,640
‫semanas apenas porque alguma ferramenta é atualizada e, claro,

94
00:04:57,640 --> 00:04:59,560
‫isso não é possível.

95
00:04:59,560 --> 00:05:01,330
‫Muitas vezes a solução

96
00:05:01,330 --> 00:05:03,790
‫mais fácil é simplesmente você usar a

97
00:05:03,790 --> 00:05:07,030
‫mesma versão que estou usando no vídeo, tudo bem.

98
00:05:07,030 --> 00:05:10,420
‫De qualquer forma, agora para realmente usar o

99
00:05:10,420 --> 00:05:12,973
‫Parcel, vamos adicionar alguns scripts aqui.

100
00:05:15,410 --> 00:05:19,053
‫Então, estou adicionando um para assistir ou JavaScript.

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

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

103
00:05:28,100 --> 00:05:31,250
‫Na verdade, isso já funcionaria bem fora da caixa, mas

104
00:05:31,250 --> 00:05:33,810
‫ainda quero configurar um pouco, porque, do

105
00:05:33,810 --> 00:05:36,890
‫contrário, ele vai me colocar o pacote final em

106
00:05:36,890 --> 00:05:39,270
‫algumas pastas que eu não quero.

107
00:05:39,270 --> 00:05:44,270
‫Portanto, vamos especificar qual pasta ele realmente deve monitorar.

108
00:05:45,920 --> 00:05:50,920
‫Isso é público / JavaScript e, em seguida, índice. js, então esse é nosso ponto de entrada

109
00:05:52,670 --> 00:05:54,190
‫e esse é o

110
00:05:54,190 --> 00:05:56,490
‫arquivo que vamos criar em um segundo.

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

112
00:05:57,350 --> 00:05:59,670
‫Então, o diretório de saída também deve

113
00:06:03,432 --> 00:06:05,237
‫ser público.

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

115
00:06:07,900 --> 00:06:09,700
‫Muitas vezes você terá

116
00:06:09,700 --> 00:06:12,330
‫pastas diferentes para o desenvolvimento e para a

117
00:06:12,330 --> 00:06:15,550
‫saída, mas neste caso, como é uma arquitetura muito simples,

118
00:06:15,550 --> 00:06:18,400
‫colocarei o arquivo do pacote bem no mesmo

119
00:06:18,400 --> 00:06:20,550
‫lugar que os arquivos de desenvolvimento.

120
00:06:20,550 --> 00:06:23,000
‫Tudo bem, vamos também especificar o arquivo de

121
00:06:25,102 --> 00:06:25,935
‫saída e

122
00:06:26,860 --> 00:06:32,600
‫então ele deve ser empacotado. js, tudo bem.

123
00:06:32,600 --> 00:06:35,750
‫Agora eu posso executar isso e então dar

124
00:06:35,750 --> 00:06:39,430
‫uma olhada neste arquivo aqui e ver se algo muda

125
00:06:39,430 --> 00:06:41,330
‫ou em uma das dependências

126
00:06:41,330 --> 00:06:43,110
‫e sempre que

127
00:06:43,110 --> 00:06:45,260
‫isso acontecer, ele agrupará todos

128
00:06:45,260 --> 00:06:49,090
‫os arquivos novamente neste pacote. arquivo js, tudo bem.

129
00:06:49,090 --> 00:06:50,610
‫Então vamos

130
00:06:50,610 --> 00:06:53,720
‫duplicar isso, porque também queremos uma

131
00:06:53,720 --> 00:06:56,820
‫versão final, digamos de produção, ok.

132
00:06:56,820 --> 00:06:59,040
‫Então, neste nós vamos rodar aqueles onde

133
00:06:59,040 --> 00:07:01,100
‫eles estão realmente acabados, ok.

134
00:07:01,100 --> 00:07:03,450
‫Isso leva um pouco mais de tempo,

135
00:07:03,450 --> 00:07:06,630
‫mas também faz um pouco mais de otimização, mas é claro

136
00:07:06,630 --> 00:07:08,710
‫que não precisamos para o desenvolvimento.

137
00:07:08,710 --> 00:07:12,130
‫Em desenvolvimento, como sempre, queremos apenas que funcione.

138
00:07:12,130 --> 00:07:14,090
‫Então vamos executar o npm

139
00:07:15,970 --> 00:07:20,030
‫run watch: js, mas antes de fazermos isso vamos criar o

140
00:07:20,980 --> 00:07:22,473
‫índice. js.

141
00:07:23,370 --> 00:07:25,320
‫Vamos fechar algumas dessas pastas aqui.

142
00:07:26,170 --> 00:07:28,283
‫É um pouco confuso demais assim.

143
00:07:31,340 --> 00:07:34,890
‫Então indexe. js e vamos apenas fazer um

144
00:07:36,640 --> 00:07:38,403
‫console simples. logue aqui por enquanto.

145
00:07:39,670 --> 00:07:41,503
‫Olá da Parcel, tudo

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

147
00:07:45,480 --> 00:07:47,510
‫Então, vamos também para nossa base

148
00:07:47,510 --> 00:07:50,940
‫aqui e, na verdade, agora comentaremos tudo isso e

149
00:07:50,940 --> 00:07:52,140
‫incluiremos apenas

150
00:07:53,810 --> 00:07:55,163
‫o arquivo do pacote.

151
00:07:57,720 --> 00:08:01,790
‫Então, novamente, um arquivo que basicamente conterá todo o código que está

152
00:08:01,790 --> 00:08:04,000
‫em todos os outros arquivos e

153
00:08:04,000 --> 00:08:05,533
‫todas as suas dependências.

154
00:08:06,910 --> 00:08:10,860
‫Então, vamos salvá-lo e agora vamos realmente executá-lo para ver o

155
00:08:10,860 --> 00:08:12,033
‫que temos lá.

156
00:08:12,980 --> 00:08:17,170
‫E, de fato, recebemos nosso novo arquivo, que é um pacote. js e já

157
00:08:17,170 --> 00:08:21,000
‫tem todo esse monte de código lá,

158
00:08:21,000 --> 00:08:25,663
‫ok, simplesmente para essa linha de código neste ponto.

159
00:08:26,820 --> 00:08:29,203
‫De qualquer forma, vamos recarregar nossa página

160
00:08:31,510 --> 00:08:33,840
‫aqui, e olá do Parcel.

161
00:08:33,840 --> 00:08:38,140
‫Então funcionou, e agora vamos prosseguir e realmente

162
00:08:38,140 --> 00:08:40,343
‫configurar este arquivo aqui.

163
00:08:42,200 --> 00:08:44,980
‫Portanto, para evitar confusão, vamos fechar esses arquivos

164
00:08:44,980 --> 00:08:47,180
‫que não precisamos mais para o

165
00:08:47,180 --> 00:08:48,923
‫que estamos fazendo agora.

166
00:08:51,320 --> 00:08:52,570
‫Então, isso é um monte de coisas.

167
00:08:54,340 --> 00:08:56,900
‫Tudo bem, este também.

168
00:08:56,900 --> 00:09:00,560
‫Então agora a ideia é basicamente esse índice. O arquivo js

169
00:09:00,560 --> 00:09:02,930
‫é o nosso arquivo de entrada

170
00:09:02,930 --> 00:09:05,500
‫e, portanto, neste não podemos obter dados

171
00:09:05,500 --> 00:09:08,400
‫da interface do usuário e, em seguida, delegamos

172
00:09:08,400 --> 00:09:11,960
‫ações para algumas funções provenientes desses outros módulos aqui, basicamente.

173
00:09:11,960 --> 00:09:13,870
‫Portanto, temos agora o módulo de login,

174
00:09:13,870 --> 00:09:15,830
‫temos o nosso módulo de alertas, e assim

175
00:09:15,830 --> 00:09:17,950
‫como no Node. js

176
00:09:17,950 --> 00:09:21,920
‫agora podemos exportar dados desses módulos.

177
00:09:21,920 --> 00:09:24,550
‫Então vamos fazer isso, e o que eu quero

178
00:09:24,550 --> 00:09:26,440
‫exportar é esta função aqui.

179
00:09:26,440 --> 00:09:28,030
‫Agora funciona um pouco diferente do que

180
00:09:28,030 --> 00:09:30,200
‫funciona com o Node. js

181
00:09:30,200 --> 00:09:33,160
‫porque Node. js usa algo

182
00:09:33,160 --> 00:09:35,040
‫chamado CommonJS para implementar módulos.

183
00:09:35,040 --> 00:09:36,510
‫Não tenho certeza

184
00:09:36,510 --> 00:09:38,600
‫se mencionei isso quando falamos

185
00:09:38,600 --> 00:09:43,520
‫sobre módulos pela primeira vez, mas aqui no JavaScript front-end desde ES2015

186
00:09:43,520 --> 00:09:47,000
‫ou ES6 há algo chamado módulos em JavaScript também.

187
00:09:47,000 --> 00:09:48,720
‫A sintaxe é um

188
00:09:48,720 --> 00:09:51,150
‫pouco diferente, mas na verdade funciona nos

189
00:09:51,150 --> 00:09:54,470
‫bastidores, mas se você entender como funciona com o

190
00:09:54,470 --> 00:09:57,060
‫CommonJS, então este aqui será muito semelhante.

191
00:09:57,060 --> 00:10:00,740
‫Portanto, os módulos ES6 usam a sintaxe de exportação e importação.

192
00:10:00,740 --> 00:10:04,070
‫Portanto, aqui tudo o que precisamos fazer é dizer

193
00:10:05,120 --> 00:10:08,430
‫exportar e, em seguida, o que quisermos exportar desse

194
00:10:08,430 --> 00:10:10,110
‫arquivo, e é isso.

195
00:10:10,110 --> 00:10:13,170
‫Agora, esse pedaço de código aqui, vamos realmente

196
00:10:13,170 --> 00:10:15,100
‫usá-lo no arquivo de índice.

197
00:10:15,100 --> 00:10:17,720
‫Portanto, lembre-se de como eu disse que este arquivo

198
00:10:17,720 --> 00:10:20,630
‫aqui é mais para realmente obter dados da interface do usuário

199
00:10:20,630 --> 00:10:22,420
‫e, em seguida, delegar a ação.

200
00:10:22,420 --> 00:10:26,203
‫Então é exatamente isso que estamos fazendo aqui, certo.

201
00:10:27,490 --> 00:10:30,320
‫Então aqui temos apenas este tipo de módulo

202
00:10:30,320 --> 00:10:32,950
‫que exporta a função de login.

203
00:10:32,950 --> 00:10:35,350
‫Então podemos importar isso aqui e chamar o

204
00:10:36,370 --> 00:10:39,700
‫login aqui mesmo no índice. js e

205
00:10:39,700 --> 00:10:41,620
‫que funciona assim.

206
00:10:41,620 --> 00:10:44,210
‫Portanto, importe em vez de

207
00:10:44,210 --> 00:10:47,690
‫exigir o nome da variável que queremos importar.

208
00:10:47,690 --> 00:10:49,283
‫Portanto, estou usando chaves aqui.

209
00:10:50,466 --> 00:10:51,960
‫Portanto, é chamado de

210
00:10:55,420 --> 00:10:57,970
‫login e, em seguida, do nome do arquivo.

211
00:10:57,970 --> 00:11:01,493
‫Que, neste caso, mesmo diretório, faça o login.

212
00:11:03,080 --> 00:11:06,363
‫Agora, vamos também desativar o eslint aqui novamente, e

213
00:11:10,730 --> 00:11:13,570
‫usei essas chaves aqui, basicamente porque estamos

214
00:11:13,570 --> 00:11:16,840
‫fazendo a exportação dessa forma, mas também há algo

215
00:11:16,840 --> 00:11:20,070
‫semelhante ao módulo. exportação, que é

216
00:11:20,070 --> 00:11:22,140
‫uma espécie de exportação padrão.

217
00:11:22,140 --> 00:11:26,780
‫Portanto, nos módulos ES6, isso é realmente chamado de exportação padrão.

218
00:11:26,780 --> 00:11:30,320
‫Nesse caso, não precisaríamos dessas chaves.

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

220
00:11:31,153 --> 00:11:33,750
‫Agora precisamos fazer assim, porque

221
00:11:33,750 --> 00:11:37,200
‫bem, esse é o nome dessa função

222
00:11:37,200 --> 00:11:39,110
‫que exportamos, certo.

223
00:11:39,110 --> 00:11:42,860
‫Agora, algo muito importante também neste login é

224
00:11:42,860 --> 00:11:44,350
‫que usamos axios.

225
00:11:44,350 --> 00:11:47,250
‫E lembre-se de como eu disse que íamos

226
00:11:47,250 --> 00:11:51,040
‫instalá-lo na verdade a partir do npm como um módulo npm, certo?

227
00:11:51,040 --> 00:11:54,340
‫Então, vamos fazer isso agora, e na verdade porque já

228
00:11:54,340 --> 00:11:56,660
‫comentamos os axios a partir daqui.

229
00:11:56,660 --> 00:11:59,560
‫Portanto, agora o login não pode usar axios.

230
00:11:59,560 --> 00:12:03,060
‫Bem, porque não o incluímos mais aqui.

231
00:12:03,060 --> 00:12:06,070
‫Então, vamos adicionar, abrir um novo terminal

232
00:12:06,070 --> 00:12:08,903
‫e instalar axios em nosso projeto.

233
00:12:18,310 --> 00:12:23,280
‫Então agora tudo o que precisamos fazer é dizer import axios

234
00:12:25,830 --> 00:12:27,773
‫from axios, e é isso,

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

236
00:12:30,260 --> 00:12:33,900
‫Então esse arquivo, pelo menos por enquanto, está pronto,

237
00:12:33,900 --> 00:12:36,530
‫mas não vamos fechá-lo porque ainda precisaremos

238
00:12:36,530 --> 00:12:38,540
‫dele muito em breve.

239
00:12:38,540 --> 00:12:42,020
‫Em seguida, devemos instalar um polyfill, o que fará com

240
00:12:42,020 --> 00:12:44,420
‫que alguns dos recursos mais recentes

241
00:12:44,420 --> 00:12:47,120
‫do JavaScript funcionem também em navegadores mais antigos.

242
00:12:47,120 --> 00:12:50,360
‫Digamos que o npm install e este

243
00:12:50,360 --> 00:12:52,850
‫aqui parece um pouco estranho.

244
00:12:52,850 --> 00:12:57,850
‫Então, vamos adicionar babel / polyfill,

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

246
00:12:59,240 --> 00:13:01,370
‫Então aqui em

247
00:13:02,600 --> 00:13:03,433
‫cima

248
00:13:06,180 --> 00:13:09,070
‫faremos importação assim, certo.

249
00:13:09,070 --> 00:13:12,290
‫Portanto, este aqui não o salvamos em nenhuma variável, porque isso

250
00:13:12,290 --> 00:13:14,200
‫não é necessário de forma alguma.

251
00:13:14,200 --> 00:13:17,640
‫Tudo o que queremos fazer é basicamente ser

252
00:13:17,640 --> 00:13:20,840
‫incluído em nosso pacote final para preencher bem

253
00:13:20,840 --> 00:13:23,337
‫alguns dos recursos do JavaScript.

254
00:13:23,337 --> 00:13:26,320
‫Tudo bem, e é por isso também que

255
00:13:26,320 --> 00:13:29,220
‫está aqui na primeira linha dessas importações.

256
00:13:29,220 --> 00:13:33,960
‫De qualquer forma, agora vamos importar esta caixa de mapas também.

257
00:13:33,960 --> 00:13:36,800
‫Para isso, precisamos primeiro criar

258
00:13:36,800 --> 00:13:40,640
‫uma função que fará todas essas coisas aqui.

259
00:13:40,640 --> 00:13:41,790
‫OK.

260
00:13:41,790 --> 00:13:43,190
‫Portanto, vamos criar

261
00:13:45,450 --> 00:13:46,283
‫o

262
00:13:50,660 --> 00:13:54,363
‫displayMap de exportação, que terá a matriz de locais.

263
00:13:55,620 --> 00:14:00,620
‫Então, isso será realmente lido no índice. arquivo js, tudo

264
00:14:01,150 --> 00:14:02,290
‫bem.

265
00:14:02,290 --> 00:14:06,510
‫Então, novamente, indexe. js é mais para obter

266
00:14:06,510 --> 00:14:09,030
‫dados da interface do usuário, portanto, do

267
00:14:09,030 --> 00:14:13,110
‫site e, em seguida, delegar algumas ações para esses outros módulos,

268
00:14:13,110 --> 00:14:14,230
‫tudo bem.

269
00:14:14,230 --> 00:14:18,653
‫Portanto, essas coisas aqui serão feitas dentro do índice.

270
00:14:21,010 --> 00:14:22,883
‫Vamos fazer isso aqui.

271
00:14:28,750 --> 00:14:29,890
‫Em seguida, importe

272
00:14:31,890 --> 00:14:32,723
‫a

273
00:14:37,420 --> 00:14:38,343
‫caixa de

274
00:14:39,310 --> 00:14:40,690
‫mapa displayMap, tudo bem.

275
00:14:40,690 --> 00:14:42,640
‫Então, vamos chamar

276
00:14:45,980 --> 00:14:48,470
‫isso também com os locais.

277
00:14:48,470 --> 00:14:52,420
‫Agora, lembre-se de quando realmente criamos este mapa e de

278
00:14:52,420 --> 00:14:55,400
‫como ele nos perguntou se queríamos usar

279
00:14:55,400 --> 00:14:57,760
‫a biblioteca mapbox no npm?

280
00:14:57,760 --> 00:15:00,670
‫Então, podemos ir em frente e

281
00:15:00,670 --> 00:15:04,590
‫realmente usar aquele em vez deste que estamos usando agora.

282
00:15:04,590 --> 00:15:06,450
‫Bem, não está

283
00:15:06,450 --> 00:15:07,993
‫aqui.

284
00:15:09,850 --> 00:15:10,693
‫Sim, então este.

285
00:15:10,693 --> 00:15:13,170
‫Portanto, esta aqui é a biblioteca do mapbox

286
00:15:13,170 --> 00:15:15,330
‫que estamos usando no momento, mas

287
00:15:15,330 --> 00:15:17,290
‫também há uma versão npm.

288
00:15:17,290 --> 00:15:20,290
‫Então, não precisaríamos ter este.

289
00:15:20,290 --> 00:15:22,620
‫No entanto, por algum motivo, há

290
00:15:22,620 --> 00:15:26,410
‫um problema em usar essa biblioteca junto com o Parcel, ok.

291
00:15:26,410 --> 00:15:29,430
‫Então, outras pessoas realmente se deparam com esse problema.

292
00:15:29,430 --> 00:15:32,370
‫Portanto, não podemos usar a biblioteca mapbox npm

293
00:15:32,370 --> 00:15:34,080
‫junto com o Parcel.

294
00:15:34,080 --> 00:15:36,993
‫Então essa é a razão pela qual ainda estou fazendo assim.

295
00:15:38,850 --> 00:15:39,810
‫OK.

296
00:15:39,810 --> 00:15:43,360
‫Então, o mapbox está completo com isso.

297
00:15:43,360 --> 00:15:45,533
‫Isso nós não precisamos mais, também.

298
00:15:46,470 --> 00:15:49,150
‫Agora, vamos realmente nos livrar de alguns desses

299
00:15:49,150 --> 00:15:50,593
‫erros que vimos aqui.

300
00:15:51,510 --> 00:15:53,060
‫Bem, agora eles não

301
00:15:53,060 --> 00:15:55,500
‫estão mais aqui, mas por exemplo tivemos

302
00:15:55,500 --> 00:15:57,630
‫o problema que esse código aqui

303
00:15:57,630 --> 00:16:02,280
‫criava alguns erros quando estávamos em páginas que não tinham esse mapa aqui, certo.

304
00:16:02,280 --> 00:16:05,310
‫Porque é claro que a página de detalhes tem esse

305
00:16:05,310 --> 00:16:07,890
‫mapa, esse elemento, mas esse código é executado

306
00:16:07,890 --> 00:16:09,203
‫em todas as

307
00:16:09,203 --> 00:16:10,973
‫outras páginas, isso criará erros lá.

308
00:16:11,840 --> 00:16:13,700
‫Então, vamos consertar isso.

309
00:16:13,700 --> 00:16:15,980
‫Portanto, o que estou fazendo aqui é primeiro criar

310
00:16:15,980 --> 00:16:18,950
‫um elemento com isso e, em seguida, testar se ele realmente existe

311
00:16:18,950 --> 00:16:20,933
‫antes de executarmos esta linha de código.

312
00:16:23,610 --> 00:16:25,660
‫Portanto, criaremos alguns elementos DOM aqui.

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

314
00:16:34,820 --> 00:16:35,683
‫eu diria delegação.

315
00:16:39,750 --> 00:16:41,380
‫Então, se mapbox

316
00:16:43,370 --> 00:16:46,623
‫e só então para essas duas ações aqui,

317
00:16:47,690 --> 00:16:48,790
‫tudo bem.

318
00:16:48,790 --> 00:16:50,350
‫Aqui também é a caixa de mapas

319
00:16:52,420 --> 00:16:53,853
‫e isso é muito melhor.

320
00:16:57,190 --> 00:16:58,850
‫Aqui também vamos

321
00:16:58,850 --> 00:17:00,630
‫colocar valores, e vou colocar

322
00:17:00,630 --> 00:17:03,690
‫esses dois porque, na verdade, podemos precisar deles

323
00:17:03,690 --> 00:17:07,140
‫ou na verdade vamos precisar deles para outras coisas também.

324
00:17:07,140 --> 00:17:08,803
‫Assim fica um pouco mais limpo.

325
00:17:10,170 --> 00:17:13,230
‫Também vamos adicionar esse listener de

326
00:17:13,230 --> 00:17:16,660
‫evento aqui se esse elemento existir, certo.

327
00:17:16,660 --> 00:17:20,683
‫Porque, bem, novamente, ele criará um erro se não o fizer.

328
00:17:22,260 --> 00:17:23,777
‫Então, loginform, e

329
00:17:27,750 --> 00:17:28,583
‫se,

330
00:17:29,610 --> 00:17:30,443
‫e

331
00:17:33,770 --> 00:17:37,460
‫então, vamos reutilizá-lo aqui, salve-o e agora está

332
00:17:37,460 --> 00:17:39,363
‫com uma aparência melhor.

333
00:17:40,270 --> 00:17:41,103
‫OK.

334
00:17:42,355 --> 00:17:44,113
‫Vamos fechar este terminal.

335
00:17:45,500 --> 00:17:48,010
‫Isso você deve manter agrupando nosso código sempre

336
00:17:48,010 --> 00:17:49,480
‫que houver um salvamento.

337
00:17:49,480 --> 00:17:50,980
‫Vamos apenas salvá-lo aqui novamente.

338
00:17:53,600 --> 00:17:56,440
‫Ok, então espero que isso tenha mudado agora.

339
00:17:56,440 --> 00:17:58,203
‫Então, vamos tentar isso.

340
00:18:00,610 --> 00:18:03,800
‫Portanto, se você ainda conseguir fazer o login bem

341
00:18:03,800 --> 00:18:06,563
‫neste ponto, isso significa que realmente funcionou.

342
00:18:13,470 --> 00:18:15,850
‫Bem, talvez não.

343
00:18:15,850 --> 00:18:17,263
‫Vamos tentar de novo aqui.

344
00:18:21,360 --> 00:18:25,113
‫Tudo bem, então há algo errado acontecendo aqui.

345
00:18:26,430 --> 00:18:29,620
‫Então, como sempre, vamos registrar este e-mail e senha

346
00:18:29,620 --> 00:18:31,093
‫no console aqui.

347
00:18:32,570 --> 00:18:35,300
‫Quer dizer, porque a gente já sabe

348
00:18:35,300 --> 00:18:38,233
‫que na verdade essa função aqui é chamada, né.

349
00:18:39,260 --> 00:18:41,360
‫Caso contrário, nem mesmo obteríamos o erro.

350
00:18:45,380 --> 00:18:49,560
‫Certo, porque esse erro vem claramente de nossa API.

351
00:18:49,560 --> 00:18:53,403
‫Então, tudo o que temos aqui está realmente funcionando, eu acredito.

352
00:19:03,010 --> 00:19:04,763
‫Vamos dar uma olhada no console.

353
00:19:10,830 --> 00:19:14,610
‫Portanto, parece que na verdade não há nome de

354
00:19:14,610 --> 00:19:16,193
‫usuário e senha.

355
00:19:18,320 --> 00:19:19,153
‫OK.

356
00:19:21,640 --> 00:19:22,640
‫Não tenho certeza do porquê.

357
00:19:22,640 --> 00:19:26,003
‫Vamos dar uma olhada se realmente conseguimos algo.

358
00:19:26,870 --> 00:19:29,350
‫Então faça o login e

359
00:19:31,140 --> 00:19:33,963
‫eu também irei registrá-los aqui, não

360
00:19:34,950 --> 00:19:35,880
‫aqui, mas

361
00:19:37,930 --> 00:19:38,763
‫aqui.

362
00:19:50,730 --> 00:19:52,600
‫E então, aparentemente, o problema

363
00:19:52,600 --> 00:19:55,060
‫deve ser que o nome de usuário e

364
00:19:55,060 --> 00:19:57,220
‫a senha não estão realmente definidos.

365
00:19:57,220 --> 00:20:00,140
‫Ah, e agora, claro, posso ver por que isso acontece.

366
00:20:00,140 --> 00:20:01,483
‫Que erro estúpido.

367
00:20:02,440 --> 00:20:04,900
‫Então, estamos tentando ler esses valores aqui,

368
00:20:04,900 --> 00:20:07,340
‫logo no início quando a página

369
00:20:07,340 --> 00:20:11,223
‫é carregada e, claro, neste ponto, esses valores não estão definidos.

370
00:20:12,230 --> 00:20:15,400
‫Então, é claro, só podemos

371
00:20:15,400 --> 00:20:19,103
‫defini-los aqui em nosso ouvinte de eventos, certo.

372
00:20:20,370 --> 00:20:22,800
‫Então, no momento em que esta função aqui

373
00:20:22,800 --> 00:20:25,690
‫é chamada bem, é claro que o e-mail e a senha

374
00:20:25,690 --> 00:20:28,143
‫estão configurados, então é o momento em que podemos lê-los.

375
00:20:31,210 --> 00:20:33,423
‫Então isso foi meio estúpido, mas,

376
00:20:36,870 --> 00:20:39,470
‫você sabe, às vezes esse tipo de coisa acontece.

377
00:20:46,560 --> 00:20:48,673
‫Agora vamos realmente copiar isso aqui.

378
00:20:50,830 --> 00:20:53,460
‫Desta vez, estamos logados com sucesso, o

379
00:20:53,460 --> 00:20:56,373
‫que significa que nosso código aqui ainda funciona.

380
00:20:57,740 --> 00:21:01,500
‫Ótimo, e agora vamos fazer a parte final que

381
00:21:01,500 --> 00:21:03,310
‫queríamos fazer nesta

382
00:21:03,310 --> 00:21:07,373
‫aula, que é realmente criar esses alertas, tudo bem.

383
00:21:08,700 --> 00:21:13,700
‫Então, vamos criar uma função chamada show alert e exportá-la.

384
00:21:13,720 --> 00:21:16,790
‫Então no login vamos importar esta função e

385
00:21:16,790 --> 00:21:17,793
‫usá-la lá.

386
00:21:18,890 --> 00:21:21,070
‫Assim, showAlert e this

387
00:21:23,583 --> 00:21:27,557
‫como uma entrada obterão um tipo e

388
00:21:29,090 --> 00:21:31,010
‫uma mensagem, assim.

389
00:21:31,010 --> 00:21:32,230
‫E esse

390
00:21:34,070 --> 00:21:35,600
‫tipo é sucesso

391
00:21:38,170 --> 00:21:39,253
‫ou erro,

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

393
00:21:41,043 --> 00:21:44,020
‫Porque dependendo dessa entrada, teremos CSS diferente para

394
00:21:44,020 --> 00:21:46,890
‫cada um desses alertas e você verá

395
00:21:46,890 --> 00:21:48,590
‫isso em um segundo.

396
00:21:49,450 --> 00:21:52,360
‫Então, o que vamos fazer é basicamente criar

397
00:21:52,360 --> 00:21:56,233
‫alguma marcação HTML aqui e, em seguida, inseri-la em nosso HTML, então

398
00:21:57,210 --> 00:21:58,733
‫é algo realmente fácil.

399
00:22:00,530 --> 00:22:04,520
‫Então, uma marcação e a string de modelo

400
00:22:04,520 --> 00:22:07,280
‫e agora um bom HTML.

401
00:22:07,280 --> 00:22:11,370
‫Portanto, é simplesmente um div com uma classe de

402
00:22:13,110 --> 00:22:14,680
‫alerta e, em

403
00:22:14,680 --> 00:22:18,110
‫seguida, alerta - um modificador com nosso

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

405
00:22:21,890 --> 00:22:24,450
‫Ok, é por isso

406
00:22:24,450 --> 00:22:27,070
‫que precisa ser sucesso ou erro.

407
00:22:27,070 --> 00:22:29,650
‫Então, deixe-me mostrar isso rapidamente

408
00:22:29,650 --> 00:22:32,800
‫em CSS, porque eu acho que é

409
00:22:32,800 --> 00:22:36,530
‫realmente importante saber como tudo isso funciona junto, ok.

410
00:22:36,530 --> 00:22:38,520
‫Portanto, aqui temos nossa classe de

411
00:22:38,520 --> 00:22:41,863
‫alerta e, em seguida, alerta de sucesso e alerta de erro.

412
00:22:43,300 --> 00:22:44,880
‫Tudo bem.

413
00:22:44,880 --> 00:22:48,273
‫Como sempre, vamos desabilitar o eslint aqui, ok,

414
00:22:49,840 --> 00:22:52,700
‫e se livrar disso e agora é

415
00:22:54,530 --> 00:22:57,570
‫claro, aqui vai a mensagem que passamos

416
00:22:57,570 --> 00:22:59,193
‫para esta função.

417
00:23:00,190 --> 00:23:01,970
‫Claro que poderíamos seguir

418
00:23:01,970 --> 00:23:04,470
‫em frente e usar isso em todo o

419
00:23:04,470 --> 00:23:08,150
‫aplicativo, mas, neste caso, só precisamos realmente aqui para o nosso login.

420
00:23:08,150 --> 00:23:11,053
‫Portanto, documente. queryselector, e agora

421
00:23:11,890 --> 00:23:13,990
‫aqui nós selecionamos o elemento

422
00:23:13,990 --> 00:23:17,900
‫onde queremos incluir este HTML que acabamos de criar.

423
00:23:17,900 --> 00:23:19,950
‫Então, isso é realmente bem no início

424
00:23:19,950 --> 00:23:21,530
‫do elemento do corpo.

425
00:23:21,530 --> 00:23:23,153
‫Bem no topo da página.

426
00:23:24,570 --> 00:23:25,473
‫Então, coloque

427
00:23:27,570 --> 00:23:32,380
‫o corpo e, em seguida, insira o HTML adjacente, então este aqui.

428
00:23:32,380 --> 00:23:34,720
‫Se você fez meu curso completo de

429
00:23:34,720 --> 00:23:37,793
‫JavaScript, tudo isso aqui não será nenhuma novidade para

430
00:23:38,890 --> 00:23:39,810
‫você, ok.

431
00:23:39,810 --> 00:23:42,670
‫Portanto, aqui podemos especificar algumas palavras-chave e,

432
00:23:42,670 --> 00:23:45,080
‫neste caso, queremos iniciar depois.

433
00:23:45,080 --> 00:23:46,900
‫Basicamente, o que isso

434
00:23:46,900 --> 00:23:50,763
‫significa está dentro do corpo, mas logo no início, tudo bem.

435
00:23:52,580 --> 00:23:54,800
‫Então o HTML, então

436
00:23:54,800 --> 00:23:57,070
‫a marcação, que realmente queremos incluir.

437
00:23:57,070 --> 00:23:57,903
‫Excelente.

438
00:23:57,903 --> 00:24:00,760
‫Isso criará um alerta muito simples com

439
00:24:00,760 --> 00:24:04,900
‫base no tipo e método, mas agora também queremos uma

440
00:24:04,900 --> 00:24:07,193
‫função para ocultar alertas.

441
00:24:08,380 --> 00:24:11,410
‫Então, vamos criá-lo aqui também, exportar e provavelmente

442
00:24:11,410 --> 00:24:14,103
‫nem precisaremos dele fora daqui, mas ainda

443
00:24:14,980 --> 00:24:18,480
‫assim, para reutilização, é sempre uma boa ideia exportar

444
00:24:18,480 --> 00:24:19,773
‫tudo isso.

445
00:24:21,410 --> 00:24:25,173
‫Este não precisa aceitar nenhum argumento.

446
00:24:27,250 --> 00:24:31,220
‫Agora tudo o que vamos fazer é selecionar

447
00:24:31,220 --> 00:24:33,780
‫o elemento com a

448
00:24:33,780 --> 00:24:36,700
‫classe alert e, depois disso, removê-lo.

449
00:24:36,700 --> 00:24:38,167
‫Alerta então

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

451
00:24:43,710 --> 00:24:45,803
‫Exatamente o mesmo nome de classe aqui.

452
00:24:46,720 --> 00:24:49,430
‫Em seguida, precisamos usar um truque do

453
00:24:49,430 --> 00:24:52,610
‫JavaScript em que precisamos mover um nível até o elemento

454
00:24:52,610 --> 00:24:55,700
‫pai e, a partir daí, remover um elemento filho.

455
00:24:55,700 --> 00:24:59,380
‫Portanto, se há um elemento, então o

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

457
00:25:06,728 --> 00:25:08,478
‫em seguida, o elemento.

458
00:25:09,413 --> 00:25:10,910
‫OK.

459
00:25:10,910 --> 00:25:14,070
‫Então, novamente, isso deve ser apenas JavaScript básico

460
00:25:14,070 --> 00:25:16,230
‫ou manipulação DOM básica.

461
00:25:16,230 --> 00:25:18,150
‫Portanto, como este é um

462
00:25:18,150 --> 00:25:20,393
‫curso de nó, não vou me aprofundar nisso.

463
00:25:21,680 --> 00:25:23,770
‫De qualquer forma, o que quero fazer

464
00:25:23,770 --> 00:25:25,670
‫aqui agora é sempre que mostrarmos

465
00:25:25,670 --> 00:25:28,393
‫um alerta, primeiro ocultar todos os alertas que já existem.

466
00:25:30,400 --> 00:25:32,340
‫Portanto, sempre apenas para

467
00:25:32,340 --> 00:25:34,353
‫garantir que sempre execute hideAlert.

468
00:25:35,310 --> 00:25:39,150
‫Por fim, também desejo ocultar todos os alertas após

469
00:25:39,150 --> 00:25:40,383
‫cinco segundos.

470
00:25:42,370 --> 00:25:44,480
‫Portanto, janela

471
00:25:46,885 --> 00:25:50,220
‫setTimeout hideAlert após cinco

472
00:25:50,220 --> 00:25:51,790
‫segundos.

473
00:25:51,790 --> 00:25:54,533
‫Tudo bem, e agora vamos importar isso aqui.

474
00:25:58,030 --> 00:26:00,220
‫Exibir alerta para o qual foi chamado, certo?

475
00:26:00,220 --> 00:26:03,193
‫Oh showAlert, com tipo e mensagem.

476
00:26:05,900 --> 00:26:06,973
‫Então mostre

477
00:26:08,140 --> 00:26:08,973
‫o

478
00:26:12,280 --> 00:26:15,730
‫alerta a partir daí e então ...

479
00:26:15,730 --> 00:26:19,010
‫Sim, então queremos usar isso neste lugar.

480
00:26:19,010 --> 00:26:21,970
‫Portanto, em vez do alerta de JavaScript,

481
00:26:23,297 --> 00:26:25,650
‫queremos showAlert, tudo bem, e

482
00:26:25,650 --> 00:26:27,180
‫aqui o mesmo.

483
00:26:27,180 --> 00:26:29,220
‫Ainda precisamos especificar o

484
00:26:29,220 --> 00:26:30,380
‫tipo aqui,

485
00:26:32,925 --> 00:26:35,467
‫e isso é sucesso neste caso

486
00:26:40,220 --> 00:26:42,630
‫e aqui é o erro.

487
00:26:42,630 --> 00:26:44,193
‫Alcançamos o preenchimento automático.

488
00:26:46,450 --> 00:26:47,963
‫Ok, assim é melhor.

489
00:26:48,890 --> 00:26:50,483
‫Então, vamos testar.

490
00:26:53,580 --> 00:26:56,923
‫E antes de mais nada, precisamos fazer o logout, excluindo este cookie.

491
00:27:01,160 --> 00:27:02,990
‫Recarregue, faça login e

492
00:27:02,990 --> 00:27:03,993
‫agora

493
00:27:11,400 --> 00:27:13,900
‫estou testando primeiro com uma senha

494
00:27:15,500 --> 00:27:17,290
‫errada e vamos lá.

495
00:27:17,290 --> 00:27:21,400
‫E-mail ou senha incorretos bem no nosso bom alerta e você

496
00:27:21,400 --> 00:27:24,400
‫viu que depois de cinco segundos ele desapareceu.

497
00:27:24,400 --> 00:27:26,160
‫Claro que poderíamos ter

498
00:27:26,160 --> 00:27:28,400
‫colocado alguma animação legal lá e tudo,

499
00:27:28,400 --> 00:27:31,830
‫mas acho que assim já é mais do que suficiente.

500
00:27:31,830 --> 00:27:33,950
‫Então vamos ver de novo rapidamente,

501
00:27:33,950 --> 00:27:36,113
‫e é assim que vai ficar, mas

502
00:27:37,600 --> 00:27:40,400
‫quando estiver correto, então é claro que deve ser verde.

503
00:27:42,030 --> 00:27:44,930
‫Sim, logado com sucesso e vemos

504
00:27:44,930 --> 00:27:47,890
‫uma recarga após um segundo e meio

505
00:27:47,890 --> 00:27:50,320
‫e agora está realmente funcionando.

506
00:27:50,320 --> 00:27:53,593
‫Essa é a nossa autenticação completa no front-end.

507
00:27:54,880 --> 00:27:59,430
‫Deu muito trabalho, mas se você me perguntar, valeu totalmente a pena.

508
00:27:59,430 --> 00:28:02,070
‫Agora, a única coisa que falta

509
00:28:02,070 --> 00:28:05,690
‫é realmente fazer o logout quando clicamos neste botão aqui.

510
00:28:05,690 --> 00:28:07,510
‫Então, agora não é esse

511
00:28:07,510 --> 00:28:10,133
‫o caso e no próximo vídeo vamos consertar isso.