1
00:00:01,210 --> 00:00:03,550
‫Narrador: Entonces, como dijimos en la

2
00:00:03,550 --> 00:00:07,883
‫última conferencia, ahora usemos nuestra API para actualizar los datos del usuario.

3
00:00:09,460 --> 00:00:12,860
‫Y así, al igual que antes, con la funcionalidad de inicio

4
00:00:12,860 --> 00:00:16,990
‫de sesión, ahora vamos a realizar una llamada a la API desde el front-end.

5
00:00:16,990 --> 00:00:20,313
‫Y entonces necesitamos crear un nuevo archivo JavaScript para eso.

6
00:00:21,370 --> 00:00:26,033
‫Y a este lo llamaré configuración de actualización.

7
00:00:26,890 --> 00:00:29,149
‫Y la configuración, porque básicamente actualizaremos

8
00:00:29,149 --> 00:00:31,991
‫los datos que son el nombre y el

9
00:00:31,991 --> 00:00:35,720
‫correo electrónico, y luego también actualizaremos la contraseña de este archivo,

10
00:00:35,720 --> 00:00:38,768
‫y la contraseña, junto con los datos del usuario,

11
00:00:38,768 --> 00:00:42,080
‫los llamé configuración. Bien.

12
00:00:42,080 --> 00:00:44,510
‫Así que esto es bastante similar a lo

13
00:00:44,510 --> 00:00:46,680
‫que hicimos con el inicio de sesión.

14
00:00:46,680 --> 00:00:48,650
‫y una vez más quiero

15
00:00:48,650 --> 00:00:50,436
‫dejar esto como un

16
00:00:50,436 --> 00:00:53,830
‫desafío para que pueda practicar lo que ya ha aprendido.

17
00:00:53,830 --> 00:00:57,003
‫Así que adelante, cree una función de actualización de datos aquí.

18
00:00:58,380 --> 00:01:00,800
‫Entonces, actualizar datos es el nombre de la

19
00:01:00,800 --> 00:01:03,720
‫función que quiero que cree aquí y luego, por supuesto,

20
00:01:03,720 --> 00:01:06,021
‫llame a esa función aquí mismo desde

21
00:01:06,021 --> 00:01:08,250
‫el índice. jf.

22
00:01:08,250 --> 00:01:11,820
‫Entonces, tendrá que exportar una función desde aquí y luego importarla

23
00:01:11,820 --> 00:01:14,230
‫aquí en el índice de manera muy

24
00:01:14,230 --> 00:01:16,110
‫similar a lo que

25
00:01:16,110 --> 00:01:18,020
‫hicimos antes con las otras funciones.

26
00:01:18,020 --> 00:01:20,630
‫Ahora bien, una cosa importante que debemos

27
00:01:20,630 --> 00:01:22,953
‫hacer antes de escribir JavaScript

28
00:01:22,953 --> 00:01:27,320
‫es que en nuestro formulario realmente necesitamos eliminar estas partes aquí.

29
00:01:27,320 --> 00:01:28,969
‫Así que dupliquemos esta

30
00:01:28,969 --> 00:01:31,163
‫línea aquí para dejarla como referencia.

31
00:01:32,500 --> 00:01:36,563
‫Entonces, comentemos esta parte y agreguemos otro comentario aquí,

32
00:01:37,890 --> 00:01:40,003
‫sin API, y luego este

33
00:01:41,350 --> 00:01:45,310
‫aquí es con API, y aquí no necesitamos la

34
00:01:45,310 --> 00:01:48,210
‫acción y tampoco el método, está

35
00:01:48,210 --> 00:01:49,710
‫bien, porque

36
00:01:49,710 --> 00:01:52,480
‫si lo dejas así entonces eso

37
00:01:52,480 --> 00:01:55,480
‫podría enviar los datos a esta URL.

38
00:01:55,480 --> 00:01:59,063
‫E incluso si no es así, bueno, todavía no lo necesitamos aquí.

39
00:02:00,020 --> 00:02:03,760
‫De acuerdo, eso era solo una cosa importante.

40
00:02:03,760 --> 00:02:06,500
‫Pero ahora, por favor, pause el video e intente

41
00:02:06,500 --> 00:02:08,533
‫implementar esto por su cuenta.

42
00:02:12,030 --> 00:02:14,620
‫Así que estoy seguro de que acabas de hacer eso.

