1
00:00:01,860 --> 00:00:07,630
So this lesson, we are going to be concluding our interaction with the front end Tester API.

2
00:00:08,190 --> 00:00:10,610
So what it's doing, it's loading some dummy data.

3
00:00:10,770 --> 00:00:12,500
We can move through the dummy data.

4
00:00:12,630 --> 00:00:15,510
We can make a selection of one at any one of the users.

5
00:00:15,780 --> 00:00:23,130
We can update and interact with the content for the user and make updates to it and then take that updated

6
00:00:23,130 --> 00:00:25,200
information, send it over to the server.

7
00:00:25,410 --> 00:00:31,800
We get a response with the updated information from the server and we can always go back to the main

8
00:00:31,800 --> 00:00:39,070
page and once again released all of the users and then click through the users within the list.

9
00:00:39,090 --> 00:00:44,110
So depending on what page we want to look at, we can load the different users according to the page.

10
00:00:44,850 --> 00:00:50,530
So that's what we're going to be building and finalizing this interactive application in this lesson.

11
00:00:52,200 --> 00:00:54,270
So let's go ahead, open up the editor.

12
00:00:54,780 --> 00:01:00,600
When we click the user, we have the ability to update the user information and now we want to select

13
00:01:00,600 --> 00:01:05,300
that information when we press the update button and send it over to the server.

14
00:01:05,550 --> 00:01:10,440
So let's go over to our rest documentation.

15
00:01:10,770 --> 00:01:15,220
And in order to update data, we can either use, put or patch.

16
00:01:15,810 --> 00:01:20,670
So both of those methods allow us to put the content and send it over.

17
00:01:20,850 --> 00:01:24,510
And as you can see, you do get a response object value.

18
00:01:24,660 --> 00:01:27,480
So it's not actually updating, but it's simulating an update.

19
00:01:27,660 --> 00:01:31,410
And that's what we wanted to do now, is we want to do a simulation of the update.

20
00:01:31,620 --> 00:01:38,820
We are going to send over the name and the email of the selected user and the request is done to the

21
00:01:38,820 --> 00:01:42,830
user ID path, and that's where it's updating the user.

22
00:01:43,140 --> 00:01:48,960
So going into where we've got the code and we're making the update request.

23
00:01:49,410 --> 00:01:56,730
And I did want to note as well that with most browsers with Chrome, you will have to update some of

24
00:01:56,760 --> 00:01:58,350
the flags within Chrome.

25
00:01:59,040 --> 00:02:04,140
So I'll walk you through and I'll show you the messages that you're going to get as well, whether it

26
00:02:04,140 --> 00:02:08,090
might encounter and how to accommodate that within the browser.

27
00:02:08,670 --> 00:02:16,140
Let's also do a quick update and comments about the console messages that we have got quite, quite

28
00:02:16,140 --> 00:02:17,250
a few of them going on.

29
00:02:17,760 --> 00:02:23,930
So that will just clear the console and allow us to interact with the content a lot easier.

30
00:02:24,210 --> 00:02:29,970
So when we do the update request, we've got the updates, the user information.

31
00:02:29,970 --> 00:02:35,220
This is where we left off last we're sending over or we've got this user information that we're ready

32
00:02:35,460 --> 00:02:36,310
to send.

33
00:02:36,810 --> 00:02:43,290
So let's make another function and add user.

34
00:02:43,800 --> 00:02:50,220
And actually this is going to be update user and we'll create another one for adding the user.

35
00:02:50,460 --> 00:02:53,400
So we're passing over the user info.

36
00:02:56,070 --> 00:03:03,960
And I'll just add that here, instead of the console message, it will output the user info.

37
00:03:05,440 --> 00:03:09,620
And then we can console log the user info within this function.

38
00:03:10,060 --> 00:03:17,560
So that means that we're already we've passed over the user info and let's do a click to the update.

39
00:03:17,800 --> 00:03:20,280
So we've still got the information that we can pass.

40
00:03:20,620 --> 00:03:25,160
And let's go back one more time, take a look at the path that we need to create.

41
00:03:25,510 --> 00:03:31,480
So this is going to be another Futch request and let's set it up as just we did before.

42
00:03:31,900 --> 00:03:37,840
But this time it's going to be slightly different where we're updating the path for users and we've

43
00:03:37,840 --> 00:03:40,360
got the ID within the user information.

44
00:03:41,050 --> 00:03:43,900
So that's contained within that object.

