1
00:00:00,120 --> 00:00:00,500
Ya sea.

2
00:00:00,510 --> 00:00:01,450
Dar una buena acogida.

3
00:00:01,770 --> 00:00:06,290
Entonces en esta lección nos estamos enfocando en mejorar la usabilidad de nuestro campamento.

4
00:00:06,510 --> 00:00:12,990
En este momento es un desastre en cuanto a dar retroalimentación o mensajes de error o mensajes de éxito a

5
00:00:12,990 --> 00:00:13,710
nuestros usuarios.

6
00:00:13,920 --> 00:00:17,090
Y por desastre solo quiero decir que no existe en absoluto.

7
00:00:17,100 --> 00:00:21,400
Tenemos un registro del consejo que obviamente nuestros usuarios no pueden ver.

8
00:00:21,480 --> 00:00:27,000
Lo vemos como desarrolladores en nuestro cónsul aquí donde los servidores se están ejecutando, pero nadie más lo ve.

9
00:00:27,360 --> 00:00:31,770
Nos centraremos en agregar algunos mensajes y te mostraré cómo se ve en

10
00:00:31,770 --> 00:00:32,370
un momento.

11
00:00:32,460 --> 00:00:36,790
Antes de hacerlo, tenemos tres objetivos principales: hablaré de ellos ahora.

12
00:00:36,990 --> 00:00:37,980
Entonces quiero mostrarlo.

13
00:00:37,980 --> 00:00:44,490
Primero, le mostraremos qué esperar, cómo se verá cómo se comporta, luego, realmente instalaremos y configuraremos

14
00:00:44,580 --> 00:00:46,630
un paquete llamado connect flash.

15
00:00:46,830 --> 00:00:53,580
Entonces, lo que estamos haciendo es agregar Flash o flashear un flash de sus diferentes pronombres y la gente lo

16
00:00:53,580 --> 00:00:53,940
llama.

17
00:00:54,000 --> 00:00:56,070
En otros marcos, el hash flash.

18
00:00:56,070 --> 00:01:02,010
La gente lo llama mensajes instantáneos, pero básicamente la idea es que le mostraremos un mensaje a un usuario

19
00:01:02,250 --> 00:01:05,520
como haber iniciado sesión exitosamente o haber cerrado sesión exitosamente.

20
00:01:05,700 --> 00:01:08,310
O tal vez algo así como que no tienes permiso para hacer eso.

21
00:01:08,320 --> 00:01:12,270
O bien, inicie sesión antes de agregar un camping, algo así.

22
00:01:12,390 --> 00:01:17,640
Queremos mostrárselo a un usuario solo una vez y no queremos que sea un accesorio permanente en la página.

23
00:01:17,700 --> 00:01:22,680
mostrarles una vez y luego desaparecer en la página siguiente o si el usuario

24
00:01:23,310 --> 00:01:30,780
se actualiza y luego lo último es agregar nuestros mensajes flash al encabezado y agregar algunas clases de arranque que darán estilo.

25
00:01:30,780 --> 00:01:31,470
Queremos solo

26
00:01:31,470 --> 00:01:34,230
Entonces, hay algunas formas de hacer cosas con bootstrap.

27
00:01:34,350 --> 00:01:40,650
Esta es una característica tan común para tener mensajes que se muestran a su usuario en todo tipo de

28
00:01:40,650 --> 00:01:44,100
sitios que bootstrap tiene un estilo incorporado para que se aprovechen.

29
00:01:44,250 --> 00:01:47,850
Así que comenzaré mostrándote cómo se verá.

30
00:01:47,940 --> 00:01:49,530
Así que tengo el campamento corriendo.

31
00:01:49,610 --> 00:01:56,190
Permítanme que les muestre si me desconecto ahora mismo, así que estoy registrado como congelador si cierro la sesión, recibo un mensaje

32
00:01:56,190 --> 00:01:59,970
que dice "loungy up up" y podemos cambiar el texto de ese mensaje.

33
00:01:59,970 --> 00:02:06,840
Obviamente, si intento agregar un nuevo campamento en este momento cuando no estoy conectado, ahora debería recibir un mensaje que dice

34
00:02:06,840 --> 00:02:09,340
que debe haber iniciado sesión para hacerlo.

