1
00:00:01,060 --> 00:00:03,293
‫Instructor: Ahora finalmente terminemos esta parte de

2
00:00:03,293 --> 00:00:05,413
‫la funcionalidad de inicio de sesión.

3
00:00:06,980 --> 00:00:09,300
‫Y recuerde cómo dije que en

4
00:00:09,300 --> 00:00:11,790
‫este video quería implementar una alerta realmente

5
00:00:11,790 --> 00:00:15,010
‫agradable para cuando el usuario inicia sesión con éxito,

6
00:00:16,450 --> 00:00:19,210
‫y para ver que, por ahora, cierre la

7
00:00:19,210 --> 00:00:21,663
‫sesión del usuario eliminando la cookie manualmente.

8
00:00:22,700 --> 00:00:24,760
‫Recarguemos, y ahora, por supuesto, el

9
00:00:24,760 --> 00:00:26,883
‫usuario ya no debería estar conectado, y

10
00:00:28,840 --> 00:00:30,720
‫de hecho no lo está.

11
00:00:30,720 --> 00:00:33,120
‫Como ya sabemos, eso se debe a que la

12
00:00:33,120 --> 00:00:35,410
‫cookie no se envió en la solicitud.

13
00:00:35,410 --> 00:00:37,790
‫Entonces, hay un middleware registrado que creamos en el

14
00:00:37,790 --> 00:00:39,050
‫último video que no

15
00:00:39,050 --> 00:00:42,840
‫puso el objeto de usuario en respuesta. lugareños, ¿recuerdan

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

17
00:00:44,320 --> 00:00:47,810
‫Entonces, si no está allí, el manual del usuario no se procesará

18
00:00:47,810 --> 00:00:50,650
‫y, en su lugar, esta parte se procesará para

19
00:00:50,650 --> 00:00:53,367
‫que podamos hacer clic aquí en Iniciar sesión.

20
00:00:53,367 --> 00:00:56,920
‫Entonces, esa alerta de la que estaba hablando antes, quiero

21
00:00:56,920 --> 00:00:59,760
‫que aparezca aquí básicamente al principio y luego,

22
00:00:59,760 --> 00:01:01,470
‫después de un segundo

23
00:01:01,470 --> 00:01:04,000
‫y medio, todavía queremos hacer esa recarga.

24
00:01:04,000 --> 00:01:07,610
‫Pasando a la página de inicio principal.

25
00:01:07,610 --> 00:01:09,550
‫De todos modos, creemos

26
00:01:09,550 --> 00:01:13,800
‫algunas funciones para esta alerta en otro archivo separado.

27
00:01:13,800 --> 00:01:14,983
‫Tan nuevo archivo,

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

29
00:01:20,210 --> 00:01:23,320
‫Está bien, pero ahora, antes de que podamos seguir adelante,

30
00:01:23,320 --> 00:01:24,510
‫debemos pensar un

31
00:01:24,510 --> 00:01:26,890
‫poco en nuestra arquitectura de front-end aquí.

32
00:01:26,890 --> 00:01:30,070
‫Ahora bien, este curso, por supuesto, no se trata de

33
00:01:30,070 --> 00:01:32,470
‫la interfaz, pero aún así debemos al

34
00:01:32,470 --> 00:01:34,170
‫menos preocuparnos un poco

35
00:01:34,170 --> 00:01:36,080
‫aquí, porque realmente estamos comenzando

36
00:01:36,080 --> 00:01:38,130
‫a obtener una buena cantidad de

37
00:01:38,130 --> 00:01:40,420
‫archivos aquí, e incluyéndolos a todos. en

38
00:01:40,420 --> 00:01:42,550
‫nuestras páginas no es una buena práctica.

39
00:01:42,550 --> 00:01:43,383
‫Así que

40
00:01:44,770 --> 00:01:46,700
‫como lo hemos estado haciendo aquí.

41
00:01:46,700 --> 00:01:48,710
‫Entonces esta no es una buena práctica.

42
00:01:48,710 --> 00:01:51,200
‫Solo deberíamos tener un archivo grande de

43
00:01:51,200 --> 00:01:53,340
‫JavaScript que incluya todo el código.

44
00:01:53,340 --> 00:01:56,000
‫Entonces, en el desarrollo moderno de front-end

45
00:01:56,000 --> 00:01:59,150
‫de JavaScript, generalmente usamos algo llamado paquete de módulos.

46
00:01:59,150 --> 00:02:02,210
‫El más popular probablemente sigue siendo Webpack, pero

47
00:02:02,210 --> 00:02:04,700
‫normalmente Webpack nos da muchos problemas

48
00:02:04,700 --> 00:02:07,140
‫y es realmente complicado configurarlo.

49
00:02:07,140 --> 00:02:11,380
‫Así que en realidad hay un chico nuevo muy agradable en la cuadra,

50
00:02:11,380 --> 00:02:13,930
‫por así decirlo, que se llama Parcel.

51
00:02:13,930 --> 00:02:18,930
‫Así que echaremos un vistazo a eso, veremos si ya aparece, y de

52
00:02:19,680 --> 00:02:21,870
‫hecho, ese es el indicado.

53
00:02:21,870 --> 00:02:26,490
‫Paquete de aplicaciones web ultrarrápido y sin configuración.

54
00:02:26,490 --> 00:02:29,080
‫Entonces eso es exactamente lo que estamos buscando.

55
00:02:29,080 --> 00:02:31,790
‫Simplemente un paquete que no requiere

56
00:02:31,790 --> 00:02:34,240
‫configuraciones complejas, porque no queremos perder

57
00:02:34,240 --> 00:02:36,340
‫el tiempo con eso.

58
00:02:37,470 --> 00:02:41,753
‫Muy bien, sigamos adelante e instálelo aquí.

59
00:02:42,940 --> 00:02:44,340
‫Entonces npm install y

60
00:02:46,010 --> 00:02:48,603
‫no estoy seguro de si es solo Parcel en realidad.

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

62
00:02:52,509 --> 00:02:53,459
‫que volvamos aquí.

63
00:02:55,860 --> 00:02:58,963
‫Probablemente sea Parcel. js o algo

