1
00:00:01,030 --> 00:00:04,400
‫-: Estamos quase prontos para implantar nosso aplicativo agora.

2
00:00:04,400 --> 00:00:05,860
‫Mas antes

3
00:00:05,860 --> 00:00:07,750
‫de fazermos isso, há algumas

4
00:00:07,750 --> 00:00:09,410
‫coisas que devemos cuidar.

5
00:00:09,410 --> 00:00:10,883
‫E então vamos fazer isso agora.

6
00:00:12,640 --> 00:00:14,570
‫E a primeira coisa que

7
00:00:14,570 --> 00:00:15,837
‫quero fazer é

8
00:00:15,837 --> 00:00:19,060
‫instalar um pacote que comprimirá todas as nossas respostas.

9
00:00:19,060 --> 00:00:22,820
‫Então, basicamente, sempre que enviamos uma resposta de texto a um

10
00:00:22,820 --> 00:00:26,020
‫cliente, não importa se é código JSON ou HTML.

11
00:00:26,020 --> 00:00:27,520
‫Com o pacote

12
00:00:27,520 --> 00:00:30,820
‫de compactação, esse texto será dramaticamente compactado.

13
00:00:30,820 --> 00:00:33,990
‫Tudo bem, então vamos instalar aqui.

14
00:00:33,990 --> 00:00:38,123
‫Instalação por Npm e, simplesmente, compressão.

15
00:00:39,400 --> 00:00:40,233
‫Tudo bem.

16
00:00:41,200 --> 00:00:42,863
‫Então, vamos incluir isso aqui.

17
00:00:51,061 --> 00:00:53,160
‫Agora, isso irá expor uma função da

18
00:00:53,160 --> 00:00:54,983
‫camada do meio muito

19
00:00:54,983 --> 00:00:56,820
‫simples que simplesmente temos que conectar

20
00:00:56,820 --> 00:00:59,020
‫em nossa pilha da camada do meio.

21
00:00:59,020 --> 00:01:00,773
‫Então, vamos fazer isso em algum lugar aqui.

22
00:01:02,110 --> 00:01:05,260
‫Perto do fim, realmente não importa.

23
00:01:05,260 --> 00:01:07,133
‫Então, app. usar,

24
00:01:08,060 --> 00:01:10,570
‫digite lá compressão de chamadas.

25
00:01:10,570 --> 00:01:13,400
‫Portanto, isso aqui retornará uma função do meio

26
00:01:13,400 --> 00:01:15,620
‫à esquerda que irá compactar

27
00:01:15,620 --> 00:01:17,910
‫novamente todo o texto enviado aos clientes.

28
00:01:17,910 --> 00:01:20,520
‫Portanto, não funcionará com

29
00:01:20,520 --> 00:01:23,240
‫imagens porque geralmente já estão compactadas.

30
00:01:23,240 --> 00:01:26,393
‫Por exemplo, um formato JPEG já está compactado.

31
00:01:28,090 --> 00:01:30,780
‫Portanto, isso só funcionará para texto.

32
00:01:30,780 --> 00:01:33,490
‫Assim, quando nosso site estiver

33
00:01:33,490 --> 00:01:37,490
‫realmente implantado, testaremos se essa compressão está realmente ativa.

34
00:01:37,490 --> 00:01:40,540
‫De qualquer forma, a próxima etapa antes de implantar nosso aplicativo é

35
00:01:40,540 --> 00:01:43,820
‫livrar-se da maior parte do console. logs que ainda temos

36
00:01:43,820 --> 00:01:45,460
‫em nosso código.

37
00:01:45,460 --> 00:01:48,230
‫E isso é porque esses logins acabarão nos logs

38
00:01:48,230 --> 00:01:50,053
‫da nossa plataforma de hospedagem.

39
00:01:50,990 --> 00:01:54,690
‫E, portanto, não queremos poluir essas toras na produção.

40
00:01:54,690 --> 00:01:55,730
‫OK.

41
00:01:55,730 --> 00:01:58,173
‫Então, vamos pesquisar rapidamente aqui por console.

42
00:02:01,310 --> 00:02:03,563
‫E como você pode ver, existem muitos deles.

43
00:02:04,400 --> 00:02:06,830
‫Então este já está comentado.

44
00:02:06,830 --> 00:02:09,563
‫Portanto, não vou trabalhar nisso.

45
00:02:11,010 --> 00:02:13,870
‫Mas este aqui, vamos realmente nos livrar dele.

46
00:02:13,870 --> 00:02:15,370
‫E agora, um

