Finally, here we are at the fourth and final assignment in this course.
What do we do in this assignment?
We'll explore the topics that we covered in this particular module.
Client-server communication, the use of rest API,
rest rectangulars, and animations in this particular assignment.
So, what are the various tasks in this assignment?
This assignment will consist of four different tasks.
Let's explore each and every one of them in a little detail, next.
Just as we updated the dish surveys to use
HTTP client to contact with the rest API server,
your first task in this assignment is to update the promotions service so
that the promotion service will go and fetch the data
required about the promotions from the server side.
So, you need to implement the three methods that get promotions,
get featured promotion, and get promotion.
Three different methods there,
but in particular we'll be making use of the get featured
promotion for getting the information to render
the information about the promotions on
the homepage for this particular angular application.
So in the first task,
you need to update the promotion service to use HTTP client and also
update the home component to make use of
the promotion service to fetch the data from the server,
and then render this promotion formation in the homepage.
Your second task in this assignment is to of course,
update the leader service to use HTTP client, oh,
and fetch the data from
the Json server in order to render the information about the leaders.
So, the featured leader here should be rendered by using the get
featured leader from the leader service to fetch the information from the server.
Similarly, going to the about page,
the information about the corporate leadership that we
render here should be fetched from the leader service
using the get leaders method which should use
HTTP client to go and fetch the data from the server side.
Similarly, update the get leader method in the leader service.
So, that is the second task in your assignment.
Your third task in the assignment is to activate the feedback form,
reactive form that we created in the contact page.
So, in this feedback form when the user
submits valid information and then clicks on the submit button,
this feedback form information should be supplied to
a feedback service which you're going to
implement as part of the third task in this assignment.
The feedback service will support a submit feedback method which
takes the form information sent from the contact component,
the on submit method of the conduct component to their feedback service,
and then the submit feedback method in the feedback service in turn will use
HTTP client to post the data to the server.
The post method takes the form information that comes in as a parameter to that submit
feedback method and then posts that information to
the feedback URL on our Json server site.
The submission of information to your server is not going to be instantaneous.
So, in the fourth task in this assignment,
you're going to handle the fact that submission of the information
from the feedback form to the server is going to take some amount of time,
and then thereafter once the information is successfully submitted,
your going to prompt the user with the conformation from the server side.
So, let's take this form and then we'll submit the form here.
So, let me type in some information into the form.
So, once the user types in
all valid information in the form and then clicks on the submit button,
you will send this information through the feedback service to the server to be posted.
Until the server replies to you,
you should display a progress spinner on the screen and once the feedback information is
obtained from the server side and the server side confirms that
the feedback form information has been submitted successfully on the server side.
So, this is where when you call the submit feedback method,
the submit feedback method will return you a feedback object,
so you subscribe to that because the submit feedback method will return an observable.
So you subscribe to that and within the subscribe,
you will obtain the parameter which is
the feedback form information that you submitted through the submit feedback method.
Recall how we handle the update of the dish in the dish detail component in the exercise.
Same way, when you post the form,
the submit feedback method will return you
the posted feedback object coming back from
the server side to confirm that the form has been successfully submitted.
So, within your contact component,
you will subscribe to that and then,
when the feedback object is obtained at that point,
you will display the information from the feedback object as you will see here.
So, when I submit the form,
you will immediately notice the progress spinner going there,
and then after the submission is complete you will show the conformation
for five seconds here to show what
information has been posted to
the server site and then after five seconds you will dismiss that and
then bring back the empty form to the screen.
You also notice that at each stage we were using animation.
You can make use of the expand animation to bring in each stage onto the screen.
So, when the user clicks on the submit button,
you will hide the form
first and then replace that form with the progress spinner in the view.
Then, when you obtain the return feedback object from
the server side to confirming that where server has been updated,
then at that point you will dismiss the spinner,
you will show the contents of the feedback object on
the screen for five seconds as we have seen there.
Then, after five seconds you will dismiss that and
then you will show an empty form at the point so that
the user can submit the next feedback information if he or she chooses to.
Now in the process of doing this,
you're going to take the help of the fact that when
you post anything to the server using the post method,
the server will return
the feedback object back to you in the form of an observable and that
observable will be passed back to
your contact component through the submit feedback method.
When you receive that observable,
you subscribe to that observable,
and within the subscribe method you will get access to the feedback object
confirming that the feedback information has been posted to the server site.
Then, at that point,
you will dismiss the progress spinner, and then,
show the return information for a five second duration on the screen,
and then after that you will dismiss that again,
and then replace that with a reset form from the application site.
So, this steps require you to think through very carefully on how you
implement this sequence of stages for the submission of the form.
Some more details about this are explained in
the assignment details that are given in this lesson.
So, read through that and should you have any questions please feel free
to post those questions into the forum and it'll be answered there.
Now, this fourth task is going to be a little bit more involved.
You need to plan your sequence of stages properly.
You will be surprised that almost every part that you need to
do here you have encountered somewhere or the other in the previous exercises.
So, this is nothing totally new for you,
but you just need to pick up all those pieces and then
join them together in order to implement this solution.
I have already demonstrated that it is feasible to do so.
So, that completes the fourth task in this assignment.
Have fun completing this final assignment.
I'm sure you will learn a lot by completing these four tasks successfully.
Again as I said,
none of these tasks are going to be complicated.
You have seen bits and pieces of them in the exercises earlier.
So, it should be fairly straightforward to
complete these except that you need to be careful in planning
the stages for the form submission correctly and then use
additional variables judiciously to
track the various stages of the submission of the form here.