1
00:00:03,740 --> 00:00:11,475
Já vimos o uso das operações HTTP get nos dois exercícios anteriores,

2
00:00:11,475 --> 00:00:14,310
onde podemos ir e buscar os dados de

3
00:00:14,310 --> 00:00:17,505
o servidor e usá-lo dentro da nossa aplicação Angular.

4
00:00:17,505 --> 00:00:23,159
Mas há situações em que você quer ser capaz de postar novos dados para o servidor,

5
00:00:23,159 --> 00:00:26,160
ou modificar os dados existentes no servidor,

6
00:00:26,160 --> 00:00:27,950
ou até mesmo excluir os dados.

7
00:00:27,950 --> 00:00:30,480
Então é aí que as operações de post,

8
00:00:30,480 --> 00:00:35,895
colocar e excluir de HTTP nos permitem realizar isso.

9
00:00:35,895 --> 00:00:41,540
Neste exercício, vamos olhar para o uso da operação put do cliente

10
00:00:41,540 --> 00:00:48,735
HTTP que nos permite modificar um prato existente no lado do servidor.

11
00:00:48,735 --> 00:00:50,715
Agora, por que precisaríamos fazer isso?

12
00:00:50,715 --> 00:00:53,500
Você viu que em um dos exercícios anteriores,

13
00:00:53,500 --> 00:00:57,230
nós permitimos que o usuário postasse um comentário em um prato,

14
00:00:57,230 --> 00:01:01,825
e então fomos capazes de inserir o comentário no objeto Dish.

15
00:01:01,825 --> 00:01:08,160
Agora, queremos manter esta informação do prato no servidor,

16
00:01:08,160 --> 00:01:10,570
o prato modificado para o servidor.

17
00:01:10,570 --> 00:01:15,955
Aqui é onde o uso da operação HTTP PUT vem para o nosso resgate.

18
00:01:15,955 --> 00:01:18,345
Então, usando a operação HTTP PUT,

19
00:01:18,345 --> 00:01:23,360
nós somos capazes de enviar o prato modificado de volta para o servidor e, em seguida, modificar

20
00:01:23,360 --> 00:01:26,750
as informações existentes Dish no servidor para que

21
00:01:26,750 --> 00:01:31,460
o comentário recém-adicionado pode ser persistido no lado do servidor.

22
00:01:31,460 --> 00:01:35,899
Assim, quando a informação for obtida em uma data posterior,

23
00:01:35,899 --> 00:01:41,770
o comentário recém-adicionado estará lá como parte da informação do Dish.

24
00:01:41,770 --> 00:01:44,770
Então, isso é o que vamos explorar neste exercício,

25
00:01:44,770 --> 00:01:48,225
onde vamos olhar para salvar as alterações no servidor.

26
00:01:48,225 --> 00:01:50,280
Então, como vamos fazer isso?

27
00:01:50,280 --> 00:01:53,625
Vamos explorar isso no exercício.

28
00:01:53,625 --> 00:01:58,730
Para nos permitir salvar as alterações no Dish para o servidor,

29
00:01:58,730 --> 00:02:02,765
deixe-me introduzir um novo método no serviço Dish aqui.

30
00:02:02,765 --> 00:02:09,040
Agora, vamos adicionar um novo método chamado como PutDish para o servidor.

31
00:02:09,040 --> 00:02:11,335
Então, como funciona o método PutDish?

32
00:02:11,335 --> 00:02:17,920
Então, deixe-me introduzir o método PutDish aqui que obviamente recebe o prato modificado

33
00:02:17,920 --> 00:02:25,370
como seu parâmetro e, em seguida, ele vai retornar um observável do tipo Dish.

34
00:02:25,370 --> 00:02:29,980
Então, isso retornará o prato que foi colocado no lado do servidor.

35
00:02:29,980 --> 00:02:33,690
Agora, uma vez que o Dish é modificado no lado do servidor,

36
00:02:33,690 --> 00:02:36,735
a informação modificada Dish será enviada de volta pelo servidor,

37
00:02:36,735 --> 00:02:39,275
e então este Dish modificado será entregue

38
00:02:39,275 --> 00:02:42,330
de volta ao cliente para que o cliente possa integrar isso,

39
00:02:42,330 --> 00:02:48,605
e, em seguida, atualizar a interface do usuário para refletir a mudança para o Prato.

40
00:02:48,605 --> 00:02:52,010
Agora, obviamente, não queremos refletir a alteração para

41
00:02:52,010 --> 00:02:57,300
a interface do usuário até que as informações do Dish sejam salvas no lado do servidor.

