1 00:00:03,740 --> 00:00:11,475 Nous avons déjà vu l'utilisation des opérations HTTP get dans les deux exercices précédents, 2 00:00:11,475 --> 00:00:14,310 où nous pourrons aller chercher les données de 3 00:00:14,310 --> 00:00:17,505 le serveur et les utiliser dans notre application Angular. 4 00:00:17,505 --> 00:00:23,159 Mais il y a des situations où vous voulez pouvoir publier de nouvelles données sur le serveur, 5 00:00:23,159 --> 00:00:26,160 ou modifier les données existantes sur le serveur, 6 00:00:26,160 --> 00:00:27,950 ou même supprimer les données. 7 00:00:27,950 --> 00:00:30,480 C'est donc là que les opérations de post, 8 00:00:30,480 --> 00:00:35,895 mettre et supprimer de HTTP nous permettent d'effectuer cela. 9 00:00:35,895 --> 00:00:41,540 Dans cet exercice, nous allons examiner l'utilisation de l'opération put du client HTTP 10 00:00:41,540 --> 00:00:48,735 qui nous permet de modifier un plat existant côté serveur. 11 00:00:48,735 --> 00:00:50,715 Maintenant, pourquoi devrions-nous faire ça ? 12 00:00:50,715 --> 00:00:53,500 Vous avez vu que dans l'un des exercices précédents, 13 00:00:53,500 --> 00:00:57,230 nous avons permis à l'utilisateur de poster un commentaire sur un Dish, 14 00:00:57,230 --> 00:01:01,825 et ensuite nous avons pu insérer le commentaire dans l'objet Dish. 15 00:01:01,825 --> 00:01:08,160 Maintenant, nous voulons conserver cette information de plat sur le serveur, 16 00:01:08,160 --> 00:01:10,570 le plat modifié sur le serveur. 17 00:01:10,570 --> 00:01:15,955 C'est là que l'utilisation de l'opération HTTP PUT vient à notre secours. 18 00:01:15,955 --> 00:01:18,345 Donc, en utilisant l'opération HTTP PUT, 19 00:01:18,345 --> 00:01:23,360 nous sommes en mesure de renvoyer le Dish modifié au serveur puis de modifier 20 00:01:23,360 --> 00:01:26,750 les informations Dish existantes sur le serveur afin que 21 00:01:26,750 --> 00:01:31,460 le commentaire nouvellement ajouté puisse être conservé côté serveur. 22 00:01:31,460 --> 00:01:35,899 Ainsi, lorsque l'information est récupérée à une date ultérieure, 23 00:01:35,899 --> 00:01:41,770 le commentaire nouvellement ajouté sera présent dans le cadre de l'information Dish. 24 00:01:41,770 --> 00:01:44,770 Donc, voici ce que nous allons explorer dans cet exercice, 25 00:01:44,770 --> 00:01:48,225 où nous allons examiner l'enregistrement des modifications sur le serveur. 26 00:01:48,225 --> 00:01:50,280 Alors, comment pouvons-nous faire ça ? 27 00:01:50,280 --> 00:01:53,625 Examinons cela dans l'exercice. 28 00:01:53,625 --> 00:01:58,730 Pour nous permettre d'enregistrer les modifications apportées au Dish sur le serveur, 29 00:01:58,730 --> 00:02:02,765 permettez-moi d'introduire une nouvelle méthode dans le service Dish ici. 30 00:02:02,765 --> 00:02:09,040 Maintenant, nous allons ajouter une nouvelle méthode appelée PutDish au serveur. 31 00:02:09,040 --> 00:02:11,335 Alors, comment fonctionne la méthode PutDish ? 32 00:02:11,335 --> 00:02:17,920 Donc, permettez-moi d'introduire la méthode PutDish ici qui reçoit évidemment le plat 33 00:02:17,920 --> 00:02:25,370 modifié comme paramètre et ensuite il retournera un observable de type Dish. 34 00:02:25,370 --> 00:02:29,980 Donc, cela retournera le Dish qui a été mis sur le côté serveur. 35 00:02:29,980 --> 00:02:33,690 Maintenant, une fois le Dish modifié du côté serveur, 36 00:02:33,690 --> 00:02:36,735 les informations Dish modifiées seront renvoyées par le serveur, 37 00:02:36,735 --> 00:02:39,275 et ensuite ce Dish modifié sera remis 38 00:02:39,275 --> 00:02:42,330 au client afin que le client puisse intégrer cela, 39 00:02:42,330 --> 00:02:48,605 et mettre à jour l'interface utilisateur pour refléter le changement apporté au Plat. 40 00:02:48,605 --> 00:02:52,010 Maintenant, évidemment, nous ne voulons pas refléter le changement de 41 00:02:52,010 --> 00:02:57,300 l'interface utilisateur tant que les informations Dish ne sont pas enregistrées côté serveur. 42 00:02:57,300 --> 00:03:00,245 Donc, c'est là que nous allons utiliser 43 00:03:00,245 --> 00:03:05,265 la méthode PutDish que nous introduisons dans le service Dish. 44 00:03:05,265 --> 00:03:07,730 Alors, comment concevons-nous la méthode PutDish ? 45 00:03:07,730 --> 00:03:15,785 Donc, la première chose que nous devons faire est de configurer des options HTTP afin que nous informions 46 00:03:15,785 --> 00:03:21,975 le serveur sur ce que 47 00:03:21,975 --> 00:03:26,565 est envoyé dans le message ici. 48 00:03:26,565 --> 00:03:29,880 Donc, nous allons configurer quelques informations d'en-têtes ici. 49 00:03:29,880 --> 00:03:36,345 Donc, pour les en-têtes, nous allons configurer de nouveaux HttpHeaders ici, 50 00:03:36,345 --> 00:03:39,060 et dans les nouveaux HttpHeaders, 51 00:03:39,060 --> 00:03:43,050 nous allons configurer l'en-tête comme 52 00:03:43,050 --> 00:03:49,940 Content-Type de l'application de type JSON. 53 00:03:49,940 --> 00:03:56,135 Donc, nous spécifions à notre serveur que le message de requête entrant 54 00:03:56,135 --> 00:03:58,730 contient les informations sous la forme de 55 00:03:58,730 --> 00:04:02,840 un objet json dans le corps du message de requête entrant. 56 00:04:02,840 --> 00:04:04,865 Ainsi, le serveur pourra extraire 57 00:04:04,865 --> 00:04:09,165 les informations Dish du corps du message, l'analyser, 58 00:04:09,165 --> 00:04:13,200 et ensuite persister le Dish modifié au serveur, 59 00:04:13,200 --> 00:04:19,260 , puis renvoyer les informations Dish mises à jour du côté serveur. 60 00:04:19,260 --> 00:04:22,025 Maintenant, une fois que nous avons configuré les options ici, 61 00:04:22,025 --> 00:04:24,295 alors nous allons utiliser 62 00:04:24,295 --> 00:04:29,990 le client HTTP et ensuite 63 00:04:29,990 --> 00:04:36,030 faire un put qui porte évidemment le Dish dans le corps du message, 64 00:04:36,030 --> 00:04:47,385 et ensuite nous allons spécifier baseUrl+plats et +dish.id. 65 00:04:47,385 --> 00:04:53,520 Donc, c'est l'URL à laquelle nous envoyons l'opération de put aussi, 66 00:04:53,520 --> 00:04:57,775 baseUrl+'Dishes/ '+ dish.id. 67 00:04:57,775 --> 00:05:01,130 Donc, à partir de vos connaissances API REST, 68 00:05:01,130 --> 00:05:05,960 vous verrez pourquoi nous faisons une opération de mise à ce point final. 69 00:05:05,960 --> 00:05:09,500 Ensuite, le deuxième paramètre est le Dish lui-même que nous 70 00:05:09,500 --> 00:05:13,990 recevons comme paramètre entrant à la méthode PutDish, 71 00:05:13,990 --> 00:05:23,770 et ensuite le troisième paramètre est les HttpOptions que nous venons de mettre en place il y a peu de temps. 72 00:05:23,770 --> 00:05:26,790 Ensuite, une fois que nous aurons obtenu cela, 73 00:05:26,790 --> 00:05:29,775 , alors nous serons en mesure de canalisation 74 00:05:29,775 --> 00:05:37,405 toute erreur à notre méthode HandleError hear, c'est tout. 75 00:05:37,405 --> 00:05:43,550 Donc, cet appel à la mise sur le côté serveur permettra à 76 00:05:43,550 --> 00:05:46,880 les informations Dish d'être persistantes sur le côté serveur, puis le serveur 77 00:05:46,880 --> 00:05:50,430 nous retournera les informations de plat mises à jour, 78 00:05:50,430 --> 00:05:55,805 et ensuite nous reviendrons à notre composant 79 00:05:55,805 --> 00:06:01,705 où le composant pourra ensuite l'utiliser pour rendre les informations de Dish mises à jour. 80 00:06:01,705 --> 00:06:04,835 Donc, c'est la modification que nous faisons au service Dish. 81 00:06:04,835 --> 00:06:08,220 Maintenant, allez dans le composant dishdetail, 82 00:06:08,450 --> 00:06:11,130 dans le composant dishdetail, 83 00:06:11,130 --> 00:06:18,185 laissez-moi introduire une autre variable ici 84 00:06:18,185 --> 00:06:21,590 appelée dishcopy qui contiendra 85 00:06:21,590 --> 00:06:26,570 une copie du Dish modifié jusqu'à ce qu'il soit posté sur le serveur. 86 00:06:26,570 --> 00:06:29,890 Donc, la copie du plat contiendra le plat modifié. 87 00:06:29,890 --> 00:06:33,875 Donc, entrer dans les paramètres de route ici. 88 00:06:33,875 --> 00:06:41,305 Donc, ce que nous faisons est chaque fois que l'information du plat est modifiée ici dans les paramètres de route, 89 00:06:41,305 --> 00:06:46,355 aussi avec l'enregistrement de l'information du plat dans ce .dish, 90 00:06:46,355 --> 00:06:52,470 Je vais également enregistrer une copie pour 91 00:06:52,470 --> 00:06:55,980 la copie du plat aussi afin que le plat et 92 00:06:55,980 --> 00:07:01,460 la copie du plat contiennent la copie exacte du même plat ici. 93 00:07:01,460 --> 00:07:04,370 Donc, c'est la modification que nous allons faire ici. 94 00:07:04,370 --> 00:07:06,990 Maintenant, dans la méthode onSubmit, 95 00:07:06,990 --> 00:07:09,665 donc ici, nous avons la méthode onSubmit ici, 96 00:07:09,665 --> 00:07:13,310 où nous modifions l'objet ici. 97 00:07:13,310 --> 00:07:20,220 Donc, ici, vous remarquez que nous avons poussé le commentaire à l'objet Dish ici, 98 00:07:20,220 --> 00:07:24,945 plutôt, nous allons maintenant pousser le commentaire à l'objet dishcopy. 99 00:07:24,945 --> 00:07:29,405 La raison pour laquelle je fais ceci est que je veux d'abord modifier l'objet dishcopy, 100 00:07:29,405 --> 00:07:32,285 puis je veux poster cela sur le serveur, 101 00:07:32,285 --> 00:07:35,060 et ensuite quand le serveur répondra avec 102 00:07:35,060 --> 00:07:37,850 les informations de plat modifiées sur le côté serveur, 103 00:07:37,850 --> 00:07:41,715 alors je persisterai cette information dans le Dish ici. 104 00:07:41,715 --> 00:07:44,750 Donc, après avoir fait la copie de la vaisselle ici, 105 00:07:44,750 --> 00:07:54,735 alors nous dirons cela.Dishservice.Putdish, 106 00:07:54,735 --> 00:07:57,900 et ensuite nous fournirons au PutDish 107 00:07:57,900 --> 00:08:04,250 la copie de la vaisselle comme paramètre 108 00:08:04,250 --> 00:08:09,110 parce que la copie contient la version modifiée du plat ici. 109 00:08:09,110 --> 00:08:10,955 Donc, nous allons dire dishcopy, 110 00:08:10,955 --> 00:08:16,600 et quand nous recevrons la réponse du côté serveur donc, 111 00:08:16,600 --> 00:08:22,255 dans l'abonnement, nous dirons Dish et juste là, 112 00:08:22,255 --> 00:08:26,655 nous allons gérer le Dish entrant ici. 113 00:08:26,655 --> 00:08:31,855 Donc, ici, nous dirons abonner Dish et ensuite nous dirons, 114 00:08:31,855 --> 00:08:36,435 ce .dish égal à plat ici, 115 00:08:36,435 --> 00:08:45,910 et pour des raisons d'exhaustivité, 116 00:08:45,910 --> 00:08:49,380 Je vais aussi persister la même information dans la copie du plat ici. 117 00:08:49,380 --> 00:08:52,320 Maintenant, s'il y a une erreur, 118 00:08:52,320 --> 00:08:54,120 devra alors handleError. 119 00:08:54,120 --> 00:08:57,625 Donc, pour HandleError, nous allons dire, 120 00:08:57,625 --> 00:09:03,080 errmess, et puis à ce moment-là, 121 00:09:03,080 --> 00:09:07,040 nous allons mettre ce .dish à null, 122 00:09:07,040 --> 00:09:14,330 et ensuite ce plat aussi à null parce que maintenant le plat n'est pas valide, 123 00:09:14,330 --> 00:09:19,595 et ensuite nous dirons ceci .errmess est 124 00:09:19,595 --> 00:09:27,755 n'importe quel errmess, c'est tout. 125 00:09:27,755 --> 00:09:31,445 C'est la modification que nous allons apporter à la méthode onSubmit. 126 00:09:31,445 --> 00:09:34,695 Donc, en utilisant la méthode this.Dishservice.Putdish, 127 00:09:34,695 --> 00:09:38,500 nous envoyons ici la copie de vaisselle mise à jour, 128 00:09:38,500 --> 00:09:39,685 pas le Dish ici, 129 00:09:39,685 --> 00:09:43,965 et quand le serveur nous répondra avec le Dish modifié, 130 00:09:43,965 --> 00:09:47,605 à ce moment-là, nous persisterons les informations dans le this.dish. 131 00:09:47,605 --> 00:09:49,025 Alors qu'à ce moment-là, 132 00:09:49,025 --> 00:09:54,590 notre interface utilisateur sera mise à jour avec la version mise à jour de Dish, 133 00:09:54,590 --> 00:09:57,560 Je persiste également les mêmes informations à la dishcopy, 134 00:09:57,560 --> 00:09:59,180 et puis si je rencontre une erreur, 135 00:09:59,180 --> 00:10:02,585 alors je vais définir le this.dish à null et le this.dishcopy à null 136 00:10:02,585 --> 00:10:06,680 et ensuite configurer le message d'erreur de façon appropriée ici. 137 00:10:06,680 --> 00:10:09,980 Alors c'est tout. Sauvegardons les modifications, puis allez et 138 00:10:09,980 --> 00:10:14,100 jeter un oeil à notre application dans le navigateur. 139 00:10:14,230 --> 00:10:19,050 Sauvegarder les modifications, revenons au navigateur. 140 00:10:19,050 --> 00:10:27,785 Allez dans le navigateur, allons maintenant au menu, puis allez à un plat spécifique ici. 141 00:10:27,785 --> 00:10:30,245 Pour le Dish spécifique, 142 00:10:30,245 --> 00:10:32,685 posons un commentaire ici. 143 00:10:32,685 --> 00:10:41,870 Alors, laissez-moi poster un commentaire ici avec une note ici. 144 00:10:44,430 --> 00:10:48,815 Donc, comme vous le voyez, comme le commentaire devient valide, 145 00:10:48,815 --> 00:10:52,370 l'aperçu du commentaire apparaît là. 146 00:10:52,370 --> 00:10:54,950 Soumettons maintenant ce commentaire. 147 00:10:54,950 --> 00:10:56,520 Lorsque vous soumettez le commentaire, 148 00:10:56,520 --> 00:11:02,160 vous verrez immédiatement que le commentaire vient d'être posté dans ma liste de plats. 149 00:11:02,160 --> 00:11:05,645 Maintenant, plus tôt, si vous actualisez la vue, 150 00:11:05,645 --> 00:11:07,880 alors ce commentaire disparaîtrait. 151 00:11:07,880 --> 00:11:13,250 Laissez-moi maintenant rafraîchir la vue et puis vous remarquerez que le commentaire sera encore 152 00:11:13,250 --> 00:11:18,630 faire partie de la liste des plats ici. 153 00:11:18,630 --> 00:11:20,190 Donc, comme vous pouvez le voir ici, 154 00:11:20,190 --> 00:11:22,310 le commentaire existe toujours ici. 155 00:11:22,310 --> 00:11:27,530 Pour vous montrer qu'en effet le commentaire a été persistant côté serveur, 156 00:11:27,530 --> 00:11:31,440 allons regarder le journal du serveur dans le terminal. 157 00:11:31,440 --> 00:11:33,810 En revenant aux terminaux, 158 00:11:33,810 --> 00:11:36,710 nous allons maintenant voir que dans le journal du terminal, 159 00:11:36,710 --> 00:11:41,910 vous voyez une nouvelle méthode PUT /dishes/0. 160 00:11:41,910 --> 00:11:45,950 Donc, cela montre que le Dish 161 00:11:45,950 --> 00:11:50,050 modifié a été maintenu sur le serveur juste là et après cela, 162 00:11:50,050 --> 00:11:53,170 bien sûr nous avons obtenu la vaisselle en rafraîchissant 163 00:11:53,170 --> 00:11:55,975 l'interface utilisateur et c'est pourquoi nous sommes 164 00:11:55,975 --> 00:11:59,485 récupérant à nouveau les informations sur les plats du côté serveur. 165 00:11:59,485 --> 00:12:03,640 Donc, cela montre que nous sommes en mesure d'utiliser 166 00:12:03,640 --> 00:12:08,580 l'opération HTTP PUT pour persister le Dish modifié sur le serveur, 167 00:12:08,580 --> 00:12:10,810 et quand nous recevons le plat mis à jour, 168 00:12:10,810 --> 00:12:14,025 nous sommes en mesure de mettre à jour l'interface utilisateur en conséquence. 169 00:12:14,025 --> 00:12:17,240 Avec cela, nous terminons cet exercice. 170 00:12:17,240 --> 00:12:21,380 C'est le bon moment pour vous de faire un commit GET avec le message, 171 00:12:21,380 --> 00:12:24,300 enregistrement des modifications sur ce serveur.