64
00:02:59,820 --> 00:03:02,810
‫así, porque recuerdo que la última vez que

65
00:03:02,810 --> 00:03:06,850
‫lo instalé no funcionó de inmediato, así que verifiquemos eso.

66
00:03:06,850 --> 00:03:08,993
‫Sí, de hecho, es un paquete de paquetes.

67
00:03:18,370 --> 00:03:20,300
‫Ahora tenemos algún error.

68
00:03:20,300 --> 00:03:25,300
‫De acuerdo, me olvidé de guardarlo como una dependencia de desarrollo.

69
00:03:27,070 --> 00:03:30,810
‫Así que lo queremos como un desarrollador guardado, de acuerdo, y

70
00:03:30,810 --> 00:03:33,910
‫eso es porque es una herramienta de desarrollo.

71
00:03:33,910 --> 00:03:35,483
‫Ahora todavía algo salió mal.

72
00:03:39,640 --> 00:03:41,313
‫Déjame probarlo con sudo aquí.

73
00:03:50,150 --> 00:03:52,790
‫Entonces, si no funcionó en

74
00:03:52,790 --> 00:03:56,943
‫su caso, simplemente use sudo para obtener los permisos adecuados.

75
00:04:03,360 --> 00:04:05,910
‫Muy bien, echemos un vistazo a nuestro paquete. json

76
00:04:07,060 --> 00:04:11,140
‫y, de hecho, aquí está, de acuerdo.

77
00:04:11,140 --> 00:04:12,620
‫Ahora bien, si está

78
00:04:12,620 --> 00:04:14,810
‫viendo este video algún tiempo después de que

79
00:04:14,810 --> 00:04:17,550
‫lo grabé, es posible que ya hayan pasado a la

80
00:04:18,550 --> 00:04:20,200
‫versión número dos y eso, como

81
00:04:20,200 --> 00:04:22,370
‫ya sabemos, podría introducir algunos cambios importantes.

82
00:04:22,370 --> 00:04:25,840
‫Y así, a partir de este punto, si obtiene algún error

83
00:04:25,840 --> 00:04:27,740
‫que no vio aquí en

84
00:04:27,740 --> 00:04:30,940
‫el video, continúe e instale este paquete aquí usando

85
00:04:30,940 --> 00:04:32,533
‫la versión. 1,

86
00:04:33,590 --> 00:04:34,750
‫está bien.

87
00:04:34,750 --> 00:04:35,860
‫Básicamente,

88
00:04:38,610 --> 00:04:41,650
‫agrega uno como este, está bien.

89
00:04:41,650 --> 00:04:45,630
‫Entonces, esto le anuncia que se encuentra con estos errores extraños

90
00:04:45,630 --> 00:04:48,100
‫y, con suerte, también me ahorra

91
00:04:48,100 --> 00:04:50,110
‫toneladas de comentarios negativos o

92
00:04:50,110 --> 00:04:54,330
‫críticas negativas que esperan que actualice todos mis videos cada dos semanas

93
00:04:54,330 --> 00:04:57,640
‫solo porque alguna herramienta se actualiza y, por supuesto,

94
00:04:57,640 --> 00:04:59,560
‫eso no es posible.

95
00:04:59,560 --> 00:05:01,330
‫Muchas veces, la solución más

96
00:05:01,330 --> 00:05:03,790
‫fácil es simplemente que uses la misma

97
00:05:03,790 --> 00:05:07,030
‫versión que yo estoy usando en el video, de acuerdo.

98
00:05:07,030 --> 00:05:10,420
‫De todos modos, ahora para usar Parcel,

99
00:05:10,420 --> 00:05:12,973
‫agreguemos algunos scripts aquí.

100
00:05:15,410 --> 00:05:19,053
‫Así que estoy agregando uno para mirar o JavaScript.

101
00:05:20,890 --> 00:05:22,400
‫De acuerdo, y para

102
00:05:24,380 --> 00:05:26,443
‫eso utilizo el comando Parcel watch.

103
00:05:28,100 --> 00:05:31,250
‫En realidad, esto ya funcionaría bien desde el primer

104
00:05:31,250 --> 00:05:33,810
‫momento, pero aún quiero configurar un poco,

105
00:05:33,810 --> 00:05:36,890
‫porque de lo contrario, me pondrá el paquete final

106
00:05:36,890 --> 00:05:39,270
‫en algunas carpetas que no quiero.

107
00:05:39,270 --> 00:05:44,270
‫Así que especifiquemos qué carpeta realmente debería ver.

108
00:05:45,920 --> 00:05:50,920
‫Entonces eso es público / JavaScript y luego index. js, ese es nuestro punto de entrada

109
00:05:52,670 --> 00:05:54,190
‫y ese es

110
00:05:54,190 --> 00:05:56,490
‫el archivo que crearemos en un segundo.

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

112
00:05:57,350 --> 00:05:59,670
‫Entonces el directorio de salida también debería

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

114
00:06:06,980 --> 00:06:07,900
‫está bien.

115
00:06:07,900 --> 00:06:09,700
‫Muchas veces tendrás diferentes

116
00:06:09,700 --> 00:06:12,330
‫carpetas para el desarrollo y para la salida,

117
00:06:12,330 --> 00:06:15,550
‫pero en este caso, dado que es una arquitectura muy

118
00:06:15,550 --> 00:06:18,400
‫simple, colocaré el archivo del paquete en el mismo

119
00:06:18,400 --> 00:06:20,550
‫lugar que los archivos de desarrollo.

120
00:06:20,550 --> 00:06:23,000
‫Muy bien, también especifiquemos el archivo de salida

121
00:06:25,102 --> 00:06:25,935
‫y, por

122
00:06:26,860 --> 00:06:32,600
‫lo tanto, debería ser un paquete. js, está bien.

123
00:06:32,600 --> 00:06:35,750
‫Entonces ahora puedo ejecutar esto y luego echará un

124
00:06:35,750 --> 00:06:39,430
‫vistazo a este archivo aquí y verá si algo cambia

125
00:06:39,430 --> 00:06:41,330
‫o en una de las

