1
00:00:00,300 --> 00:00:05,940
In this video we're going to work through the new feature workflow so we have an existing application

2
00:00:05,940 --> 00:00:08,490
and we're ready to add something new to it.

3
00:00:08,490 --> 00:00:13,560
Obviously we know how we can change the code and get things working locally but we want to make sure

4
00:00:13,560 --> 00:00:17,700
we can get those changes up on github and Heroku as well.

5
00:00:17,700 --> 00:00:20,310
So we're gonna work through the process once together.

6
00:00:20,310 --> 00:00:26,510
Then you'll do it once on your own as the challenge for the video what we're going to do together is

7
00:00:26,510 --> 00:00:31,610
add some text to the about page describing where the data is coming from.

8
00:00:31,700 --> 00:00:37,280
Then is your challenge for the video you're going to go ahead and add some new data into the forecast

9
00:00:37,280 --> 00:00:38,630
that comes back.

10
00:00:38,630 --> 00:00:44,270
So over inside of the terminal let's kick things off by starting up our local development server when

11
00:00:44,270 --> 00:00:49,940
we're adding a new feature we want to start by testing things out locally before shipping those code

12
00:00:49,940 --> 00:00:51,420
changes to the user.

13
00:00:51,440 --> 00:00:55,420
It's a bad idea to just write some code and deploy to production.

14
00:00:55,460 --> 00:00:59,480
We've got to make sure it works first even if it's a small change.

15
00:00:59,540 --> 00:01:06,950
So from the terminal we're going to start up node on no demand source forward slash app dot J S providing

16
00:01:07,010 --> 00:01:08,540
our extension list.

17
00:01:08,690 --> 00:01:16,130
J.S. comma H B S now once this is up and running we should be able to access our site from local host

18
00:01:16,280 --> 00:01:18,170
three thousand once again.

19
00:01:18,320 --> 00:01:23,590
And this is still gonna work like it did before even though we made changes in the last video.

20
00:01:23,660 --> 00:01:26,680
Getting the app ready for Heroku right here.

21
00:01:26,780 --> 00:01:30,680
If I search for Boston I can still correctly get the weather.

22
00:01:30,680 --> 00:01:34,040
Our goal though is to make a change to the about page.

23
00:01:34,040 --> 00:01:36,450
So let's go ahead and pull that up.

24
00:01:36,560 --> 00:01:43,430
I'm going to close all open editors and from the templates directory I'll move into the views folder

25
00:01:43,550 --> 00:01:50,360
and I'm going to open up about Dot HP yes all I'm going to do is add a single paragraph right here below

26
00:01:50,360 --> 00:01:54,290
the header and above the image inside of that paragraph.

27
00:01:54,320 --> 00:02:00,490
I'm going to put some text describing exactly what this website is all about right here.

28
00:02:00,500 --> 00:02:04,750
This site was created by I'll put my name.

29
00:02:04,760 --> 00:02:08,310
You can put your name since you did indeed create it.

30
00:02:08,330 --> 00:02:17,300
It uses data from map box dot com and dark sky dot net.

31
00:02:17,360 --> 00:02:22,100
So here all I'm doing is adding a little bit of text into the application.

32
00:02:22,100 --> 00:02:27,360
Now after making the change the first thing we want to do is test things locally.

33
00:02:27,380 --> 00:02:29,570
I'll be saving the HB S. file.

34
00:02:29,660 --> 00:02:33,790
I'll be refreshing the page and making sure that my text shows up.

35
00:02:33,830 --> 00:02:34,510
It does.

36
00:02:34,520 --> 00:02:35,730
Which is great.

37
00:02:35,810 --> 00:02:41,330
Now that things are working locally we can go through the process of getting those changes pushed to

38
00:02:41,360 --> 00:02:44,050
get hub and to Heroku.

39
00:02:44,090 --> 00:02:49,250
So from the terminal the first thing we need to do is commit the changes right here.

40
00:02:49,250 --> 00:02:52,810
I'm going to run and get status to see exactly what's going on.

41
00:02:52,820 --> 00:02:59,700
We just have a single modified file I'll use get add dot to add that to the staging area.

42
00:02:59,780 --> 00:03:07,220
Then I'll create my commit get commit with the M flag to provide the message for the commit and I can

43
00:03:07,220 --> 00:03:11,040
use something like add about text.

44
00:03:11,120 --> 00:03:16,460
Now from here we are going to create the commit and now we need to push it up to get hub.

45
00:03:16,460 --> 00:03:22,200
So the code is backed up and up to date on that platform and we're going to push it up to Heroku.

