1
00:00:03,740 --> 00:00:11,475
Ya hemos visto el uso de las operaciones HTTP get en los dos ejercicios anteriores,

2
00:00:11,475 --> 00:00:14,310
donde podremos ir a buscar los datos desde

3
00:00:14,310 --> 00:00:17,505
el servidor y utilizarlos dentro de nuestra aplicación Angular.

4
00:00:17,505 --> 00:00:23,159
Pero hay situaciones en las que desea poder publicar nuevos datos en el servidor,

5
00:00:23,159 --> 00:00:26,160
o modificar los datos existentes en el servidor,

6
00:00:26,160 --> 00:00:27,950
o incluso eliminar los datos.

7
00:00:27,950 --> 00:00:30,480
Así que ahí es donde las operaciones de publicación,

8
00:00:30,480 --> 00:00:35,895
poner y eliminar de HTTP nos permiten llevar a cabo esto.

9
00:00:35,895 --> 00:00:41,540
En este ejercicio, vamos a ver el uso de la operación put desde el cliente HTTP

10
00:00:41,540 --> 00:00:48,735
que nos permite modificar un plato existente en el lado del servidor.

11
00:00:48,735 --> 00:00:50,715
Ahora, ¿por qué tendríamos que hacer eso?

12
00:00:50,715 --> 00:00:53,500
Usted vio que en uno de los ejercicios anteriores,

13
00:00:53,500 --> 00:00:57,230
permitimos al usuario publicar un comentario en un Dish,

14
00:00:57,230 --> 00:01:01,825
y luego pudimos insertar el comentario en el objeto Dish.

15
00:01:01,825 --> 00:01:08,160
Ahora, queremos persistir esta información del plato en el servidor,

16
00:01:08,160 --> 00:01:10,570
el plato modificado al servidor.

17
00:01:10,570 --> 00:01:15,955
Aquí es donde el uso de la operación HTTP PUT viene a nuestro rescate.

18
00:01:15,955 --> 00:01:18,345
Por lo tanto, usando la operación HTTP PUT,

19
00:01:18,345 --> 00:01:23,360
podemos enviar el Dish modificado de nuevo al servidor y luego modificar

20
00:01:23,360 --> 00:01:26,750
la información de Dish existente en el servidor para que

21
00:01:26,750 --> 00:01:31,460
el comentario recién agregado pueda persistir en el lado del servidor.

22
00:01:31,460 --> 00:01:35,899
De este modo, cuando la información se obtenga en una fecha posterior,

23
00:01:35,899 --> 00:01:41,770
el comentario recién agregado estará allí como parte de la información del plato.

24
00:01:41,770 --> 00:01:44,770
Por lo tanto, esto es lo que vamos a explorar en este ejercicio,

25
00:01:44,770 --> 00:01:48,225
donde veremos cómo guardar los cambios en el servidor.

26
00:01:48,225 --> 00:01:50,280
Entonces, ¿cómo vamos a hacer esto?

27
00:01:50,280 --> 00:01:53,625
Vamos a explorar esto en el ejercicio.

28
00:01:53,625 --> 00:01:58,730
Para permitirnos guardar los cambios en el Dish en el servidor,

29
00:01:58,730 --> 00:02:02,765
permítanme introducir un nuevo método en el servicio Dish aquí.

30
00:02:02,765 --> 00:02:09,040
Ahora, vamos a añadir un nuevo método llamado como PutDish al servidor.

31
00:02:09,040 --> 00:02:11,335
Entonces, ¿cómo funciona el método PutDish?

32
00:02:11,335 --> 00:02:17,920
Entonces, permítanme introducir el método PutDish aquí que obviamente recibe el plato modificado

33
00:02:17,920 --> 00:02:25,370
como su parámetro y luego devolverá un tipo observable de Dish.

34
00:02:25,370 --> 00:02:29,980
Entonces, esto devolverá el plato que se ha puesto en el lado del servidor.

35
00:02:29,980 --> 00:02:33,690
Ahora, una vez que el Dish sea modificado en el lado del servidor,

36
00:02:33,690 --> 00:02:36,735
la información modificada del Dish será enviada de vuelta por el servidor,

37
00:02:36,735 --> 00:02:39,275
y luego este Dish modificado será entregado

38
00:02:39,275 --> 00:02:42,330
de vuelta al cliente para que el cliente pueda integrar eso,

39
00:02:42,330 --> 00:02:48,605
y luego actualizar la interfaz de usuario para reflejar el cambio en el Plato.

40
00:02:48,605 --> 00:02:52,010
Ahora, obviamente, no queremos reflejar el cambio a