47
00:02:15,370 --> 00:02:17,620
‫por um, vamos dar uma olhada

48
00:02:17,620 --> 00:02:19,230
‫em todos eles e os

49
00:02:19,230 --> 00:02:21,700
‫que não são relevantes vamos simplesmente comentá-los.

50
00:02:21,700 --> 00:02:22,880
‫Tudo bem.

51
00:02:22,880 --> 00:02:26,330
‫Aqui no controlador de erro também temos uma tonelada deles, mas

52
00:02:26,330 --> 00:02:28,033
‫alguns são realmente relevantes.

53
00:02:29,570 --> 00:02:31,130
‫Agora, não este.

54
00:02:31,130 --> 00:02:33,130
‫Vamos nos livrar completamente disso.

55
00:02:36,970 --> 00:02:38,240
‫Também não

56
00:02:38,240 --> 00:02:40,190
‫este, mas aqui temos esses

57
00:02:40,190 --> 00:02:41,920
‫três que criamos propositalmente

58
00:02:41,920 --> 00:02:45,520
‫para que acabem nos logs da plataforma de hospedagem.

59
00:02:45,520 --> 00:02:46,353
‫OK.

60
00:02:46,353 --> 00:02:49,140
‫Portanto, lembre-se de que o configuramos de

61
00:02:49,140 --> 00:02:52,290
‫forma que, quando houver um erro no site de

62
00:02:52,290 --> 00:02:54,160
‫renderização, obtenhamos um log

63
00:02:54,160 --> 00:02:56,150
‫do erro que realmente aconteceu.

64
00:02:56,150 --> 00:02:58,550
‫Junto com este emoji aqui.

65
00:02:58,550 --> 00:03:00,470
‫E cada vez que

66
00:03:00,470 --> 00:03:02,950
‫vemos isso, podemos identificar facilmente em nossos

67
00:03:02,950 --> 00:03:05,890
‫logs que algo de ruim aconteceu do nosso lado.

68
00:03:05,890 --> 00:03:08,310
‫Ok, temos mais alguns aqui.

69
00:03:08,310 --> 00:03:11,250
‫Por exemplo, para outros erros desconhecidos em que

70
00:03:11,250 --> 00:03:14,720
‫não queremos vazar os detalhes do erro para o cliente.

71
00:03:14,720 --> 00:03:17,293
‫E então esses são bons para mantê-los.

72
00:03:18,380 --> 00:03:20,250
‫Este também queremos manter para

73
00:03:20,250 --> 00:03:22,140
‫nos informar nos logs que a

74
00:03:22,140 --> 00:03:24,523
‫conexão com o banco de dados foi bem-sucedida.

75
00:03:25,440 --> 00:03:27,186
‫Esses aqui também.

76
00:03:27,186 --> 00:03:30,500
‫Este aqui está na verdade no import-dev-data, então eles

77
00:03:30,500 --> 00:03:32,153
‫não são importantes.

78
00:03:34,290 --> 00:03:36,523
‫Enfim, todos os logs aqui, vamos mantê-los.

79
00:03:38,610 --> 00:03:41,298
‫Então aqui, nós temos este aqui,

80
00:03:41,298 --> 00:03:45,020
‫que realmente só tínhamos para usar esta camada do meio.

81
00:03:45,020 --> 00:03:48,200
‫Então, vamos desligar essa camada do meio.

82
00:03:48,200 --> 00:03:50,140
‫O que, mais uma vez,

83
00:03:50,140 --> 00:03:52,733
‫só usamos para testar a camada intermediária deste post.

84
00:03:54,520 --> 00:03:56,533
‫Em seguida, no modelo do usuário.

85
00:03:57,710 --> 00:04:00,690
‫Bem, este também não queremos.

86
00:04:00,690 --> 00:04:03,293
‫Isso foi apenas mais uma vez para fins de teste.

87
00:04:04,210 --> 00:04:06,370
‫Então temos o pacote JSON,

88
00:04:06,370 --> 00:04:08,593
‫então eles nem chegam aos logs.

89
00:04:08,593 --> 00:04:10,470
‫Então temos que

90
00:04:10,470 --> 00:04:13,180
‫agrupar onde não vamos mudar nada.

91
00:04:13,180 --> 00:04:14,943
‫Então temos o índice. js.

92
00:04:17,180 --> 00:04:20,030
‫Então esse é o nosso JavaScript do lado do cliente.

93
00:04:20,030 --> 00:04:22,473
‫Então, vamos nos livrar deste console. registre-se aqui.