45
00:03:43,900 --> 00:03:51,610
So user information ID is going to be the path that we're going to post the content to and that's going

46
00:03:51,610 --> 00:03:52,450
to be the URL.

47
00:03:52,660 --> 00:03:54,570
Let's also log out the euro.

48
00:03:54,850 --> 00:04:00,210
So it's going to be helpful for any debugging that we see, the URL that we're passing to.

49
00:04:00,700 --> 00:04:07,120
And instead of doing a request, we're going to update this and send the euro.

50
00:04:07,450 --> 00:04:10,690
But we're going to add in some parameters here.

51
00:04:11,140 --> 00:04:16,690
And the parameters that we're adding in is we're going to set the method and the method is going to

52
00:04:16,690 --> 00:04:19,860
indicate the method that we want to use by default.

53
00:04:19,870 --> 00:04:25,870
It's been get, but we want to specify it to post since we want to send some post information.

54
00:04:26,260 --> 00:04:29,560
And this is also where you can pass header information.

55
00:04:29,950 --> 00:04:32,380
So the headers are passed in as an object.

56
00:04:32,650 --> 00:04:38,380
So we'll create the headers and we'll add them into this object and then within the body, that's where

57
00:04:38,380 --> 00:04:40,070
you can pass that data.

58
00:04:40,510 --> 00:04:49,300
So using JSON string of fi, we need to pass the data object as a string value.

59
00:04:49,690 --> 00:04:53,350
So we'll just take the data object and pass it in a string.

60
00:04:54,170 --> 00:04:56,380
So that's going to be the request that we're making.

61
00:04:56,920 --> 00:04:59,340
Let's add in some variables.

62
00:04:59,770 --> 00:05:04,390
So for headers, these are the headers that we're going to be using.

63
00:05:05,080 --> 00:05:08,560
And within the headers, there's a number of options that you can have for headers.

64
00:05:09,100 --> 00:05:15,520
In this case, we do need to specify the content type that we're sending over and that's going to be

65
00:05:15,520 --> 00:05:17,070
as JSON data.

66
00:05:17,530 --> 00:05:24,480
So application JSON, you can also send form data, text data and so on.

67
00:05:24,490 --> 00:05:25,900
So sending the content type.

68
00:05:26,170 --> 00:05:29,890
So that will indicate to the headers the content type that we want to use.

69
00:05:30,610 --> 00:05:37,870
Also, we need to set up our data values and this is information that's coming directly from the user

70
00:05:37,870 --> 00:05:42,660
info so we can select that user info and have.

71
00:05:45,500 --> 00:05:56,690
The name, and that can be user info and let's just get the value so that user info and object property

72
00:05:56,690 --> 00:06:06,400
name and email will be user info and property is going to be email.

73
00:06:07,850 --> 00:06:09,440
So that's the data that we're sending.

74
00:06:09,440 --> 00:06:16,030
And Stringer, find the data and then we're expecting the response as Jason returning back the response.

75
00:06:16,250 --> 00:06:24,440
And for now, we'll just console log out the responded data and console log and we'll just use data.

76
00:06:24,710 --> 00:06:26,980
And we are actually using data a little bit too much.

77
00:06:27,230 --> 00:06:29,390
So let's update this.

78
00:06:29,660 --> 00:06:31,400
And this is going to be the.

79
00:06:33,410 --> 00:06:40,660
Info, and then we'll just string a fight us info, so to avoid any confusion about using the data value,

80
00:06:41,150 --> 00:06:50,090
so let's try it out and clear the console update and that gives us the information that's being sent

81
00:06:50,090 --> 00:06:50,460
back.

82
00:06:51,230 --> 00:07:00,380
So using the SO because we're using post and sending it over to the users, what it's doing is it's

83
00:07:00,380 --> 00:07:01,940
creating a brand new entry.

84
00:07:02,150 --> 00:07:07,490
That's why we've got a different ID value, but it is taking the information from the Web page.

85
00:07:07,490 --> 00:07:12,920
And as we're updating it, we can see that we've created a new entry with the new name and the email

86
00:07:12,920 --> 00:07:14,850
address since returning back an ID.

87
00:07:15,110 --> 00:07:22,010
So this is, again, a simulated response in in order to update that existing user, we need to use

88
00:07:22,010 --> 00:07:23,090
the put method.

89
00:07:24,350 --> 00:07:31,520
And so we need to update the method from post to put and going to this route that should then instead

90
00:07:31,520 --> 00:07:35,170
of creating a new user, it should update the existing user.