41
00:02:52,010 --> 00:02:57,300
la interfaz de usuario hasta que la información de Dish se guarde en el lado del servidor.

42
00:02:57,300 --> 00:03:00,245
Entonces, ahí es donde vamos a hacer uso de

43
00:03:00,245 --> 00:03:05,265
el método PutDish que introducimos en el servicio Dish.

44
00:03:05,265 --> 00:03:07,730
Entonces, ¿cómo diseñamos el método PutDish?

45
00:03:07,730 --> 00:03:15,785
Entonces, lo primero que tenemos que hacer es configurar algunas opciones HTTP para que informemos

46
00:03:15,785 --> 00:03:21,975
al servidor sobre lo que

47
00:03:21,975 --> 00:03:26,565
está siendo enviado en el mensaje aquí.

48
00:03:26,565 --> 00:03:29,880
Por lo tanto, vamos a configurar algunos encabezados información aquí.

49
00:03:29,880 --> 00:03:36,345
Entonces, para los encabezados, vamos a configurar nuevos HttpHeaders aquí,

50
00:03:36,345 --> 00:03:39,060
y en los nuevos HttpHeaders,

51
00:03:39,060 --> 00:03:43,050
vamos a configurar el encabezado como

52
00:03:43,050 --> 00:03:49,940
Content-Type de la aplicación de tipo JSON.

53
00:03:49,940 --> 00:03:56,135
Por lo tanto, estamos especificando a nuestro servidor que el mensaje de solicitud entrante

54
00:03:56,135 --> 00:03:58,730
contiene la información en forma de

55
00:03:58,730 --> 00:04:02,840
un objeto json en el cuerpo del mensaje de solicitud entrante.

56
00:04:02,840 --> 00:04:04,865
Por lo tanto, el servidor podrá extraer

57
00:04:04,865 --> 00:04:09,165
la información del Dish del cuerpo del mensaje, analizarla,

58
00:04:09,165 --> 00:04:13,200
y luego ser capaz de persistir el Dish modificado al servidor,

59
00:04:13,200 --> 00:04:19,260
y luego enviar de vuelta la información actualizada del Dish desde el lado del servidor.

60
00:04:19,260 --> 00:04:22,025
Ahora, una vez que hemos configurado las opciones aquí,

61
00:04:22,025 --> 00:04:24,295
entonces vamos a utilizar

62
00:04:24,295 --> 00:04:29,990
el cliente HTTP y luego

63
00:04:29,990 --> 00:04:36,030
hacer un put que obviamente lleva el plato en el cuerpo del mensaje,

64
00:04:36,030 --> 00:04:47,385
y luego vamos a especificar BaseURL+platos y +dish.id.

65
00:04:47,385 --> 00:04:53,520
Así que, esa es la URL a la que estamos enviando la operación de puta,

66
00:04:53,520 --> 00:04:57,775
Baseurl+'dishes/ '+ dish.id.

67
00:04:57,775 --> 00:05:01,130
Por lo tanto, a partir de su conocimiento de API REST,

68
00:05:01,130 --> 00:05:05,960
verá por qué hacemos una operación de puesta a este punto final.

69
00:05:05,960 --> 00:05:09,500
Entonces el segundo parámetro es el propio Dish que

70
00:05:09,500 --> 00:05:13,990
recibimos como el parámetro entrante al método PutDish,

71
00:05:13,990 --> 00:05:23,770
y luego el tercer parámetro es el HttpOptions que acabamos de configurar hace poco.

72
00:05:23,770 --> 00:05:26,790
Entonces, una vez que obtengamos eso,

73
00:05:26,790 --> 00:05:29,775
entonces seremos capaces de canalizar

74
00:05:29,775 --> 00:05:37,405
cualquier error a nuestro método HandleError escuchar, eso es todo.

75
00:05:37,405 --> 00:05:43,550
Por lo tanto, esta llamada al puesto en el lado del servidor permitirá

76
00:05:43,550 --> 00:05:46,880
la información del plato sea persistente en el lado del servidor y luego el servidor

77
00:05:46,880 --> 00:05:50,430
nos devolverá la información actualizada del plato,

78
00:05:50,430 --> 00:05:55,805
y luego devolveremos eso a nuestro componente

79
00:05:55,805 --> 00:06:01,705
donde el componente puede luego usarlo para representar la información actualizada de Dish.

80
00:06:01,705 --> 00:06:04,835
Entonces, esta es la modificación que hacemos al servicio Dish.

81
00:06:04,835 --> 00:06:08,220
Ahora, entra en el componente dishdetail,

82
00:06:08,450 --> 00:06:11,130
en el componente dishdetail,