46
00:03:22,280 --> 00:03:27,240
So our application gets redeployed right now on the live app.

47
00:03:27,260 --> 00:03:30,320
If I go over to the About Page what do I have.

48
00:03:30,320 --> 00:03:32,300
I don't have that text.

49
00:03:32,300 --> 00:03:34,130
Let's fix it right here.

50
00:03:34,130 --> 00:03:36,310
First up get push.

51
00:03:36,410 --> 00:03:40,950
This is equivalent to get push origin master.

52
00:03:41,000 --> 00:03:46,440
This is the command that's going to allow us to push up to the get hub remote.

53
00:03:46,490 --> 00:03:49,730
Once we round this all the code will be updated there.

54
00:03:49,730 --> 00:03:54,220
Next up we're gonna use get push Heroku master.

55
00:03:54,290 --> 00:04:00,560
This is going to push our latest comments up to her Roku which will redeploy our application allowing

56
00:04:00,560 --> 00:04:03,530
users to access the latest changes.

57
00:04:03,530 --> 00:04:07,420
This command should take just 15 seconds or so like it did before.

58
00:04:07,520 --> 00:04:13,250
And once it's done we'll be able to view those latest changes over on the live Web site.

59
00:04:13,250 --> 00:04:15,020
All right things are done over here.

60
00:04:15,050 --> 00:04:22,280
Let's test our work out over at get hub dot com I am going to give the repo page a refresh and I can

61
00:04:22,280 --> 00:04:28,820
see my latest changes are indeed showing up the templates directory was last updated a minute ago which

62
00:04:28,850 --> 00:04:30,110
is indeed correct.

63
00:04:30,230 --> 00:04:32,510
And then I'm gonna head over to the her Roku app.

64
00:04:32,510 --> 00:04:38,870
You RL and refresh the about page when I do my text is showing up so there it is.

65
00:04:38,900 --> 00:04:44,360
That's all we need to do to add a new feature into the application and get it pushed up to get hub and

66
00:04:44,360 --> 00:04:45,940
deployed to Heroku.

67
00:04:45,950 --> 00:04:48,500
Now it's your turn to do the same.

68
00:04:48,500 --> 00:04:51,830
I have some challenged comments outlining what I'd like you to do.

69
00:04:51,830 --> 00:04:59,090
To start I am going to close down about Dot HP s and collapse the templates and public directory in

70
00:04:59,090 --> 00:05:00,550
the utilise folder.

71
00:05:00,590 --> 00:05:07,700
You're gonna be making some changes to forecast dot J S this is where we actually generate the forecast

72
00:05:07,730 --> 00:05:10,390
string that shows up in the browser.

73
00:05:10,400 --> 00:05:14,020
Your goal is to add some additional information inside of there.

74
00:05:14,030 --> 00:05:16,220
So right here we have the challenge comments.

75
00:05:16,220 --> 00:05:16,810
Goal.

76
00:05:16,910 --> 00:05:23,180
Add new data to the forecast Step 1 update the forecast string to include the new data.

77
00:05:23,180 --> 00:05:29,690
Step 2 You want to commit your changes after testing things locally then you're going to push your changes

78
00:05:29,750 --> 00:05:36,650
up to get hub and deploy them to Heroku and finally you're going to test your work in the live application.

79
00:05:36,740 --> 00:05:43,250
So you should be able to crack open the hero who you are L fetch the forecast for a given location and

80
00:05:43,250 --> 00:05:46,640
see the new data you've included showing up.

81
00:05:46,640 --> 00:05:51,500
Now if you're looking for some inspiration as to what to include you could include some information

82
00:05:51,500 --> 00:05:54,620
about the temperature high and low for the day.

83
00:05:54,680 --> 00:06:01,120
This is available on that daily data object which we actually used to grab the summary.

84
00:06:01,120 --> 00:06:06,170
So on here there are other properties which you can explore to grab the high and low temperature.

85
00:06:06,290 --> 00:06:12,800
Then you could include something in the string saying the high today is fifty nine with a low of 38

86
00:06:12,980 --> 00:06:20,280
that you'd use the real data values instead of fifty nine and thirty eight this is Andrew with an update

87
00:06:20,280 --> 00:06:22,080
for the weather stack API.

88
00:06:22,080 --> 00:06:23,550
I bet you thought you were done with these.

89
00:06:23,550 --> 00:06:28,500
Well the good news is that this is the last lesson that needs to change in order to make the switch