126
00:06:41,330 --> 00:06:43,110
‫dependencias y, cuando

127
00:06:43,110 --> 00:06:45,260
‫eso suceda, volverá a agrupar todos

128
00:06:45,260 --> 00:06:49,090
‫los archivos en este paquete. js archivo, de acuerdo.

129
00:06:49,090 --> 00:06:50,610
‫Entonces también

130
00:06:50,610 --> 00:06:53,720
‫dupliquemos esto, porque también queremos una versión

131
00:06:53,720 --> 00:06:56,820
‫final, digamos de producción, está bien.

132
00:06:56,820 --> 00:06:59,040
‫Así que en este vamos a ejecutar algunos en

133
00:06:59,040 --> 00:07:01,100
‫los que realmente estén terminados, está bien.

134
00:07:01,100 --> 00:07:03,450
‫Eso lleva un poco más de tiempo, pero

135
00:07:03,450 --> 00:07:06,630
‫también hace un poco más de optimización, pero eso, por supuesto,

136
00:07:06,630 --> 00:07:08,710
‫no lo necesitamos para el desarrollo.

137
00:07:08,710 --> 00:07:12,130
‫En desarrollo, como siempre, solo queremos que funcione.

138
00:07:12,130 --> 00:07:14,090
‫Así que hagamos npm

139
00:07:15,970 --> 00:07:20,030
‫run watch: js, pero antes de hacerlo, creemos el

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

141
00:07:23,370 --> 00:07:25,320
‫Cerremos algunas de estas carpetas aquí.

142
00:07:26,170 --> 00:07:28,283
‫Es un poco confuso así.

143
00:07:31,340 --> 00:07:34,890
‫Entonces index. js y hagamos una simple

144
00:07:36,640 --> 00:07:38,403
‫consola. inicie sesión aquí por ahora.

145
00:07:39,670 --> 00:07:41,503
‫Hola de Parcel, está

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

147
00:07:45,480 --> 00:07:47,510
‫Luego, vayamos también a nuestra

148
00:07:47,510 --> 00:07:50,940
‫base aquí y luego comentaremos todos estos y solo

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

150
00:07:53,810 --> 00:07:55,163
‫archivo del paquete.

151
00:07:57,720 --> 00:08:01,790
‫Entonces, nuevamente, un archivo que básicamente contendrá todo el código que

152
00:08:01,790 --> 00:08:04,000
‫está en todos los demás archivos

153
00:08:04,000 --> 00:08:05,533
‫y todas sus dependencias.

154
00:08:06,910 --> 00:08:10,860
‫Así que vamos a guardarlo, y ahora ejecutemos esto, veamos qué

155
00:08:10,860 --> 00:08:12,033
‫obtenemos allí.

156
00:08:12,980 --> 00:08:17,170
‫Y de hecho, obtuvimos nuestro nuevo archivo, que es paquete. js y ya

157
00:08:17,170 --> 00:08:21,000
‫tiene todo este montón de código, está bien,

158
00:08:21,000 --> 00:08:25,663
‫simplemente para esta línea de código en este punto.

159
00:08:26,820 --> 00:08:29,203
‫Pero de todos modos recarguemos nuestra página

160
00:08:31,510 --> 00:08:33,840
‫aquí, y hola desde Parcel.

161
00:08:33,840 --> 00:08:38,140
‫Así que funcionó, y ahora sigamos adelante y

162
00:08:38,140 --> 00:08:40,343
‫configuremos este archivo aquí.

163
00:08:42,200 --> 00:08:44,980
‫Entonces, para evitar confusiones, cerremos estos archivos que

164
00:08:44,980 --> 00:08:47,180
‫ya no necesitamos para lo que

165
00:08:47,180 --> 00:08:48,923
‫estamos haciendo ahora.

166
00:08:51,320 --> 00:08:52,570
‫Eso es un montón de cosas.

167
00:08:54,340 --> 00:08:56,900
‫De acuerdo, este tampoco.

168
00:08:56,900 --> 00:09:00,560
‫Así que ahora la idea es básicamente que este index. js es nuestro archivo

169
00:09:00,560 --> 00:09:02,930
‫de entrada, por lo que en

170
00:09:02,930 --> 00:09:05,500
‫este no podemos obtener datos de la

171
00:09:05,500 --> 00:09:08,400
‫interfaz de usuario y luego delegamos acciones a

172
00:09:08,400 --> 00:09:11,960
‫algunas funciones que provienen de estos otros módulos aquí básicamente.

173
00:09:11,960 --> 00:09:13,870
‫Así que ahora tenemos el módulo de inicio

174
00:09:13,870 --> 00:09:15,830
‫de sesión, tenemos nuestro módulo de alertas, y

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

176
00:09:17,950 --> 00:09:21,920
‫ahora podemos exportar datos de estos módulos.

177
00:09:21,920 --> 00:09:24,550
‫Así que hagamos eso, y lo que quiero

178
00:09:24,550 --> 00:09:26,440
‫exportar es esta función aquí.

179
00:09:26,440 --> 00:09:28,030
‫Ahora funciona un poco diferente a

180
00:09:28,030 --> 00:09:30,200
‫como funciona con 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
‫llamado CommonJS para implementar módulos.

183
00:09:35,040 --> 00:09:36,510
‫No estoy seguro

184
00:09:36,510 --> 00:09:38,600
‫si mencioné eso cuando hablamos

185
00:09:38,600 --> 00:09:43,520
‫por primera vez sobre los módulos, pero aquí, en JavaScript front-end desde ES2015

186
00:09:43,520 --> 00:09:47,000
‫o ES6, también hay algo llamado módulos en JavaScript.

187
00:09:47,000 --> 00:09:48,720
‫La sintaxis es un

188
00:09:48,720 --> 00:09:51,150
‫poco diferente, pero en realidad la forma en

189
00:09:51,150 --> 00:09:54,470
‫que funciona detrás de escena, pero en realidad si comprende

190
00:09:54,470 --> 00:09:57,060
‫cómo funciona con CommonJS, esta será muy similar.

