1 00:00:03,860 --> 00:00:10,845 Enfin, nous voici à la quatrième et dernière affectation de ce cours. 2 00:00:10,845 --> 00:00:13,350 Que faisons-nous dans cette mission ? 3 00:00:13,350 --> 00:00:19,225 Nous allons explorer les sujets que nous avons abordés dans ce module particulier. 4 00:00:19,225 --> 00:00:23,255 Communication client-serveur, utilisation de l'API de repos, 5 00:00:23,255 --> 00:00:28,600 rectangulaires de repos et animations dans cette affectation particulière. 6 00:00:28,600 --> 00:00:32,360 Alors, quelles sont les différentes tâches de cette mission ? 7 00:00:32,360 --> 00:00:35,759 Cette mission sera composée de quatre tâches différentes. 8 00:00:35,759 --> 00:00:41,155 Explorons chacun d'eux dans les moindres détails, ensuite. 9 00:00:41,155 --> 00:00:45,170 Tout comme nous avons mis à jour les sondages de plat pour utiliser le client HTTP 10 00:00:45,170 --> 00:00:49,780 pour contacter le serveur d'API restante, 11 00:00:49,780 --> 00:00:56,380 votre première tâche dans cette mission est de mettre à jour le service de promotions afin que le service de promotion aille chercher les données 12 00:00:56,380 --> 00:01:03,320 requises sur les promotions du côté serveur. 13 00:01:03,320 --> 00:01:08,210 Donc, vous devez implémenter les trois méthodes qui obtiennent des promotions, 14 00:01:08,210 --> 00:01:11,315 obtenir la promotion en vedette et obtenir la promotion. 15 00:01:11,315 --> 00:01:13,310 Trois méthodes différentes là-bas, 16 00:01:13,310 --> 00:01:15,935 mais en particulier nous allons utiliser la promotion get featured 17 00:01:15,935 --> 00:01:19,760 pour obtenir les informations pour rendre 18 00:01:19,760 --> 00:01:23,090 les informations sur les promotions sur 19 00:01:23,090 --> 00:01:27,930 la page d'accueil de cette application angulaire particulière. 20 00:01:27,930 --> 00:01:29,210 Donc, dans la première tâche, 21 00:01:29,210 --> 00:01:34,175 vous devez mettre à jour le service de promotion pour utiliser le client HTTP et aussi 22 00:01:34,175 --> 00:01:36,380 mettre à jour le composant home pour utiliser 23 00:01:36,380 --> 00:01:39,530 le service de promotion pour récupérer les données du serveur, 24 00:01:39,530 --> 00:01:44,105 et ensuite rendre cette formation de promotion dans la page d'accueil. 25 00:01:44,105 --> 00:01:48,080 Votre deuxième tâche dans cette tâche est bien sûr, 26 00:01:48,080 --> 00:01:52,815 mettre à jour le service leader pour utiliser le client HTTP, oh, 27 00:01:52,815 --> 00:01:54,260 et récupérer les données de 28 00:01:54,260 --> 00:01:57,890 le serveur Json afin de rendre les informations sur les leaders. 29 00:01:57,890 --> 00:02:02,150 Donc, le leader en vedette ici devrait être rendu en utilisant le leader en vedette get 30 00:02:02,150 --> 00:02:09,640 du service leader pour récupérer les informations du serveur. 31 00:02:09,640 --> 00:02:12,380 De même, en allant à la page à propos, 32 00:02:12,380 --> 00:02:15,785 les informations sur le leadership de l'entreprise que nous 33 00:02:15,785 --> 00:02:19,670 rendons ici devraient être extraites du service leader 34 00:02:19,670 --> 00:02:22,895 en utilisant la méthode get leaders qui devrait utiliser le client HTTP 35 00:02:22,895 --> 00:02:27,555 pour aller chercher les données du côté serveur. 36 00:02:27,555 --> 00:02:32,735 De même, mettez à jour la méthode get leader dans le service leader. 37 00:02:32,735 --> 00:02:37,625 Donc, c'est la deuxième tâche de votre mission. 38 00:02:37,625 --> 00:02:43,160 Votre troisième tâche dans l'affectation est d'activer le formulaire de rétroaction, 39 00:02:43,160 --> 00:02:46,640 formulaire réactif que nous avons créé dans la page de contact. 40 00:02:46,640 --> 00:02:49,340 Donc, dans ce formulaire de rétroaction lorsque l'utilisateur 41 00:02:49,340 --> 00:02:53,420 soumet des informations valides et clique sur le bouton Envoyer, 42 00:02:53,420 --> 00:02:56,810 ces informations de formulaire de rétroaction doivent être fournies à 43 00:02:56,810 --> 00:02:59,120 un service de rétroaction que vous allez mettre en œuvre 44 00:02:59,120 --> 00:03:02,405 dans le cadre de la troisième tâche de cette mission. 45 00:03:02,405 --> 00:03:07,670 Le service de rétroaction prendra en charge une méthode de soumission de rétroaction qui 46 00:03:07,670 --> 00:03:13,565 prend les informations de formulaire envoyées par le composant contact, 47 00:03:13,565 --> 00:03:19,580 la méthode de soumission du composant conduite à leur service de rétroaction, 48 00:03:19,580 --> 00:03:23,465 , puis la méthode de soumission de rétroaction dans le service de rétroaction utilisera à son tour 49 00:03:23,465 --> 00:03:27,905 HTTP pour publier les données sur le serveur. 50 00:03:27,905 --> 00:03:36,110 La méthode post prend les informations de formulaire qui viennent en tant que paramètre pour cette méthode submit 51 00:03:36,110 --> 00:03:39,410 feedback, puis publie ces informations à 52 00:03:39,410 --> 00:03:46,205 l'URL de feedback sur notre site de serveur Json. 53 00:03:46,205 --> 00:03:50,960 La soumission d'informations à votre serveur ne sera pas instantanée. 54 00:03:50,960 --> 00:03:54,890 Donc, dans la quatrième tâche de cette mission, 55 00:03:54,890 --> 00:03:58,520 vous allez gérer le fait que la soumission de l'information 56 00:03:58,520 --> 00:04:02,450 du formulaire de rétroaction au serveur va prendre un certain temps, 57 00:04:02,450 --> 00:04:06,530 et ensuite une fois l'information soumise avec succès, 58 00:04:06,530 --> 00:04:12,050 vous allez inviter l'utilisateur avec la conformation du côté serveur. 59 00:04:12,050 --> 00:04:16,515 Alors, prenons ce formulaire et nous soumettrons le formulaire ici. 60 00:04:16,515 --> 00:04:22,110 Alors, permettez-moi de taper quelques informations dans le formulaire. 61 00:04:39,500 --> 00:04:42,110 Donc, une fois que l'utilisateur tape 62 00:04:42,110 --> 00:04:45,680 toutes les informations valides dans le formulaire, puis clique sur le bouton de soumission, 63 00:04:45,680 --> 00:04:50,540 vous enverrez ces informations via le service de commentaires au serveur pour être posté. 64 00:04:50,540 --> 00:04:53,560 Jusqu'à ce que le serveur vous réponde, 65 00:04:53,560 --> 00:05:01,805 , vous devriez afficher un spinner de progression à l'écran et une fois que les informations de feedback sont 66 00:05:01,805 --> 00:05:05,180 obtenues du côté serveur et que le côté serveur confirme que 67 00:05:05,180 --> 00:05:10,220 les informations du formulaire de feedback ont été envoyées avec succès du côté serveur. 68 00:05:10,220 --> 00:05:14,855 Donc, c'est là que lorsque vous appelez la méthode de soumission des commentaires, 69 00:05:14,855 --> 00:05:19,460 la méthode de soumission des commentaires vous renvoie un objet de commentaire, 70 00:05:19,460 --> 00:05:24,335 donc vous vous abonnez à cela parce que la méthode de soumission des commentaires retournera un observable. 71 00:05:24,335 --> 00:05:26,975 Donc vous vous abonnez à cela et dans le subscribe, 72 00:05:26,975 --> 00:05:30,650 vous obtiendrez le paramètre qui est 73 00:05:30,650 --> 00:05:35,780 les informations du formulaire de commentaires que vous avez soumis via la méthode de soumission de commentaires. 74 00:05:35,780 --> 00:05:46,400 Rappelez-vous comment nous gérons la mise à jour du plat dans le composant de détail du plat dans l'exercice. 75 00:05:46,400 --> 00:05:50,220 De la même manière, lorsque vous publiez le formulaire, 76 00:05:50,220 --> 00:05:53,255 la méthode de soumission de feedback vous renvoie 77 00:05:53,255 --> 00:05:57,440 l'objet de feedback posté revenant de 78 00:05:57,440 --> 00:06:01,840 du côté serveur pour confirmer que le formulaire a été soumis avec succès. 79 00:06:01,840 --> 00:06:04,985 Donc, dans votre composant contact, 80 00:06:04,985 --> 00:06:07,635 vous vous abonnerez à cela et ensuite, 81 00:06:07,635 --> 00:06:11,090 lorsque l'objet feedback sera obtenu à ce moment-là, 82 00:06:11,090 --> 00:06:16,160 vous afficherez les informations de l'objet feedback comme vous le verrez ici. 83 00:06:16,160 --> 00:06:18,010 Donc, quand je soumets le formulaire, 84 00:06:18,010 --> 00:06:21,080 vous remarquerez immédiatement que le spinner de progression va là-bas, 85 00:06:21,080 --> 00:06:24,410 et après la soumission est terminée, vous montrerez la conformation 86 00:06:24,410 --> 00:06:28,190 pendant cinq secondes ici pour montrer quelles informations 87 00:06:28,190 --> 00:06:29,990 a été posté pour 88 00:06:29,990 --> 00:06:33,740 le site du serveur et après cinq secondes vous va rejeter cela et 89 00:06:33,740 --> 00:06:40,300 puis ramener le formulaire vide à l'écran. 90 00:06:40,300 --> 00:06:46,080 Vous remarquez également qu'à chaque étape nous utilisions l'animation. 91 00:06:46,080 --> 00:06:52,940 Vous pouvez utiliser l'animation de développement pour faire entrer chaque étape sur l'écran. 92 00:06:52,940 --> 00:06:55,970 Donc, lorsque l'utilisateur clique sur le bouton de soumission, 93 00:06:55,970 --> 00:06:59,480 vous masquerez d'abord le formulaire 94 00:06:59,480 --> 00:07:03,860 , puis remplacez ce formulaire par le spinner de progression dans la vue. 95 00:07:03,860 --> 00:07:08,780 Ensuite, lorsque vous obtenez l'objet de retour de 96 00:07:08,780 --> 00:07:14,185 du côté serveur pour confirmer que lorsque le serveur a été mis à jour, 97 00:07:14,185 --> 00:07:17,415 alors à ce moment-là vous allez rejeter le spinner, 98 00:07:17,415 --> 00:07:20,780 vous afficherez le contenu de l'objet feedback sur 99 00:07:20,780 --> 00:07:24,685 l'écran pendant cinq secondes comme nous l'avons vu là-bas. 100 00:07:24,685 --> 00:07:28,370 Ensuite, après cinq secondes, vous allez rejeter cela et 101 00:07:28,370 --> 00:07:31,970 alors vous afficherez un formulaire vide à ce point afin que 102 00:07:31,970 --> 00:07:39,830 l'utilisateur puisse soumettre les informations de rétroaction suivantes s'il ou elle le souhaite. 103 00:07:39,830 --> 00:07:42,500 Maintenant, dans le processus de ce faire, 104 00:07:42,500 --> 00:07:45,290 vous allez prendre l'aide du fait que lorsque 105 00:07:45,290 --> 00:07:48,665 vous publiez quelque chose sur le serveur en utilisant la méthode post, 106 00:07:48,665 --> 00:07:50,915 le serveur vous retournera 107 00:07:50,915 --> 00:07:55,190 l'objet feedback sous la forme d'un observable et que 108 00:07:55,190 --> 00:07:56,930 observable sera transmis à 109 00:07:56,930 --> 00:08:02,280 votre composant contact via la méthode de soumission des commentaires. 110 00:08:02,280 --> 00:08:04,340 Lorsque vous recevez cet observable, 111 00:08:04,340 --> 00:08:05,780 vous vous abonnez à cet observable, 112 00:08:05,780 --> 00:08:09,410 et dans la méthode d'abonnement, vous aurez accès à l'objet de feedback 113 00:08:09,410 --> 00:08:13,710 confirmant que les informations de feedback ont été publiées sur le site du serveur. 114 00:08:13,710 --> 00:08:16,225 Ensuite, à ce moment-là, 115 00:08:16,225 --> 00:08:19,580 vous allez rejeter le spinner de progression, puis, 116 00:08:19,580 --> 00:08:26,660 afficher les informations de retour pour une durée de cinq secondes sur l'écran, 117 00:08:26,660 --> 00:08:29,180 et ensuite vous le rejetterez à nouveau, 118 00:08:29,180 --> 00:08:37,080 et ensuite le remplacer par un formulaire de réinitialisation à partir du site de l'application. 119 00:08:38,660 --> 00:08:44,735 Donc, ces étapes exigent que vous réfléchissiez très attentivement à la façon dont vous 120 00:08:44,735 --> 00:08:50,620 implémentez cette séquence d'étapes pour la soumission du formulaire. 121 00:08:50,620 --> 00:08:53,960 Quelques détails supplémentaires à ce sujet sont expliqués dans 122 00:08:53,960 --> 00:09:01,550 les détails de l'affectation qui sont donnés dans cette leçon. 123 00:09:01,550 --> 00:09:06,200 Alors, lisez cela et si vous avez des questions s'il vous plaît n'hésitez pas à 124 00:09:06,200 --> 00:09:10,990 de poster ces questions sur le forum et on y répondra. 125 00:09:10,990 --> 00:09:16,385 Maintenant, cette quatrième tâche va être un peu plus impliquée. 126 00:09:16,385 --> 00:09:22,159 Vous devez planifier votre séquence d'étapes correctement. 127 00:09:22,159 --> 00:09:27,080 Vous serez surpris que presque chaque partie que vous avez besoin de 128 00:09:27,080 --> 00:09:31,430 faire ici vous avez rencontré quelque part ou l'autre dans les exercices précédents. 129 00:09:31,430 --> 00:09:34,460 Donc, ce n'est rien de totalement nouveau pour vous, 130 00:09:34,460 --> 00:09:37,025 mais vous avez juste besoin de ramasser toutes ces pièces et ensuite 131 00:09:37,025 --> 00:09:40,250 les rejoindre ensemble afin de mettre en œuvre cette solution. 132 00:09:40,250 --> 00:09:43,930 J'ai déjà démontré qu'il était faisable de le faire. 133 00:09:43,930 --> 00:09:48,515 Donc, cela termine la quatrième tâche de cette affectation. 134 00:09:48,515 --> 00:09:52,860 Amusez-vous à terminer cette dernière mission. 135 00:09:52,860 --> 00:09:58,640 Je suis sûr que vous apprendrez beaucoup en accomplissant ces quatre tâches avec succès. 136 00:09:58,640 --> 00:10:00,050 Encore une fois, comme je l'ai dit, 137 00:10:00,050 --> 00:10:03,110 aucune de ces tâches ne va être compliquée. 138 00:10:03,110 --> 00:10:08,180 Vous en avez vu des morceaux dans les exercices plus tôt. 139 00:10:08,180 --> 00:10:10,640 Donc, il devrait être assez simple de 140 00:10:10,640 --> 00:10:14,090 les compléter sauf que vous devez être prudent dans la planification 141 00:10:14,090 --> 00:10:18,035 les étapes pour la soumission du formulaire correctement et ensuite utiliser 142 00:10:18,035 --> 00:10:27,000 des variables supplémentaires judicieusement pour suivre les différentes étapes de la soumission du formulaire ici.