90
00:06:28,500 --> 00:06:30,510
from Dark Sky to weather stack.

91
00:06:30,600 --> 00:06:35,000
So down below we have our current weather data for the weather stack API.

92
00:06:35,040 --> 00:06:38,850
We don't have the temperature min and max like we do for a dark sky.

93
00:06:38,850 --> 00:06:41,980
So for this challenge go ahead and include something else.

94
00:06:42,000 --> 00:06:45,540
There's a lot of data here that we're not using as an example.

95
00:06:45,540 --> 00:06:47,640
You could include the humidity.

96
00:06:47,640 --> 00:06:51,810
So our current forecast based on this data would start with the description.

97
00:06:51,930 --> 00:06:54,600
So it would start with overcast from there.

98
00:06:54,600 --> 00:06:56,160
The next sentence would be.

99
00:06:56,280 --> 00:06:58,430
It is currently 10 degrees out.

100
00:06:58,620 --> 00:07:03,600
Then from there the sentence after it would be it feels like eight degrees out.

101
00:07:03,600 --> 00:07:08,500
And the final sentence could be something like if the humidity is 80 percent.

102
00:07:08,580 --> 00:07:09,420
Period.

103
00:07:09,420 --> 00:07:13,320
So you could choose to include that as what you add for the challenge.

104
00:07:13,350 --> 00:07:16,870
So let's go back to the regular video and we'll continue on.

105
00:07:16,890 --> 00:07:22,380
I'll jump back in with another interruption showing you a potential solution once we get to that part

106
00:07:22,380 --> 00:07:24,400
of the lesson.

107
00:07:24,470 --> 00:07:24,970
All right.

108
00:07:24,980 --> 00:07:30,630
Take some time to knock that out adding that data or any other data you'd like to see in the forecast.

109
00:07:30,650 --> 00:07:34,310
Test your work and when you're done come back and click play

110
00:07:38,170 --> 00:07:38,920
how that go.

111
00:07:38,920 --> 00:07:40,540
Let's go ahead and get to it.

112
00:07:40,540 --> 00:07:44,110
The first thing I'm gonna do is console dot log out.

113
00:07:44,110 --> 00:07:50,080
The daily data object so we can figure out exactly what data we're going to add to the output.

114
00:07:50,560 --> 00:07:53,250
So right here I'll use console dot log.

115
00:07:53,350 --> 00:07:57,490
So we can take a look at what properties we have available that that'll be.

116
00:07:57,490 --> 00:08:03,620
Body dot Daily Dot data grabbing the first day's data exactly like we do.

117
00:08:03,630 --> 00:08:06,670
Down below right here for the summary.

118
00:08:06,670 --> 00:08:11,360
Now I'm going to save the forecast dot J.S. file from the terminal.

119
00:08:11,380 --> 00:08:18,550
I'll use NPM run start to start up the application and then I'm just going to mess around with the app

120
00:08:18,610 --> 00:08:20,680
over inside of the browser.

121
00:08:20,680 --> 00:08:27,130
So here I have local host three thousand what I'm going to do is just search for the weather for anywhere

122
00:08:27,610 --> 00:08:35,200
I'll use Philadelphia click search and hopefully over here in the terminal we do see that daily object

123
00:08:35,230 --> 00:08:37,440
and that is exactly what we're getting.

124
00:08:37,450 --> 00:08:42,930
So right here we have a few different options when it comes to exactly what we want to include what

125
00:08:42,940 --> 00:08:46,950
we're gonna do is include the temperature high and temperature low.

126
00:08:46,990 --> 00:08:53,950
So right here I have temperature high with the value of thirty nine point nine and temperature low with

127
00:08:53,950 --> 00:08:57,190
the value of thirty three point four seven.

128
00:08:57,190 --> 00:09:03,740
So these are the two properties we're going to include in our string message to actually get this done

129
00:09:03,740 --> 00:09:09,700
and we can now go ahead and remove the console dialogue call since we know what data we want to work

130
00:09:09,700 --> 00:09:10,020
with.

131
00:09:10,480 --> 00:09:18,400
And over inside of our callback call on line 20 over going to do is manipulate what exactly we are sending

132
00:09:18,400 --> 00:09:18,880
back.

133
00:09:19,300 --> 00:09:26,110
So we start off with the summary and then we say it is currently x degrees out from there what I'm going

134
00:09:26,110 --> 00:09:29,090
to do is add the next piece of data.

135
00:09:29,170 --> 00:09:36,700
So what I'm going to say is the high today is followed by the temperature high with a low of the temperature

