Build YOUR OWN Weather App in Python with Flask (COMPLETE Beginner Tutorial)

hey and welcome to this video we're going to cover off how to create this exciting weather app using the flask micro framework and python by the end you'll have created this entire website here which lets you input a city name such as Toronto estate as well in this case a province and a country and then we can query that location and return the current weather conditions so for example if we wanted to search for Miami then we could type in Florida and the us and we can get the current weather conditions in Miami all right let's get started and dive in how to do this all right let's head over to visual studio code so we're going to create a new folder here and within this folder we'll activate a virtual environment so in order to do that we'll open up our terminal and we'll type in python3 M VNV and then we'll name our virtual environment also VMV now to activate this environment what we're going to have to do is type in source BMV Ben activate we can see that our virtual environment has been activated because we now see it listed here so we'll need to install a couple of dependencies and in order to make this process simpler let's create a requirements.txt file so we'll create a new file here and I'll zoom in a little bit so that we can follow along better so the different libraries that we'll meet for this tutorial are flask we'll need requests and we'll also make use of the Python Dot and uh Library so we'll save this and now we can install all of these directly using the PIP install requirements.txt so what this will actually do is it will read the requirements.txt file the one that we've just created and install all of the libraries that are listed there so let's go ahead and run this command and this will Loop through the entire installation for us so we can see that all of our applications have now been installed so in order to actually get this weather data we're going to need to access the open Weather API so feel free to skip this step if you already have an account and already have a working API key so when you hop over to the openweathermap.org website you can hit the sign in key here and actually access the different portals you might still need to create an account now go ahead create the account and then we'll log into the site now from here what we're going to do is access our account so we're going to go to the my API key section so from here we can see all of the different API keys that we have if you don't have one you'll want to create one here and give it a meaningful name then go ahead and copy that API key and we'll paste it into a DOT EnV file in our project so back in Visual Studio code what we're going to do is create a DOT EMV file and all we're going to do with this file is create a single environment variable so we'll call this API key and we'll paste in our API key so from now on we can actually reference this API key and actually upload this to GitHub and add this file to git ignore so that we don't accidentally share our API key with the rest of the world so now that we have these two requirements let's switch back over to the open weather map and see what we need in order to be able to access weather information so let's go ahead and click on the API section so what we can actually do is get the current weather data so let's explore this documentation a little bit and so in order to be able to access weather information we need three different pieces of information we need the latitude the longitude and our API key right now we probably only know our API key I definitely don't know the latitude and longitude for my own home address so we're going to need to find a way to actually get this lap and long information so by exploring this API documentation a little bit more we can actually see that open weather map provides a geocoding API so what we can do here is actually get some of our latitude and longitude information so we can make use of this endpoint here by actually just passing in a city name a state code and a country code as well as our API key so let's go ahead and copy this and we'll first focus on actually Gathering our latitude and longitude so what we're going to do is switch back over to visual studio code we'll create a new file here and we'll keep all of our actual processing uh functions and all of that in a separate file called weather.pi so what we're going to do in here is create a function called get lat long and so in order to be able to query the internet we of course need to use the requests Library so what we're going to do now is create a function called get lat long so what we want to do is Define a function we'll call it get lot long and so what this will actually do is it will query that specific endpoint so in this case we can say that our response or we'll just call it rest is equal to requests.get and we'll pass in this string here now what we're going to want to do as well is actually turn this into an F string so that we can access the city name the state code the country code a possible limit as well as the API key so in order to be able to run this as a function what we need to do is pass in our city name the state code the country code and the API key as parameters so in order to do this let's first turn these into actual valid um code here so I'll just remove all of the spaces and switch them out with underscores we're also going to get rid of this limit piece here since we won't actually be using it in our application and then finally we'll fix the API key here as well so what we can do now is pass these in as arguments so we'll say city name state code country code and API key so when we run this function we're going to need to pass in four different parameters so how do we now access first of all this API key so remember that we have our API Keys stored in this dot EnV file so what we can actually do is access that using some of the libraries that we installed before so we'll say from dot ends import load dot end and we'll also import OS and so what we can do now is call this load.n function and that's going to pull the data from this file Here and Now what we can do is actually access our API key using the os.get and function so in this case we'll pass an API key here and so what this will do is it will actually grab the API key from this file and load it into a variable called API key so let's go ahead and see if we can actually call this function correctly so what we're going to do is just print out the content of this response so what we want to do is call this function and then print it out so we'll just say print response so when we call this function we'll say get that long we'll pass in a city name so let's say Toronto state will be Toronto Ontario country will be Canada and our API key is going to be this API key so let's go ahead and run this and so we can see that we actually get a 200 response back so that's great that means that our function was able to correctly authenticate our request and actually return content for it so what we want to do now is actually to get part of what's actually contained in this and in order to do this we can call the Json method and so this will this will convert that response object which we have here into a valid Json object if that's possible so let's go ahead and run this again and so we can see that we get this list item back and this list item actually tells us quite a lot about the different attributes related to Toronto including the latitude and longitude so what we actually want to do at this point is just return that piece of information so in order to do that we'll need to access since this is a list the first item in that so we'll call it data is equal to response zero and so this will now actually return just this dictionary portion here so in order to access the lat and the long what we can do is now just grab these different values so in this case we want to access lat here so we'll use the dot get method pass in lat and for long we'll do the same and pass in the lawn here this should be data and so in what we can do now is just return these two items here so let's go ahead and make sure that this actually works we'll print out the result of this function here and when we run this we can see that this now returns a tuple containing both the latitude and the longitude so now let's go ahead and switch back to the API documentation on how to actually query the the current weather conditions for a location so if we hit the back button here we can see that now we're ready to actually make this API call here because we now have our API key we have our latitude as well as our longitude so let's go ahead and copy this URL here and what we'll do now is we'll create a new function that will get the current weather conditions so I'll say get current weather and so in this case we're going to pass in a Latitude a longitude and again an API key and in this case our response object again will use the requests get function and we'll pass in an F string again so again here what we're going to want to do is simply clean it up so that the space is removed so this is now a valid F string that accepts these three arguments as their input so what we can actually do now is we can define a little bit more structure for our project so let's go ahead and delete this and we'll just say if name equals name then we'll say lat long is going to be equal to get lat long and again we'll just for testing this pass in Toronto Ontario Canada and we'll pass in our API key so now we have these two values here so now let's try calling this get current weather function so we'll say get current weather and we'll pass in the lot the long and again our API key so right now this won't actually return anything so let's go ahead and print it out I'll say print out response and we're hoping for that 200 response again so we can see here that we actually do get this valid response so let's go ahead and convert this to a Json object again so when we run this now we can get all of the contents of that response so we can see here that this is actually a fairly comprehensive set of information so in order to be able to parse some of this out we simply need to read the dictionary and we don't want to display all of this information so let's go ahead and create a structure in terms of being able to access this in a clean way so in order to do that we're actually going to define a class so we'll say from data classes import data class so what we're going to do here is actually define a class object that allows us to easily store and retrieve that information so we'll use the data class decorator and then we'll say class weather data and let's think about what we might want to display we definitely want to display the current conditions so let's see how we can get that we have this main key here which says it's clouds we may want to also provide this description now there's this interesting thing called icon here and definitely adding that visual component will be great so let's get icon as well and then one of the things we'll also want of course is the actual temperature so we can see that we have the temperature here now by default open weather map actually displays the weather in kelvin so let's go ahead and change this just because most people don't know how to read Kelvin so what we're going to do is just quickly say pass here so that we don't throw an error so on this page we can actually see down here that we can access units of measurement so let's go ahead and click this so we can see that a number of different units are actually available to us so in order to be able to add this in we can simply add this in as a query string parameter so let's go ahead and change this in this case to metric now you might want to use Imperial for your example and feel free to do that so in order to do this what we just need to do is pass in that the units with the actual piece that we want to use so let's go ahead switch back and we'll change this URL here and we'll say Ampersand units equals metric so let's go ahead and run this again and see whether or not that changed so we can see now that these units are actually now displaying as floating Point values in the in Celsius so let's go back and Define our class now so we want to be able to access the main weather information so we'll call this main we'll give it a data type of string then we'll say description and we'll say string again we'll say icon is also a string and then we'll say that we want to use the temperature and that's going to be a float so what we can do now is grab all of these values and create this weather data object so let's go back down here and we're now going to create a variable called Data pass in weather data so for main let's see how we can get at the main value so we can see that this is a dictionary and then under weather we get a list so what we're going to want to do is access response dot get weather and then we'll want to access the first item of this which then gives us access to this dictionary here and then from here all we want to do is access the main key so we'll say dot get main now for the description we're going to want to do something very similar but access the description key so let's make this a little bit easier and just copy this down and we'll change this to description so where's this icon so we can see that the icon is in the exact same place so let's go ahead and create pass in the new argument here for Icon we'll paste this again and we'll just change this to Icon now in terms of the actual weather information this is actually in a different section so we can see here that we want to access this temperature piece which is under the main element so rather than accessing whether we're going to access Main and in this case it's a bit different because it doesn't return a list but simply a dictionary so in order to access the temperature we're going to say that we want to access the main and then we'll just say get temp so let's go ahead and return this data piece and see whether or not we did this correctly so we're gonna run we're gonna print the result of this and let's go ahead and run this now so we can see that this actually did return our weather data object where we now have access to these different attributes for main description icon and temperature so now that we've learned how to actually capture all of this information let's create one more function and this function is going to serve to actually being able to Simply accept a location a state and a country and return the weather information so we'll call this death and we'll say uh Main and what we'll do now is we'll require passing in the city name the state name and the country name and what this will do is it will first get the latitude and longitude and then it will also get the current weather information and in this case we'll say weather data is equal to get current weather all this will do is return the weather data so now that we have this covered off let's go ahead and actually create our flask application so I'm going to go ahead and we'll use the regular conventional call name and call this app dot Pi So within our app.pi we're going to create our entire flask application now because this is a single page application we don't need to define a ton of different structure for this as you evolve this project feel free to explore with multiple Pages different layouts and all of that so let's go ahead and say from flask we're going to import flask of course then we're going to import render template as well as the request object now from our weather module what we're going to do is import Main and we'll just say as get weather and then now we're going to create our flask application like this and just a little further down we're again going to pass in an if name equals Main and then here we're going to say app.run debug is equal to true so if you're ever going to plan on deploying this make sure that you actually change this to a production application but in order to keep being able to refer back to what our application looks like we're going to set debug equals to true now because this is a single page application all of that behavior will actually be rendered by a single route so let's go ahead and Define our first route here and in this case our route will simply be the home page so what we can do is Define this now as the index here and in order to test out whether or not this is working let's go ahead and say return render template and we'll say index.html now at this point we don't actually have a template called index.html so let's go ahead and make that now so we'll say new file we'll put this in the templates folder and we'll call this index.html now what should our index.html actually include well we definitely need to include the default HTML structure so in order to do that we can simply hit the uh the band key here and hit enter now this will Define a lot of that HTML structure so right off the bat let's just give our application a name here or our website we'll say my weather app and so what we want to do now is actually just add some body into it so let's go ahead and add in an H1 here and we'll call this uh something like weather app so now that we have this structure here defined let's see whether or not our flask application actually works we'll go ahead and run this here we can see that it's been able to actually surf this up on our Local Host so go ahead and copy that and paste it into your web browser so we can actually see that our web page is now rendering correctly so we can see that both our actual website title as well as the H1 that we created have now been created properly so let's go ahead and customize this a little bit and in order to make it a little bit prettier we'll use bootstrap just to keep things simple so go ahead and go to the get bootstrap website scroll down a little bit to the section that says include via CDN we're going to go ahead and copy this and this will just give us access to all of the different classes and customizations that bootstrap gives us so what we'll do is we'll switch back to our application here in our index.html we're going to paste this directly into the head and so this will actually link to the style sheet now bootstrap also requires us to being able to bring in some of the the JavaScript code so we're going to paste this at the end of our body so now that we have both of these in here let's go ahead and see whether or not our application looks a little bit different so when we refresh this we can see that this has already applied some bootstrap styling to it so let's go ahead and customize this just a little bit further so that we're not looking at something that looks quite as horrendously ugly as it does now so switch back to visual studio code and what we're going to do is actually wrap the entire thing in a div so that we can give it a little bit of styling so let's go ahead and in our body here what we're going to do is wrap the entire body in a class and what we're going to do is type in BG info so this is going to apply the background color that is called info and we'll say text is equal to White so that there's a little bit of background so when we save this switch back and refresh we can see that we have this turquoise background with this white lettering now so what we can do now is actually also give our H1 here a little bit of styling so right now everything is kind of pushed up right to the top so let's give it a little bit of padding and so in order to do that what we can do is say um the class should be empty meaning the margin at the top of five so when we say this we can see that it's been pushed down a little bit now you might remember from our weather application that everything was centered and in order to do that what we're going to do is wrap everything here in our body in a div and so we can then apply some of that styling just to that div so right now all we want in that div is going to be our H1 here so our div right now is going to have a class of text Center so when we save this piece what we get back now is that the text is actually centered in any subsequent text that we add will also be centered so now what we need to actually Define is the form by which people can enter their city state and Country so let's go ahead and do this so the the way in which we can do this is using a form so when we type in our form attribute we're going to want to say that the action takes us back to the home page and the method is going to be post here so within our form what we want to do now and I'm just going to close this so we have a little bit more space uh is Define those three Fields so in order to do that what we're going to do is actually pass in an input field here and it will be a text field what we'll do is given that give it an idea of city name and the name will also be city name and then uh and then we'll create another input here and again it'll be text our ID in this case will be state name our name will be state name and what we can also do is pass in a default of placeholder here and so the placeholder uh actually no in this case we're going to have a default value so what we'll say is it's going to have the value of om for Ontario now in this case what we're going to want to do is pass in a placeholder value so we'll just say City now for our last input what we'll do again it'll be a text our ID is going to be a country name our name is going to be country name and our uh value here is going to be Canada and what this value will allow us to do is not necessarily have to repeat typing in the state and the country each time if we know that we're going to be querying for these places now you can set these to whatever location you want as long as it's relevant to you so in order to be able to submit this form we're also going to need to include a button so let's go ahead we'll add a button here and what we're going to do is give it the text of find so let's go ahead save this switch back to our browser and refresh so we can see now that we have this form with four different input Fields so we have three text Fields here where our placeholder text says City just to guide the user and we have the state and we have the country and this button so what we want to do now is actually see whether or not our application can run this so let's go ahead We'll add in Toronto here and hit find so what we get back now is this method not allowed error and so when we defined our original function in our app.pi file we didn't pass in what methods this uh function should accept and by default only get methods are allowed so let's go ahead and change this so we'll say methods equals get and post so when we do when we save this now and we'll reload our web page let's go ahead and we'll type in Toronto again we can see that in this case uh there wasn't an error but nothing actually happened and so the reason that this happens is because the only thing that this function does is render this template so in order to modify that behavior what we can do is build an if statement directly into this function so we'll say that if request dot method is equal to post do a different action and then return this template here so in order just to do a sanity check let's just say print hi so when we now switch back and we type in Toronto and we hit find we can see that this actually picked up that we submitted something using a post request and so it printed out high so what do we want this to do now well we wanted to access the information that we pass in in our form and actually get the weather information for that so the way that we can do this now is actually access the form data so the first piece we'll get is the city we'll say request dot form and we'll access this by the name we'll just go ahead and copy this down a bunch of times and now we'll change this to state name and we'll do the same here and change this to country name so what we get back now is actually the city the state and the country that the user passes in so now that we have these we can actually run our main function here and pass these three values in now the API key will actually get passed in using the environment variable here so let's go ahead and see whether or not this actually works so we're going to say get weather I'll pass in our city our state and our country and again let's just print this as a quick sanity check so we'll save this switch back to our application reload it type in Toronto here and when this is loaded now we can switch back and see that we actually get this weather object returned and so now that we have this we can actually pass this information back to our template and insert it conditionally so in order to do this what we can do now is just assign this to another variable in this case we'll call it data now we need to give this data variable to our actual template to use and so the way that we can do this is by saying data equals data now we need to be careful here because if the method is actually just a get method it never actually creates this variable data here so what we need to do first is we'll just say data is equal to none this means that we always have a value for data created when we go to the page so when we save this what we can actually check now is whether or not our page still loads and it does so that's great news now what we want to do is actually display some of this weather information at the bottom of the page so now that we've passed this in we can actually grab this data and display it so let's switch back to our index page here and what we're going to do is see how we can display this just very naively so we'll use this Jinja templating here and we'll just say data so let's go ahead and see what this looks like when we refresh it so right now it prints out none we'll go ahead and type in Toronto and in this case it actually returns this entire weather data object so this is perfect but we definitely want to hide that none by default so the way that we can do this is actually by using Jinja templating again and we'll say if data and then we'll say uh and if here so what this is going to do is check whether or not data exists or is truthy and if it is then we return it now because our default value is none if we use a get request this will actually fail and so it won't actually display the data so when we refresh this now we don't see that none value anymore so let's go ahead and see how we can actually display some of this information so we can actually access one of these attributes in the data structure by just accessing the attribute directly so say we want it to go in and access the description we could just say data dot description so let's go ahead save this refresh over here and type in Toronto as always so when we run this we can see that we actually get this text printed out now so let's uh style this a little bit and bring in the rest of the information so in order to do that what we're just going to do is we'll access the remaining pieces that we pass in so let's go ahead and say that we want to bring in data dot Main and we'll put this on the same line and now we want to have a line break and then we'll bring in data dot icon and then we'll say data.temp I think I'd call the temperature so I'll say data.temperature now when we refresh this pass in Toronto we can see that we actually get all of that information returned now one of the weird things is that the icon is actually just a text so what we're going to need to do is actually transform this into an image and so on the open weather map documentation we can see that we can get an icon just by accessing this URL here so if we for example click on this we get this icon returned so what we want to do is replace the string of our icon in here so let's go ahead and do that now so rather than just using the icon here so I'll delete this for the time being is we'll pass in an image our source is going to be that URL except this piece here is going to be replaced by data dot icon and we'll pass in some alt text and we'll just say icon so let's go ahead and see what happens when we do this now so we'll switch back to our weather app I'll pass in Toronto one more time and we'll hit find so we can see now that this icon has actually loaded and so we can take this just a little bit further and actually apply just a little bit more styling to this so what we'll do as well make these pieces here just a little bit prettier so in order to do that from bootstrap what we're going to do is actually access um some of the form control components so we can see that these have a little bit nicer rounded edging and so the way that we can do this is by using this class of form control on each of the different elements so let's go ahead and copy this class and then on our input here we'll just paste in this class three times and so when we refresh go back to our web page we can see now that that styling has been applied Now by default bootstrap will take up the entire width of that so what we'll do is we'll actually we'll return this piece here as a set of columns in a given row so in order to do that what we can do is in our code within the form section what we're going to do is create a div and we'll make the class a container so this div is going to wrap around all three of the inputs and so for each of the inputs we're now going to create uh actually within this class we're going to create a row first and this row again will wrap around all three inputs now within this Row for each item what we're going to do is create a column and so the way that we can do this is say div class and we'll say column small and so we'll just repeat this process now for each of the input values here we have one more so we'll say div cloth called small and let's go ahead save this see what our weather app looks like now so we can see that this is much cleaner of a spread now so the last thing we want to do now is actually change this button to be much less ugly so again bootstrap provides a lot of different options here for buttons what we'll want to do is simply just use perhaps this light button so we go we can go ahead and copy just this BTN hyphen light and we'll scroll down to our button it's like class button pass in that style now when we switch back to our application nothing has changed so let's go ahead and see what we've done wrong here so actually what we want to do is make the class A submit button of this style so when we refresh this now we can see that that styling has been applied so in order to give it a bit more space we'll just include a line break here and refresh again and we can see that this has been pushed down nicely so for another experiment again we'll just pass in Miami Florida and the US we'll hit find and we can see now that all of this information has been returned now one final thing we may want to do is actually change this just to be an integer so in order to do that what we can do now is actually take this floating point value in our application and we'll just wrap um sorry in our get weather function what we'll do is we'll switch over here and we'll say that we want to return the integer value of this and then we'll change our function definition up here to be an INT and then in our index what we'll do down here is just apply a c to clarify that it's in degrees celsius so now let's go ahead type in Miami Florida us and I'm picking it because it's very warm uh and I'm not very warm right now we can see now that our temperature in uh in this case it returned uh Toronto's temperature so let's try that again okay so one of the things that we I needed to change in this function here is that by default it will actually always call Toronto so what we want to do actually is replace all of these here with city name state name and the country name and so this is just what happens when you recklessly copy and paste code so let's go ahead and save this we'll refresh our application again and in this case we'll pass in Miami and we're going to pass in find and we can see that this is actually returned the correct thing now I did change this to an integer so let's go ahead and quickly modify this by wrapping this in the integer function again and we'll also update this to be an end so finally let's refresh it one last time we'll pass in Miami here Florida and the us and we can see that we now get this accurate reading here with just a single integer value so we covered a ton in this video we covered how to create a shell of a flask application how to query the weather open Weather API and two different ways to get the latitude and longitude for a location as well as to get the current location of the current weather conditions so I really hope you enjoyed this video if you did hit the like button hit subscribe and maybe click that little bell icon to be notified of when I release new videos thanks so much for watching have a great day

Channel: datagy

Views: 8,128

Keywords:

Id: JCD7YdOSsWI

Length: 42min 34sec (2554 seconds)

Published: Wed Mar 22 2023