In this video we're going to work through the new feature workflow so we have an existing application
and we're ready to add something new to it.
Obviously we know how we can change the code and get things working locally but we want to make sure
we can get those changes up on github and Heroku as well.
So we're gonna work through the process once together.
Then you'll do it once on your own as the challenge for the video what we're going to do together is
add some text to the about page describing where the data is coming from.
Then is your challenge for the video you're going to go ahead and add some new data into the forecast
that comes back.
So over inside of the terminal let's kick things off by starting up our local development server when
we're adding a new feature we want to start by testing things out locally before shipping those code
changes to the user.
It's a bad idea to just write some code and deploy to production.
We've got to make sure it works first even if it's a small change.
So from the terminal we're going to start up node on no demand source forward slash app dot J S providing
our extension list.
J.S. comma H B S now once this is up and running we should be able to access our site from local host
three thousand once again.
And this is still gonna work like it did before even though we made changes in the last video.
Getting the app ready for Heroku right here.
If I search for Boston I can still correctly get the weather.
Our goal though is to make a change to the about page.
So let's go ahead and pull that up.
I'm going to close all open editors and from the templates directory I'll move into the views folder
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
the header and above the image inside of that paragraph.
I'm going to put some text describing exactly what this website is all about right here.
This site was created by I'll put my name.
You can put your name since you did indeed create it.
It uses data from map box dot com and dark sky dot net.
So here all I'm doing is adding a little bit of text into the application.
Now after making the change the first thing we want to do is test things locally.
I'll be saving the HB S. file.
I'll be refreshing the page and making sure that my text shows up.
It does.
Which is great.
Now that things are working locally we can go through the process of getting those changes pushed to
get hub and to Heroku.
So from the terminal the first thing we need to do is commit the changes right here.
I'm going to run and get status to see exactly what's going on.
We just have a single modified file I'll use get add dot to add that to the staging area.
Then I'll create my commit get commit with the M flag to provide the message for the commit and I can
use something like add about text.
Now from here we are going to create the commit and now we need to push it up to get hub.
So the code is backed up and up to date on that platform and we're going to push it up to Heroku.
So our application gets redeployed right now on the live app.
If I go over to the About Page what do I have.
I don't have that text.
Let's fix it right here.
First up get push.
This is equivalent to get push origin master.
This is the command that's going to allow us to push up to the get hub remote.
Once we round this all the code will be updated there.
Next up we're gonna use get push Heroku master.
This is going to push our latest comments up to her Roku which will redeploy our application allowing
users to access the latest changes.
This command should take just 15 seconds or so like it did before.
And once it's done we'll be able to view those latest changes over on the live Web site.
All right things are done over here.
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
see my latest changes are indeed showing up the templates directory was last updated a minute ago which
is indeed correct.
And then I'm gonna head over to the her Roku app.
You RL and refresh the about page when I do my text is showing up so there it is.
That's all we need to do to add a new feature into the application and get it pushed up to get hub and
deployed to Heroku.
Now it's your turn to do the same.
I have some challenged comments outlining what I'd like you to do.
To start I am going to close down about Dot HP s and collapse the templates and public directory in
the utilise folder.
You're gonna be making some changes to forecast dot J S this is where we actually generate the forecast
string that shows up in the browser.
Your goal is to add some additional information inside of there.
So right here we have the challenge comments.
Goal.
Add new data to the forecast Step 1 update the forecast string to include the new data.
Step 2 You want to commit your changes after testing things locally then you're going to push your changes
up to get hub and deploy them to Heroku and finally you're going to test your work in the live application.
So you should be able to crack open the hero who you are L fetch the forecast for a given location and
see the new data you've included showing up.
Now if you're looking for some inspiration as to what to include you could include some information
about the temperature high and low for the day.
This is available on that daily data object which we actually used to grab the summary.
So on here there are other properties which you can explore to grab the high and low temperature.
Then you could include something in the string saying the high today is fifty nine with a low of 38
that you'd use the real data values instead of fifty nine and thirty eight this is Andrew with an update
for the weather stack API.
I bet you thought you were done with these.
Well the good news is that this is the last lesson that needs to change in order to make the switch
from Dark Sky to weather stack.
So down below we have our current weather data for the weather stack API.
We don't have the temperature min and max like we do for a dark sky.
So for this challenge go ahead and include something else.
There's a lot of data here that we're not using as an example.
You could include the humidity.
So our current forecast based on this data would start with the description.
So it would start with overcast from there.
The next sentence would be.
It is currently 10 degrees out.
Then from there the sentence after it would be it feels like eight degrees out.
And the final sentence could be something like if the humidity is 80 percent.
Period.
So you could choose to include that as what you add for the challenge.
So let's go back to the regular video and we'll continue on.
I'll jump back in with another interruption showing you a potential solution once we get to that part
of the lesson.
All right.
Take some time to knock that out adding that data or any other data you'd like to see in the forecast.
Test your work and when you're done come back and click play
how that go.
Let's go ahead and get to it.
The first thing I'm gonna do is console dot log out.
The daily data object so we can figure out exactly what data we're going to add to the output.
So right here I'll use console dot log.
So we can take a look at what properties we have available that that'll be.
Body dot Daily Dot data grabbing the first day's data exactly like we do.
Down below right here for the summary.
Now I'm going to save the forecast dot J.S. file from the terminal.
I'll use NPM run start to start up the application and then I'm just going to mess around with the app
over inside of the browser.
So here I have local host three thousand what I'm going to do is just search for the weather for anywhere
I'll use Philadelphia click search and hopefully over here in the terminal we do see that daily object
and that is exactly what we're getting.
So right here we have a few different options when it comes to exactly what we want to include what
we're gonna do is include the temperature high and temperature low.
So right here I have temperature high with the value of thirty nine point nine and temperature low with
the value of thirty three point four seven.
So these are the two properties we're going to include in our string message to actually get this done
and we can now go ahead and remove the console dialogue call since we know what data we want to work
with.
And over inside of our callback call on line 20 over going to do is manipulate what exactly we are sending
back.
So we start off with the summary and then we say it is currently x degrees out from there what I'm going
to do is add the next piece of data.
So what I'm going to say is the high today is followed by the temperature high with a low of the temperature
low right here.
Let's go ahead and knock that out.
Let's start with the high today is followed by a space.
Now what we're going to do here is inject some data so to get that done I will close off that string.
I will open up the next one and right here I'll use the plus operator to concatenate them together.
Now I actually want to add some more data inside of there so we'll add another plus operator.
And right here we're going to set up the temperature high.
So that's going to be a body dot Daily Dot data grabbing the first day's data.
Then dot followed by a temperature high.
Perfect.
Now after that what we're going to do is continue on with our string message and we'll include the temperature
low.
So right here I'll use the plus operator again to add a little more static text so after the temperature
high I'll say space with a low of then right here.
This is where I'm going to put the temperature low.
So once again I'll use the plus operator to inject a dynamic value right inside that will be body dot
Daily Dot data grabbing the first day's data.
And this time it is temperature low.
Perfect.
Now with this in place we can wrap up with just a little more static text.
So right here after I show that temperature low I'm going to add a period and a space just to make sure
the two sentences are actually separated appropriately.
This is Andrew with the last update ever related to the weather stack API.
So right here we have a potential solution for getting this done.
Now here I've taken my call to call back and I've broken it up across multiple lines so I'm still passing
and undefined as the first argument and I'm still passing in my string as the second one I've even taken
that string and I've broken that up on two multiple lines as well.
Now everything's the same except for the very end of the string I added the humidity is then I can continue
on at the humidity value.
And finally I wrap things up with a percent sign and a period.
So if the humidity was 70 percent that would read.
The humidity is 70 percent.
All right.
So that's what you could have done to add the humidity.
Let's jump back in to the lesson now once again.
You could have made any sort of customization you liked in this case I chose to add the temperature
high and temperature low.
So at this point we have completed step 1.
We have updated the forecast string to include the new data.
Let's go ahead and run the program one more time just to make sure it's showing up locally if it is
we'll get it running in production as well.
So I started up the app I'll refresh the browser and I'm going to search for a location like Philly
right here and as fetched to the weather and I can see the high today is thirty nine point nine with
a low of thirty three point four seven.
Fantastic.
So now that we have this in place let's continue on with the challenge.
The next thing we need to do is commit our changes.
So right here I'll use control C to shut down the app and clear to clear the terminal output.
Now up above I have my challenge comments in place.
I'm going to take a quick moment to remove those so they don't get committed.
And with all of the files saved we're now ready to add our commit.
Let's go ahead and start with get status just to see what changes we have right here.
We can see we have a couple of changes now.
You have changes to files that I don't have here.
I actually had to refill this part of the lesson since it got lost when I was recording and I had to
update both of my api keys because they had changed.
I had manually changed them.
So you should only see a change to forecast dot J s here.
Sorry for the confusion on that.
Now that we have this in place we want to commit our changes so get at DOT followed by get commit with
the M flag so we can provide our message right here.
Something like add high and low to forecast is going to get the job done.
Now once we've committed those changes we want to do two things.
One we want to push them up to get hub and make sure they show up there and to we want to push them
to Heroku and test out the production version of our server down below in the terminal to get that done.
The first thing we're going to do is use clear to clear the terminal output.
Next we're going to use get push to push our changes up to get hub right here.
That should wrap up in just a couple of seconds.
All of our changes have been pushed.
And the next thing we're going to do after using clear is push all of our changes up to Heroku.
I want to make sure that I can see the temperature highs and lows any production version of our app
as well.
So right here that's going to be get push followed by Heroku master.
That's going to allow us to deploy the latest version of our project.
Let's go ahead and run the command.
All right.
Here it is attempting to deploy to Heroku so it's going through the same process it's gone through before.
And once this is done we're just going to test things out over in the browser.
I'm gonna make sure that I do see that data.
It looks like the new app is launching and it launched successfully so over in the browser I'm going
to refresh the production Heroku.
You are all right here.
I'll navigate over to the weather page and I'll get the weather for Austin.
I'm going to fire off these search and what do I see.
I see my new data the high in Austin is 76 with a low of forty five.
What I wouldn't do for those temperatures right now.
All right.
So there we go we have a brand new feature added and deployed.
That's where we're going to stop for this one.
There's just one video left in this section and it's coming up next.
So stay tuned and I'll see you then.