136
00:09:36,850 --> 00:09:38,230
low right here.

137
00:09:38,230 --> 00:09:40,390
Let's go ahead and knock that out.

138
00:09:40,750 --> 00:09:47,610
Let's start with the high today is followed by a space.

139
00:09:47,630 --> 00:09:54,580
Now what we're going to do here is inject some data so to get that done I will close off that string.

140
00:09:54,730 --> 00:10:01,090
I will open up the next one and right here I'll use the plus operator to concatenate them together.

141
00:10:01,090 --> 00:10:06,760
Now I actually want to add some more data inside of there so we'll add another plus operator.

142
00:10:06,790 --> 00:10:10,940
And right here we're going to set up the temperature high.

143
00:10:11,110 --> 00:10:19,190
So that's going to be a body dot Daily Dot data grabbing the first day's data.

144
00:10:19,190 --> 00:10:23,890
Then dot followed by a temperature high.

145
00:10:23,950 --> 00:10:25,150
Perfect.

146
00:10:25,150 --> 00:10:31,600
Now after that what we're going to do is continue on with our string message and we'll include the temperature

147
00:10:31,810 --> 00:10:32,650
low.

148
00:10:32,650 --> 00:10:39,250
So right here I'll use the plus operator again to add a little more static text so after the temperature

149
00:10:39,250 --> 00:10:45,010
high I'll say space with a low of then right here.

150
00:10:45,010 --> 00:10:48,020
This is where I'm going to put the temperature low.

151
00:10:48,130 --> 00:10:56,490
So once again I'll use the plus operator to inject a dynamic value right inside that will be body dot

152
00:10:56,530 --> 00:11:00,100
Daily Dot data grabbing the first day's data.

153
00:11:00,100 --> 00:11:04,280
And this time it is temperature low.

154
00:11:04,280 --> 00:11:05,390
Perfect.

155
00:11:05,390 --> 00:11:09,680
Now with this in place we can wrap up with just a little more static text.

156
00:11:09,680 --> 00:11:16,430
So right here after I show that temperature low I'm going to add a period and a space just to make sure

157
00:11:16,430 --> 00:11:21,530
the two sentences are actually separated appropriately.

158
00:11:21,530 --> 00:11:26,180
This is Andrew with the last update ever related to the weather stack API.

159
00:11:26,330 --> 00:11:30,080
So right here we have a potential solution for getting this done.

160
00:11:30,110 --> 00:11:36,200
Now here I've taken my call to call back and I've broken it up across multiple lines so I'm still passing

161
00:11:36,200 --> 00:11:42,680
and undefined as the first argument and I'm still passing in my string as the second one I've even taken

162
00:11:42,680 --> 00:11:47,030
that string and I've broken that up on two multiple lines as well.

163
00:11:47,030 --> 00:11:54,370
Now everything's the same except for the very end of the string I added the humidity is then I can continue

164
00:11:54,530 --> 00:11:56,630
on at the humidity value.

165
00:11:56,630 --> 00:12:00,800
And finally I wrap things up with a percent sign and a period.

166
00:12:00,860 --> 00:12:04,250
So if the humidity was 70 percent that would read.

167
00:12:04,250 --> 00:12:07,160
The humidity is 70 percent.

168
00:12:07,160 --> 00:12:07,760
All right.

169
00:12:07,790 --> 00:12:10,570
So that's what you could have done to add the humidity.

170
00:12:10,580 --> 00:12:14,400
Let's jump back in to the lesson now once again.

171
00:12:14,410 --> 00:12:20,140
You could have made any sort of customization you liked in this case I chose to add the temperature

172
00:12:20,140 --> 00:12:22,220
high and temperature low.

173
00:12:22,270 --> 00:12:24,840
So at this point we have completed step 1.

174
00:12:24,910 --> 00:12:28,880
We have updated the forecast string to include the new data.

175
00:12:28,900 --> 00:12:34,240
Let's go ahead and run the program one more time just to make sure it's showing up locally if it is

176
00:12:34,480 --> 00:12:37,260
we'll get it running in production as well.

177
00:12:37,300 --> 00:12:43,690
So I started up the app I'll refresh the browser and I'm going to search for a location like Philly

178
00:12:44,350 --> 00:12:49,540
right here and as fetched to the weather and I can see the high today is thirty nine point nine with

179
00:12:49,540 --> 00:12:52,990
a low of thirty three point four seven.

180
00:12:52,990 --> 00:12:54,100
Fantastic.

181
00:12:54,100 --> 00:12:58,060
So now that we have this in place let's continue on with the challenge.