42
00:02:57,300 --> 00:03:00,245
Então, é aí que vamos fazer uso de

43
00:03:00,245 --> 00:03:05,265
o método PutDish que introduzimos no serviço Dish.

44
00:03:05,265 --> 00:03:07,730
Então, como projetamos o método PutDish?

45
00:03:07,730 --> 00:03:15,785
Então, a primeira coisa que precisamos fazer é configurar algumas opções HTTP para que informemos

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

47
00:03:21,975 --> 00:03:26,565
está sendo enviado na mensagem aqui.

48
00:03:26,565 --> 00:03:29,880
Então, vamos configurar algumas informações de cabeçalhos aqui.

49
00:03:29,880 --> 00:03:36,345
Então, para os cabeçalhos, vamos configurar novos HttpHeaders aqui,

50
00:03:36,345 --> 00:03:39,060
e no novo HttpHeaders,

51
00:03:39,060 --> 00:03:43,050
vamos configurar o cabeçalho como

52
00:03:43,050 --> 00:03:49,940
Content-Type da aplicação tipo JSON.

53
00:03:49,940 --> 00:03:56,135
Então, estamos especificando para o nosso servidor que a mensagem de solicitação de entrada

54
00:03:56,135 --> 00:03:58,730
contém as informações na forma de

55
00:03:58,730 --> 00:04:02,840
um objeto json no corpo da mensagem de solicitação de entrada.

56
00:04:02,840 --> 00:04:04,865
Assim, o servidor será capaz de extrair

57
00:04:04,865 --> 00:04:09,165
a informação Dish do corpo da mensagem, analisá-lo,

58
00:04:09,165 --> 00:04:13,200
e, em seguida, ser capaz de persistir o prato modificado para o servidor,

59
00:04:13,200 --> 00:04:19,260
e, em seguida, enviar de volta as informações atualizadas Dish do lado do servidor.

60
00:04:19,260 --> 00:04:22,025
Agora, uma vez que tenhamos configurado as opções aqui,

61
00:04:22,025 --> 00:04:24,295
então vamos usar

62
00:04:24,295 --> 00:04:29,990
o cliente HTTP e, em seguida,

63
00:04:29,990 --> 00:04:36,030
fazer um put que, obviamente, carrega o prato no corpo da mensagem,

64
00:04:36,030 --> 00:04:47,385
e então vamos especificar BaseURL+pratos e +dish.id.

65
00:04:47,385 --> 00:04:53,520
Então, essa é a URL para a qual estamos enviando a operação put assim,

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

67
00:04:57,775 --> 00:05:01,130
Então, a partir do seu conhecimento da API REST,

68
00:05:01,130 --> 00:05:05,960
você verá por que fazemos uma operação put para este ponto final.

69
00:05:05,960 --> 00:05:09,500
Em seguida, o segundo parâmetro é o próprio Dish que

70
00:05:09,500 --> 00:05:13,990
receber como o parâmetro de entrada para o método PutDish,

71
00:05:13,990 --> 00:05:23,770
e, em seguida, o terceiro parâmetro é o HTTPOptions que acabamos de configurar há pouco tempo.

72
00:05:23,770 --> 00:05:26,790
Então, uma vez que obtemos isso,

73
00:05:26,790 --> 00:05:29,775
então vamos ser capazes de canalizar

74
00:05:29,775 --> 00:05:37,405
o qualquer erro para o nosso método handleError ouvir, é isso.

75
00:05:37,405 --> 00:05:43,550
Então, esta chamada para o colocar no lado do servidor permitirá

76
00:05:43,550 --> 00:05:46,880
a informação Dish para ser persistente no lado do servidor e, em seguida, o servidor

77
00:05:46,880 --> 00:05:50,430
irá retornar a informação do prato atualizado de volta para nós,

78
00:05:50,430 --> 00:05:55,805
e então vamos retornar isso de volta para o nosso componente

79
00:05:55,805 --> 00:06:01,705
onde o componente pode então usar isso para renderizam as informações atualizadas do Dish.

80
00:06:01,705 --> 00:06:04,835
Então, esta é a modificação que fazemos para o serviço Dish.

81
00:06:04,835 --> 00:06:08,220
Agora, vá para o componente dishdetail,

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

83
00:06:11,130 --> 00:06:18,185
deixe-me introduzir mais uma variável aqui

84
00:06:18,185 --> 00:06:21,590
chamada dishcopy que irá armazenar