43
00:02:14,620 --> 00:02:18,230
‫Y así va la forma en que lo hice.

44
00:02:18,230 --> 00:02:21,103
‫Así que exporte los datos const_update.

45
00:02:24,040 --> 00:02:26,900
‫Y esta función recibirá como entrada el

46
00:02:26,900 --> 00:02:31,900
‫nombre y el correo electrónico, entonces los datos que desea actualizar y

47
00:02:32,980 --> 00:02:34,600
‫luego usaremos axios

48
00:02:34,600 --> 00:02:36,853
‫para crear la propia llamada API.

49
00:02:37,710 --> 00:02:40,450
‫Entonces, importemos también axios desde

50
00:02:45,270 --> 00:02:47,420
‫el módulo axios.

51
00:02:47,420 --> 00:02:50,630
‫Entonces, nuevamente, esta es la sintaxis del módulo es6 y no la sintaxis

52
00:02:50,630 --> 00:02:55,290
‫común del módulo js que usamos en node. js, está bien,

53
00:02:55,290 --> 00:02:59,610
‫así que no confunda estos dos, está bien.

54
00:02:59,610 --> 00:03:03,030
‫Por lo tanto, la solicitud HTTP que estamos haciendo con

55
00:03:03,030 --> 00:03:06,661
‫axios nuevamente deberá estar dentro de un bloque try catch para

56
00:03:06,661 --> 00:03:09,050
‫que, en caso de que haya algún

57
00:03:09,050 --> 00:03:10,483
‫error, podamos manejarlos correctamente.

58
00:03:12,890 --> 00:03:14,653
‫Así que aquí mismo

59
00:03:15,660 --> 00:03:19,420
‫en el bloque de captura, y como antes, comencemos por hacer eso

60
00:03:19,420 --> 00:03:22,060
‫y, en caso de que haya algo mal,

61
00:03:22,060 --> 00:03:26,430
‫queremos mostrar la alerta tal como lo hicimos en el inicio de sesión.

62
00:03:26,430 --> 00:03:29,620
‫Así que importemos esa función showAlert como esta

63
00:03:33,670 --> 00:03:34,580
‫desde

64
00:03:35,950 --> 00:03:40,457
‫la misma carpeta ". / alertas.

65
00:03:42,270 --> 00:03:46,333
‫" Bien. Ah, y también necesitamos deshabilitar nuevamente eslint.

66
00:03:52,080 --> 00:03:53,513
‫Y ahora estamos listos para irnos.

67
00:03:54,480 --> 00:03:57,023
‫Así que no sirve de nada la función de mostrar alerta aquí.

68
00:04:00,750 --> 00:04:02,860
‫Queremos que sea un error

69
00:04:02,860 --> 00:04:05,440
‫para que obtenga ese bonito color rojo y

70
00:04:05,440 --> 00:04:07,670
‫luego el mensaje que queremos mostrar

71
00:04:07,670 --> 00:04:10,090
‫es un error, así que ese es

72
00:04:10,090 --> 00:04:14,640
‫el error que se crea en el bloque try cuando algo sale mal.

73
00:04:14,640 --> 00:04:18,772
‫Luego está el error. respuesta,

74
00:04:18,772 --> 00:04:23,297
‫y luego, datos. message, está bien, entonces esta

75
00:04:23,297 --> 00:04:26,620
‫propiedad de mensaje es la que estamos definiendo en el

76
00:04:26,620 --> 00:04:29,740
‫servidor cada vez que hay un error, de acuerdo.

77
00:04:29,740 --> 00:04:32,450
‫Anuncio, así que vamos a intentarlo como lo hicimos

78
00:04:32,450 --> 00:04:36,140
‫antes con la validación, por lo que en la última lección recibimos

79
00:04:36,140 --> 00:04:38,560
‫este mensaje de error de validación aquí, y

80
00:04:38,560 --> 00:04:39,810
‫ahora en este

81
00:04:39,810 --> 00:04:42,044
‫video cuando estamos haciendo el mismo error

82
00:04:42,044 --> 00:04:45,600
‫con la API, verás luego reciba la alerta con este mismo mensaje

83
00:04:45,600 --> 00:04:48,731
‫exacto, y entonces será una experiencia de usuario mucho mejor,

84
00:04:48,731 --> 00:04:52,423
‫porque no vamos a dejar esa página en la que estábamos, ¿verdad?

