Assignment Instructions
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 7
| Download | |
| Open PDF In Browser | View PDF |
Peer-graded Assignment: Client-Server Communication
1. Instructions
2. My submission
3. Discussions
In this assignment, you will update the web application to get data from the server to render the
information corresponding to the promotions and the leadership team of the company. In
addition, you will handle the submission of the feedback form by posting the feedback to the
server.
Step-By-Step Assignment Instructions
Assignment Overview
At the end of this assignment, you should have completed the following:
•
•
•
•
Updated the promotion service to use Restangular and updated the home component to
use the data fetched from the server for promotion.
Updated the leader service to use Restangular and subsequently update the home and the
about component to render the information about the leaders by downloading the data
from the server
Enabled the users to submit feedback through the feedback form by creating a new
feedback service that accepts the form data and uses Restangular to record their feedback
on the server.
Use animation together with a progress spinner and displaying the confirmation from the
server about successful submission of the form.
Assignment Requirements
Task 1
In this task, you will update the promotion service and the home component to use the data from
the server for rendering the promotion:
•
•
Update all the methods in promotion service to use Restangular to fetch the promotion
data from the server
Update the home component to render the promotion data. You should handle the error
condition appropriately.
Task 2
In this task, you will update the leader service and the home and about components to use the
data from the server for rendering the leader information:
•
•
•
Update all the methods in leader service to use Restangular to fetch the leader data from
the server
Update the home component to render the leader data. You should handle the error
condition appropriately.
Update the about component to render the leader data. You should handle the error
condition appropriately.
Task 3
In this task, you will enable the saving of the feedback data submitted using the feedback form in
the contact component. You will save the feedback form data submitted by the user to the server:
•
•
Implement a new feedback service with a method submitFeedback() that takes a
Feedback object as a parameter and submits the feedback to the server using the
Restangular support for posting data. You construct a Restangular object for feedback
and call the post() method on that object with the Feedback object as the parameter.
Recall that the feedback data is accessible at http://localhost:3000/feedback on the jsonserver.
Update the contact component to make use of the feedback service and submit the form
data using the submitFeedback() method by passing the feedback form data in the
onSubmit() method to the service.
Task 4
In this task you will use animation together with a progress spinner and the fact that the post()
method will return the submitted feedback object as a return value to display briefly the
submitted data to confirm the form submission to the user:
•
•
•
•
When the form is submitted, you should hide the form and display the progress spinner
until the server responds confirming the update on the server side. See the next point
below for further details.
Recall how in the lesson on REST you were demonstrated how the .save() method called
on a Restangular object returns an observable that we subscribe and then use the updated
dish data returned to update the dish object in dishdetail.component.ts. Similarly when
you do a post(), the feedback service must return the feedback object returned from the
server after submission, by the submitFeedback() method. You can then subscribe to it
within the contact.component.ts to obtain the returned feedback object. This confirms the
successful submission of the feedback to the server.
After obtaining the confirmation from the server within the subscribe() method above,
you should then display the information from the returned feedback object in the format
as shown in the video for 5 seconds. Thereafter you should hide this and then again show
the empty form to the user enabling them to submit the feedback again. Hint: Leverage
the setTimeout() method for this purpose.
Use the expand animation that we have already used earlier to judiciously apply
animation to the various stages of the form submission.
Screenshots
Review criteria
Your assignment will be assessed based on the following criteria:
Task 1
•
•
The promotion service methods have been correctly configured to use Restangular to get
the data from the server.
The home component is correctly obtaining the promotion data from the service, and
handling any errors that might arise.
Task 2
•
•
•
The leader service methods have been correctly configured to use Restangular to get the
data from the server.
The home component is correctly obtaining the leader data from the service, and handling
any errors that might arise.
The about component is correctly obtaining the leader data from the service, and handling
any errors that might arise.
Task 3
•
•
A new feedback service is correctly implemented to use Restangular to post the feedback
data to the server.
The contact component has been correctly updated to use the feedback service to post the
form data to the server using the submitFeedback() method supported by the service.
Task 4
•
•
•
•
When the form is submitted, the progress spinner is being displayed until the server
responds confirming the update on the server side.
The returned Observable from the submitFeedback() function is correctly being used to
confirm the successful submission of the feedback to the server.
The information from the returned feedback object is being displayed in the format as
shown in the video for 5 seconds. Thereafter it is hidden and the empty form is shown to
the user enabling them to submit the feedback again.
The expand animation is being used to judiciously apply animation to the various stages
of the form submission.
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.7 Linearized : No Page Count : 7 Language : en-US Tagged PDF : Yes XMP Toolkit : 3.1-701 Producer : Microsoft® Word 2016 Creator : Zeeshan Haider Creator Tool : Microsoft® Word 2016 Create Date : 2017:11:01 21:11:04+05:00 Modify Date : 2017:11:01 21:11:04+05:00 Document ID : uuid:B009F0E7-4F39-4F30-B8DD-14EE472E1410 Instance ID : uuid:B009F0E7-4F39-4F30-B8DD-14EE472E1410 Author : Zeeshan HaiderEXIF Metadata provided by EXIF.tools