94
00:04:25,848 --> 00:04:28,840
‫Então também temos mais alguns aqui no logout,

95
00:04:28,840 --> 00:04:30,640
‫mas este vamos mantê-lo.

96
00:04:31,600 --> 00:04:33,263
‫Um pouco mais em faixa.

97
00:04:34,210 --> 00:04:36,840
‫E não estamos interessados aqui na sessão.

98
00:04:36,840 --> 00:04:38,940
‫Mas este aqui quando há um erro

99
00:04:38,940 --> 00:04:40,133
‫está realmente bom.

100
00:04:41,660 --> 00:04:43,560
‫E então no servidor. js, temos

101
00:04:43,560 --> 00:04:44,760
‫esses aqui, que

102
00:04:44,760 --> 00:04:47,160
‫na verdade, novamente, fizemos de propósito.

103
00:04:47,160 --> 00:04:51,120
‫Para que eles realmente acabem aparecendo em nossos arquivos de log.

104
00:04:51,120 --> 00:04:53,170
‫E não se preocupe se você realmente não sabe

105
00:04:53,170 --> 00:04:55,120
‫o que quero dizer com arquivos de log.

106
00:04:55,120 --> 00:04:56,790
‫Você verá quando

107
00:04:56,790 --> 00:04:59,490
‫colocarmos nosso aplicativo no Heroku.

108
00:04:59,490 --> 00:05:02,980
‫Vou mostrar os arquivos de log até então, tudo bem.

109
00:05:02,980 --> 00:05:06,360
‫Enfim, todos esses console. os logs aqui são

110
00:05:06,360 --> 00:05:07,373
‫de propósito.

111
00:05:08,550 --> 00:05:10,010
‫E também este aqui

112
00:05:10,010 --> 00:05:12,533
‫sobre a conexão de banco de dados bem-sucedida.

113
00:05:13,410 --> 00:05:14,320
‫Este aqui

114
00:05:14,320 --> 00:05:17,410
‫também nos informa a porta onde o app está rodando.

115
00:05:17,410 --> 00:05:20,063
‫E este e este também são importantes.

116
00:05:21,440 --> 00:05:22,680
‫Tudo bem.

117
00:05:22,680 --> 00:05:25,080
‫E assim cuidamos de todo o

118
00:05:25,080 --> 00:05:27,880
‫console desnecessário. logs que estamos

119
00:05:27,880 --> 00:05:30,210
‫apenas poluindo nossas saídas de log.

120
00:05:30,210 --> 00:05:33,893
‫Ok, então vamos fechar todos esses arquivos aqui.

121
00:05:40,020 --> 00:05:41,230
‫Tudo bem.

122
00:05:41,230 --> 00:05:42,460
‫E agora, na

123
00:05:42,460 --> 00:05:45,190
‫próxima etapa, vamos alterar URLs ou códigos de

124
00:05:45,190 --> 00:05:47,073
‫API no lado do cliente, JavaScript.

125
00:05:48,540 --> 00:05:51,720
‫Então, por exemplo, aqui no login. js, agora

126
00:05:51,720 --> 00:05:54,170
‫fazemos os códigos de API

127
00:05:54,170 --> 00:05:56,300
‫para esta API de desenvolvimento.

128
00:05:56,300 --> 00:05:58,803
‫Então aqui, é claro, temos nosso URL de desenvolvimento.

129
00:06:00,293 --> 00:06:01,126
‫E

130
00:06:01,126 --> 00:06:03,090
‫assim, não vai funcionar na

131
00:06:03,090 --> 00:06:04,840
‫produção porque obviamente a partir

132
00:06:04,840 --> 00:06:08,740
‫daí, não seremos capazes de acessar nenhuma URL de desenvolvimento.

133
00:06:08,740 --> 00:06:10,000
‫E o mesmo aqui.

134
00:06:10,000 --> 00:06:13,050
‫Mas, felizmente, existe uma solução muito simples.

135
00:06:13,050 --> 00:06:17,360
‫Portanto, tudo o que precisamos fazer é realmente nos livrar dessa parte.

136
00:06:17,360 --> 00:06:19,760
‫Então, se nós apenas deletarmos

137
00:06:19,760 --> 00:06:22,740
‫assim, vamos acabar com este URL relativo.

138
00:06:22,740 --> 00:06:24,810
‫E como a API

139
00:06:24,810 --> 00:06:27,060
‫e o site estão hospedados

140
00:06:27,060 --> 00:06:29,430
‫no mesmo servidor, isso funcionará perfeitamente.

