1
00:00:01,030 --> 00:00:04,400
‫-: Ya casi estamos listos para implementar nuestra aplicación.

2
00:00:04,400 --> 00:00:05,860
‫Pero antes de hacer

3
00:00:05,860 --> 00:00:07,750
‫eso, en realidad hay un par de

4
00:00:07,750 --> 00:00:09,410
‫cosas de las que debemos ocuparnos.

5
00:00:09,410 --> 00:00:10,883
‫Y hagámoslo ahora.

6
00:00:12,640 --> 00:00:14,570
‫Y lo primero que quiero

7
00:00:14,570 --> 00:00:15,837
‫hacer es

8
00:00:15,837 --> 00:00:19,060
‫instalar un paquete que comprimirá todas nuestras respuestas.

9
00:00:19,060 --> 00:00:22,820
‫Básicamente, siempre que enviamos una respuesta de texto a un cliente,

10
00:00:22,820 --> 00:00:26,020
‫no importa si es código JSON o HTML.

11
00:00:26,020 --> 00:00:27,520
‫Con el paquete

12
00:00:27,520 --> 00:00:30,820
‫de compresión, ese texto se comprimirá drásticamente.

13
00:00:30,820 --> 00:00:33,990
‫Muy bien, instalemos aquí.

14
00:00:33,990 --> 00:00:38,123
‫Npm install, y simplemente, compresión.

15
00:00:39,400 --> 00:00:40,233
‫Está bien.

16
00:00:41,200 --> 00:00:42,863
‫Así que incluyémoslo aquí.

17
00:00:51,061 --> 00:00:53,160
‫Ahora, esto expondrá una función de

18
00:00:53,160 --> 00:00:54,983
‫capa intermedia muy simple

19
00:00:54,983 --> 00:00:56,820
‫que simplemente tenemos que conectar

20
00:00:56,820 --> 00:00:59,020
‫a nuestra pila de capa intermedia.

21
00:00:59,020 --> 00:01:00,773
‫Así que hagámoslo en algún lugar de aquí.

22
00:01:02,110 --> 00:01:05,260
‫Cerca del final, realmente no importa.

23
00:01:05,260 --> 00:01:07,133
‫Así que app. use,

24
00:01:08,060 --> 00:01:10,570
‫ingrese allí la compresión de llamadas.

25
00:01:10,570 --> 00:01:13,400
‫Entonces, esto aquí devolverá una función central izquierda

26
00:01:13,400 --> 00:01:15,620
‫que nuevamente comprimirá todo el

27
00:01:15,620 --> 00:01:17,910
‫texto que se envía a los clientes.

28
00:01:17,910 --> 00:01:20,520
‫Por lo tanto, no funcionará para las

29
00:01:20,520 --> 00:01:23,240
‫imágenes porque, por lo general, ya están comprimidas.

30
00:01:23,240 --> 00:01:26,393
‫Entonces, por ejemplo, un formato JPEG ya está comprimido.

31
00:01:28,090 --> 00:01:30,780
‫Así que esto solo funcionará para el texto.

32
00:01:30,780 --> 00:01:33,490
‫Entonces, una vez que nuestro sitio

33
00:01:33,490 --> 00:01:37,490
‫web esté realmente implementado, probaremos si esta compresión está realmente activa.

34
00:01:37,490 --> 00:01:40,540
‫De todos modos, el siguiente paso antes de implementar nuestra aplicación es deshacerse de

35
00:01:40,540 --> 00:01:43,820
‫la mayor parte de la consola. registros que todavía tenemos

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

37
00:01:45,460 --> 00:01:48,230
‫Y eso es solo porque estos inicios de sesión terminarán en

38
00:01:48,230 --> 00:01:50,053
‫los registros de nuestra plataforma de alojamiento.

39
00:01:50,990 --> 00:01:54,690
‫Por eso no queremos contaminar estos troncos en producción.

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

41
00:01:55,730 --> 00:01:58,173
‫Así que busquemos rápidamente aquí la consola.

42
00:02:01,310 --> 00:02:03,563
‫Y como puede ver, hay muchos de ellos.

43
00:02:04,400 --> 00:02:06,830
‫Así que este ya está comentado.

44
00:02:06,830 --> 00:02:09,563
‫Así que no voy a trabajar en eso.

45
00:02:11,010 --> 00:02:13,870
‫Pero este de aquí, vamos a deshacernos de él.

