Enfin, nous voici à la quatrième et dernière affectation de ce cours.
Que faisons-nous dans cette mission ?
Nous allons explorer les sujets que nous avons abordés dans ce module particulier.
Communication client-serveur, utilisation de l'API de repos,
rectangulaires de repos et animations dans cette affectation particulière.
Alors, quelles sont les différentes tâches de cette mission ?
Cette mission sera composée de quatre tâches différentes.
Explorons chacun d'eux dans les moindres détails, ensuite.
Tout comme nous avons mis à jour les sondages de plat pour utiliser le client HTTP
pour contacter le serveur d'API restante,
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
requises sur les promotions du côté serveur.
Donc, vous devez implémenter les trois méthodes qui obtiennent des promotions,
obtenir la promotion en vedette et obtenir la promotion.
Trois méthodes différentes là-bas,
mais en particulier nous allons utiliser la promotion get featured
pour obtenir les informations pour rendre
les informations sur les promotions sur
la page d'accueil de cette application angulaire particulière.
Donc, dans la première tâche,
vous devez mettre à jour le service de promotion pour utiliser le client HTTP et aussi
mettre à jour le composant home pour utiliser
le service de promotion pour récupérer les données du serveur,
et ensuite rendre cette formation de promotion dans la page d'accueil.
Votre deuxième tâche dans cette tâche est bien sûr,
mettre à jour le service leader pour utiliser le client HTTP, oh,
et récupérer les données de
le serveur Json afin de rendre les informations sur les leaders.
Donc, le leader en vedette ici devrait être rendu en utilisant le leader en vedette get
du service leader pour récupérer les informations du serveur.
De même, en allant à la page à propos,
les informations sur le leadership de l'entreprise que nous
rendons ici devraient être extraites du service leader
en utilisant la méthode get leaders qui devrait utiliser le client HTTP
pour aller chercher les données du côté serveur.
De même, mettez à jour la méthode get leader dans le service leader.
Donc, c'est la deuxième tâche de votre mission.
Votre troisième tâche dans l'affectation est d'activer le formulaire de rétroaction,
formulaire réactif que nous avons créé dans la page de contact.
Donc, dans ce formulaire de rétroaction lorsque l'utilisateur
soumet des informations valides et clique sur le bouton Envoyer,
ces informations de formulaire de rétroaction doivent être fournies à
un service de rétroaction que vous allez mettre en œuvre
dans le cadre de la troisième tâche de cette mission.
Le service de rétroaction prendra en charge une méthode de soumission de rétroaction qui
prend les informations de formulaire envoyées par le composant contact,
la méthode de soumission du composant conduite à leur service de rétroaction,
, puis la méthode de soumission de rétroaction dans le service de rétroaction utilisera à son tour
HTTP pour publier les données sur le serveur.
La méthode post prend les informations de formulaire qui viennent en tant que paramètre pour cette méthode submit
feedback, puis publie ces informations à
l'URL de feedback sur notre site de serveur Json.
La soumission d'informations à votre serveur ne sera pas instantanée.
Donc, dans la quatrième tâche de cette mission,
vous allez gérer le fait que la soumission de l'information
du formulaire de rétroaction au serveur va prendre un certain temps,
et ensuite une fois l'information soumise avec succès,
vous allez inviter l'utilisateur avec la conformation du côté serveur.
Alors, prenons ce formulaire et nous soumettrons le formulaire ici.
Alors, permettez-moi de taper quelques informations dans le formulaire.
Donc, une fois que l'utilisateur tape
toutes les informations valides dans le formulaire, puis clique sur le bouton de soumission,
vous enverrez ces informations via le service de commentaires au serveur pour être posté.
Jusqu'à ce que le serveur vous réponde,
, vous devriez afficher un spinner de progression à l'écran et une fois que les informations de feedback sont
obtenues du côté serveur et que le côté serveur confirme que
les informations du formulaire de feedback ont été envoyées avec succès du côté serveur.
Donc, c'est là que lorsque vous appelez la méthode de soumission des commentaires,
la méthode de soumission des commentaires vous renvoie un objet de commentaire,
donc vous vous abonnez à cela parce que la méthode de soumission des commentaires retournera un observable.
Donc vous vous abonnez à cela et dans le subscribe,
vous obtiendrez le paramètre qui est
les informations du formulaire de commentaires que vous avez soumis via la méthode de soumission de commentaires.
Rappelez-vous comment nous gérons la mise à jour du plat dans le composant de détail du plat dans l'exercice.
De la même manière, lorsque vous publiez le formulaire,
la méthode de soumission de feedback vous renvoie
l'objet de feedback posté revenant de
du côté serveur pour confirmer que le formulaire a été soumis avec succès.
Donc, dans votre composant contact,
vous vous abonnerez à cela et ensuite,
lorsque l'objet feedback sera obtenu à ce moment-là,
vous afficherez les informations de l'objet feedback comme vous le verrez ici.
Donc, quand je soumets le formulaire,
vous remarquerez immédiatement que le spinner de progression va là-bas,
et après la soumission est terminée, vous montrerez la conformation
pendant cinq secondes ici pour montrer quelles informations
a été posté pour
le site du serveur et après cinq secondes vous va rejeter cela et
puis ramener le formulaire vide à l'écran.
Vous remarquez également qu'à chaque étape nous utilisions l'animation.
Vous pouvez utiliser l'animation de développement pour faire entrer chaque étape sur l'écran.
Donc, lorsque l'utilisateur clique sur le bouton de soumission,
vous masquerez d'abord le formulaire
, puis remplacez ce formulaire par le spinner de progression dans la vue.
Ensuite, lorsque vous obtenez l'objet de retour de
du côté serveur pour confirmer que lorsque le serveur a été mis à jour,
alors à ce moment-là vous allez rejeter le spinner,
vous afficherez le contenu de l'objet feedback sur
l'écran pendant cinq secondes comme nous l'avons vu là-bas.
Ensuite, après cinq secondes, vous allez rejeter cela et
alors vous afficherez un formulaire vide à ce point afin que
l'utilisateur puisse soumettre les informations de rétroaction suivantes s'il ou elle le souhaite.
Maintenant, dans le processus de ce faire,
vous allez prendre l'aide du fait que lorsque
vous publiez quelque chose sur le serveur en utilisant la méthode post,
le serveur vous retournera
l'objet feedback sous la forme d'un observable et que
observable sera transmis à
votre composant contact via la méthode de soumission des commentaires.
Lorsque vous recevez cet observable,
vous vous abonnez à cet observable,
et dans la méthode d'abonnement, vous aurez accès à l'objet de feedback
confirmant que les informations de feedback ont été publiées sur le site du serveur.
Ensuite, à ce moment-là,
vous allez rejeter le spinner de progression, puis,
afficher les informations de retour pour une durée de cinq secondes sur l'écran,
et ensuite vous le rejetterez à nouveau,
et ensuite le remplacer par un formulaire de réinitialisation à partir du site de l'application.
Donc, ces étapes exigent que vous réfléchissiez très attentivement à la façon dont vous
implémentez cette séquence d'étapes pour la soumission du formulaire.
Quelques détails supplémentaires à ce sujet sont expliqués dans
les détails de l'affectation qui sont donnés dans cette leçon.
Alors, lisez cela et si vous avez des questions s'il vous plaît n'hésitez pas à
de poster ces questions sur le forum et on y répondra.
Maintenant, cette quatrième tâche va être un peu plus impliquée.
Vous devez planifier votre séquence d'étapes correctement.
Vous serez surpris que presque chaque partie que vous avez besoin de
faire ici vous avez rencontré quelque part ou l'autre dans les exercices précédents.
Donc, ce n'est rien de totalement nouveau pour vous,
mais vous avez juste besoin de ramasser toutes ces pièces et ensuite
les rejoindre ensemble afin de mettre en œuvre cette solution.
J'ai déjà démontré qu'il était faisable de le faire.
Donc, cela termine la quatrième tâche de cette affectation.
Amusez-vous à terminer cette dernière mission.
Je suis sûr que vous apprendrez beaucoup en accomplissant ces quatre tâches avec succès.
Encore une fois, comme je l'ai dit,
aucune de ces tâches ne va être compliquée.
Vous en avez vu des morceaux dans les exercices plus tôt.
Donc, il devrait être assez simple de
les compléter sauf que vous devez être prudent dans la planification
les étapes pour la soumission du formulaire correctement et ensuite utiliser
des variables supplémentaires judicieusement pour suivre les différentes étapes de la soumission du formulaire ici.