191
00:09:57,060 --> 00:10:00,740
‫Entonces, los módulos ES6 usan la sintaxis de importación de exportación.

192
00:10:00,740 --> 00:10:04,070
‫Así que aquí todo lo que tenemos que hacer es decir

193
00:10:05,120 --> 00:10:08,430
‫exportar y luego lo que queramos exportar de este archivo,

194
00:10:08,430 --> 00:10:10,110
‫y eso es todo.

195
00:10:10,110 --> 00:10:13,170
‫Ahora, este fragmento de código aquí lo usaremos

196
00:10:13,170 --> 00:10:15,100
‫en el archivo de índice.

197
00:10:15,100 --> 00:10:17,720
‫Entonces, recuerde cómo dije que este archivo aquí

198
00:10:17,720 --> 00:10:20,630
‫es más para obtener datos de la interfaz de usuario

199
00:10:20,630 --> 00:10:22,420
‫y luego delegar la acción.

200
00:10:22,420 --> 00:10:26,203
‫Así que eso es exactamente lo que estamos haciendo aquí, está bien.

201
00:10:27,490 --> 00:10:30,320
‫Entonces, aquí solo tenemos este tipo de módulo que

202
00:10:30,320 --> 00:10:32,950
‫luego exporta la función de inicio de sesión.

203
00:10:32,950 --> 00:10:35,350
‫Luego podemos importar eso aquí y llamar al inicio

204
00:10:36,370 --> 00:10:39,700
‫de sesión aquí mismo en index. js y

205
00:10:39,700 --> 00:10:41,620
‫eso funciona así.

206
00:10:41,620 --> 00:10:44,210
‫Por lo tanto, importe en lugar

207
00:10:44,210 --> 00:10:47,690
‫de requerir el nombre de la variable que queremos importar.

208
00:10:47,690 --> 00:10:49,283
‫Entonces estoy usando llaves aquí.

209
00:10:50,466 --> 00:10:51,960
‫Entonces se llama inicio

210
00:10:55,420 --> 00:10:57,970
‫de sesión y luego del nombre del archivo.

211
00:10:57,970 --> 00:11:01,493
‫Que en este caso, mismo directorio, inicie sesión.

212
00:11:03,080 --> 00:11:06,363
‫Ahora también deshabilitemos eslint aquí nuevamente, y usé estas

213
00:11:10,730 --> 00:11:13,570
‫llaves aquí, básicamente porque estamos haciendo la

214
00:11:13,570 --> 00:11:16,840
‫exportación de esta manera, pero también hay algo

215
00:11:16,840 --> 00:11:20,070
‫similar a module. export, que es

216
00:11:20,070 --> 00:11:22,140
‫una especie de exportación predeterminada.

217
00:11:22,140 --> 00:11:26,780
‫Entonces, en los módulos ES6, en realidad se llama exportación predeterminada.

218
00:11:26,780 --> 00:11:30,320
‫Entonces, en ese caso, no necesitaríamos estas llaves.

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

220
00:11:31,153 --> 00:11:33,750
‫En este momento tenemos que hacerlo así,

221
00:11:33,750 --> 00:11:37,200
‫porque bueno, ese es el nombre de esta función

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

223
00:11:39,110 --> 00:11:42,860
‫Ahora, algo realmente importante también en este inicio de sesión es

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

225
00:11:44,350 --> 00:11:47,250
‫Y recuerda cómo dije que íbamos a

226
00:11:47,250 --> 00:11:51,040
‫instalarlo en realidad desde npm como un módulo npm, ¿verdad?

227
00:11:51,040 --> 00:11:54,340
‫Así que hagámoslo ahora, y de hecho porque

228
00:11:54,340 --> 00:11:56,660
‫ya comentamos axios desde aquí.

229
00:11:56,660 --> 00:11:59,560
‫Entonces, ahora mismo, el inicio de sesión no puede usar axios.

230
00:11:59,560 --> 00:12:03,060
‫Bueno, porque ya no lo incluimos aquí.

231
00:12:03,060 --> 00:12:06,070
‫Así que vamos a agregar, abrir una nueva

232
00:12:06,070 --> 00:12:08,903
‫terminal e instalar axios en nuestro proyecto.

233
00:12:18,310 --> 00:12:23,280
‫Entonces ahora todo lo que tenemos que hacer es decir importar axios de

234
00:12:25,830 --> 00:12:27,773
‫axios, y eso es todo,

235
00:12:29,290 --> 00:12:30,260
‫está bien.

236
00:12:30,260 --> 00:12:33,900
‫Así que este archivo, al menos por ahora, está

237
00:12:33,900 --> 00:12:36,530
‫listo, pero no lo cerremos porque todavía

238
00:12:36,530 --> 00:12:38,540
‫lo necesitaremos muy pronto.

239
00:12:38,540 --> 00:12:42,020
‫A continuación, también deberíamos instalar un polyfill, que hará que

240
00:12:42,020 --> 00:12:44,420
‫algunas de las características más nuevas

241
00:12:44,420 --> 00:12:47,120
‫de JavaScript funcionen también en navegadores más antiguos.

242
00:12:47,120 --> 00:12:50,360
‫Así que digamos que npm install y este

243
00:12:50,360 --> 00:12:52,850
‫de aquí parece un poco extraño.

244
00:12:52,850 --> 00:12:57,850
‫Así que agreguemos babel / polyfill,

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

246
00:12:59,240 --> 00:13:01,370
‫Entonces aquí arriba

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

248
00:13:06,180 --> 00:13:09,070
‫la importación así, de acuerdo.

249
00:13:09,070 --> 00:13:12,290
‫Así que este de aquí no lo guardamos en ninguna variable,

250
00:13:12,290 --> 00:13:14,200
‫porque no es necesario en absoluto.

251
00:13:14,200 --> 00:13:17,640
‫Todo lo que queremos que haga es que se incluya

252
00:13:17,640 --> 00:13:20,840
‫básicamente en nuestro paquete final para rellenar bien

253
00:13:20,840 --> 00:13:23,337
‫algunas de las características de JavaScript.

254
00:13:23,337 --> 00:13:26,320
‫Muy bien, y esa es también la razón por la que