46
00:02:13,870 --> 00:02:15,370
‫Así que ahora,

47
00:02:15,370 --> 00:02:17,620
‫uno por uno, vamos a echar un

48
00:02:17,620 --> 00:02:19,230
‫vistazo a todos y los

49
00:02:19,230 --> 00:02:21,700
‫que no sean relevantes simplemente los comentaremos.

50
00:02:21,700 --> 00:02:22,880
‫Está bien.

51
00:02:22,880 --> 00:02:26,330
‫Aquí, en el controlador de errores, también tenemos un montón de ellos,

52
00:02:26,330 --> 00:02:28,033
‫pero algunos son realmente relevantes.

53
00:02:29,570 --> 00:02:31,130
‫Ahora, este no.

54
00:02:31,130 --> 00:02:33,130
‫De hecho, eliminémoslo por completo.

55
00:02:36,970 --> 00:02:38,240
‫Tampoco este,

56
00:02:38,240 --> 00:02:40,190
‫pero aquí tenemos estos tres que

57
00:02:40,190 --> 00:02:41,920
‫realmente creamos a propósito para

58
00:02:41,920 --> 00:02:45,520
‫que terminen en los registros de nuestra plataforma de alojamiento.

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

60
00:02:46,353 --> 00:02:49,140
‫Así que recuerde que lo configuramos de manera

61
00:02:49,140 --> 00:02:52,290
‫que cuando haya un error en el sitio web

62
00:02:52,290 --> 00:02:54,160
‫de renderizado, obtengamos un

63
00:02:54,160 --> 00:02:56,150
‫registro del error que realmente sucedió.

64
00:02:56,150 --> 00:02:58,550
‫Junto con este emoji aquí.

65
00:02:58,550 --> 00:03:00,470
‫Y así, cada vez

66
00:03:00,470 --> 00:03:02,950
‫que vemos esto, podemos identificar fácilmente en

67
00:03:02,950 --> 00:03:05,890
‫nuestros registros que algo malo sucedió de nuestro lado.

68
00:03:05,890 --> 00:03:08,310
‫Bien, tenemos un par más aquí.

69
00:03:08,310 --> 00:03:11,250
‫Por ejemplo, para otros errores desconocidos en los

70
00:03:11,250 --> 00:03:14,720
‫que no queremos filtrar los detalles del error al cliente.

71
00:03:14,720 --> 00:03:17,293
‫Y estos están bien para quedárselos.

72
00:03:18,380 --> 00:03:20,250
‫Este también lo queremos mantener

73
00:03:20,250 --> 00:03:22,140
‫para informarnos en los registros que la

74
00:03:22,140 --> 00:03:24,523
‫conexión a la base de datos fue exitosa.

75
00:03:25,440 --> 00:03:27,186
‫Estos también están aquí.

76
00:03:27,186 --> 00:03:30,500
‫Este de aquí está en realidad en import-dev-data, por lo que

77
00:03:30,500 --> 00:03:32,153
‫no son importantes en absoluto.

78
00:03:34,290 --> 00:03:36,523
‫De todos modos, todos los registros aquí, guardémoslos.

79
00:03:38,610 --> 00:03:41,298
‫Entonces aquí, tenemos este aquí,

80
00:03:41,298 --> 00:03:45,020
‫que solo hicimos realmente para usar esta capa intermedia.

81
00:03:45,020 --> 00:03:48,200
‫Así que apaguemos esta capa intermedia.

82
00:03:48,200 --> 00:03:50,140
‫Lo cual nuevamente solo usamos

83
00:03:50,140 --> 00:03:52,733
‫para probar esta publicación, encontrar la capa intermedia.

84
00:03:54,520 --> 00:03:56,533
‫A continuación, en el modelo de usuario.

85
00:03:57,710 --> 00:04:00,690
‫Bueno, este tampoco lo queremos.

86
00:04:00,690 --> 00:04:03,293
‫Esto fue solo una vez más con fines de prueba.

87
00:04:04,210 --> 00:04:06,370
‫Luego tenemos el paquete JSON, por lo

88
00:04:06,370 --> 00:04:08,593
‫que en realidad ni siquiera llegan a los registros.

89
00:04:08,593 --> 00:04:10,470
‫Luego tenemos que agrupar

90
00:04:10,470 --> 00:04:13,180
‫donde no vamos a cambiar nada.