85
00:06:21,590 --> 00:06:26,570
uma cópia do prato modificado até que ele seja postado no servidor.

86
00:06:26,570 --> 00:06:29,890
Então, a cópia conterá o prato modificado.

87
00:06:29,890 --> 00:06:33,875
Então, indo para os parâmetros de rota aqui.

88
00:06:33,875 --> 00:06:41,305
Então, o que fazemos é sempre que a informação do prato é modificada aqui nos parâmetros da rota,

89
00:06:41,305 --> 00:06:46,355
também junto com salvar a informação do prato para isso.dish,

90
00:06:46,355 --> 00:06:52,470
Eu também vou salvar uma cópia para

91
00:06:52,470 --> 00:06:55,980
a dishcopy também para que tanto o prato e

92
00:06:55,980 --> 00:07:01,460
a dishcopy contenham a cópia exata do mesmo prato aqui.

93
00:07:01,460 --> 00:07:04,370
Então, essa é a modificação que faremos aqui.

94
00:07:04,370 --> 00:07:06,990
Agora, no método onSubmit,

95
00:07:06,990 --> 00:07:09,665
então aqui temos o método onSubmit aqui,

96
00:07:09,665 --> 00:07:13,310
onde estamos modificando o objeto aqui.

97
00:07:13,310 --> 00:07:20,220
Então, aqui, você percebe que estávamos originalmente empurrando o comentário para o objeto Dish aqui,

98
00:07:20,220 --> 00:07:24,945
em vez disso, vamos agora empurrar o comentário para o objeto dishcopy.

99
00:07:24,945 --> 00:07:29,405
A razão pela qual eu estou fazendo isso é que eu quero primeiro modificar o objeto dishcopy,

100
00:07:29,405 --> 00:07:32,285
então eu quero postar isso no servidor,

101
00:07:32,285 --> 00:07:35,060
e então quando o servidor responder de volta com

102
00:07:35,060 --> 00:07:37,850
a informação do prato modificada para o lado do servidor,

103
00:07:37,850 --> 00:07:41,715
então eu vou persistir essa informação no prato aqui.

104
00:07:41,715 --> 00:07:44,750
Então, depois de fazer o dishcopy aqui,

105
00:07:44,750 --> 00:07:54,735
então vamos dizer this.dishservice.putdish,

106
00:07:54,735 --> 00:07:57,900
e então vamos fornecer ao putdish

107
00:07:57,900 --> 00:08:04,250
a dishcopy como o parâmetro

108
00:08:04,250 --> 00:08:09,110
porque a dishcopy contém a versão modificada do prato aqui.

109
00:08:09,110 --> 00:08:10,955
Então, vamos dizer dishcopy,

110
00:08:10,955 --> 00:08:16,600
e, em seguida, quando recebermos a resposta do lado do servidor assim,

111
00:08:16,600 --> 00:08:22,255
no subscrito, vamos dizer Dish e aí mesmo,

112
00:08:22,255 --> 00:08:26,655
vamos lidar com o prato de entrada aqui.

113
00:08:26,655 --> 00:08:31,855
Então, aqui, vamos dizer subscrever Dish e, em seguida, vamos dizer,

114
00:08:31,855 --> 00:08:36,435
this.dish igual ao prato aqui,

115
00:08:36,435 --> 00:08:45,910
e por uma questão de completude,

116
00:08:45,910 --> 00:08:49,380
Eu também vou persistir a mesma informação na dishcopy aqui.

117
00:08:49,380 --> 00:08:52,320
Agora, se houver um erro,

118
00:08:52,320 --> 00:08:54,120
então terá que handleError.

119
00:08:54,120 --> 00:08:57,625
Então, para handleError, diremos,

120
00:08:57,625 --> 00:09:03,080
errmess, e então nesse ponto,

121
00:09:03,080 --> 00:09:07,040
vamos definir que this.dish para null,

122
00:09:07,040 --> 00:09:14,330
e, em seguida, este dishcopy também para null porque agora o prato não é válido,

123
00:09:14,330 --> 00:09:19,595
e então vamos dizer this.errmess é

124
00:09:19,595 --> 00:09:27,755
qualquer errmess, é isso.

125
00:09:27,755 --> 00:09:31,445
Essa é a modificação que faremos no método onSubmit.

126
00:09:31,445 --> 00:09:34,695
Então, usando o método this.dishservice.putdish,

127
00:09:34,695 --> 00:09:38,500
estamos enviando o dishcopy atualizado aqui,

128
00:09:38,500 --> 00:09:39,685
não o prato aqui,