35
00:02:09,420 --> 00:02:11,070
Y note que se lee aquí.

36
00:02:11,520 --> 00:02:13,420
Entonces esa es una clase de arranque.

37
00:02:13,440 --> 00:02:18,610
Esta alerta que recibimos si estuviera actualizado la página desaparece.

38
00:02:18,690 --> 00:02:25,690
Entonces, si intento registrarme, debo decir que me inscribo como resti, que ya existe.

39
00:02:25,950 --> 00:02:28,500
Entonces no debería poder hacer eso en el pasado.

40
00:02:28,500 --> 00:02:30,070
La página simplemente se actualizaría.

41
00:02:30,330 --> 00:02:36,060
Pero con lo que terminaremos es con un mensaje que dice que un usuario con un nombre de usuario dado ya está registrado.

42
00:02:36,870 --> 00:02:37,370
DE ACUERDO.

43
00:02:37,470 --> 00:02:39,490
Así que déjame registrarme como alguien nuevo.

44
00:02:39,690 --> 00:02:42,620
Tratemos de hacer el error.

45
00:02:42,630 --> 00:02:50,330
Ahora me he mudado aparentemente de verduras a electrodomésticos y recibí un mensaje de éxito firmado con

46
00:02:50,350 --> 00:02:50,890
éxito.

47
00:02:50,910 --> 00:02:52,330
Encantado de conocerte Bunder.

48
00:02:52,380 --> 00:02:55,130
Y si actualizo la página, desaparece.

49
00:02:55,710 --> 00:03:00,560
Entonces hay otros lugares donde tenemos esos mensajes, pero te mostraré.

50
00:03:00,690 --> 00:03:04,050
Por ejemplo, si intento editar este campamento que no me pertenece.

51
00:03:04,050 --> 00:03:05,580
Tater tots lo posee.

52
00:03:05,580 --> 00:03:07,260
Estoy conectado en esta licuadora.

53
00:03:07,770 --> 00:03:10,950
No tengo un enlace para ir a Editar aquí porque está oculto.

54
00:03:11,280 --> 00:03:17,220
Pero, técnicamente, aún podría ir a analizarlo, donde ahora recibo un mensaje que dice que no tienes permiso

55
00:03:17,220 --> 00:03:17,950
para hacerlo.

56
00:03:18,030 --> 00:03:19,710
Me redirige de vuelta aquí.

57
00:03:20,070 --> 00:03:26,950
Lo mismo con comentarios si hubiera un comentario aquí y fue creado por otra persona.

58
00:03:27,150 --> 00:03:32,310
Si fui manualmente a ese enlace y agregué una barra, también vería un mensaje, pero eso es

59
00:03:32,310 --> 00:03:34,720
mucho trabajo porque tenemos que encontrar la identificación.

60
00:03:34,900 --> 00:03:40,080
Y de todos modos, no quiero entrar en eso ahora, pero será el mismo código que agreguemos el que

61
00:03:40,080 --> 00:03:42,030
dirá que no tiene permiso para hacerlo.

62
00:03:42,060 --> 00:03:50,400
Y finalmente, si cierro la sesión y vuelvo y trato de agregar nuevos comentarios, recibo el mismo mensaje.

63
00:03:50,430 --> 00:03:52,030
Debes iniciar sesión para hacer eso.

64
00:03:52,050 --> 00:03:55,010
Como si hubiera intentado crear un camping cuando no estaba firmado.

65
00:03:55,260 --> 00:03:55,530
DE ACUERDO.

66
00:03:55,530 --> 00:04:00,340
Ese es el objetivo final y en realidad es bastante fácil para nosotros hacer que esto funcione.

67
00:04:00,360 --> 00:04:05,580
Usando este paquete podríamos hacer esto sin un paquete por supuesto de lo que podríamos hacer algo así.

68
00:04:05,700 --> 00:04:07,520
Cuando abrimos la versión correcta.

69
00:04:07,740 --> 00:04:12,960
Así que hice una nueva versión para este v 11 en la que trabajaré.

70
00:04:13,440 --> 00:04:23,470
Entonces, veamos en el v. 11 y déjame limpiar todo y abrir sí.

71
00:04:24,610 --> 00:04:25,040
DE ACUERDO.