85
00:04:54,320 --> 00:04:57,693
‫De todos modos, hagamos ahora esa solicitud HTTP.

86
00:04:58,910 --> 00:05:01,603
‫Y guarde esa respuesta de interloop,

87
00:05:02,451 --> 00:05:05,750
‫y como ya sabe, debemos esperar la promesa

88
00:05:05,750 --> 00:05:09,130
‫que proviene de esta solicitud de axios y,

89
00:05:09,130 --> 00:05:14,130
‫por lo tanto, está marcada como async y ahora aquí están las opciones.

90
00:05:16,540 --> 00:05:21,540
‫Entonces el método es un parche, ¿de acuerdo?

91
00:05:21,560 --> 00:05:23,700
‫Y podría usar esto aquí

92
00:05:23,700 --> 00:05:26,660
‫en minúsculas, pero prefiero escribir siempre los métodos HTTP

93
00:05:26,660 --> 00:05:30,023
‫en mayúsculas de esta manera y ahora vayamos a publicar

94
00:05:30,023 --> 00:05:33,023
‫y veamos la URL que vamos a encontrar ahora.

95
00:05:34,210 --> 00:05:37,087
‫Por alguna razón, esto parece un poco extraño, es demasiado grande ...

96
00:05:40,050 --> 00:05:41,050
‫pero no importa.

97
00:05:41,050 --> 00:05:45,270
‫Solo quiero seleccionar la URL que vamos a ingresar aquí.

98
00:05:45,270 --> 00:05:47,470
‫para que esté aquí en

99
00:05:47,470 --> 00:05:51,091
‫los usuarios y actualice el usuario actual, está bien.

100
00:05:51,091 --> 00:05:52,295
‫Y entonces

101
00:05:52,295 --> 00:05:57,090
‫este recibe como cuerpo solo los datos que queremos actualizar.

102
00:05:57,090 --> 00:05:59,790
‫Entonces, en este caso es el nombre y el

103
00:05:59,790 --> 00:06:01,070
‫rol, pero por

104
00:06:01,070 --> 00:06:03,790
‫supuesto no vamos a permitir que el usuario actualice

105
00:06:03,790 --> 00:06:07,420
‫el rol y creo que lo hicimos aquí para mostrar el ejemplo

106
00:06:07,420 --> 00:06:09,866
‫de que este no está permitido, correcto y

107
00:06:09,866 --> 00:06:11,550
‫así que lo que estamos

108
00:06:11,550 --> 00:06:14,710
‫actualizando es, por supuesto, el nombre y el correo electrónico.

109
00:06:14,710 --> 00:06:17,910
‫Lo importante aquí es que para esta ruta, no necesitamos

110
00:06:17,910 --> 00:06:20,650
‫especificar el ID de usuario, ya que tenemos

111
00:06:20,650 --> 00:06:22,763
‫que hacerlo aquí en Actualizar usuario.

112
00:06:23,920 --> 00:06:25,870
‫Así que este de aquí es el primero que creamos.

113
00:06:25,870 --> 00:06:30,010
‫Y aquí, necesitábamos pasar la ID como un parámetro de URL, pero, por supuesto,

114
00:06:30,010 --> 00:06:32,460
‫al actualizar el usuario actual obtenemos esa ID

115
00:06:32,460 --> 00:06:37,050
‫de usuario a partir de la solicitud. usuario como siempre.

116
00:06:37,050 --> 00:06:38,293
‫¿Recuérdalo?

117
00:06:39,396 --> 00:06:41,713
‫De todos modos, copiemos esto aquí.

118
00:06:46,800 --> 00:06:48,593
‫Y luego especifique la URL.

119
00:06:50,610 --> 00:06:55,610
‫Bien, y aquí, como siempre, el host local y,

120
00:06:56,120 --> 00:06:58,460
‫por supuesto, cuando

121
00:06:58,460 --> 00:07:01,653
‫implementemos esto, cambiaremos esto aquí.

122
00:07:03,790 --> 00:07:06,540
‫Pero por ahora, por supuesto, solo estamos trabajando localmente aquí.

123
00:07:07,704 --> 00:07:09,104
‫Así que ese es el que se debe usar.

124
00:07:09,970 --> 00:07:12,057
‫A continuación, especificamos los datos y,