129
00:09:39,685 --> 00:09:43,965
e então quando o servidor responder de volta para nós com o prato modificado,

130
00:09:43,965 --> 00:09:47,605
nesse ponto, vamos persistir a informação no this.dish.

131
00:09:47,605 --> 00:09:49,025
Para que nesse ponto,

132
00:09:49,025 --> 00:09:54,590
nossa interface será atualizada com a versão atualizada para Dish,

133
00:09:54,590 --> 00:09:57,560
Eu também estou persistindo a mesma informação para o dishcopy,

134
00:09:57,560 --> 00:09:59,180
e, em seguida, se eu encontrar um erro,

135
00:09:59,180 --> 00:10:02,585
então eu vou definir o this.dish para null e o this.dishcopy para null

136
00:10:02,585 --> 00:10:06,680
e, em seguida, configurar a mensagem de erro apropriadamente aqui.

137
00:10:06,680 --> 00:10:09,980
Então é isso. Vamos salvar as alterações e, em seguida, ir e

138
00:10:09,980 --> 00:10:14,100
dar uma olhada em nosso aplicativo no navegador.

139
00:10:14,230 --> 00:10:19,050
Salvando as alterações, vamos voltar ao navegador.

140
00:10:19,050 --> 00:10:27,785
Vá para o navegador, vamos agora para o menu e, em seguida, ir para um prato específico aqui.

141
00:10:27,785 --> 00:10:30,245
Para o prato específico,

142
00:10:30,245 --> 00:10:32,685
vamos postar um comentário aqui.

143
00:10:32,685 --> 00:10:41,870
Então, deixe-me postar um comentário aqui com uma classificação aqui.

144
00:10:44,430 --> 00:10:48,815
Então, como você vê, à medida que o comentário se torna válido,

145
00:10:48,815 --> 00:10:52,370
a visualização do comentário aparece lá em cima.

146
00:10:52,370 --> 00:10:54,950
Vamos agora enviar este comentário.

147
00:10:54,950 --> 00:10:56,520
Quando você enviar o comentário,

148
00:10:56,520 --> 00:11:02,160
você verá imediatamente que o comentário acabou de ser postado em minha lista de pratos.

149
00:11:02,160 --> 00:11:05,645
Agora, mais cedo, se você atualizar a exibição,

150
00:11:05,645 --> 00:11:07,880
então este comentário desapareceria.

151
00:11:07,880 --> 00:11:13,250
Deixe-me agora atualizar a vista e, em seguida, você vai notar que o comentário ainda vai

152
00:11:13,250 --> 00:11:18,630
fazer parte da lista de pratos aqui.

153
00:11:18,630 --> 00:11:20,190
Então, como você pode ver aqui,

154
00:11:20,190 --> 00:11:22,310
o comentário ainda existe aqui.

155
00:11:22,310 --> 00:11:27,530
Para mostrar ainda mais que o comentário foi persistido no lado do servidor,

156
00:11:27,530 --> 00:11:31,440
vamos ver o log do servidor no terminal.

157
00:11:31,440 --> 00:11:33,810
Voltando para os terminais,

158
00:11:33,810 --> 00:11:36,710
agora veremos que no log do terminal,

159
00:11:36,710 --> 00:11:41,910
você vê um novo método PUT /dishes/0.

160
00:11:41,910 --> 00:11:45,950
Então, isso mostra que o Dish modificado

161
00:11:45,950 --> 00:11:50,050
foi persistido de volta para o servidor ali mesmo e o depois disso,

162
00:11:50,050 --> 00:11:53,170
é claro que temos os pratos refrescando

163
00:11:53,170 --> 00:11:55,975
a interface do usuário e é por isso que estamos

164
00:11:55,975 --> 00:11:59,485
buscar as informações dos pratos novamente do lado do servidor.

165
00:11:59,485 --> 00:12:03,640
Então, isso mostra que somos capazes de usar

166
00:12:03,640 --> 00:12:08,580
a operação HTTP PUT para persistir o prato modificado para o servidor,

167
00:12:08,580 --> 00:12:10,810
e, em seguida, quando recebemos o prato atualizado,

168
00:12:10,810 --> 00:12:14,025
somos capazes de atualizar a interface do usuário correspondentemente.

169
00:12:14,025 --> 00:12:17,240
Com isso, completamos este exercício.

170
00:12:17,240 --> 00:12:21,380
Este é um bom momento para você fazer um commit GET com a mensagem,

171
00:12:21,380 --> 00:12:24,300
salvando as alterações neste servidor.