1
00:00:00,180 --> 00:00:05,340
Before we dive into the topics which we're going to cover in this lesson I want to take a quick moment

2
00:00:05,340 --> 00:00:08,340
to talk about the big picture goal for this section.

3
00:00:08,340 --> 00:00:15,480
The goal is to allow users to be able to fetch a forecast for their location from the weather Web site.

4
00:00:15,540 --> 00:00:20,850
So instead of someone running a command from the terminal to get the forecast they'll be able to pull

5
00:00:20,850 --> 00:00:26,880
up a you are all in the browser here they'll see a form they type their address into an input they click

6
00:00:26,880 --> 00:00:31,740
a button and a few hundred milliseconds later their weather information shows up.

7
00:00:31,770 --> 00:00:36,880
This is going to provide a much nicer interface for interacting with our node application.

8
00:00:36,930 --> 00:00:42,870
They'll be able to do so via the browser as opposed to doing so by running commands from the terminal

9
00:00:42,990 --> 00:00:48,960
getting all of this done is going to require us to actually fill out that one route we created earlier

10
00:00:48,960 --> 00:00:55,500
in the class that was forward slash whether when we originally created it we just had it send back some

11
00:00:55,560 --> 00:00:56,630
static Jason.

12
00:00:56,630 --> 00:01:03,330
We created an object with some dummy data inside the goal in this section is to have the code inside

13
00:01:03,330 --> 00:01:08,850
of here actually use the geo code and forecast functions we created earlier.

14
00:01:08,850 --> 00:01:14,850
It's then going to send that Jason data back to the browser and the browser will be able to render the

15
00:01:14,850 --> 00:01:16,860
forecast correctly.

16
00:01:16,860 --> 00:01:22,350
Let's go ahead and kick things off in this video by talking about how the browser is going to be able

17
00:01:22,350 --> 00:01:29,280
to send the address to this route because think about it the weather route needs to know what address

18
00:01:29,310 --> 00:01:35,040
it should geo code and fetch the forecast for to get that done and we'll use a query string.

19
00:01:35,070 --> 00:01:38,730
So the browser is going to provide a query string as part of the.

20
00:01:38,730 --> 00:01:45,210
You are all the server will then read the query string value to get the address information to kick

21
00:01:45,210 --> 00:01:45,780
things off.

22
00:01:45,780 --> 00:01:52,860
I'm going to close all open files except for app dot J s that's the only file we're going to need inside

23
00:01:52,860 --> 00:01:58,740
of the web server folder and I am going to collapse the public and templates directory just to stay

24
00:01:58,740 --> 00:02:00,120
a bit organized.

25
00:02:00,120 --> 00:02:05,820
Now you've already worked with query strings before you'll remember that we used them with the geo coding

26
00:02:05,850 --> 00:02:08,100
API over in weather app.

27
00:02:08,100 --> 00:02:15,750
We had the utilize directory in there we had geo code dot J S inside of this file when we created the

28
00:02:15,750 --> 00:02:16,640
U.R.L..

29
00:02:16,740 --> 00:02:22,450
We used a query string to provide the access token and then we provided that value.

30
00:02:22,740 --> 00:02:28,230
And I also used it to set up one of the options we explored which was limit limiting us to just these

31
00:02:28,230 --> 00:02:30,270
single first result.

32
00:02:30,270 --> 00:02:35,760
We're going to go ahead and also use a query string with the end point we're going to create to accept

33
00:02:35,760 --> 00:02:37,650
the address to get started.

34
00:02:37,650 --> 00:02:39,600
Let's go ahead and create a second.

35
00:02:39,630 --> 00:02:46,230
You are real that sends back Jason we're going to use that to experiment with query strings and express

36
00:02:46,470 --> 00:02:51,960
then you'll use what you've learned as the challenge to integrate that into forward slash weather up

37
00:02:51,960 --> 00:02:52,450
above.

38
00:02:52,770 --> 00:02:59,850
So down here app dot get let's set up a you are all like forward slash products let's say we're creating

39
00:02:59,880 --> 00:03:06,580
an end point that sends back products to be displayed in the browser on our e-commerce site.

40
00:03:06,600 --> 00:03:10,330
Now right here we still get request and we still get response.

41
00:03:10,410 --> 00:03:15,630
And for the moment we're just going to send back some Jason using response dot sent.

42
00:03:15,780 --> 00:03:21,740
I'm going to send back and static object and the only property we're gonna have on here is products

43
00:03:21,930 --> 00:03:26,510
and we'll set it equal to an empty array sending back no products.