125
00:07:12,057 --> 00:07:13,890
‫por lo tanto, este

126
00:07:13,890 --> 00:07:16,800
‫será el cuerpo que se enviará junto con la

127
00:07:16,800 --> 00:07:19,400
‫solicitud y, por lo tanto, el nombre

128
00:07:19,400 --> 00:07:23,423
‫simplemente será el nombre que ingresa y, por supuesto, el correo electrónico.

129
00:07:24,930 --> 00:07:27,323
‫Muy bien, eso es todo

130
00:07:29,240 --> 00:07:32,920
‫pedido, y ahora probemos si realmente obtenemos nuestro éxito,

131
00:07:36,160 --> 00:07:40,993
‫así que respuesta. datos. estado, si es

132
00:07:44,470 --> 00:07:46,140
‫igual a éxito, y

133
00:07:46,140 --> 00:07:50,910
‫una vez más este es el estado que encontramos en todas nuestras

134
00:07:50,910 --> 00:07:54,520
‫respuestas, recuerde, y si esto fue exitoso, entonces queremos

135
00:07:54,520 --> 00:07:56,750
‫mostrar una alerta de éxito

136
00:07:59,770 --> 00:08:04,400
‫que diga: "Datos actualizados con éxito. "Dale un guardado, y

137
00:08:07,650 --> 00:08:09,170
‫creo

138
00:08:09,170 --> 00:08:14,170
‫que debería ser para esta función, de acuerdo.

139
00:08:14,620 --> 00:08:17,293
‫Ahora todo lo que tenemos que hacer es usarlo aquí.

140
00:08:18,220 --> 00:08:20,373
‫Primero, voy a importar una

141
00:08:25,493 --> 00:08:26,493
‫función,

142
00:08:29,050 --> 00:08:32,360
‫"updateData" desde ". / update settings "y

143
00:08:32,360 --> 00:08:34,623
‫así podemos soltar el" js "allí.

144
00:08:36,340 --> 00:08:39,933
‫A continuación, seleccionemos el formulario en la página.

145
00:08:41,860 --> 00:08:46,860
‫Entonces, use un formulario de datos igual al documento. querySelector y luego

146
00:08:50,489 --> 00:08:53,190
‫echemos un vistazo a eso.

147
00:08:53,190 --> 00:08:55,410
‫Así que está aquí en la cuenta

148
00:08:58,150 --> 00:09:01,893
‫y este formulario tiene un nombre de clase de datos de usuario del formulario.

149
00:09:03,630 --> 00:09:07,920
‫Entonces, tomemos eso y pongamos eso aquí.

150
00:09:07,920 --> 00:09:11,670
‫Bien, y ahora haremos algo muy similar aquí a este inicio

151
00:09:11,670 --> 00:09:12,703
‫de sesión.

152
00:09:14,480 --> 00:09:19,089
‫Entonces, si hay un formulario de datos de usuario, bueno, agreguemos

153
00:09:19,089 --> 00:09:22,203
‫un detector de eventos a eso.

154
00:09:24,410 --> 00:09:27,980
‫Entonces, agregueEventListener en el caso de enviar y obtener acceso

155
00:09:33,640 --> 00:09:35,660
‫al evento aquí y evitaremos

156
00:09:37,060 --> 00:09:38,880
‫el valor predeterminado, por

157
00:09:38,880 --> 00:09:42,110
‫lo que evitaremos que se envíe el formulario.

158
00:09:42,110 --> 00:09:45,810
‫Con este fragmento de código, obtengamos el correo electrónico y

159
00:09:45,810 --> 00:09:48,363
‫el nombre, que será muy similar

160
00:09:48,363 --> 00:09:51,663
‫al que tenemos aquí, así que tomemos eso.

161
00:09:56,178 --> 00:09:59,777
‫Solo para asegurarnos de que realmente están allí, abramos esto

162
00:09:59,777 --> 00:10:01,200
‫nuevamente y, de

163
00:10:02,080 --> 00:10:06,679
‫hecho, obtendrán la identificación del nombre y la identificación del correo electrónico.

164
00:10:06,679 --> 00:10:09,762
‫De acuerdo, el correo electrónico es correo electrónico y

165
00:10:13,908 --> 00:10:16,050
‫nombre con la idea de nombre.

166
00:10:16,050 --> 00:10:18,640
‫De acuerdo, y luego todo lo que tenemos que hacer