72
00:04:25,110 --> 00:04:26,210
Así que trabajaremos aquí.

73
00:04:26,280 --> 00:04:30,390
De nuevo, esto es V 11 por si acaso lo sigues.

74
00:04:30,390 --> 00:04:33,790
Lo primero que haré es mostrarle el paquete que vamos a usar.

75
00:04:33,820 --> 00:04:35,400
Entonces se llama flash Kinect.

76
00:04:35,400 --> 00:04:38,080
Hubo otros paquetes que hacen esto.

77
00:04:38,280 --> 00:04:45,090
Si echa un vistazo al repositorio de inicio, la documentación está un poco desactualizada.

78
00:04:45,510 --> 00:04:51,410
Estamos usando Express para lo cual salió a principios de 2015.

79
00:04:51,930 --> 00:05:00,090
Los documentos hablan de Express para señalar X y de tres puntos X para el siguiente paso.

80
00:05:00,180 --> 00:05:08,670
pero si vuelves a Connect flash verás que algunos de los primeros enlaces externos se expresan 4.

81
00:05:08,670 --> 00:05:15,000
Estas instrucciones no son exactamente las mismas, 00 configurado con K'NEX flash que ya he echado

82
00:05:15,360 --> 00:05:23,000
un vistazo o siempre puedes usar algo como esto se ha expresado para después y puedes ver que obtenemos el mismo

83
00:05:23,000 --> 00:05:29,060
enlace y hay tutoriales aquí abajo hay una publicación de desbordamiento de pila si quieres echar un

84
00:05:29,060 --> 00:05:29,710
vistazo.

85
00:05:29,990 --> 00:05:32,910
Así que hice esto antes.

86
00:05:33,080 --> 00:05:37,450
Algo que tienes que hacer mucho cuando conoces el código se actualiza cuando surgen cosas nuevas.

87
00:05:37,550 --> 00:05:42,620
Especialmente con algo como Express 4. 0 donde las cosas cambian bastante significativamente.

88
00:05:42,680 --> 00:05:48,110
Muchas de las cosas que solían ser parte de Express se sacaron de Express en paquetes separados.

89
00:05:48,110 --> 00:05:50,280
Algunos de los nombres y la sintaxis han cambiado.

90
00:05:50,430 --> 00:05:55,640
Así que siempre digo que es algo que haces mucho cuando tratas de hacer

91
00:05:55,640 --> 00:06:03,380
algo que no has hecho aún en Express add en Express para tus búsquedas porque a menudo encontrarás excelentes tutoriales para

92
00:06:03,680 --> 00:06:03,850
él.

93
00:06:03,880 --> 00:06:10,220
Hace dos años que todavía son 90 por ciento iguales, pero ese 10 por ciento es realmente importante para que

94
00:06:10,220 --> 00:06:14,900
entiendas cómo es diferente de lo que sabes hace dos años versus el actual Express.

95
00:06:14,900 --> 00:06:15,950
Todo bien.

96
00:06:15,950 --> 00:06:19,110
Entonces, lo primero que queremos hacer es instalar este paquete.

97
00:06:19,400 --> 00:06:21,070
Entonces se llama connect flash.

98
00:06:21,110 --> 00:06:29,260
Por lo tanto, queremos que NPM instale dash dash save connect dash flash.

99
00:06:31,050 --> 00:06:31,700
DE ACUERDO.

100
00:06:31,910 --> 00:06:37,530
Ahora que eso está listo aquí, simplemente agregaremos Flash.

101
00:06:38,030 --> 00:06:45,030
Lo llamaremos flash en lugar de conectar el flash igual que requiere connect dash flash.

102
00:06:45,080 --> 00:06:52,730
Asegúrate de tener una coma allí, entonces lo que tenemos que hacer es decirle a la aplicación que uses Flash.

103
00:06:53,360 --> 00:07:00,470
Así que tomamos los contenidos de K'NEX flash que el paquete y

104
00:07:00,470 --> 00:07:09,700
guardamos en la variable flash y necesitaremos ejecutar ese uso de aplicación variable flash así.

105
00:07:09,710 --> 00:07:11,500
Entonces, técnicamente eso es todo lo que tenemos que hacer.