91
00:07:35,180 --> 00:07:40,610
And again, this is a simulation, so it's not actually creating or updating on the real database.

92
00:07:41,000 --> 00:07:47,000
And one of the things I did want to mention is that in some cases you might encounter some errors within

93
00:07:47,000 --> 00:07:49,100
the browser when you're testing this locally.

94
00:07:49,760 --> 00:07:55,760
So the way to update that is you can go to the cookies with the same site must be secure.

95
00:07:56,240 --> 00:08:00,830
So you will sometimes, even occasionally see that you've got some type of issues here.

96
00:08:01,400 --> 00:08:07,400
So that's how you can manage those where you've got some messages and it'll give you some information

97
00:08:07,400 --> 00:08:11,870
about the cross site requests that you're doing because this is local to cross site.

98
00:08:12,500 --> 00:08:16,730
So it is flagging that that generally is a security precaution.

99
00:08:16,730 --> 00:08:23,660
The browsers will check to see if you've got some local data and you're sending it over to a server.

100
00:08:24,350 --> 00:08:30,560
And that's where it's going to flag it so that the browsers can't be used to take information off of

101
00:08:30,560 --> 00:08:34,690
your computer and just send it with the application running in the background.

102
00:08:35,180 --> 00:08:41,810
So in order to enable, you can enable you can disable these options and I'll include the path within

103
00:08:41,810 --> 00:08:43,130
the next lesson.

104
00:08:43,610 --> 00:08:46,580
So in case you do need to access it, you can do that.

105
00:08:46,730 --> 00:08:51,590
And within Chrome, it's going to have a link going over and more explanation.

106
00:08:51,610 --> 00:08:52,370
So if you click.

107
00:08:54,240 --> 00:08:59,190
This link, it's going to bring you over to a website that's going to play more about the same site

108
00:08:59,190 --> 00:09:00,980
cookies and explaining them.

109
00:09:01,200 --> 00:09:09,420
So if you are seeing this warning message, you can just ignore it or as well, you can update your

110
00:09:09,420 --> 00:09:11,010
browser settings.

111
00:09:11,250 --> 00:09:17,070
And don't forget, after you're finished, just to reset them back to the default, if you do make some

112
00:09:17,070 --> 00:09:17,870
updates to it.

113
00:09:18,300 --> 00:09:22,860
So Post is creating and it's ignoring the rest of the path information.

114
00:09:22,860 --> 00:09:23,760
That's what we're creating.

115
00:09:24,240 --> 00:09:29,010
So we do want to try the put and the put is actually the one that's going to do the update, the put

116
00:09:29,010 --> 00:09:29,580
in the patch.

117
00:09:30,150 --> 00:09:37,030
So update the method to put and go back out and do a refresh, click any one of the users.

118
00:09:37,260 --> 00:09:41,970
So this one and this one has an add value of six.

119
00:09:42,540 --> 00:09:48,360
So when we do make the updates to it, it gets returned back that we are making the updates to that

120
00:09:48,360 --> 00:09:49,500
particular user.

121
00:09:50,400 --> 00:09:53,940
Let's update some of the content for the user.

122
00:09:56,490 --> 00:10:04,740
And we've got updated at being returned back and we can try that one more time just to make sure everything

123
00:10:04,740 --> 00:10:05,850
is working properly.

124
00:10:06,600 --> 00:10:10,260
So selected user number two, and we're seeing that.

125
00:10:10,260 --> 00:10:11,490
We're getting it updated.

126
00:10:13,030 --> 00:10:20,830
So keeping in mind that this is testing and point and typically you're not going to be doing puts and

127
00:10:20,830 --> 00:10:26,680
updates from front end code from the JavaScript, you don't want to leave your database open for these

128
00:10:26,680 --> 00:10:27,640
types of updates.

129
00:10:28,180 --> 00:10:32,410
So this would be more something that would be done within the backend code where you're making the updates

130
00:10:32,410 --> 00:10:33,730
to the database content.

131
00:10:34,000 --> 00:10:37,090
So you've got some more options to provide security.

132
00:10:37,630 --> 00:10:43,720
But if you do want to practice this as a good API that you can practice and get more familiar with making

133
00:10:43,720 --> 00:10:44,790
these types of requests.

134
00:10:45,400 --> 00:10:47,980
So also, let's update some of these buttons.

135
00:10:48,280 --> 00:10:52,780
And we could also update this to create the user.

136
00:10:52,990 --> 00:10:57,250
And because it is just a testing API, I'm not going to do that.

