1
00:00:03,740 --> 00:00:11,475
Abbiamo già visto l'uso delle operazioni HTTP get nei due esercizi precedenti,

2
00:00:11,475 --> 00:00:14,310
dove saremo in grado di andare a recuperare i dati dal

3
00:00:14,310 --> 00:00:17,505
server e utilizzarlo all'interno della nostra applicazione angolare.

4
00:00:17,505 --> 00:00:23,159
Ma ci sono situazioni in cui si desidera essere in grado di pubblicare nuovi dati sul server,

5
00:00:23,159 --> 00:00:26,160
o di modificare i dati esistenti sul server,

6
00:00:26,160 --> 00:00:27,950
o addirittura eliminare i dati.

7
00:00:27,950 --> 00:00:30,480
Quindi è qui che le

8
00:00:30,480 --> 00:00:35,895
operazioni di post, put e delete di HTTP ci consentono di eseguire questo.

9
00:00:35,895 --> 00:00:41,540
In questo esercizio, vedremo l'uso dell'operazione put dal

10
00:00:41,540 --> 00:00:48,735
client HTTP che ci permette di modificare un piatto esistente sul lato server.

11
00:00:48,735 --> 00:00:50,715
Ora, perche' dovremmo farlo?

12
00:00:50,715 --> 00:00:53,500
Hai visto che in uno degli esercizi precedenti,

13
00:00:53,500 --> 00:00:57,230
abbiamo permesso all'utente di pubblicare un commento su un piatto,

14
00:00:57,230 --> 00:01:01,825
e poi siamo stati in grado di inserire il commento nell'oggetto Dish.

15
00:01:01,825 --> 00:01:08,160
Ora, vogliamo mantenere queste informazioni piatto sul server,

16
00:01:08,160 --> 00:01:10,570
il piatto modificato al server.

17
00:01:10,570 --> 00:01:15,955
Questo è dove l'uso dell'operazione HTTP PUT viene in nostro soccorso.

18
00:01:15,955 --> 00:01:18,345
Quindi, utilizzando l'operazione HTTP PUT,

19
00:01:18,345 --> 00:01:23,360
siamo in grado di inviare il Dish modificato al server e quindi modificare

20
00:01:23,360 --> 00:01:26,750
le informazioni Dish esistenti sul server in modo che

21
00:01:26,750 --> 00:01:31,460
il commento appena aggiunto possa essere persistente sul lato server.

22
00:01:31,460 --> 00:01:35,899
In tal modo, quando le informazioni vengono recuperate in un secondo momento,

23
00:01:35,899 --> 00:01:41,770
il commento appena aggiunto sarà presente come parte delle informazioni Dish.

24
00:01:41,770 --> 00:01:44,770
Quindi, questo è ciò che esploreremo in questo esercizio,

25
00:01:44,770 --> 00:01:48,225
dove esamineremo il salvataggio delle modifiche al server.

26
00:01:48,225 --> 00:01:50,280
Allora, come facciamo a farlo?

27
00:01:50,280 --> 00:01:53,625
Esaminiamo questo nell'esercizio.

28
00:01:53,625 --> 00:01:58,730
Per permetterci di essere in grado di salvare le modifiche al Dish sul server,

29
00:01:58,730 --> 00:02:02,765
lasciatemi introdurre un nuovo metodo nel servizio Dish qui.

30
00:02:02,765 --> 00:02:09,040
Ora, aggiungeremo un nuovo metodo chiamato come putDish al server.

31
00:02:09,040 --> 00:02:11,335
Quindi, come funziona il metodo PutDish?

32
00:02:11,335 --> 00:02:17,920
Quindi, lasciami introdurre il metodo putDish qui che ovviamente riceve il piatto modificato

33
00:02:17,920 --> 00:02:25,370
come parametro e quindi restituirà un osservabile di tipo Dish.

34
00:02:25,370 --> 00:02:29,980
Quindi, questo restituirà il piatto che è stato messo nel lato server.

35
00:02:29,980 --> 00:02:33,690
Ora, una volta che il Dish è stato

36
00:02:33,690 --> 00:02:36,735
modificato sul lato server, le informazioni Dish modificate verranno inviate dal server,

37
00:02:36,735 --> 00:02:39,275
e quindi questo Dish modificato verrà

38
00:02:39,275 --> 00:02:42,330
restituito al client in modo che il client possa integrarlo,

39
00:02:42,330 --> 00:02:48,605
e quindi aggiornare l'interfaccia utente per riflettere la modifica al Dish.

40
00:02:48,605 --> 00:02:52,010
Ora, ovviamente, non vogliamo riflettere la modifica all'