83
00:06:11,130 --> 00:06:18,185
déjame introducir una variable más aquí

84
00:06:18,185 --> 00:06:21,590
llamada dishcopy que mantendrá

85
00:06:21,590 --> 00:06:26,570
una copia del Dish modificado hasta que se publique en el servidor.

86
00:06:26,570 --> 00:06:29,890
Por lo tanto, la discopia contendrá el plato modificado.

87
00:06:29,890 --> 00:06:33,875
Entonces, entrando en los parámetros de ruta aquí.

88
00:06:33,875 --> 00:06:41,305
Así que, lo que hacemos es cada vez que la información del plato se modifica aquí en los parámetros de la ruta,

89
00:06:41,305 --> 00:06:46,355
también junto con guardar la información del plato a this.dish,

90
00:06:46,355 --> 00:06:52,470
También guardaremos una copia a

91
00:06:52,470 --> 00:06:55,980
el plato también para que tanto el plato como

92
00:06:55,980 --> 00:07:01,460
el plato contienen la copia exacta del mismo plato aquí.

93
00:07:01,460 --> 00:07:04,370
Entonces, esa es la modificación que haremos aquí.

94
00:07:04,370 --> 00:07:06,990
Ahora, en el método onSubmit,

95
00:07:06,990 --> 00:07:09,665
así que aquí tenemos el método onSubmit aquí,

96
00:07:09,665 --> 00:07:13,310
donde estamos modificando el objeto aquí.

97
00:07:13,310 --> 00:07:20,220
Así que, aquí, nota que originalmente estábamos empujando el comentario al objeto Dish aquí,

98
00:07:20,220 --> 00:07:24,945
en su lugar, ahora empujaremos el comentario al objeto dishcopy.

99
00:07:24,945 --> 00:07:29,405
La razón por la que estoy haciendo esto es que primero quiero modificar el objeto dishcopy,

100
00:07:29,405 --> 00:07:32,285
luego quiero publicar eso en el servidor,

101
00:07:32,285 --> 00:07:35,060
y luego cuando el servidor responda con

102
00:07:35,060 --> 00:07:37,850
la información del plato modificada al lado del servidor,

103
00:07:37,850 --> 00:07:41,715
entonces persistiré esa información en el plato aquí.

104
00:07:41,715 --> 00:07:44,750
Así que, después de hacer el plato aquí,

105
00:07:44,750 --> 00:07:54,735
entonces diremos esto.Dishservice.putdish,

106
00:07:54,735 --> 00:07:57,900
y luego suministraremos al PutDish

107
00:07:57,900 --> 00:08:04,250
el plato como el parámetro

108
00:08:04,250 --> 00:08:09,110
porque el plato contiene la versión modificada aquí.

109
00:08:09,110 --> 00:08:10,955
Entonces, diremos dishcopy,

110
00:08:10,955 --> 00:08:16,600
y luego cuando recibamos la respuesta del lado del servidor así,

111
00:08:16,600 --> 00:08:22,255
en la suscripción, diremos Dish y justo allí,

112
00:08:22,255 --> 00:08:26,655
manejaremos el plato entrante aquí.

113
00:08:26,655 --> 00:08:31,855
Así que, aquí, vamos a decir suscribirse Dish y luego vamos a decir,

114
00:08:31,855 --> 00:08:36,435
this.dish igual a plato aquí,

115
00:08:36,435 --> 00:08:45,910
y por el bien de la integridad,

116
00:08:45,910 --> 00:08:49,380
también persistiré la misma información en el plato aquí.

117
00:08:49,380 --> 00:08:52,320
Ahora, si hay un error,

118
00:08:52,320 --> 00:08:54,120
entonces tendrá que HandleError.

119
00:08:54,120 --> 00:08:57,625
Así que, para HandleError, diremos,

120
00:08:57,625 --> 00:09:03,080
errmess, y luego en ese punto,

121
00:09:03,080 --> 00:09:07,040
estableceremos que this.dish en null,

122
00:09:07,040 --> 00:09:14,330
y luego el este dishcopy también en null porque ahora mismo el plato no es válido,

123
00:09:14,330 --> 00:09:19,595
y luego diremos esto.errmess es

124
00:09:19,595 --> 00:09:27,755
cualquier errmess, eso es todo.

125
00:09:27,755 --> 00:09:31,445
Esa es la modificación que vamos a hacer al método onSubmit.

126
00:09:31,445 --> 00:09:34,695
Así que, mediante el uso de this.dishservice.putDish método,

127
00:09:34,695 --> 00:09:38,500
estamos enviando en la copia de cocina actualizada aquí,

