1 00:00:03,860 --> 00:00:10,845 Finally, here we are at the fourth and final assignment in this course. 2 00:00:10,845 --> 00:00:13,350 What do we do in this assignment? 3 00:00:13,350 --> 00:00:19,225 We'll explore the topics that we covered in this particular module. 4 00:00:19,225 --> 00:00:23,255 Client-server communication, the use of rest API, 5 00:00:23,255 --> 00:00:28,600 rest rectangulars, and animations in this particular assignment. 6 00:00:28,600 --> 00:00:32,360 So, what are the various tasks in this assignment? 7 00:00:32,360 --> 00:00:35,759 This assignment will consist of four different tasks. 8 00:00:35,759 --> 00:00:41,155 Let's explore each and every one of them in a little detail, next. 9 00:00:41,155 --> 00:00:45,170 Just as we updated the dish surveys to use 10 00:00:45,170 --> 00:00:49,780 HTTP client to contact with the rest API server, 11 00:00:49,780 --> 00:00:56,380 your first task in this assignment is to update the promotions service so 12 00:00:56,380 --> 00:00:59,510 that the promotion service will go and fetch the data 13 00:00:59,510 --> 00:01:03,320 required about the promotions from the server side. 14 00:01:03,320 --> 00:01:08,210 So, you need to implement the three methods that get promotions, 15 00:01:08,210 --> 00:01:11,315 get featured promotion, and get promotion. 16 00:01:11,315 --> 00:01:13,310 Three different methods there, 17 00:01:13,310 --> 00:01:15,935 but in particular we'll be making use of the get featured 18 00:01:15,935 --> 00:01:19,760 promotion for getting the information to render 19 00:01:19,760 --> 00:01:23,090 the information about the promotions on 20 00:01:23,090 --> 00:01:27,930 the homepage for this particular angular application. 21 00:01:27,930 --> 00:01:29,210 So in the first task, 22 00:01:29,210 --> 00:01:34,175 you need to update the promotion service to use HTTP client and also 23 00:01:34,175 --> 00:01:36,380 update the home component to make use of 24 00:01:36,380 --> 00:01:39,530 the promotion service to fetch the data from the server, 25 00:01:39,530 --> 00:01:44,105 and then render this promotion formation in the homepage. 26 00:01:44,105 --> 00:01:48,080 Your second task in this assignment is to of course, 27 00:01:48,080 --> 00:01:52,815 update the leader service to use HTTP client, oh, 28 00:01:52,815 --> 00:01:54,260 and fetch the data from 29 00:01:54,260 --> 00:01:57,890 the Json server in order to render the information about the leaders. 30 00:01:57,890 --> 00:02:02,150 So, the featured leader here should be rendered by using the get 31 00:02:02,150 --> 00:02:09,640 featured leader from the leader service to fetch the information from the server. 32 00:02:09,640 --> 00:02:12,380 Similarly, going to the about page, 33 00:02:12,380 --> 00:02:15,785 the information about the corporate leadership that we 34 00:02:15,785 --> 00:02:19,670 render here should be fetched from the leader service 35 00:02:19,670 --> 00:02:22,895 using the get leaders method which should use 36 00:02:22,895 --> 00:02:27,555 HTTP client to go and fetch the data from the server side. 37 00:02:27,555 --> 00:02:32,735 Similarly, update the get leader method in the leader service. 38 00:02:32,735 --> 00:02:37,625 So, that is the second task in your assignment. 39 00:02:37,625 --> 00:02:43,160 Your third task in the assignment is to activate the feedback form, 40 00:02:43,160 --> 00:02:46,640 reactive form that we created in the contact page. 41 00:02:46,640 --> 00:02:49,340 So, in this feedback form when the user 42 00:02:49,340 --> 00:02:53,420 submits valid information and then clicks on the submit button, 43 00:02:53,420 --> 00:02:56,810 this feedback form information should be supplied to 44 00:02:56,810 --> 00:02:59,120 a feedback service which you're going to 45 00:02:59,120 --> 00:03:02,405 implement as part of the third task in this assignment. 46 00:03:02,405 --> 00:03:07,670 The feedback service will support a submit feedback method which 47 00:03:07,670 --> 00:03:13,565 takes the form information sent from the contact component, 48 00:03:13,565 --> 00:03:19,580 the on submit method of the conduct component to their feedback service, 49 00:03:19,580 --> 00:03:23,465 and then the submit feedback method in the feedback service in turn will use 50 00:03:23,465 --> 00:03:27,905 HTTP client to post the data to the server. 51 00:03:27,905 --> 00:03:36,110 The post method takes the form information that comes in as a parameter to that submit 52 00:03:36,110 --> 00:03:39,410 feedback method and then posts that information to 53 00:03:39,410 --> 00:03:46,205 the feedback URL on our Json server site. 54 00:03:46,205 --> 00:03:50,960 The submission of information to your server is not going to be instantaneous. 55 00:03:50,960 --> 00:03:54,890 So, in the fourth task in this assignment, 56 00:03:54,890 --> 00:03:58,520 you're going to handle the fact that submission of the information 57 00:03:58,520 --> 00:04:02,450 from the feedback form to the server is going to take some amount of time, 58 00:04:02,450 --> 00:04:06,530 and then thereafter once the information is successfully submitted, 59 00:04:06,530 --> 00:04:12,050 your going to prompt the user with the conformation from the server side. 60 00:04:12,050 --> 00:04:16,515 So, let's take this form and then we'll submit the form here. 61 00:04:16,515 --> 00:04:22,110 So, let me type in some information into the form. 62 00:04:39,500 --> 00:04:42,110 So, once the user types in 63 00:04:42,110 --> 00:04:45,680 all valid information in the form and then clicks on the submit button, 64 00:04:45,680 --> 00:04:50,540 you will send this information through the feedback service to the server to be posted. 65 00:04:50,540 --> 00:04:53,560 Until the server replies to you, 66 00:04:53,560 --> 00:05:01,805 you should display a progress spinner on the screen and once the feedback information is 67 00:05:01,805 --> 00:05:05,180 obtained from the server side and the server side confirms that 68 00:05:05,180 --> 00:05:10,220 the feedback form information has been submitted successfully on the server side. 69 00:05:10,220 --> 00:05:14,855 So, this is where when you call the submit feedback method, 70 00:05:14,855 --> 00:05:19,460 the submit feedback method will return you a feedback object, 71 00:05:19,460 --> 00:05:24,335 so you subscribe to that because the submit feedback method will return an observable. 72 00:05:24,335 --> 00:05:26,975 So you subscribe to that and within the subscribe, 73 00:05:26,975 --> 00:05:30,650 you will obtain the parameter which is 74 00:05:30,650 --> 00:05:35,780 the feedback form information that you submitted through the submit feedback method. 75 00:05:35,780 --> 00:05:46,400 Recall how we handle the update of the dish in the dish detail component in the exercise. 76 00:05:46,400 --> 00:05:50,220 Same way, when you post the form, 77 00:05:50,220 --> 00:05:53,255 the submit feedback method will return you 78 00:05:53,255 --> 00:05:57,440 the posted feedback object coming back from 79 00:05:57,440 --> 00:06:01,840 the server side to confirm that the form has been successfully submitted. 80 00:06:01,840 --> 00:06:04,985 So, within your contact component, 81 00:06:04,985 --> 00:06:07,635 you will subscribe to that and then, 82 00:06:07,635 --> 00:06:11,090 when the feedback object is obtained at that point, 83 00:06:11,090 --> 00:06:16,160 you will display the information from the feedback object as you will see here. 84 00:06:16,160 --> 00:06:18,010 So, when I submit the form, 85 00:06:18,010 --> 00:06:21,080 you will immediately notice the progress spinner going there, 86 00:06:21,080 --> 00:06:24,410 and then after the submission is complete you will show the conformation 87 00:06:24,410 --> 00:06:28,190 for five seconds here to show what 88 00:06:28,190 --> 00:06:29,990 information has been posted to 89 00:06:29,990 --> 00:06:33,740 the server site and then after five seconds you will dismiss that and 90 00:06:33,740 --> 00:06:40,300 then bring back the empty form to the screen. 91 00:06:40,300 --> 00:06:46,080 You also notice that at each stage we were using animation. 92 00:06:46,080 --> 00:06:52,940 You can make use of the expand animation to bring in each stage onto the screen. 93 00:06:52,940 --> 00:06:55,970 So, when the user clicks on the submit button, 94 00:06:55,970 --> 00:06:59,480 you will hide the form 95 00:06:59,480 --> 00:07:03,860 first and then replace that form with the progress spinner in the view. 96 00:07:03,860 --> 00:07:08,780 Then, when you obtain the return feedback object from 97 00:07:08,780 --> 00:07:14,185 the server side to confirming that where server has been updated, 98 00:07:14,185 --> 00:07:17,415 then at that point you will dismiss the spinner, 99 00:07:17,415 --> 00:07:20,780 you will show the contents of the feedback object on 100 00:07:20,780 --> 00:07:24,685 the screen for five seconds as we have seen there. 101 00:07:24,685 --> 00:07:28,370 Then, after five seconds you will dismiss that and 102 00:07:28,370 --> 00:07:31,970 then you will show an empty form at the point so that 103 00:07:31,970 --> 00:07:39,830 the user can submit the next feedback information if he or she chooses to. 104 00:07:39,830 --> 00:07:42,500 Now in the process of doing this, 105 00:07:42,500 --> 00:07:45,290 you're going to take the help of the fact that when 106 00:07:45,290 --> 00:07:48,665 you post anything to the server using the post method, 107 00:07:48,665 --> 00:07:50,915 the server will return 108 00:07:50,915 --> 00:07:55,190 the feedback object back to you in the form of an observable and that 109 00:07:55,190 --> 00:07:56,930 observable will be passed back to 110 00:07:56,930 --> 00:08:02,280 your contact component through the submit feedback method. 111 00:08:02,280 --> 00:08:04,340 When you receive that observable, 112 00:08:04,340 --> 00:08:05,780 you subscribe to that observable, 113 00:08:05,780 --> 00:08:09,410 and within the subscribe method you will get access to the feedback object 114 00:08:09,410 --> 00:08:13,710 confirming that the feedback information has been posted to the server site. 115 00:08:13,710 --> 00:08:16,225 Then, at that point, 116 00:08:16,225 --> 00:08:19,580 you will dismiss the progress spinner, and then, 117 00:08:19,580 --> 00:08:26,660 show the return information for a five second duration on the screen, 118 00:08:26,660 --> 00:08:29,180 and then after that you will dismiss that again, 119 00:08:29,180 --> 00:08:37,080 and then replace that with a reset form from the application site. 120 00:08:38,660 --> 00:08:44,735 So, this steps require you to think through very carefully on how you 121 00:08:44,735 --> 00:08:50,620 implement this sequence of stages for the submission of the form. 122 00:08:50,620 --> 00:08:53,960 Some more details about this are explained in 123 00:08:53,960 --> 00:09:01,550 the assignment details that are given in this lesson. 124 00:09:01,550 --> 00:09:06,200 So, read through that and should you have any questions please feel free 125 00:09:06,200 --> 00:09:10,990 to post those questions into the forum and it'll be answered there. 126 00:09:10,990 --> 00:09:16,385 Now, this fourth task is going to be a little bit more involved. 127 00:09:16,385 --> 00:09:22,159 You need to plan your sequence of stages properly. 128 00:09:22,159 --> 00:09:27,080 You will be surprised that almost every part that you need to 129 00:09:27,080 --> 00:09:31,430 do here you have encountered somewhere or the other in the previous exercises. 130 00:09:31,430 --> 00:09:34,460 So, this is nothing totally new for you, 131 00:09:34,460 --> 00:09:37,025 but you just need to pick up all those pieces and then 132 00:09:37,025 --> 00:09:40,250 join them together in order to implement this solution. 133 00:09:40,250 --> 00:09:43,930 I have already demonstrated that it is feasible to do so. 134 00:09:43,930 --> 00:09:48,515 So, that completes the fourth task in this assignment. 135 00:09:48,515 --> 00:09:52,860 Have fun completing this final assignment. 136 00:09:52,860 --> 00:09:58,640 I'm sure you will learn a lot by completing these four tasks successfully. 137 00:09:58,640 --> 00:10:00,050 Again as I said, 138 00:10:00,050 --> 00:10:03,110 none of these tasks are going to be complicated. 139 00:10:03,110 --> 00:10:08,180 You have seen bits and pieces of them in the exercises earlier. 140 00:10:08,180 --> 00:10:10,640 So, it should be fairly straightforward to 141 00:10:10,640 --> 00:10:14,090 complete these except that you need to be careful in planning 142 00:10:14,090 --> 00:10:18,035 the stages for the form submission correctly and then use 143 00:10:18,035 --> 00:10:21,440 additional variables judiciously to 144 00:10:21,440 --> 00:10:27,000 track the various stages of the submission of the form here.