255
00:13:26,320 --> 00:13:29,220
‫está aquí en la primera línea de estas importaciones.

256
00:13:29,220 --> 00:13:33,960
‫De todos modos, ahora importemos este mapbox también.

257
00:13:33,960 --> 00:13:36,800
‫Para eso, primero necesitamos crear

258
00:13:36,800 --> 00:13:40,640
‫una función que hará todas estas cosas aquí.

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

260
00:13:41,790 --> 00:13:43,190
‫Así que creemos

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

262
00:13:50,660 --> 00:13:54,363
‫displayMap, que incluirá el conjunto de ubicaciones.

263
00:13:55,620 --> 00:14:00,620
‫Entonces eso realmente se leerá en el índice. js archivo, de

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

265
00:14:02,290 --> 00:14:06,510
‫Así que de nuevo index. js es más para obtener datos

266
00:14:06,510 --> 00:14:09,030
‫de la interfaz de usuario, por lo tanto,

267
00:14:09,030 --> 00:14:13,110
‫del sitio web, y luego delegar algunas acciones en estos otros módulos,

268
00:14:13,110 --> 00:14:14,230
‫de acuerdo.

269
00:14:14,230 --> 00:14:18,653
‫Por lo tanto, estas cosas aquí se harán dentro de index.

270
00:14:21,010 --> 00:14:22,883
‫Hagámoslo aquí arriba.

271
00:14:28,750 --> 00:14:32,723
‫Luego importe displayMap mapbox,

272
00:14:37,420 --> 00:14:40,690
‫de acuerdo.

273
00:14:40,690 --> 00:14:42,640
‫Así que llamémoslo

274
00:14:45,980 --> 00:14:48,470
‫también con las ubicaciones.

275
00:14:48,470 --> 00:14:52,420
‫Ahora, ¿recuerdas cuando realmente creamos este mapa y recuerdas

276
00:14:52,420 --> 00:14:55,400
‫cómo nos preguntó si queríamos usar la

277
00:14:55,400 --> 00:14:57,760
‫biblioteca mapbox en npm?

278
00:14:57,760 --> 00:15:00,670
‫Así que ahora podríamos seguir adelante y

279
00:15:00,670 --> 00:15:04,590
‫usar ese en lugar de este que estamos usando ahora.

280
00:15:04,590 --> 00:15:06,450
‫Bueno, no está

281
00:15:06,450 --> 00:15:07,993
‫aquí.

282
00:15:09,850 --> 00:15:10,693
‫Sí, entonces este.

283
00:15:10,693 --> 00:15:13,170
‫Así que esta es la biblioteca de mapbox

284
00:15:13,170 --> 00:15:15,330
‫que estamos usando actualmente, pero nuevamente

285
00:15:15,330 --> 00:15:17,290
‫también hay una versión npm.

286
00:15:17,290 --> 00:15:20,290
‫Entonces no necesitaríamos tener este.

287
00:15:20,290 --> 00:15:22,620
‫Sin embargo, por alguna razón, hay un

288
00:15:22,620 --> 00:15:26,410
‫problema con el uso de esta biblioteca junto con Parcel, está bien.

289
00:15:26,410 --> 00:15:29,430
‫Entonces, otras personas realmente se encuentran con este problema.

290
00:15:29,430 --> 00:15:32,370
‫Por lo tanto, no podemos usar la biblioteca mapbox

291
00:15:32,370 --> 00:15:34,080
‫npm junto con Parcel.

292
00:15:34,080 --> 00:15:36,993
‫Así que esa es una razón por la que sigo haciéndolo así.

293
00:15:38,850 --> 00:15:39,810
‫Bueno.

294
00:15:39,810 --> 00:15:43,360
‫Entonces mapbox se completa con esto.

295
00:15:43,360 --> 00:15:45,533
‫Esto tampoco lo necesitamos más.

296
00:15:46,470 --> 00:15:49,150
‫Ahora, eliminemos algunos de estos errores

297
00:15:49,150 --> 00:15:50,593
‫que vimos aquí.

298
00:15:51,510 --> 00:15:53,060
‫Bueno, ahora ya no

299
00:15:53,060 --> 00:15:55,500
‫están aquí, pero por ejemplo, tuvimos el

300
00:15:55,500 --> 00:15:57,630
‫problema de que este código aquí

301
00:15:57,630 --> 00:16:02,280
‫creaba algunos errores cuando estábamos en páginas que no tenían este mapa aquí, ¿verdad?

302
00:16:02,280 --> 00:16:05,310
‫Porque, por supuesto, en la página de detalles tiene este mapa, por

303
00:16:05,310 --> 00:16:07,890
‫lo que este elemento, pero luego este código, por supuesto, se

304
00:16:07,890 --> 00:16:09,203
‫ejecuta en todas las

305
00:16:09,203 --> 00:16:10,973
‫demás páginas, lo que generará errores allí.

306
00:16:11,840 --> 00:16:13,700
‫Así que arreglemos eso.

307
00:16:13,700 --> 00:16:15,980
‫Entonces, lo que estoy haciendo aquí es primero crear

308
00:16:15,980 --> 00:16:18,950
‫un elemento con esto y luego probar si realmente existe antes

309
00:16:18,950 --> 00:16:20,933
‫de ejecutar esta línea de código.

310
00:16:23,610 --> 00:16:25,660
‫Entonces crearemos algunos elementos DOM aquí.

311
00:16:32,415 --> 00:16:33,248
‫Y

312
00:16:34,820 --> 00:16:35,683
‫aquí diría delegación.

313
00:16:39,750 --> 00:16:41,380
‫Entonces, si mapbox

314
00:16:43,370 --> 00:16:46,623
‫y solo entonces a estas dos acciones aquí,

315
00:16:47,690 --> 00:16:48,790
‫está bien.

316
00:16:48,790 --> 00:16:50,350
‫Aquí también está mapbox y

317
00:16:52,420 --> 00:16:53,853
‫eso es mucho mejor.

318
00:16:57,190 --> 00:16:58,850
‫Aquí también pongamos