167
00:10:18,640 --> 00:10:21,053
‫es realmente llamar a la función que importamos.

168
00:10:22,090 --> 00:10:27,090
‫Entonces, actualiceData con el nombre y el correo electrónico y creo

169
00:10:27,880 --> 00:10:32,530
‫que ese es el orden correcto, así que sí.

170
00:10:32,530 --> 00:10:35,840
‫primero el nombre y luego el correo electrónico, está bien.

171
00:10:35,840 --> 00:10:37,480
‫Y detrás de escena, nuestro

172
00:10:39,060 --> 00:10:41,310
‫paquete aún debería estar agrupando todos estos archivos

173
00:10:41,310 --> 00:10:43,880
‫en cada guardado, por lo que si guardamos esto,

174
00:10:43,880 --> 00:10:45,846
‫verá que se actualizó ahora aquí,

175
00:10:45,846 --> 00:10:48,883
‫por lo que ahora deberíamos estar listos para continuar con esto.

176
00:10:51,580 --> 00:10:55,393
‫Entonces, volvamos a nuestra página de inicio aquí.

177
00:10:56,790 --> 00:10:59,723
‫Está bien. E intentemos actualizar nuestros datos.

178
00:11:01,300 --> 00:11:03,515
‫Y lo que voy a

179
00:11:03,515 --> 00:11:07,570
‫hacer es básicamente volver a los datos originales, eliminar ese segundo

180
00:11:07,570 --> 00:11:10,580
‫nombre y el apellido de aquí y ahora guardar

181
00:11:11,620 --> 00:11:15,260
‫la configuración y aquí vamos, los datos se actualizaron correctamente.

182
00:11:15,260 --> 00:11:17,370
‫Entonces, si ahora recargamos la página,

183
00:11:17,370 --> 00:11:20,520
‫básicamente obtendremos esos datos del servidor y, por lo

184
00:11:20,520 --> 00:11:22,880
‫tanto, si es el mismo, entonces significa

185
00:11:22,880 --> 00:11:24,763
‫que los datos realmente persistieron.

186
00:11:25,630 --> 00:11:28,680
‫Entonces, recargando y aquí vamos.

187
00:11:28,680 --> 00:11:31,370
‫Que bien. Eso realmente funcionó.

188
00:11:31,370 --> 00:11:33,270
‫Vayamos a otra

189
00:11:33,270 --> 00:11:36,102
‫página aquí y regresemos para estar

190
00:11:36,102 --> 00:11:38,920
‫realmente seguros, pero de hecho funcionó.

191
00:11:38,920 --> 00:11:41,233
‫Y ahora, probemos uno de estos errores.

192
00:11:42,920 --> 00:11:46,090
‫Muy bien, y eso debería generar una dirección de correo electrónico

193
00:11:47,540 --> 00:11:50,190
‫incorrecta y, por lo tanto, se ve mucho mejor,

194
00:11:50,190 --> 00:11:51,960
‫así que nos da este mensaje

195
00:11:51,960 --> 00:11:54,634
‫de error, que por supuesto podríamos formatear un poco mejor

196
00:11:54,634 --> 00:11:56,203
‫para que se vea mejor.

197
00:11:58,140 --> 00:12:00,730
‫Pero creo que así está perfectamente

198
00:12:00,730 --> 00:12:03,080
‫bien para esta pequeña aplicación.

199
00:12:03,080 --> 00:12:04,760
‫Y podríamos hacer todo tipo

200
00:12:04,760 --> 00:12:08,600
‫de cosas como marcar este campo aquí en rojo o algo así.

201
00:12:08,600 --> 00:12:10,830
‫Pero para este tipo de cosas, probablemente

202
00:12:10,830 --> 00:12:15,020
‫sería mejor utilizar un marco de interfaz de usuario real y completo

203
00:12:15,020 --> 00:12:16,791
‫como React o View.

204
00:12:16,791 --> 00:12:20,310
‫De todos modos, este formulario ahora funciona aquí, excepto la imagen, que

205
00:12:20,310 --> 00:12:22,480
‫nuevamente estamos haciendo en la siguiente sección,

206
00:12:22,480 --> 00:12:24,610
‫por lo que todo lo que

207
00:12:24,610 --> 00:12:29,233
‫queda por hacer es actualizar la contraseña para que lo hagamos en el siguiente video.