141
00:06:29,430 --> 00:06:31,410
‫Então, fazer dessa forma é

142
00:06:31,410 --> 00:06:35,550
‫um pouco como especificar o caminho para as imagens no HTML.

143
00:06:35,550 --> 00:06:38,670
‫Por exemplo, aqui na página de visão geral,

144
00:06:38,670 --> 00:06:40,230
‫onde temos essas

145
00:06:40,230 --> 00:06:42,660
‫imagens, simplesmente dizemos "/ img" e

146
00:06:42,660 --> 00:06:44,990
‫isso irá para a URL

147
00:06:44,990 --> 00:06:48,510
‫atual e, em seguida, adicionaremos esse caminho a ela.

148
00:06:48,510 --> 00:06:49,343
‫OK.

149
00:06:49,343 --> 00:06:51,980
‫E então a mesma coisa vai acontecer aqui.

150
00:06:51,980 --> 00:06:52,930
‫OK.

151
00:06:52,930 --> 00:06:56,620
‫Mais uma vez, isso só funciona porque a API e o

152
00:06:56,620 --> 00:06:59,310
‫site estão basicamente usando o mesmo URL.

153
00:06:59,310 --> 00:07:01,810
‫Portanto, estamos hospedando-os no mesmo lugar.

154
00:07:01,810 --> 00:07:03,660
‫Mas se você estivesse hospedando

155
00:07:03,660 --> 00:07:05,880
‫seu site ou front end em

156
00:07:05,880 --> 00:07:08,260
‫um URL e, em seguida, sua API

157
00:07:08,260 --> 00:07:11,110
‫em outro URL, então não funcionaria assim, ok.

158
00:07:11,110 --> 00:07:14,730
‫Mas, neste aplicativo simples, podemos simplesmente fazer assim porque

159
00:07:14,730 --> 00:07:17,173
‫temos uma configuração muito simples.

160
00:07:20,160 --> 00:07:22,880
‫Então vamos deletar aqui no login.

161
00:07:22,880 --> 00:07:26,030
‫No índice, acredito que não temos URLs.

162
00:07:27,560 --> 00:07:28,563
‫Sim, está certo.

163
00:07:29,460 --> 00:07:31,140
‫Também não nos alertas.

164
00:07:31,140 --> 00:07:34,063
‫Não no Mapbox, eu acredito.

165
00:07:36,090 --> 00:07:36,923
‫Não.

166
00:07:38,280 --> 00:07:39,763
‫Mas certamente em listra.

167
00:07:40,780 --> 00:07:42,523
‫Então, para começar nossa sessão.

168
00:07:43,890 --> 00:07:46,880
‫Portanto, podemos fazer exatamente a mesma coisa aqui.

169
00:07:46,880 --> 00:07:48,430
‫E também no updateSettings.

170
00:07:52,940 --> 00:07:54,350
‫OK.

171
00:07:54,350 --> 00:07:55,183
‫Dê uma chance.

172
00:07:55,183 --> 00:07:56,800
‫E todos eles.

173
00:07:56,800 --> 00:07:59,780
‫E então esse também é consertado.

174
00:07:59,780 --> 00:08:02,890
‫E agora, finalmente, e continuando a trabalhar no JavaScript

175
00:08:02,890 --> 00:08:04,460
‫do lado do

176
00:08:04,460 --> 00:08:06,473
‫cliente, precisamos criar nosso pacote final.

177
00:08:07,370 --> 00:08:08,250
‫Tudo bem.

178
00:08:08,250 --> 00:08:11,420
‫Portanto, neste momento, este é o nosso pacote de arquivo JavaScript.

179
00:08:11,420 --> 00:08:13,680
‫Mas lembre-se de que isso foi criado

180
00:08:13,680 --> 00:08:15,453
‫usando a função de relógio.

181
00:08:17,607 --> 00:08:18,920
‫Então, em nosso pacote. json

182
00:08:18,920 --> 00:08:22,350
‫temos este relógio. script js que irá apenas

183
00:08:22,350 --> 00:08:25,540
‫criar um novo pacote sempre que mudarmos um dos arquivos.

184
00:08:25,540 --> 00:08:27,030
‫Mas sem nenhuma

185
00:08:27,030 --> 00:08:29,723
‫compressão ou sem nenhuma otimização de desempenho.

186
00:08:30,720 --> 00:08:33,670
‫Mas agora que realmente terminamos com todo o nosso