319
00:16:58,850 --> 00:17:00,630
‫valores, y voy a

320
00:17:00,630 --> 00:17:03,690
‫poner estos dos porque en realidad podríamos necesitarlos

321
00:17:03,690 --> 00:17:07,140
‫o en realidad los necesitaremos para otras cosas también.

322
00:17:07,140 --> 00:17:08,803
‫Así que de esta manera es un poco más limpio.

323
00:17:10,170 --> 00:17:13,230
‫También agreguemos este detector de

324
00:17:13,230 --> 00:17:16,660
‫eventos aquí si este elemento existe, ¿verdad?

325
00:17:16,660 --> 00:17:20,683
‫Porque bueno, nuevamente, creará un error si no lo hace.

326
00:17:22,260 --> 00:17:23,777
‫Así que loginform,

327
00:17:27,750 --> 00:17:28,583
‫y

328
00:17:29,610 --> 00:17:30,443
‫si

329
00:17:33,770 --> 00:17:37,460
‫y luego vamos a reutilizarlo aquí, guardarlo, y

330
00:17:37,460 --> 00:17:39,363
‫ahora se ve mejor.

331
00:17:40,270 --> 00:17:41,103
‫Bueno.

332
00:17:42,355 --> 00:17:44,113
‫De hecho, vamos a cerrar esta terminal.

333
00:17:45,500 --> 00:17:48,010
‫Debería seguir agrupando nuestro código cada vez

334
00:17:48,010 --> 00:17:49,480
‫que se guarde.

335
00:17:49,480 --> 00:17:50,980
‫Guardémoslo aquí de nuevo.

336
00:17:53,600 --> 00:17:56,440
‫Bien, espero que eso haya cambiado ahora.

337
00:17:56,440 --> 00:17:58,203
‫Así que sigamos adelante y probemos eso.

338
00:18:00,610 --> 00:18:03,800
‫Entonces, si aún puede iniciar sesión en este

339
00:18:03,800 --> 00:18:06,563
‫punto, eso significa que realmente funcionó.

340
00:18:13,470 --> 00:18:15,850
‫Bueno, tal vez no.

341
00:18:15,850 --> 00:18:17,263
‫Intentémoslo de nuevo aquí.

342
00:18:21,360 --> 00:18:25,113
‫Muy bien, algo anda mal aquí.

343
00:18:26,430 --> 00:18:29,620
‫Entonces, como siempre, registremos este correo electrónico y contraseña

344
00:18:29,620 --> 00:18:31,093
‫en la consola aquí.

345
00:18:32,570 --> 00:18:35,300
‫Quiero decir, porque ya sabemos que

346
00:18:35,300 --> 00:18:38,233
‫en realidad esta función aquí se llama, correcto.

347
00:18:39,260 --> 00:18:41,360
‫De lo contrario, ni siquiera obtendríamos el error.

348
00:18:45,380 --> 00:18:49,560
‫Correcto, porque ese error claramente proviene de nuestra API.

349
00:18:49,560 --> 00:18:53,403
‫Creo que todo lo que tenemos aquí está funcionando.

350
00:19:03,010 --> 00:19:04,763
‫Echemos un vistazo a la consola.

351
00:19:10,830 --> 00:19:14,610
‫Entonces parece que en realidad no hay nombre de

352
00:19:14,610 --> 00:19:16,193
‫usuario ni contraseña.

353
00:19:18,320 --> 00:19:19,153
‫Bueno.

354
00:19:21,640 --> 00:19:22,640
‫No estoy seguro de por qué es eso.

355
00:19:22,640 --> 00:19:26,003
‫Echemos un vistazo si realmente obtenemos algo.

356
00:19:26,870 --> 00:19:29,350
‫Así que inicie

357
00:19:31,140 --> 00:19:33,963
‫sesión y también los

358
00:19:34,950 --> 00:19:38,763
‫registraré aquí, no aquí, sino aquí.

359
00:19:50,730 --> 00:19:52,600
‫Y entonces, aparentemente, el problema

360
00:19:52,600 --> 00:19:55,060
‫debe ser que el nombre de usuario y

361
00:19:55,060 --> 00:19:57,220
‫la contraseña no están realmente definidos.

362
00:19:57,220 --> 00:20:00,140
‫Ah, y ahora, por supuesto, puedo ver por qué es así.

363
00:20:00,140 --> 00:20:01,483
‫Qué error más estúpido.

364
00:20:02,440 --> 00:20:04,900
‫Así que estamos tratando de leer estos valores

365
00:20:04,900 --> 00:20:07,340
‫aquí, justo al principio cuando se carga

366
00:20:07,340 --> 00:20:11,223
‫la página y, por supuesto, en este punto estos valores no están definidos.

367
00:20:12,230 --> 00:20:15,400
‫Entonces, por supuesto, solo podemos

368
00:20:15,400 --> 00:20:19,103
‫definirlos aquí en nuestro detector de eventos, ¿verdad?

369
00:20:20,370 --> 00:20:22,800
‫Entonces, para cuando se llame a esta función,

370
00:20:22,800 --> 00:20:25,690
‫entonces, por supuesto, el correo electrónico y la contraseña están configurados,

371
00:20:25,690 --> 00:20:28,143
‫por lo que es el momento en que podemos leerlos.

372
00:20:31,210 --> 00:20:33,423
‫Así que eso fue un poco estúpido,

373
00:20:36,870 --> 00:20:39,470
‫pero, ya sabes, a veces suceden ese tipo de cosas.

374
00:20:46,560 --> 00:20:48,673
‫Ahora copiemos esto aquí.

375
00:20:50,830 --> 00:20:53,460
‫Esta vez iniciamos sesión correctamente, lo

376
00:20:53,460 --> 00:20:56,373
‫que significa que nuestro código aquí todavía funciona.

377
00:20:57,740 --> 00:21:01,500
‫Genial, así que ahora hagamos la parte final que

378
00:21:01,500 --> 00:21:03,310
‫queríamos hacer en esta

379
00:21:03,310 --> 00:21:07,373
‫conferencia, que en realidad es crear estas alertas, de acuerdo.