182
00:12:58,060 --> 00:13:01,360
The next thing we need to do is commit our changes.

183
00:13:01,420 --> 00:13:08,040
So right here I'll use control C to shut down the app and clear to clear the terminal output.

184
00:13:08,320 --> 00:13:11,360
Now up above I have my challenge comments in place.

185
00:13:11,380 --> 00:13:15,950
I'm going to take a quick moment to remove those so they don't get committed.

186
00:13:16,120 --> 00:13:20,380
And with all of the files saved we're now ready to add our commit.

187
00:13:20,470 --> 00:13:26,220
Let's go ahead and start with get status just to see what changes we have right here.

188
00:13:26,230 --> 00:13:28,880
We can see we have a couple of changes now.

189
00:13:28,960 --> 00:13:32,090
You have changes to files that I don't have here.

190
00:13:32,110 --> 00:13:37,900
I actually had to refill this part of the lesson since it got lost when I was recording and I had to

191
00:13:37,960 --> 00:13:41,340
update both of my api keys because they had changed.

192
00:13:41,350 --> 00:13:43,120
I had manually changed them.

193
00:13:43,210 --> 00:13:47,080
So you should only see a change to forecast dot J s here.

194
00:13:47,110 --> 00:13:50,050
Sorry for the confusion on that.

195
00:13:50,050 --> 00:13:56,380
Now that we have this in place we want to commit our changes so get at DOT followed by get commit with

196
00:13:56,380 --> 00:14:00,090
the M flag so we can provide our message right here.

197
00:14:00,100 --> 00:14:06,730
Something like add high and low to forecast is going to get the job done.

198
00:14:06,820 --> 00:14:10,660
Now once we've committed those changes we want to do two things.

199
00:14:10,660 --> 00:14:16,690
One we want to push them up to get hub and make sure they show up there and to we want to push them

200
00:14:16,690 --> 00:14:24,280
to Heroku and test out the production version of our server down below in the terminal to get that done.

201
00:14:24,280 --> 00:14:29,060
The first thing we're going to do is use clear to clear the terminal output.

202
00:14:29,080 --> 00:14:35,050
Next we're going to use get push to push our changes up to get hub right here.

203
00:14:35,070 --> 00:14:37,630
That should wrap up in just a couple of seconds.

204
00:14:37,630 --> 00:14:40,070
All of our changes have been pushed.

205
00:14:40,210 --> 00:14:47,140
And the next thing we're going to do after using clear is push all of our changes up to Heroku.

206
00:14:47,320 --> 00:14:53,170
I want to make sure that I can see the temperature highs and lows any production version of our app

207
00:14:53,230 --> 00:14:54,430
as well.

208
00:14:54,430 --> 00:15:00,690
So right here that's going to be get push followed by Heroku master.

209
00:15:00,790 --> 00:15:05,380
That's going to allow us to deploy the latest version of our project.

210
00:15:05,860 --> 00:15:07,800
Let's go ahead and run the command.

211
00:15:07,800 --> 00:15:08,080
All right.

212
00:15:08,080 --> 00:15:14,740
Here it is attempting to deploy to Heroku so it's going through the same process it's gone through before.

213
00:15:14,740 --> 00:15:19,480
And once this is done we're just going to test things out over in the browser.

214
00:15:19,480 --> 00:15:21,850
I'm gonna make sure that I do see that data.

215
00:15:21,940 --> 00:15:27,910
It looks like the new app is launching and it launched successfully so over in the browser I'm going

216
00:15:27,910 --> 00:15:30,210
to refresh the production Heroku.

217
00:15:30,210 --> 00:15:32,540
You are all right here.

218
00:15:32,590 --> 00:15:37,300
I'll navigate over to the weather page and I'll get the weather for Austin.

219
00:15:37,300 --> 00:15:40,210
I'm going to fire off these search and what do I see.

220
00:15:40,210 --> 00:15:46,290
I see my new data the high in Austin is 76 with a low of forty five.

221
00:15:46,360 --> 00:15:49,790
What I wouldn't do for those temperatures right now.

222
00:15:49,810 --> 00:15:50,520
All right.

223
00:15:50,530 --> 00:15:55,100
So there we go we have a brand new feature added and deployed.

224
00:15:55,160 --> 00:15:57,910
That's where we're going to stop for this one.

225
00:15:57,940 --> 00:16:01,570
There's just one video left in this section and it's coming up next.

226
00:16:01,570 --> 00:16:04,020
So stay tuned and I'll see you then.