91
00:04:13,180 --> 00:04:14,943
‫Entonces tenemos index. js.

92
00:04:17,180 --> 00:04:20,030
‫Así que ese es nuestro JavaScript del lado del cliente.

93
00:04:20,030 --> 00:04:22,473
‫Así que deshagámonos de esta consola. inicie sesión aquí.

94
00:04:25,848 --> 00:04:28,840
‫Luego también tenemos algunos más aquí en el cierre de sesión,

95
00:04:28,840 --> 00:04:30,640
‫pero este realmente vamos a mantenerlo.

96
00:04:31,600 --> 00:04:33,263
‫Algunos más en raya.

97
00:04:34,210 --> 00:04:36,840
‫Y no estamos interesados aquí en la sesión.

98
00:04:36,840 --> 00:04:38,940
‫Pero este de aquí cuando hay un

99
00:04:38,940 --> 00:04:40,133
‫error está bien.

100
00:04:41,660 --> 00:04:43,560
‫Y luego en el servidor. js, tenemos

101
00:04:43,560 --> 00:04:44,760
‫estos aquí, que

102
00:04:44,760 --> 00:04:47,160
‫en realidad, nuevamente, hicimos a propósito.

103
00:04:47,160 --> 00:04:51,120
‫Para que realmente terminen apareciendo en nuestros archivos de registro.

104
00:04:51,120 --> 00:04:53,170
‫Y no se preocupe si realmente no sabe a

105
00:04:53,170 --> 00:04:55,120
‫qué me refiero con los archivos de registro.

106
00:04:55,120 --> 00:04:56,790
‫Verá una vez

107
00:04:56,790 --> 00:04:59,490
‫que coloquemos nuestra aplicación en Heroku.

108
00:04:59,490 --> 00:05:02,980
‫Entonces te mostraré los archivos de registro para entonces, de acuerdo.

109
00:05:02,980 --> 00:05:06,360
‫De todos modos, todas estas consolas. Los registros aquí son

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

111
00:05:08,550 --> 00:05:10,010
‫Y también lo es este

112
00:05:10,010 --> 00:05:12,533
‫aquí sobre la conexión exitosa a la base de datos.

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

114
00:05:14,320 --> 00:05:17,410
‫también nos informa el puerto donde se está ejecutando la aplicación.

115
00:05:17,410 --> 00:05:20,063
‫Y este, y este también son importantes.

116
00:05:21,440 --> 00:05:22,680
‫Está bien.

117
00:05:22,680 --> 00:05:25,080
‫Y así con esto nos encargamos de

118
00:05:25,080 --> 00:05:27,880
‫toda la consola innecesaria. registros de que

119
00:05:27,880 --> 00:05:30,210
‫solo estamos contaminando nuestras salidas de registro.

120
00:05:30,210 --> 00:05:33,893
‫Bien, cerremos todos estos archivos aquí.

121
00:05:40,020 --> 00:05:41,230
‫Está bien.

122
00:05:41,230 --> 00:05:42,460
‫Y ahora, el

123
00:05:42,460 --> 00:05:45,190
‫siguiente paso, cambiemos las URL o los códigos API

124
00:05:45,190 --> 00:05:47,073
‫en el lado del cliente, JavaScript.

125
00:05:48,540 --> 00:05:51,720
‫Entonces, por ejemplo, aquí en inicio de sesión. js, ahora

126
00:05:51,720 --> 00:05:54,170
‫mismo hacemos estos códigos de API

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

128
00:05:56,300 --> 00:05:58,803
‫Así que aquí, por supuesto, tenemos nuestra URL de desarrollo.

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

130
00:06:01,126 --> 00:06:03,090
‫así, no va a funcionar

131
00:06:03,090 --> 00:06:04,840
‫en producción porque, obviamente,

132
00:06:04,840 --> 00:06:08,740
‫desde allí, no podremos acceder a ninguna URL de desarrollo.

133
00:06:08,740 --> 00:06:10,000
‫Y lo mismo aquí arriba.

134
00:06:10,000 --> 00:06:13,050
‫Pero, afortunadamente, existe una solución muy sencilla.

135
00:06:13,050 --> 00:06:17,360
‫Así que todo lo que tenemos que hacer es deshacernos de esta parte.

136
00:06:17,360 --> 00:06:19,760
‫Entonces, si lo eliminamos