380
00:21:08,700 --> 00:21:13,700
‫Así que creemos una función llamada show alert y exportémosla.

381
00:21:13,720 --> 00:21:16,790
‫Entonces, al iniciar sesión, importaremos esta función y la

382
00:21:16,790 --> 00:21:17,793
‫usaremos allí.

383
00:21:18,890 --> 00:21:21,070
‫Entonces, showAlert y esto

384
00:21:23,583 --> 00:21:27,557
‫como entrada obtendrán un tipo y un mensaje,

385
00:21:29,090 --> 00:21:31,010
‫así como esto.

386
00:21:31,010 --> 00:21:32,230
‫Y este tipo

387
00:21:34,070 --> 00:21:35,600
‫es éxito o

388
00:21:38,170 --> 00:21:39,253
‫error, está

389
00:21:40,210 --> 00:21:41,043
‫bien.

390
00:21:41,043 --> 00:21:44,020
‫Porque dependiendo de esta entrada tendremos CSS diferente

391
00:21:44,020 --> 00:21:46,890
‫para cada una de estas alertas y lo

392
00:21:46,890 --> 00:21:48,590
‫verá en un segundo.

393
00:21:49,450 --> 00:21:52,360
‫Entonces, lo que vamos a hacer es básicamente crear

394
00:21:52,360 --> 00:21:56,233
‫un marcado HTML aquí y luego insertarlo en nuestro HTML, por lo que

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

396
00:22:00,530 --> 00:22:04,520
‫Así que un marcado y la cadena de plantilla

397
00:22:04,520 --> 00:22:07,280
‫y ahora un buen HTML.

398
00:22:07,280 --> 00:22:11,370
‫Entonces, es simplemente un div con una clase de

399
00:22:13,110 --> 00:22:14,680
‫alerta y luego alerta,

400
00:22:14,680 --> 00:22:18,110
‫por lo que es un modificador con nuestro

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

402
00:22:21,890 --> 00:22:24,450
‫Está bien, y por eso

403
00:22:24,450 --> 00:22:27,070
‫debe ser un éxito o un error.

404
00:22:27,070 --> 00:22:29,650
‫Permítanme mostrar eso rápidamente en

405
00:22:29,650 --> 00:22:32,800
‫CSS, porque creo que es muy importante saber

406
00:22:32,800 --> 00:22:36,530
‫realmente cómo funciona todo esto en conjunto, de acuerdo.

407
00:22:36,530 --> 00:22:38,520
‫Así que aquí tenemos nuestra clase

408
00:22:38,520 --> 00:22:41,863
‫de alerta y luego alerta de éxito y alerta de error.

409
00:22:43,300 --> 00:22:44,880
‫Está bien.

410
00:22:44,880 --> 00:22:48,273
‫Como siempre, deshabilitemos eslint aquí, está bien, y

411
00:22:49,840 --> 00:22:52,700
‫eliminemos esto y ahora, por supuesto,

412
00:22:54,530 --> 00:22:57,570
‫aquí va el mensaje que pasamos a

413
00:22:57,570 --> 00:22:59,193
‫esta función.

414
00:23:00,190 --> 00:23:01,970
‫Por supuesto, podríamos seguir adelante

415
00:23:01,970 --> 00:23:04,470
‫y usar esto en toda la aplicación, pero

416
00:23:04,470 --> 00:23:08,150
‫en este caso solo lo necesitamos aquí para nuestro inicio de sesión.

417
00:23:08,150 --> 00:23:11,053
‫Así que documente. queryselector, por lo

418
00:23:11,890 --> 00:23:13,990
‫que ahora aquí seleccionamos el

419
00:23:13,990 --> 00:23:17,900
‫elemento donde queremos incluir este HTML que acabamos de crear.

420
00:23:17,900 --> 00:23:19,950
‫Así que, en realidad, está justo al

421
00:23:19,950 --> 00:23:21,530
‫principio del elemento del cuerpo.

422
00:23:21,530 --> 00:23:23,153
‫Así que en la parte superior de la página.

423
00:23:24,570 --> 00:23:25,473
‫Así que

424
00:23:27,570 --> 00:23:32,380
‫body, y luego inserte HTML adyacente, así que este de aquí.

425
00:23:32,380 --> 00:23:34,720
‫Si tomó mi curso completo de JavaScript,

426
00:23:34,720 --> 00:23:37,793
‫todo esto aquí no será nada nuevo para usted,

427
00:23:38,890 --> 00:23:39,810
‫está bien.

428
00:23:39,810 --> 00:23:42,670
‫Entonces aquí podemos especificar un par de palabras clave,

429
00:23:42,670 --> 00:23:45,080
‫y en este caso queremos afterbegin.

430
00:23:45,080 --> 00:23:46,900
‫Entonces, básicamente, lo que esto

431
00:23:46,900 --> 00:23:50,763
‫significa es dentro del cuerpo, pero desde el principio, está bien.

432
00:23:52,580 --> 00:23:54,800
‫Luego el HTML, entonces

433
00:23:54,800 --> 00:23:57,070
‫el marcado, que realmente queremos incluir.

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

435
00:23:57,903 --> 00:24:00,760
‫Entonces, esto creará una alerta muy simple

436
00:24:00,760 --> 00:24:04,900
‫basada en el tipo y el método, pero ahora también queremos

437
00:24:04,900 --> 00:24:07,193
‫una función para ocultar alertas.

438
00:24:08,380 --> 00:24:11,410
‫Así que creémoslo aquí también, exportémoslo, y probablemente ni

439
00:24:11,410 --> 00:24:14,103
‫siquiera lo necesitemos fuera de aquí, pero

440
00:24:14,980 --> 00:24:18,480
‫aún así, para poder reutilizarlo, siempre es una buena idea

441
00:24:18,480 --> 00:24:19,773
‫exportar todo esto.

442
00:24:21,410 --> 00:24:25,173
‫Éste no necesita aceptar ningún argumento.

443
00:24:27,250 --> 00:24:31,220
‫Así que ahora todo lo que vamos a hacer

444
00:24:31,220 --> 00:24:33,780
‫es seleccionar el elemento con