41
00:02:52,010 --> 00:02:57,300
interfaccia utente finché le informazioni Dish non vengono salvate sul lato server.

42
00:02:57,300 --> 00:03:00,245
Quindi, è lì che faremo uso del

43
00:03:00,245 --> 00:03:05,265
metodo PutDish che introduciamo nel servizio Dish.

44
00:03:05,265 --> 00:03:07,730
Quindi, come progettiamo il metodo PutDish?

45
00:03:07,730 --> 00:03:15,785
Quindi, la prima cosa che dobbiamo fare è impostare alcune opzioni HTTP in modo da informare

46
00:03:15,785 --> 00:03:21,975
il server su ciò che

47
00:03:21,975 --> 00:03:26,565
viene inviato nel messaggio qui.

48
00:03:26,565 --> 00:03:29,880
Quindi, imposteremo alcune informazioni sulle intestazioni qui.

49
00:03:29,880 --> 00:03:36,345
Quindi, per le intestazioni, imposteremo nuovi HttpHeaders qui,

50
00:03:36,345 --> 00:03:39,060
e nel nuovo HttpHeaders,

51
00:03:39,060 --> 00:03:43,050
impostiamo l'intestazione come

52
00:03:43,050 --> 00:03:49,940
Content-Type dell'applicazione di tipo JSON.

53
00:03:49,940 --> 00:03:56,135
Quindi, stiamo specificando al nostro server che il messaggio di richiesta in arrivo

54
00:03:56,135 --> 00:03:58,730
contiene le informazioni sotto forma di

55
00:03:58,730 --> 00:04:02,840
un oggetto json nel corpo del messaggio di richiesta in arrivo.

56
00:04:02,840 --> 00:04:04,865
Quindi, il server sarà in grado di estrarre

57
00:04:04,865 --> 00:04:09,165
le informazioni Dish dal corpo del messaggio, analizzarle

58
00:04:09,165 --> 00:04:13,200
e quindi essere in grado di mantenere il Dish modificato al server,

59
00:04:13,200 --> 00:04:19,260
e quindi inviare indietro le informazioni Dish aggiornate dal lato server.

60
00:04:19,260 --> 00:04:22,025
Ora, una volta che abbiamo impostato le opzioni qui,

61
00:04:22,025 --> 00:04:24,295
allora useremo

62
00:04:24,295 --> 00:04:29,990
il client HTTP e poi

63
00:04:29,990 --> 00:04:36,030
fare un put che ovviamente porta il piatto nel corpo del messaggio,

64
00:04:36,030 --> 00:04:47,385
e poi specificheremo BaseUrl+piatti e +dish.id.

65
00:04:47,385 --> 00:04:53,520
Quindi, questo è l'URL a cui stiamo inviando l'operazione put così,

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

67
00:04:57,775 --> 00:05:01,130
Quindi, dalla tua conoscenza API REST,

68
00:05:01,130 --> 00:05:05,960
vedrai perché facciamo un'operazione put a questo punto finale.

69
00:05:05,960 --> 00:05:09,500
Quindi il secondo parametro è il Dish stesso che

70
00:05:09,500 --> 00:05:13,990
riceviamo come parametro in arrivo per il metodo putDish,

71
00:05:13,990 --> 00:05:23,770
e quindi il terzo parametro è il httpOptions che abbiamo appena impostato poco fa.

72
00:05:23,770 --> 00:05:26,790
Quindi, una volta ottenuto che,

73
00:05:26,790 --> 00:05:29,775
allora saremo in grado di reindirizzare

74
00:05:29,775 --> 00:05:37,405
qualsiasi errore al nostro metodo HandleError sentire, il gioco è fatto.

75
00:05:37,405 --> 00:05:43,550
Quindi, questa chiamata al put sul lato server consentirà

76
00:05:43,550 --> 00:05:46,880
alle informazioni Dish di essere persistenti sul lato server e quindi il server

77
00:05:46,880 --> 00:05:50,430
restituirà le informazioni del piatto aggiornate a noi,

78
00:05:50,430 --> 00:05:55,805
e poi lo restituiremo al nostro componente

79
00:05:55,805 --> 00:06:01,705
in cui il componente può quindi usarlo per rendere il informazioni aggiornate sui piatti.

80
00:06:01,705 --> 00:06:04,835
Quindi, questa è la modifica che facciamo al servizio Dish.

81
00:06:04,835 --> 00:06:08,220
Ora, vai nel componente dishdetail,

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

83
00:06:11,130 --> 00:06:18,185
lasciami introdurre un'altra variabile qui

84
00:06:18,185 --> 00:06:21,590
chiamata dishcopy che conterrà