44
00:03:26,610 --> 00:03:32,370
Now I'm gonna save app dot J S and we're going to crack that you are L open in the browser I'm going

45
00:03:32,370 --> 00:03:40,890
to leave the web app open in a separate tab I'll visit local host three thousand forward slash products.

46
00:03:40,890 --> 00:03:47,100
Now when we visit this we are going to get our static Jason showing up and this is never going to change

47
00:03:47,400 --> 00:03:54,150
if we wanted to actually implement some sort of search feature we would use a query string and remember

48
00:03:54,420 --> 00:04:00,540
query strings get provided on the end of the U.R.L. we start them off with a question mark and then

49
00:04:00,540 --> 00:04:06,420
we provide key value pairs to pass additional information to the server.

50
00:04:06,420 --> 00:04:12,220
So in this case the format is key equals value for an e-commerce site.

51
00:04:12,240 --> 00:04:18,120
I might want users to be able to search amongst the list of products for a specific one and for that

52
00:04:18,150 --> 00:04:25,750
I could set up a search query argument search equals and let's say the person is searching for games.

53
00:04:25,750 --> 00:04:28,660
So I would put their search term right inside of here.

54
00:04:28,690 --> 00:04:34,420
Now if I hit enter this is going to fire off another request to our Express server but it's going to

55
00:04:34,420 --> 00:04:37,200
pass along this additional information.

56
00:04:37,330 --> 00:04:43,600
Now since we're the ones creating the back end we can choose to support as many or as few query string

57
00:04:43,660 --> 00:04:45,070
options as we'd like.

58
00:04:45,160 --> 00:04:50,410
We can support 0 1 or 30 in this case we're passing just one along.

59
00:04:50,410 --> 00:04:56,890
If we did want to provide a second or a third we would just separate them using the ampersand that is

60
00:04:56,890 --> 00:05:03,520
shift seven on your keyboard followed by another key value pair maybe I want to setup support for something

61
00:05:03,520 --> 00:05:09,430
like rating which allows me to search for products that have a specific rating let's say I want to only

62
00:05:09,430 --> 00:05:11,530
see five star products.

63
00:05:11,560 --> 00:05:18,010
So the best games possible if I send this off now we're passing two pieces of information along to the

64
00:05:18,010 --> 00:05:18,680
server.

65
00:05:18,850 --> 00:05:24,010
And the question is how does the server actually get that information.

66
00:05:24,010 --> 00:05:29,660
Now this information it's available to us inside of our Express route handler.

67
00:05:29,740 --> 00:05:30,640
That's our function.

68
00:05:30,640 --> 00:05:33,960
Right here we have both request and response.

69
00:05:34,060 --> 00:05:40,420
And we've used response plenty of times before information about that query string though that lives

70
00:05:40,420 --> 00:05:41,560
on request.

71
00:05:41,560 --> 00:05:48,190
Let's go ahead and explore that down below the request object has a query property on their query is

72
00:05:48,190 --> 00:05:54,310
also an object and this contains all of the query string information before we go any further let's

73
00:05:54,310 --> 00:05:57,880
just dump this to the console to see what exactly we get.

74
00:05:57,880 --> 00:06:04,780
So right here console dot log then going to dump request dot query to the console.

75
00:06:04,780 --> 00:06:11,170
I'll save at DOT and J S so the server restarts and all we're gonna do is refresh our current page in

76
00:06:11,170 --> 00:06:12,100
the browser.

77
00:06:12,100 --> 00:06:14,760
Now the response is still exactly the same.

78
00:06:14,830 --> 00:06:21,280
But if I head back over to visual studio code down below I can see I'm getting an object printing I

79
00:06:21,280 --> 00:06:27,820
have a search property with the value games and I have a rating property with the value of five.

80
00:06:27,910 --> 00:06:34,120
So the query string that was provided along with the request has been passed by express and the data

81
00:06:34,210 --> 00:06:37,150
is made available to us in this object.

82
00:06:37,150 --> 00:06:44,020
If I wanted to grab the string value for search I could use request dot query dot search.

83
00:06:44,080 --> 00:06:49,960
Now I'm grabbing one of the individual values and if I refreshed the browser once again we would be

84
00:06:49,960 --> 00:06:53,560
able to see that string print inside of the terminal.

85
00:06:53,560 --> 00:06:59,590
So being able to work with request dot query is how we're going to access those additional values passed

86
00:06:59,590 --> 00:07:01,120
along with a request.

87
00:07:01,120 --> 00:07:06,240
Now Express doesn't give us a way to force a given query option to be provided.

88
00:07:06,250 --> 00:07:10,050
So for this example let's say that search needs to be provided.