106
00:07:11,510 --> 00:07:18,350
Ahora tenemos instalado Connect Flash y si retrocedemos y echamos un vistazo a los documentos, hay otra configuración

107
00:07:18,350 --> 00:07:24,920
que hacen aquí con el analizador de cookies en sesión, pero en realidad ya tenemos esa configuración

108
00:07:24,920 --> 00:07:27,700
en la que ya estamos haciendo nuestra.

109
00:07:27,730 --> 00:07:31,210
Dónde necesitas una sesión urgente y estamos armando un secreto.

110
00:07:31,220 --> 00:07:36,620
Por lo tanto, no tenemos que preocuparnos porque ya hemos configurado nuestra aplicación para usar

111
00:07:36,620 --> 00:07:37,580
la sesión Express.

112
00:07:38,070 --> 00:07:44,710
De acuerdo, entonces lo que haremos será mostrar en cada página el contenido del flash.

113
00:07:44,810 --> 00:07:46,940
Vamos a tomar el mensaje que está ahí.

114
00:07:46,940 --> 00:07:51,360
Podría ser bueno o podría ser malo, podría estar vacío y lo mostraremos en la parte superior de la

115
00:07:52,280 --> 00:07:54,290
página, y eso sucederá en nuestro archivo de encabezado.

116
00:07:54,330 --> 00:07:54,710
MI. J. Sí,

117
00:07:54,740 --> 00:08:01,460
tendremos un código que solo muestra el error o el mensaje de éxito y luego todo lo que haremos será cuando encontremos un

118
00:08:01,460 --> 00:08:08,570
error o un lugar en el que queremos un mensaje para que una instancia de eso pueda ser en lugar de hacer campings y

119
00:08:08,570 --> 00:08:15,650
en lugar de nuestros campamentos, tenemos esto conectado en Middleware donde no puedes agregar un nuevo campamento a menos que hayas iniciado sesión.

120
00:08:15,740 --> 00:08:18,430
debe iniciar sesión para hacerlo o Iniciar sesión.

121
00:08:18,440 --> 00:08:26,120
Si, si vamos a ese middleware y veremos que está conectado, es posible que deseemos tener un mensaje que indique que

122
00:08:26,120 --> 00:08:30,500
Entonces ese código iría aquí.

123
00:08:30,500 --> 00:08:32,800
Entonces, justo antes de redirigir para cortar el registro, vamos a agregar algo al flash.

124
00:08:32,900 --> 00:08:38,440
Así que parece que esto realmente solicita flash de punto.

125
00:08:38,840 --> 00:08:44,860
Y luego podemos darle una clave.

126
00:08:45,260 --> 00:08:47,370
Así que en un momento te mostraré.

127
00:08:47,720 --> 00:08:50,000
Utilizaremos el éxito y el

128
00:08:50,000 --> 00:08:57,140
error, y lo usaremos para determinar si el mensaje de alerta debe ser verde o rojo.

129
00:08:57,140 --> 00:08:59,300
Entonces esa parte no importa por ahora, pero esta parte sí importa a dónde vamos a pasar un mensaje.

130
00:08:59,300 --> 00:09:04,200
Entonces, podríamos hacer algo como "Por favor, regístrese primero".

131
00:09:04,760 --> 00:09:09,560
De nuevo, esto está dentro de Middleware.

132
00:09:09,590 --> 00:09:12,470
Por lo tanto, verifica si la solicitud se autentica si los usuarios iniciaron sesión.

133
00:09:12,740 --> 00:09:16,740
Luego continúa con lo que sea que estuvieras haciendo antes.

134
00:09:16,800 --> 00:09:19,430
Pero si ese no es el caso antes de redirigir para cortar el inicio de sesión.

135
00:09:20,180 --> 00:09:24,030
Sí, recuerda si redirigimos para cortar el inicio de sesión.

136
00:09:24,090 --> 00:09:26,390
Sin esta línea, simplemente continúa también.

137
00:09:26,390 --> 00:09:29,320
Tendré que abrir la ruta, pero irá directamente al código y al inicio de sesión, que está justo aquí.

138
00:09:29,320 --> 00:09:35,360
Por lo tanto, hace que inicie sesión antes de hacerlo, aunque vamos a ejecutar este código flash.