137
00:06:19,760 --> 00:06:22,740
‫así, terminaremos con esta URL relativa.

138
00:06:22,740 --> 00:06:24,810
‫Y dado que la API

139
00:06:24,810 --> 00:06:27,060
‫y el sitio web están alojados

140
00:06:27,060 --> 00:06:29,430
‫en el mismo servidor, esto funcionará perfectamente.

141
00:06:29,430 --> 00:06:31,410
‫Así que hacerlo así

142
00:06:31,410 --> 00:06:35,550
‫es como especificar la ruta a las imágenes en HTML.

143
00:06:35,550 --> 00:06:38,670
‫Por ejemplo, aquí en la página de

144
00:06:38,670 --> 00:06:40,230
‫descripción general, donde

145
00:06:40,230 --> 00:06:42,660
‫tenemos estas imágenes, simplemente decimos "/

146
00:06:42,660 --> 00:06:44,990
‫img" y luego irá a

147
00:06:44,990 --> 00:06:48,510
‫la URL actual y luego agregaremos esa ruta.

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

149
00:06:49,343 --> 00:06:51,980
‫Y entonces lo mismo va a estar sucediendo aquí.

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

151
00:06:52,930 --> 00:06:56,620
‫Ahora, nuevamente, esto solo funciona porque la API y el

152
00:06:56,620 --> 00:06:59,310
‫sitio web básicamente usan la misma URL.

153
00:06:59,310 --> 00:07:01,810
‫Entonces los hospedaremos en el mismo lugar.

154
00:07:01,810 --> 00:07:03,660
‫Pero si estuviera alojando su

155
00:07:03,660 --> 00:07:05,880
‫sitio web o su interfaz en

156
00:07:05,880 --> 00:07:08,260
‫una URL, y luego su API en

157
00:07:08,260 --> 00:07:11,110
‫otra URL, entonces no funcionaría así, está bien.

158
00:07:11,110 --> 00:07:14,730
‫Pero en esta sencilla aplicación podemos hacerlo así porque

159
00:07:14,730 --> 00:07:17,173
‫tenemos una configuración muy sencilla.

160
00:07:20,160 --> 00:07:22,880
‫Así que eliminémoslo aquí en el inicio de sesión.

161
00:07:22,880 --> 00:07:26,030
‫En el índice creo que no tenemos ninguna URL.

162
00:07:27,560 --> 00:07:28,563
‫Sí es cierto.

163
00:07:29,460 --> 00:07:31,140
‫Tampoco en las alertas.

164
00:07:31,140 --> 00:07:34,063
‫No en Mapbox, creo.

165
00:07:36,090 --> 00:07:36,923
‫No.

166
00:07:38,280 --> 00:07:39,763
‫Pero ciertamente a rayas.

167
00:07:40,780 --> 00:07:42,523
‫Así que para conseguir nuestra sesión.

168
00:07:43,890 --> 00:07:46,880
‫Entonces podemos hacer exactamente lo mismo aquí.

169
00:07:46,880 --> 00:07:48,430
‫Y también en updateSettings.

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

171
00:07:54,350 --> 00:07:55,183
‫Dale una oportunidad.

172
00:07:55,183 --> 00:07:56,800
‫Y todos ellos.

173
00:07:56,800 --> 00:07:59,780
‫Y para que uno también esté arreglado.

174
00:07:59,780 --> 00:08:02,890
‫Y ahora, finalmente, y continuando trabajando en JavaScript

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

176
00:08:04,460 --> 00:08:06,473
‫cliente, necesitamos crear nuestro paquete final.

177
00:08:07,370 --> 00:08:08,250
‫Está bien.

178
00:08:08,250 --> 00:08:11,420
‫Así que ahora mismo, este es nuestro archivo JavaScript de paquete.

179
00:08:11,420 --> 00:08:13,680
‫Pero recuerde que esto acaba de crearse

180
00:08:13,680 --> 00:08:15,453
‫con la función de reloj.

181
00:08:17,607 --> 00:08:18,920
‫Entonces en nuestro paquete. json

182
00:08:18,920 --> 00:08:22,350
‫tenemos este reloj. js que simplemente creará un

183
00:08:22,350 --> 00:08:25,540
‫nuevo paquete cada vez que cambiemos uno de los archivos.

184
00:08:25,540 --> 00:08:27,030
‫Pero sin ninguna