89
00:07:10,060 --> 00:07:13,960
You have to search for something but you don't have to provide a rating.

90
00:07:14,080 --> 00:07:19,540
If we wanted to actually set that up we'd have to use an if statement to add a little bit of conditional

91
00:07:19,540 --> 00:07:22,240
logic inside of our function.

92
00:07:22,270 --> 00:07:29,140
Let's go ahead and do just that making sure that search is actually there before we send back the products

93
00:07:29,380 --> 00:07:30,730
right here to do that.

94
00:07:30,790 --> 00:07:37,900
We will use an if statement I am going to set up an if statement and the goal is to run this if statement

95
00:07:38,200 --> 00:07:42,910
only when something has gone wrong when there is no search term.

96
00:07:43,210 --> 00:07:48,950
So right here let's start by accessing these search request dot query dot search.

97
00:07:49,030 --> 00:07:52,090
That is exactly what we just used down below.

98
00:07:52,090 --> 00:07:56,520
Now this is only going to run the code block when search is provided.

99
00:07:56,590 --> 00:08:03,250
We want the opposite effect so to flip that we will use the logical not operator to flip true to false

100
00:08:03,310 --> 00:08:04,940
or false to true.

101
00:08:04,960 --> 00:08:11,820
Now this code is only going to run when there is no search term and that is the intended result.

102
00:08:11,830 --> 00:08:12,430
Right here.

103
00:08:12,430 --> 00:08:13,710
What are we going to do.

104
00:08:13,720 --> 00:08:21,890
I'm going to use response dot send to send back some Jason right here I'm going to provide the object

105
00:08:21,920 --> 00:08:25,700
and I'll set up an error message providing them with a little feedback.

106
00:08:25,700 --> 00:08:31,930
I can say you must provide a search term perfect.

107
00:08:31,970 --> 00:08:36,890
Now if we don't provide search we're going to see our error message showing up.

108
00:08:36,890 --> 00:08:40,480
And if we do we'll see the product's array coming back.

109
00:08:40,490 --> 00:08:42,310
Now there's a problem with this code.

110
00:08:42,440 --> 00:08:47,780
I'm about to intentionally generate an error message because it's an error that comes up in the Q and

111
00:08:47,780 --> 00:08:52,600
A very often and I want to make sure that students actually know what's going on.

112
00:08:52,730 --> 00:08:58,340
So I'm gonna save app dot J.S. making sure node man restarts over in the browser what we're gonna do

113
00:08:58,550 --> 00:09:04,760
is get rid of search we can actually get rid of the entire query string just heading over to forward

114
00:09:04,760 --> 00:09:06,330
slash products.

115
00:09:06,380 --> 00:09:07,700
I'm gonna do just that.

116
00:09:07,850 --> 00:09:08,630
And what do we get.

117
00:09:08,630 --> 00:09:10,730
We get our message showing up correctly.

118
00:09:10,730 --> 00:09:11,320
Error.

119
00:09:11,420 --> 00:09:17,840
You must provide a search term in the terminal though you can see we did indeed get a javascript error

120
00:09:17,870 --> 00:09:18,740
printing.

121
00:09:18,740 --> 00:09:25,430
And if I scroll up to the top of it it says the following cannot set headers after they are sent to

122
00:09:25,430 --> 00:09:26,350
the client.

123
00:09:26,540 --> 00:09:31,880
You're gonna see this error message when you try to respond to a request twice.

124
00:09:31,880 --> 00:09:32,870
You can't do that.

125
00:09:33,050 --> 00:09:39,950
H TTP requests have a single request that goes to the server and a single response that comes back.

126
00:09:39,950 --> 00:09:43,880
In this case we are indeed trying to respond twice.

127
00:09:43,880 --> 00:09:50,060
If there is no search term we use response dot send to send back the error but then the code down below

128
00:09:50,180 --> 00:09:56,100
it still runs we can see undefined was printed because there was no search field provided.

129
00:09:56,180 --> 00:09:58,340
That's coming from this line right here.

130
00:09:58,340 --> 00:10:03,170
Then we'll use response dot send again to try to send back the other object.

131
00:10:03,170 --> 00:10:05,600
This is what's causing the error.

132
00:10:05,600 --> 00:10:12,110
So if you ever see cannot set headers after they are sent to the client that means you are sending two

133
00:10:12,110 --> 00:10:14,790
responses back when you can only send one.

134
00:10:14,870 --> 00:10:16,820
Do address this with our current setup.

135
00:10:16,850 --> 00:10:24,050
All we need to do is add return right here before response dot send by using return we are stopping