128
00:09:38,500 --> 00:09:39,685
no el plato aquí,

129
00:09:39,685 --> 00:09:43,965
y luego cuando el servidor nos responda con el plato modificado,

130
00:09:43,965 --> 00:09:47,605
en ese punto, persistiremos la información en el this.dish.

131
00:09:47,605 --> 00:09:49,025
Así que en ese punto,

132
00:09:49,025 --> 00:09:54,590
nuestra interfaz de usuario se actualizará con la versión actualizada a Dish,

133
00:09:54,590 --> 00:09:57,560
también persista la misma información a dishcopy,

134
00:09:57,560 --> 00:09:59,180
y luego si encuentro un error,

135
00:09:59,180 --> 00:10:02,585
entonces configuraré this.dish en null y this.dishcopy en null

136
00:10:02,585 --> 00:10:06,680
y luego configuraré el mensaje de error apropiadamente aquí.

137
00:10:06,680 --> 00:10:09,980
Así que eso es todo. Vamos a guardar los cambios y luego ir y

138
00:10:09,980 --> 00:10:14,100
echar un vistazo a nuestra aplicación en el navegador.

139
00:10:14,230 --> 00:10:19,050
Guardando los cambios, volvamos al navegador.

140
00:10:19,050 --> 00:10:27,785
Entra en el navegador, vamos ahora al menú y luego ir a un plato específico aquí.

141
00:10:27,785 --> 00:10:30,245
Para el plato específico,

142
00:10:30,245 --> 00:10:32,685
vamos a publicar un comentario aquí.

143
00:10:32,685 --> 00:10:41,870
Así que, permítanme publicar un comentario aquí con una calificación aquí.

144
00:10:44,430 --> 00:10:48,815
Así que, como ves, a medida que el comentario se vuelve válido,

145
00:10:48,815 --> 00:10:52,370
la vista previa del comentario aparece allí.

146
00:10:52,370 --> 00:10:54,950
Vamos a enviar ahora este comentario.

147
00:10:54,950 --> 00:10:56,520
Cuando envíe el comentario,

148
00:10:56,520 --> 00:11:02,160
inmediatamente verá que el comentario acaba de ser publicado en mi lista de Platos.

149
00:11:02,160 --> 00:11:05,645
Ahora, antes, si actualiza la vista,

150
00:11:05,645 --> 00:11:07,880
entonces este comentario desaparecería.

151
00:11:07,880 --> 00:11:13,250
Permítanme ahora actualizar la vista y luego se dará cuenta de que el comentario todavía

152
00:11:13,250 --> 00:11:18,630
será parte de la lista de Platos aquí.

153
00:11:18,630 --> 00:11:20,190
Así que, como pueden ver aquí,

154
00:11:20,190 --> 00:11:22,310
el comentario todavía existe aquí.

155
00:11:22,310 --> 00:11:27,530
Para mostrarle aún más que el comentario ha sido persistido en el lado del servidor,

156
00:11:27,530 --> 00:11:31,440
vamos a ir y mirar el registro del servidor en el terminal.

157
00:11:31,440 --> 00:11:33,810
Volviendo a las terminales,

158
00:11:33,810 --> 00:11:36,710
veremos que en el registro de la terminal,

159
00:11:36,710 --> 00:11:41,910
ves un nuevo método PUT /dishes/0.

160
00:11:41,910 --> 00:11:45,950
Entonces, eso demuestra que el Dish

161
00:11:45,950 --> 00:11:50,050
modificado ha persistido de nuevo al servidor justo allí y después de eso,

162
00:11:50,050 --> 00:11:53,170
por supuesto conseguimos los platos renovando

163
00:11:53,170 --> 00:11:55,975
la interfaz de usuario y es por eso que estamos

164
00:11:55,975 --> 00:11:59,485
recuperando la información de los platos de nuevo desde el lado del servidor.

165
00:11:59,485 --> 00:12:03,640
Por lo tanto, esto muestra que somos capaces de usar

166
00:12:03,640 --> 00:12:08,580
la operación PUT HTTP para persistir el Dish modificado en el servidor,

167
00:12:08,580 --> 00:12:10,810
y luego cuando recibimos el plato actualizado,

168
00:12:10,810 --> 00:12:14,025
podemos actualizar la interfaz de usuario correspondientemente.

169
00:12:14,025 --> 00:12:17,240
Con esto, completamos este ejercicio.

170
00:12:17,240 --> 00:12:21,380
Este es un buen momento para que hagas una confirmación GET con el mensaje,

171
00:12:21,380 --> 00:12:24,300
guardando cambios en este servidor.