139
00:09:36,740 --> 00:09:43,960
Y básicamente, lo que hará es tomar. Por favor, primero inicie sesión y lo agregará

140
00:09:44,120 --> 00:09:50,000
al flash y no se mostrará hasta la próxima escena que veamos.

141
00:09:50,000 --> 00:09:53,060
Entonces, en este caso, esto no representa nada, simplemente nos redirige para

142
00:09:53,180 --> 00:09:59,210
cortar el inicio de sesión y la forma en que funciona el Flash es realmente buena, ya que no se va a flashear de inmediato.

143
00:09:59,210 --> 00:10:06,290
Solo funciona o aparece en la página siguiente.

144
00:10:06,550 --> 00:10:09,650
Entonces lo haces antes de redireccionar.

145
00:10:09,650 --> 00:10:13,130
Entonces, en este caso, inicie sesión primero y luego redirigiremos para

146
00:10:13,130 --> 00:10:18,890
cortar el inicio de sesión y luego en el registro y el formulario esperamos ver un mensaje.

147
00:10:19,070 --> 00:10:20,690
Ahora mismo no estamos mostrando eso.

148
00:10:20,690 --> 00:10:22,470
Por lo tanto, solo para reiterar que

149
00:10:22,520 --> 00:10:29,570
solo agregar esta línea no mostrará nada para todos nosotros, lo que hace es que nos da la capacidad que nos brinda de acceder a esto en la próxima solicitud.

150
00:10:29,570 --> 00:10:35,510
Así que no estamos flasheando de inmediato, no estamos viendo nada, no estamos mostrando nada al usuario.

151
00:10:35,510 --> 00:10:40,570
Todo lo que hace es decir en el flash y en lugar de éxito, creo que tiene más sentido llamar a este

152
00:10:40,580 --> 00:10:46,190
error en el complemento de flash. Por favor, inicie sesión primero para la siguiente solicitud y luego lo redireccionamos para cortar el inicio de sesión.

153
00:10:46,190 --> 00:10:54,900
Entonces, tenemos que manejar eso en el inicio de sesión que está justo aquí, iniciar sesión.

154
00:10:55,820 --> 00:11:02,610
Entonces podría hacer algo como pasar el mensaje.

155
00:11:02,990 --> 00:11:06,790
Y, por supuesto, todo lo que puedo mostrarles

156
00:11:07,340 --> 00:11:14,660
es que comience de modo que si solo tenemos un error en el mensaje, lo arruinaron

157
00:11:14,660 --> 00:11:23,540
así como si pudiéramos mostrarlo en nuestra plantilla, así que haga clic en el registro dentro del registro de fusibles.

158
00:11:23,780 --> 00:11:24,330
Sí, solo en la parte superior, solo podría tener un H-1 que mostrara un mensaje así.

159
00:11:24,540 --> 00:11:31,900
Nada muy nuevo.

160
00:11:31,940 --> 00:11:33,650
Así que solo te mostraré cómo se ve ahora.

161
00:11:33,650 --> 00:11:37,140
Inicie el redireccionamiento del servidor para reducir el inicio de sesión y obtengo este mensaje cada vez que se produce un error.

162
00:11:37,190 --> 00:11:44,920
Lo echaste a perder.

163
00:11:44,960 --> 00:11:46,060
Como puede ver cuál

164
00:11:46,250 --> 00:11:52,310
es, afortunadamente, lo que esperaba en este punto porque lo codifiqué en cada vez que vamos a cortar el registro, vemos que lo arruinó.

165
00:11:52,310 --> 00:11:55,570
OK, entonces usando flash lo que podemos hacer ahora

166
00:11:56,080 --> 00:12:04,180
es decir que el mensaje es igual a la solicitud de flash y podemos simplemente hacer el error en el flash.

167
00:12:04,250 --> 00:12:06,370
Entonces es un poco confuso

168
00:12:06,740 --> 00:12:09,110
debería haber un error en el flash.

169
00:12:09,530 --> 00:12:15,320
Pero básicamente, la idea es que si actualizo la página, reinicie el servidor y actualice, no

170
00:12:15,320 --> 00:12:16,980
Entonces, realmente no vemos nada.

171
00:12:17,090 --> 00:12:19,120
Pero si hacemos que este código