136
00:10:24,050 --> 00:10:27,650
the function execution that is this function right here.

137
00:10:27,710 --> 00:10:32,960
So if there is no search term we stop the function and send back their response which means the code

138
00:10:33,020 --> 00:10:34,850
down below doesn't run.

139
00:10:34,850 --> 00:10:40,750
Now you could have also just added on else and put the success case code right inside of here.

140
00:10:40,820 --> 00:10:45,260
But this is a pretty common pattern with Express so I wanted to make you aware of it.

141
00:10:45,290 --> 00:10:51,470
So when you write express code and look at other code people have written code like this actually makes

142
00:10:51,470 --> 00:10:52,700
sense to you.

143
00:10:52,700 --> 00:10:55,970
So now we have enforced that the search term is provided.

144
00:10:56,060 --> 00:10:59,560
I'm going to save app dot J S and scroll to the bottom.

145
00:10:59,600 --> 00:11:01,580
I can see that my server did restart.

146
00:11:01,580 --> 00:11:07,390
There are no errors and if I refresh things in the browser we still get our error message.

147
00:11:07,460 --> 00:11:14,780
But this time over in the terminal nothing has gone wrong since we only tried to respond a single time.

148
00:11:14,780 --> 00:11:18,260
Now let's add on search and makes sure that still works right here.

149
00:11:18,260 --> 00:11:19,340
Question mark.

150
00:11:19,460 --> 00:11:24,960
Search equals games and I'll leave off ratings since that shouldn't be required.

151
00:11:25,070 --> 00:11:29,840
And right here we are now getting our success content showing up down below.

152
00:11:29,840 --> 00:11:36,400
We have our little products Jason available so that is it for the basics of query strings.

153
00:11:36,450 --> 00:11:43,450
The client whether it's us typing a You are all in the browser or us providing a you RL V a client side.

154
00:11:43,460 --> 00:11:50,390
JavaScript can set up that query string it gets sent off to the server the server can use that information

155
00:11:50,390 --> 00:11:53,900
with their request and it can send a response back.

156
00:11:53,960 --> 00:11:59,870
Now currently we aren't using these search term to do anything meaningful but down below you could imagine

157
00:11:59,870 --> 00:12:05,510
we had an array of products and we used the array filter method to actually filter.

158
00:12:05,510 --> 00:12:11,720
That brings us to the other route we have set up forward slash weather now that we've explored how we

159
00:12:11,720 --> 00:12:13,730
can use the query string.

160
00:12:13,730 --> 00:12:18,340
It's gonna be your challenge for the video to do something similar for the end point.

161
00:12:18,380 --> 00:12:22,580
We're actually going to wire up with the weather application right here.

162
00:12:22,580 --> 00:12:28,370
What I'd like you to do is update the weather end point right here to accept an address.

163
00:12:28,370 --> 00:12:34,210
Now this address which will be provided as part of the query string that's going to be required.

164
00:12:34,280 --> 00:12:37,330
And it's gonna be the only query option that we support.

165
00:12:37,370 --> 00:12:39,240
So you have to provide the address.

166
00:12:39,260 --> 00:12:42,730
Otherwise we won't know which location to fetch.

167
00:12:42,740 --> 00:12:43,790
The weather for.

168
00:12:44,210 --> 00:12:51,320
So if no address is provided you're going to setup the root handler to send back an error message.

169
00:12:51,320 --> 00:12:57,020
You can send back a Jason object like we did down below setting up an error property with a message

170
00:12:57,020 --> 00:12:59,630
like address must be provided.

171
00:12:59,630 --> 00:13:05,430
Now if there is an address that's great for the moment you're going to continue to send back these static.

172
00:13:05,450 --> 00:13:11,600
Jason above in the next several videos we'll worry about actually geo coding things and getting the

173
00:13:11,600 --> 00:13:15,020
forecast then these values will no longer be static.

174
00:13:15,020 --> 00:13:16,520
They'll be dynamic.

175
00:13:16,520 --> 00:13:22,930
Now when you do send this back I also want you to add on an additional property address and the value

176
00:13:22,930 --> 00:13:26,870
for address should just be whatever address was passed in.

177
00:13:26,890 --> 00:13:32,740
So you're taking the input and you're adding it on to the response sending it back just so that information

178
00:13:32,890 --> 00:13:34,020
is available.

179
00:13:34,180 --> 00:13:39,790
Now step number three you want to go to forward slash whether when you do that you should see the error

180
00:13:39,820 --> 00:13:46,090
saying you must provide an address so you'll go over to forward slash whether with the address query