445
00:24:33,780 --> 00:24:36,700
‫la clase de alerta y luego eliminarlo.

446
00:24:36,700 --> 00:24:38,167
‫Entonces alerta de

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

448
00:24:43,710 --> 00:24:45,803
‫Así que exactamente el mismo nombre de clase que aquí.

449
00:24:46,720 --> 00:24:49,430
‫Luego, debemos usar un truco de JavaScript

450
00:24:49,430 --> 00:24:52,610
‫en el que debemos mover un nivel hasta el elemento

451
00:24:52,610 --> 00:24:55,700
‫principal y luego, desde allí, eliminar un elemento secundario.

452
00:24:55,700 --> 00:24:59,380
‫Entonces, si hay un elemento, entonces

453
00:24:59,380 --> 00:25:02,147
‫element. parentElement. removeChild

454
00:25:06,728 --> 00:25:08,478
‫y luego el elemento.

455
00:25:09,413 --> 00:25:10,910
‫Bueno.

456
00:25:10,910 --> 00:25:14,070
‫De nuevo, eso debería ser solo JavaScript básico

457
00:25:14,070 --> 00:25:16,230
‫o manipulación DOM básica.

458
00:25:16,230 --> 00:25:18,150
‫Entonces, dado que este es un

459
00:25:18,150 --> 00:25:20,393
‫curso de nodo, no voy a profundizar en eso.

460
00:25:21,680 --> 00:25:23,770
‫De todos modos, lo que quiero hacer aquí

461
00:25:23,770 --> 00:25:25,670
‫ahora es que cada vez que

462
00:25:25,670 --> 00:25:28,393
‫mostramos una alerta, primero ocultemos todas las alertas que ya existen.

463
00:25:30,400 --> 00:25:32,340
‫Así que siempre solo

464
00:25:32,340 --> 00:25:34,353
‫para asegurarnos de ejecutar hideAlert.

465
00:25:35,310 --> 00:25:39,150
‫Luego, finalmente, también siempre quiero ocultar todas las alertas después

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

467
00:25:42,370 --> 00:25:44,480
‫Entonces, window setTimeout

468
00:25:46,885 --> 00:25:48,310
‫hideAlert

469
00:25:48,310 --> 00:25:50,220
‫después de

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

471
00:25:51,790 --> 00:25:54,533
‫Muy bien, y ahora importémoslo aquí.

472
00:25:58,030 --> 00:26:00,220
‫Mostrar alerta de que se llamó, ¿verdad?

473
00:26:00,220 --> 00:26:03,193
‫Oh showAlert, con tipo y mensaje.

474
00:26:05,900 --> 00:26:06,973
‫Así que

475
00:26:08,140 --> 00:26:08,973
‫showAlert

476
00:26:12,280 --> 00:26:15,730
‫desde la derecha de eso y así ...

477
00:26:15,730 --> 00:26:19,010
‫Sí, entonces queremos usar eso en este lugar.

478
00:26:19,010 --> 00:26:21,970
‫Entonces, en lugar de la alerta de JavaScript,

479
00:26:23,297 --> 00:26:25,650
‫queremos hacer showAlert, está bien, y

480
00:26:25,650 --> 00:26:27,180
‫aquí lo mismo.

481
00:26:27,180 --> 00:26:29,220
‫Todavía necesitamos especificar el tipo

482
00:26:29,220 --> 00:26:30,380
‫aquí, por

483
00:26:32,925 --> 00:26:35,467
‫lo que es un éxito en este

484
00:26:40,220 --> 00:26:42,630
‫caso y aquí es un error.

485
00:26:42,630 --> 00:26:44,193
‫Llegamos a la finalización automática.

486
00:26:46,450 --> 00:26:47,963
‫Está bien, eso está mejor.

487
00:26:48,890 --> 00:26:50,483
‫Así que probémoslo.

488
00:26:53,580 --> 00:26:56,923
‫Y, en primer lugar, debemos cerrar la sesión eliminando esta cookie.

489
00:27:01,160 --> 00:27:02,990
‫Vuelva a cargar, inicie sesión

490
00:27:02,990 --> 00:27:03,993
‫y ahora

491
00:27:11,400 --> 00:27:13,900
‫lo estoy probando primero con una contraseña

492
00:27:15,500 --> 00:27:17,290
‫incorrecta y aquí vamos.

493
00:27:17,290 --> 00:27:21,400
‫Entonces, correo electrónico o contraseña incorrectos en nuestra bonita alerta y

494
00:27:21,400 --> 00:27:24,400
‫vieron que después de cinco segundos desaparecieron.

495
00:27:24,400 --> 00:27:26,160
‫Por supuesto, podríamos haber

496
00:27:26,160 --> 00:27:28,400
‫puesto una buena animación allí y

497
00:27:28,400 --> 00:27:31,830
‫todo, pero creo que así ya es más que suficiente.

498
00:27:31,830 --> 00:27:33,950
‫Así que veamos eso de

499
00:27:33,950 --> 00:27:36,113
‫nuevo rápidamente, y así se verá, pero

500
00:27:37,600 --> 00:27:40,400
‫cuando sea correcto, entonces, por supuesto, debería ser verde.

501
00:27:42,030 --> 00:27:44,930
‫Así que sí, inicié sesión correctamente y vemos

502
00:27:44,930 --> 00:27:47,890
‫una recarga después de un segundo y medio,

503
00:27:47,890 --> 00:27:50,320
‫así que ahora realmente está funcionando.

504
00:27:50,320 --> 00:27:53,593
‫Esa es nuestra autenticación completa en el front-end.

505
00:27:54,880 --> 00:27:59,430
‫Eso fue mucho trabajo, pero si me preguntas, valió la pena.

506
00:27:59,430 --> 00:28:02,070
‫Ahora, lo único que falta es

507
00:28:02,070 --> 00:28:05,690
‫cerrar la sesión cuando hacemos clic en este botón aquí.

508
00:28:05,690 --> 00:28:07,510
‫Así que en este momento ese

509
00:28:07,510 --> 00:28:10,133
‫no es el caso y, en el siguiente video, solucionaremos eso.