172
00:12:20,000 --> 00:12:28,160
ejecute wups este código aquí y la forma en que lo hacemos es tratar de acceder a algo donde tenemos que iniciar sesión donde se

173
00:12:28,160 --> 00:12:33,470
llama este middleware, entonces lo que sucederá es que estamos agregando esto al flash debajo el error

174
00:12:33,470 --> 00:12:38,870
clave con el valor por favor inicie sesión primero, luego vamos a cortar el inicio de sesión.

175
00:12:38,870 --> 00:12:39,310
Luego, dentro

176
00:12:39,440 --> 00:12:47,540
del inicio de sesión de barra, estamos enviando la clave de error de solicitud de mensaje, que es un montón de cosas que tienen que ser conectadas y es un poco confuso nuevamente.

177
00:12:47,540 --> 00:12:51,230
Pero déjame mostrarte ahora.

178
00:12:51,350 --> 00:12:53,370
Entonces reinicio.

179
00:12:53,690 --> 00:12:54,740
En realidad no tuve que hacer eso esta vez, pero no vemos nada.

180
00:12:54,740 --> 00:12:58,550
Ahora déjame ir a los campamentos e intentar agregar un nuevo campamento aunque no haya iniciado sesión.

181
00:12:58,550 --> 00:13:05,140
Y ahora recibo el mensaje que dice: Por favor, primero inicie sesión que

182
00:13:05,630 --> 00:13:10,640
no estaba allí antes y si actualizo la página, desaparece.

183
00:13:10,640 --> 00:13:12,330
Entonces esa es una versión realmente simple de lo que podemos lograr usando Flash.

184
00:13:12,530 --> 00:13:16,740
esto con todos los mensajes diferentes y el estilo.

185
00:13:16,910 --> 00:13:21,530
Entonces, antes de seguir adelante en el siguiente video, implementaremos

186
00:13:21,530 --> 00:13:22,500
Vamos a resumir cómo funciona esto de nuevo.

187
00:13:22,700 --> 00:13:24,860
Entonces, cuando queremos mostrar un mensaje, ya sea

188
00:13:24,920 --> 00:13:30,350
un mensaje de éxito o un mensaje de error, sea lo que sea, vamos a utilizar esta línea aquí.

189
00:13:30,350 --> 00:13:33,500
Solicitar flash

190
00:13:33,650 --> 00:13:34,730
Y luego pasamos una clave y un valor y lo hacemos antes de redireccionar.

191
00:13:34,760 --> 00:13:38,630
Es realmente importante si coloco esta línea después de redirigir.

192
00:13:38,630 --> 00:13:41,450
No funcionará

193
00:13:41,450 --> 00:13:42,680
Por lo tanto, antes de redirigirlo y

194
00:13:43,130 --> 00:13:47,940
luego tener que manejarlo en la plantilla usted mismo para manejarlo y la ruta, todo lo que le da es la capacidad de agregar algunos datos antes de redirigir.

195
00:13:47,950 --> 00:13:53,630
Eso lo hace a la siguiente ruta.

196
00:13:53,630 --> 00:13:55,300
Y esa información no persistirá en cada solicitud a esa ruta.

197
00:13:55,460 --> 00:13:59,030
Entonces es una cosa de una vez.

198
00:13:59,030 --> 00:14:00,140
Por eso se llama Flash.

199
00:14:00,410 --> 00:14:01,860
DE ACUERDO.

200
00:14:02,060 --> 00:14:02,560
hacer esto.

201
00:14:02,660 --> 00:14:06,860
Entonces en el próximo video voy a mostrarte cómo implementar esto de verdad, donde no tenemos que

202
00:14:06,860 --> 00:14:08,550
Pasando el mensaje a cada plantilla

203
00:14:08,600 --> 00:14:14,060
donde podemos diseñar el estilo, muy bien con el programa de arranque donde podemos tener mensajes en rojo y verde,

204
00:14:14,060 --> 00:14:17,930
podemos tener diferentes colores si queremos poner el rojo y el verde son los estándar.

205
00:14:17,930 --> 00:14:18,810
DE ACUERDO.

206
00:14:18,970 --> 00:14:19,180
Así que eso está en el próximo video.

207
00:14:19,190 --> 00:14:20,370
Ver el

208
00:14:20,390 --> 00:14:20,800