187
00:08:33,670 --> 00:08:36,430
‫JavaScript, estamos prontos para realmente construir nosso JavaScript

188
00:08:36,430 --> 00:08:38,200
‫em um pacote final.

189
00:08:38,200 --> 00:08:42,120
‫E aqui devemos substituir este relógio por build,

190
00:08:42,120 --> 00:08:43,730
‫e assim

191
00:08:43,730 --> 00:08:46,860
‫criaremos nosso pacote JavaScript compactado final.

192
00:08:46,860 --> 00:08:48,100
‫Tudo bem.

193
00:08:48,100 --> 00:08:50,590
‫Então, vamos tentar isso aqui agora.

194
00:08:50,590 --> 00:08:51,963
‫Com o npm run.

195
00:08:54,190 --> 00:08:57,023
‫E mais uma vez com guia para autocompletar.

196
00:09:00,050 --> 00:09:01,810
‫Então vamos ver se ...

197
00:09:01,810 --> 00:09:03,530
‫E está feito.

198
00:09:03,530 --> 00:09:06,593
‫E então vamos dar uma olhada em nosso pacote agora.

199
00:09:07,610 --> 00:09:10,560
‫E para ver isso agora, é realmente

200
00:09:10,560 --> 00:09:12,003
‫bem compactado.

201
00:09:13,840 --> 00:09:14,800
‫Tudo bem.

202
00:09:14,800 --> 00:09:19,000
‫Agora você também vê que temos muitos desses novos arquivos aqui e

203
00:09:19,000 --> 00:09:23,110
‫isso é porque você está em nossa árvore de arquivos.

204
00:09:23,110 --> 00:09:26,230
‫O Parcel realmente cria essa pasta de cache.

205
00:09:26,230 --> 00:09:31,230
‫Mas não queremos essa pasta em nosso depósito git.

206
00:09:31,360 --> 00:09:32,193
‫Direito.

207
00:09:32,193 --> 00:09:33,300
‫Então, vamos adicionar isso aqui.

208
00:09:38,610 --> 00:09:39,610
‫E

209
00:09:39,610 --> 00:09:42,280
‫agora você vê que, automaticamente,

210
00:09:42,280 --> 00:09:44,560
‫assim que o salvarmos, ele

211
00:09:44,560 --> 00:09:47,910
‫voltará aos arquivos originais que foram atualizados.

212
00:09:47,910 --> 00:09:48,743
‫OK.

213
00:09:48,743 --> 00:09:51,380
‫Então, mais uma vez, o VS Code

214
00:09:51,380 --> 00:09:54,380
‫é realmente inteligente sobre tudo relacionado ao git.

215
00:09:54,380 --> 00:09:55,213
‫Tudo bem.

216
00:09:56,550 --> 00:09:57,383
‫OK.

217
00:09:57,383 --> 00:09:59,403
‫E eu acho que é realmente isso.

218
00:10:00,755 --> 00:10:03,840
‫Portanto, nosso aplicativo agora está preparado para ser realmente implantado.

219
00:10:03,840 --> 00:10:06,800
‫E agora a última etapa é

220
00:10:06,800 --> 00:10:10,300
‫realmente comprometer todos esses arquivos modificados em nosso repositório.

221
00:10:10,300 --> 00:10:13,490
‫Portanto, lembre-se de que a primeira etapa é adicionar todos os arquivos

222
00:10:13,490 --> 00:10:14,643
‫à área de teste.

223
00:10:15,510 --> 00:10:19,740
‫Então git add, e neste caso, todos os arquivos.

224
00:10:19,740 --> 00:10:20,660
‫Tudo bem.

225
00:10:20,660 --> 00:10:24,880
‫E agora tudo o que precisamos fazer

226
00:10:24,880 --> 00:10:27,907
‫é git commit, então

227
00:10:27,907 --> 00:10:32,907
‫a mensagem, e digamos, "Aplicativo preparado para implantação".

228
00:10:34,970 --> 00:10:35,803
‫Excelente!

229
00:10:35,803 --> 00:10:38,820
‫Então você vê que todas as nossas modificações desapareceram.

230
00:10:38,820 --> 00:10:40,290
‫Também daqui.

231
00:10:40,290 --> 00:10:42,700
‫O que significa que o ramo de trabalho

232
00:10:42,700 --> 00:10:44,333
‫atual é denominado limpo.

233
00:10:45,735 --> 00:10:48,810
‫E então sim, agora estamos prontos para implantar nosso aplicativo

234
00:10:48,810 --> 00:10:49,823
‫no próximo vídeo.