137
00:10:57,250 --> 00:11:04,060
But you're welcome to do and update this to post it be creating a new user with the same end point.

138
00:11:04,420 --> 00:11:08,370
And I'm just going to select these inputs and highlight the input.

139
00:11:08,680 --> 00:11:13,510
So update the style to display and display it as non.

140
00:11:16,100 --> 00:11:24,740
So that will disappear that and let's update the button to tax content, and this will just see main

141
00:11:24,740 --> 00:11:25,310
menu.

142
00:11:28,140 --> 00:11:31,370
And I'll play some styling to the button as well.

143
00:11:33,800 --> 00:11:43,370
So that the main menu button is going to be centered, so button class list add and other class of button

144
00:11:44,180 --> 00:11:44,810
update.

145
00:11:47,820 --> 00:11:50,430
So that will just center the content and make it look nicer.

146
00:11:52,540 --> 00:11:57,430
And whenever the user wants to get back to the main menu and they can just click the main menu button

147
00:11:57,430 --> 00:12:05,410
to load and reload the user information so that this was live data, if you went back there, this would

148
00:12:05,410 --> 00:12:12,010
be updated as we are sending over their update request and the server is receiving it the way that the

149
00:12:12,010 --> 00:12:18,370
testing server set up, that it just does the response chasten object when you're doing any updates

150
00:12:18,370 --> 00:12:20,020
or any creating any new users.

151
00:12:20,170 --> 00:12:22,710
So it's not actually updating the database once again.

152
00:12:23,290 --> 00:12:29,770
So let's just make it look nice and then we can wrap up this application and this testing endpoint.

153
00:12:30,940 --> 00:12:33,160
So using some Google fonts.

154
00:12:43,880 --> 00:12:58,470
And I add the Google fonts to the document and set the font family for the body of the content, so

155
00:12:58,490 --> 00:13:02,810
it's a body font family suit that looks like.

156
00:13:04,960 --> 00:13:09,190
But just some changes in the way the fights are being presented.

157
00:13:12,220 --> 00:13:16,330
Let's also update and add to the buttons.

158
00:13:18,420 --> 00:13:19,740
So do a HEITZ.

159
00:13:23,280 --> 00:13:25,290
And some padding to the button.

160
00:13:28,980 --> 00:13:36,230
And also border radius, and you can apply styling, however, however you feel necessary.

161
00:13:39,120 --> 00:13:41,670
And also make the font size bigger.

162
00:13:46,890 --> 00:13:50,070
And just get it to go to whatever the default height is going to be.

163
00:13:54,680 --> 00:14:00,560
And also, let's make the font size bigger for the entire document.

164
00:14:02,760 --> 00:14:09,780
So there we go, so that we can update we can interact with the content and actually I'm going to add

165
00:14:09,990 --> 00:14:11,870
one more option into it.

166
00:14:13,560 --> 00:14:20,040
So this will be Updater Field and for the updater,

167
00:14:23,190 --> 00:14:31,500
it will select the device within the updater and apply a border to each one of them.

168
00:14:38,660 --> 00:14:47,660
And really light border and update and add to that element.

169
00:14:50,630 --> 00:14:52,640
So when we create the user page.

170
00:14:57,310 --> 00:14:58,180
Four main.

171
00:15:01,500 --> 00:15:09,570
Class lost and the class of updater, and that way those elements are going to be presented differently

172
00:15:10,110 --> 00:15:13,920
and they're actually going to look a little bit more like editable fields.

173
00:15:14,640 --> 00:15:16,800
And also, let's do the background color.

174
00:15:19,090 --> 00:15:22,930
So just to make it look different so that look a little bit more like input fields.

175
00:15:25,130 --> 00:15:27,800
And then the user can update that information.

176
00:15:30,120 --> 00:15:36,030
In this lesson, we're finalizing the application, so we also want to take the opportunity for post

177
00:15:36,030 --> 00:15:39,590
and put method testing and this is a test server.

178
00:15:39,780 --> 00:15:47,220
So one of the tasks for this lesson is to add in the ability to send data and post it and put it to

179
00:15:47,220 --> 00:15:47,840
the server.

180
00:15:48,720 --> 00:15:55,650
So simulating adding content to the database, test the application, ensure the functionality is as

181
00:15:55,650 --> 00:15:56,430
required.

182
00:15:57,470 --> 00:16:00,130
Apply some styling to make it look nice.

183
00:16:01,860 --> 00:16:04,760
And customize the application as needed.