185
00:08:27,030 --> 00:08:29,723
‫compresión o sin ninguna optimización del rendimiento.

186
00:08:30,720 --> 00:08:33,670
‫Pero ahora que realmente hemos terminado con todo

187
00:08:33,670 --> 00:08:36,430
‫nuestro JavaScript, estamos listos para construir nuestro JavaScript

188
00:08:36,430 --> 00:08:38,200
‫en un paquete final.

189
00:08:38,200 --> 00:08:42,120
‫Y aquí deberíamos reemplazar este reloj con build,

190
00:08:42,120 --> 00:08:43,730
‫y eso creará

191
00:08:43,730 --> 00:08:46,860
‫nuestro paquete de JavaScript comprimido final.

192
00:08:46,860 --> 00:08:48,100
‫Está bien.

193
00:08:48,100 --> 00:08:50,590
‫Así que probemos eso aquí ahora.

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

195
00:08:54,190 --> 00:08:57,023
‫Y una vez más con la pestaña para autocompletar.

196
00:09:00,050 --> 00:09:01,810
‫Así que veamos si ...

197
00:09:01,810 --> 00:09:03,530
‫Y esta hecho.

198
00:09:03,530 --> 00:09:06,593
‫Entonces, echemos un vistazo a nuestro paquete ahora.

199
00:09:07,610 --> 00:09:10,560
‫Y ver eso ahora, está realmente así

200
00:09:10,560 --> 00:09:12,003
‫de bien comprimido.

201
00:09:13,840 --> 00:09:14,800
‫Está bien.

202
00:09:14,800 --> 00:09:19,000
‫Ahora también puede ver que tenemos un montón de estos nuevos archivos

203
00:09:19,000 --> 00:09:23,110
‫aquí y eso es porque está en nuestro árbol de archivos.

204
00:09:23,110 --> 00:09:26,230
‫Parcel realmente crea esta carpeta de caché.

205
00:09:26,230 --> 00:09:31,230
‫Pero no queremos esa carpeta en nuestro depósito de git.

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

207
00:09:32,193 --> 00:09:33,300
‫Así que agreguemos eso aquí.

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

209
00:09:39,610 --> 00:09:42,280
‫ahora verá que automáticamente tan

210
00:09:42,280 --> 00:09:44,560
‫pronto como lo guardemos, volverá

211
00:09:44,560 --> 00:09:47,910
‫a los archivos originales que se actualizaron.

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

213
00:09:48,743 --> 00:09:51,380
‫Entonces, una vez más, VS Code es

214
00:09:51,380 --> 00:09:54,380
‫realmente inteligente en todo lo relacionado con git.

215
00:09:54,380 --> 00:09:55,213
‫Está bien.

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

217
00:09:57,383 --> 00:09:59,403
‫Y creo que eso es todo.

218
00:10:00,755 --> 00:10:03,840
‫Entonces, nuestra aplicación está ahora preparada para ser realmente implementada.

219
00:10:03,840 --> 00:10:06,800
‫Y ahora el último paso es

220
00:10:06,800 --> 00:10:10,300
‫enviar todos estos archivos modificados a nuestro repositorio.

221
00:10:10,300 --> 00:10:13,490
‫Así que recuerde que el primer paso es agregar todos los archivos

222
00:10:13,490 --> 00:10:14,643
‫al área de preparación.

223
00:10:15,510 --> 00:10:19,740
‫Entonces, agregue, y en este caso, todos los archivos.

224
00:10:19,740 --> 00:10:20,660
‫Está bien.

225
00:10:20,660 --> 00:10:24,880
‫Y ahora todo lo que tenemos que

226
00:10:24,880 --> 00:10:27,907
‫hacer es git commit,

227
00:10:27,907 --> 00:10:32,907
‫luego el mensaje, y digamos, "Aplicación preparada para implementación".

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

229
00:10:35,803 --> 00:10:38,820
‫Entonces ves que todas nuestras modificaciones se han ido.

230
00:10:38,820 --> 00:10:40,290
‫También de aquí.

231
00:10:40,290 --> 00:10:42,700
‫Lo que significa que la rama de trabajo

232
00:10:42,700 --> 00:10:44,333
‫actual se denomina limpia.

233
00:10:45,735 --> 00:10:48,810
‫Y sí, ahora estamos listos para implementar nuestra aplicación en

234
00:10:48,810 --> 00:10:49,823
‫el siguiente video.