85
00:06:21,590 --> 00:06:26,570
una copia del Dish modificato fino a quando non verrà pubblicato sul server.

86
00:06:26,570 --> 00:06:29,890
Quindi, la copia conterrà il piatto modificato.

87
00:06:29,890 --> 00:06:33,875
Quindi, andando nei parametri del percorso qui.

88
00:06:33,875 --> 00:06:41,305
Quindi, quello che facciamo è ogni volta che le informazioni del piatto vengono modificate qui nei parametri del percorso,

89
00:06:41,305 --> 00:06:46,355
anche insieme a salvare le informazioni del piatto in this.dish,

90
00:06:46,355 --> 00:06:52,470
salverò anche una copia

91
00:06:52,470 --> 00:06:55,980
nella dishcopy anche in modo che sia il Dish che

92
00:06:55,980 --> 00:07:01,460
la dishcopy contengano la copia esatta dello stesso piatto qui.

93
00:07:01,460 --> 00:07:04,370
Quindi, questa è la modifica che faremo qui.

94
00:07:04,370 --> 00:07:06,990
Ora, nel metodo onSubmit,

95
00:07:06,990 --> 00:07:09,665
quindi qui abbiamo il metodo onSubmit qui,

96
00:07:09,665 --> 00:07:13,310
dove stiamo modificando l'oggetto qui.

97
00:07:13,310 --> 00:07:20,220
Quindi, qui, si nota che in origine stavamo spingendo il commento all'oggetto Dish qui

98
00:07:20,220 --> 00:07:24,945
, invece, ora spingeremo il commento all'oggetto dishcopy.

99
00:07:24,945 --> 00:07:29,405
Il motivo per cui lo sto facendo è che voglio prima modificare l'oggetto dishcopy,

100
00:07:29,405 --> 00:07:32,285
quindi voglio postarlo sul server,

101
00:07:32,285 --> 00:07:35,060
e poi quando il server risponde con

102
00:07:35,060 --> 00:07:37,850
le informazioni del piatto modificate sul lato server,

103
00:07:37,850 --> 00:07:41,715
allora persisterò tali informazioni nel Dish qui.

104
00:07:41,715 --> 00:07:44,750
Quindi, dopo aver fatto il dishcopy qui,

105
00:07:44,750 --> 00:07:54,735
allora diremo questo.Dishservice.Putdish,

106
00:07:54,735 --> 00:07:57,900
e poi forniremo al putDish

107
00:07:57,900 --> 00:08:04,250
la dishcopy come parametro

108
00:08:04,250 --> 00:08:09,110
perché la dishcopy contiene la versione modificata del piatto qui.

109
00:08:09,110 --> 00:08:10,955
Quindi, diremo dishcopy,

110
00:08:10,955 --> 00:08:16,600
e poi quando riceviamo la risposta dal lato server, quindi,

111
00:08:16,600 --> 00:08:22,255
nella sottoscrizione, diremo Dish e proprio lì,

112
00:08:22,255 --> 00:08:26,655
gestiremo il piatto in arrivo qui.

113
00:08:26,655 --> 00:08:31,855
Quindi, qui dentro, diremo iscriviti piatto e poi diremo,

114
00:08:31,855 --> 00:08:36,435
questo.piatto uguale a piatto qui,

115
00:08:36,435 --> 00:08:45,910
e per completezza,

116
00:08:45,910 --> 00:08:49,380
continuerò anche le stesse informazioni nel dishcopy qui.

117
00:08:49,380 --> 00:08:52,320
Ora, se c'è un errore,

118
00:08:52,320 --> 00:08:54,120
allora dovrà HandleError.

119
00:08:54,120 --> 00:08:57,625
Quindi, per HandleError, diremo

120
00:08:57,625 --> 00:09:03,080
, errmess, e poi a quel punto,

121
00:09:03,080 --> 00:09:07,040
imposteremo che this.dish su null,

122
00:09:07,040 --> 00:09:14,330
e quindi il dishcopy anche su null perché in questo momento il piatto non è valido,

123
00:09:14,330 --> 00:09:19,595
e poi diremo this.Errmess è

124
00:09:19,595 --> 00:09:27,755
qualsiasi errore, è tutto.

125
00:09:27,755 --> 00:09:31,445
Questa è la modifica che faremo al metodo onSubmit.

126
00:09:31,445 --> 00:09:34,695
Quindi, usando il metodo this.dishservice.Putdish,

127
00:09:34,695 --> 00:09:38,500
stiamo inviando qui il dishcopy aggiornato,

128
00:09:38,500 --> 00:09:39,685
non il Dish qui,