181
00:13:46,090 --> 00:13:52,990
options set up in the query string and when you do this I would expect to see this object with the address

182
00:13:52,990 --> 00:13:58,660
property added and the value would be Philadelphia matching up with the value right here.

183
00:13:58,660 --> 00:14:04,780
You could then visited again with a different new RL to make sure you see that as you change the address.

184
00:14:04,780 --> 00:14:05,320
All right.

185
00:14:05,320 --> 00:14:10,960
Take as much time as you need to knock that one out test your work and when you're done come back and

186
00:14:10,960 --> 00:14:11,530
click play

187
00:14:15,120 --> 00:14:15,870
how'd you do.

188
00:14:15,870 --> 00:14:20,180
Let's go ahead and kick things off in the browser by switching up are you are real.

189
00:14:20,340 --> 00:14:24,780
I'm gonna go from forward slash products to forward slash weather.

190
00:14:24,780 --> 00:14:30,210
Now in this case I'm not providing the address so I would expect to see my error showing up instead

191
00:14:30,210 --> 00:14:33,930
of seeing the dummy data to actually get that done.

192
00:14:33,930 --> 00:14:36,280
We're gonna continue on with step number one.

193
00:14:36,330 --> 00:14:37,170
No address.

194
00:14:37,170 --> 00:14:39,990
Send back an error message in here.

195
00:14:39,990 --> 00:14:42,900
We'll use an if statement like we did down below.

196
00:14:42,900 --> 00:14:51,210
So if the condition and the code to run we're going to start by accessing request dot query dot address.

197
00:14:51,210 --> 00:14:57,600
Now this is going to run the code if there is an address we'll flip that using the logical not operator.

198
00:14:57,600 --> 00:15:03,380
Now the codes only going to run when there's no address and we're going to send back that error.

199
00:15:03,450 --> 00:15:06,370
I'll use return to make sure the function stops.

200
00:15:06,450 --> 00:15:07,650
Then I'll use response.

201
00:15:07,650 --> 00:15:11,200
Dot send to send back the following object.

202
00:15:11,310 --> 00:15:18,690
The object will have a single property error and we'll provide a little message that's e r o r perfect

203
00:15:19,180 --> 00:15:26,460
the string can say something simple like you must provide an address the exact text you chose to set

204
00:15:26,460 --> 00:15:28,820
up here is not important for the challenge.

205
00:15:28,830 --> 00:15:31,380
Anything similar would have worked.

206
00:15:31,380 --> 00:15:33,860
Now we have the error handling set up.

207
00:15:34,020 --> 00:15:39,630
If there is an address I want to continue to send back the Jason and that is exactly what this code

208
00:15:39,660 --> 00:15:41,000
is going to do.

209
00:15:41,100 --> 00:15:44,470
If there is no address I now get my error.

210
00:15:44,520 --> 00:15:46,510
Let's go ahead and set one up though.

211
00:15:46,770 --> 00:15:53,150
We use the question mark address equals I'll use Philadelphia as mine and right here.

212
00:15:53,160 --> 00:15:56,680
I do indeed see that static Jason showing up.

213
00:15:56,760 --> 00:16:03,060
Now I wanted you to also add an additional property on to the object that contains the value provided.

214
00:16:03,060 --> 00:16:11,880
So right here address is going to get its value from request that query dot address which we know exists

215
00:16:11,940 --> 00:16:15,810
since we already added the conditional logic up above.

216
00:16:15,810 --> 00:16:21,930
Now that we have this in place I should be able to refresh the browser once again see my additional

217
00:16:21,930 --> 00:16:28,500
property with my search term right inside I'm going to swap out Philadelphia for something like Boston

218
00:16:28,800 --> 00:16:30,480
and if I run that what do I get.

219
00:16:30,480 --> 00:16:36,990
I'm seeing Boston show up as the value for address now that we have the query string in place.

220
00:16:37,020 --> 00:16:42,900
We are indeed headed in the right direction and the weather endpoint is going to be easy to continue

221
00:16:42,900 --> 00:16:51,180
to expand on and actually use that address to geo code and fetch the forecast information down below.

222
00:16:51,180 --> 00:16:57,120
I'm gonna remove those challenged comments save the file for the final time in this one and that's where

223
00:16:57,120 --> 00:16:58,950
we're gonna stop for the moment.

224
00:16:58,950 --> 00:17:03,840
Now that we know how to get additional information along with their request we're gonna continue on

225
00:17:03,840 --> 00:17:05,110
in the next video.

226
00:17:05,160 --> 00:17:07,080
So stay tuned and I'll see you then.