129
00:09:39,685 --> 00:09:43,965
e poi quando il server ci risponde con il Dish modificato

130
00:09:43,965 --> 00:09:47,605
, a quel punto, persisteremo le informazioni nel this.dish. In

131
00:09:47,605 --> 00:09:49,025
modo che a quel punto, la

132
00:09:49,025 --> 00:09:54,590
nostra interfaccia utente verrà aggiornata con la versione aggiornata di Dish,

133
00:09:54,590 --> 00:09:57,560
sto anche persistendo le stesse informazioni per la dishcopy,

134
00:09:57,560 --> 00:09:59,180
e quindi se incontro un errore,

135
00:09:59,180 --> 00:10:02,585
allora imposterò this.dish su null e this.dishcopy su null

136
00:10:02,585 --> 00:10:06,680
e quindi imposterò il messaggio di errore in modo appropriato qui.

137
00:10:06,680 --> 00:10:09,980
Quindi questo è tutto. Salviamo le modifiche e poi andiamo a

138
00:10:09,980 --> 00:10:14,100
dare un'occhiata alla nostra applicazione nel browser.

139
00:10:14,230 --> 00:10:19,050
Salvando le modifiche, torniamo al browser.

140
00:10:19,050 --> 00:10:27,785
Vai nel browser, andiamo ora al menu e poi vai a un piatto specifico qui.

141
00:10:27,785 --> 00:10:30,245
Per il piatto specifico,

142
00:10:30,245 --> 00:10:32,685
postiamo un commento qui.

143
00:10:32,685 --> 00:10:41,870
Quindi, lasciatemi postare un commento qui con una valutazione qui.

144
00:10:44,430 --> 00:10:48,815
Quindi, come vedi, mentre il commento diventa valido,

145
00:10:48,815 --> 00:10:52,370
l'anteprima del commento viene visualizzata lassù.

146
00:10:52,370 --> 00:10:54,950
Proponiamo ora questo commento.

147
00:10:54,950 --> 00:10:56,520
Quando invii il commento,

148
00:10:56,520 --> 00:11:02,160
vedrai immediatamente che il commento è appena stato pubblicato nella mia lista di piatti.

149
00:11:02,160 --> 00:11:05,645
Ora, prima, se aggiorni la vista,

150
00:11:05,645 --> 00:11:07,880
allora questo commento scomparirebbe.

151
00:11:07,880 --> 00:11:13,250
Permettetemi ora di aggiornare la vista e poi noterete che il commento

152
00:11:13,250 --> 00:11:18,630
sarà ancora parte della lista dei piatti qui.

153
00:11:18,630 --> 00:11:20,190
Quindi, come puoi vedere qui,

154
00:11:20,190 --> 00:11:22,310
il commento esiste ancora qui.

155
00:11:22,310 --> 00:11:27,530
Per mostrarti ulteriormente che in effetti il commento è stato persistito sul lato server,

156
00:11:27,530 --> 00:11:31,440
andiamo a guardare il registro del server nel terminale.

157
00:11:31,440 --> 00:11:33,810
Tornando ai terminali,

158
00:11:33,810 --> 00:11:36,710
ora vedremo che nel registro del terminale,

159
00:11:36,710 --> 00:11:41,910
si vede un nuovo metodo PUT /dishes/0.

160
00:11:41,910 --> 00:11:45,950
Quindi, questo dimostra che il piatto modificato

161
00:11:45,950 --> 00:11:50,050
è stato persistito sul server proprio lì e dopo,

162
00:11:50,050 --> 00:11:53,170
ovviamente abbiamo ottenuto i piatti aggiornando

163
00:11:53,170 --> 00:11:55,975
l'interfaccia utente e quindi è per questo che stiamo

164
00:11:55,975 --> 00:11:59,485
recuperando le informazioni dei piatti dal lato server.

165
00:11:59,485 --> 00:12:03,640
Quindi, questo dimostra che siamo in grado di utilizzare

166
00:12:03,640 --> 00:12:08,580
l'operazione HTTP PUT per mantenere il piatto modificato sul server,

167
00:12:08,580 --> 00:12:10,810
e poi quando riceviamo il piatto aggiornato,

168
00:12:10,810 --> 00:12:14,025
siamo in grado di aggiornare l'interfaccia utente in modo corrispondente.

169
00:12:14,025 --> 00:12:17,240
Con questo, completiamo questo esercizio.

170
00:12:17,240 --> 00:12:21,380
Questo è un buon momento per fare un commit GET con il messaggio,

171
00:12:21,380 --> 00:12:24,300
salvando le modifiche a questo server.