How to Create a Web Application in Python using Flask

[Music] hello and welcome I'm Dave today we will create a python web app with flask and I'll provide links to all resources in the description below I've got vs code open you can see I have a new folder for lesson 23 the final lesson of this python series and course so it's the final project and there's so much you can do with python and there's always something new to learn but I feel like this course has provided you with all of the fundamentals you'll need to keep moving forward in your programming Journey so with today's project we're going to build this python web app with a popular python web framework called flask a couple of lessons back we learned about virtual environments and in that lesson we've retrieved current weather conditions for cities but we needed to use the terminal window today our web app will do the same it will retrieve weather conditions for cities but will deploy it to the web so you can share your project with everyone let's go back to vs code and get started in vs code let's open a terminal window with control in the backtick and we want to create our virtual environment as we've learned about before we want to do this right away so I'll type Pi if you're in a Mac or a Linux environment you might have to type python3 I believe but then we'll have Dash M for module then v e n v and then dot v e n v and I'll press enter it should create a folder over here in your folder for lesson 23 or whatever you call it and now we have a virtual environment so let's go ahead and activate that environment as well so I'm going to type Source then dot v v e n v and then scripts with the capital S now that's because I'm on Windows and I'd mention this during the lesson on creating a virtual environment but I don't think I mentioned that if you're on Linux and possibly Mac I think instead of scripts this might might need to say Ben as in b-i-n so here we'll say activate and press enter this should activate the virtual environment now I can press enter one more time and I should see yes it says dot venv in parentheses underneath after I pressed enter so I do know it is active and we've also learned about pip and we need to install a few packages we're going to use today so I'm going to type pip install and then after that I'm going to type requests and then python-enb because I'm going to need that as well and then also flask with a capital f okay that quickly updated it's also giving us a message about pip so if we want to run that we can so I'll type Pi Dash M then pip install Dash capital u is the same as two dashes in upgrade and then pip once again press enter and it should go ahead and update that installation as well and now we're going to Floyd our project today so in order to do that we also need to create a requirements.txt file so to do that I'm going to type pip freeze and then the greater than sign then requirements Dot txt and it should quickly create a requirements file that we see over here in the tree and this should list the packages so when we deploy this of course remember we won't send our virtual environment folder to GitHub but we will send our other code including this requirement so when this is deployed and it gets to our host then the host will see what needs to be installed as we deploy our python project and so now I mentioned we will not send dot venv to GitHub so I'm going to create a git ignore file which starts with a DOT as well then get ignore and then inside of this file I'm going to list the dot venv so that is not added to a repository when we create one and if you're not familiar with Git and GitHub I do have a tutorial on my channel for that as well that you can check out now one other file we're going to create is a DOT EnV file and that's where we hold environment variables and you never want to share those those are your secrets that are linked to your account and we're going to have an account at the open weather map API so I want to type dot e n v in here as well and this will be a file we create that will hold our open weather map API key now we never want to share that with anyone so here I'm just going to create this file and say dot EnV now it's listed over here now I don't know if you have git installed or not git was not a prerequisite to take this course so if you're not familiar with getting GitHub you may not want to deploy this project to today you may want to go back and learn about git and GitHub and then come back and deploy this later now I already have git installed so I'm going to go ahead and initialize a git repository and then you'll see these files that we've included in the git ignore turn gray because they will not be sent to GitHub in the future like our other files will so I'm going to once again open the terminal and then just type get init and that will initialize my git repository here inside of this folder for our project and you can see these are green meaning that they are new files in our repository now this tutorial is not about git specifically so I don't want to get any deeper into that right now we want to go ahead and create this project but right now we need to go ahead and get an open weather map API key if you don't already have one from the previous tutorials I'm in Chrome at openweathermap.org now if you completed this just a couple of tutorials back when we got our API you can skip this part but if you haven't you're going to need an API key notice I'm already signed in up here and I've got my name Dave now you can get a free account and then sign in here if you don't have one but there's a drop menu now it says my API keys I'm going to delete any API key that I show you because you never want to share those but I'm going to click my API keys and you see I have one here called my new weather Key and here's the key so once you generate one of your own if you don't already have one in your account go ahead and copy it right here I'm just double clicking and then doing control C to copy we're going to put this in our DOT EnV file back in Visual Studio code back in vs code I'm in my DOT EnV file I'm going to type API underscore key with all caps and then equals and then control V to just paste in that API key notice no quotes around this but it will be considered a string now we'll refer to this later and I can go ahead and close all of these files out now we need to create a couple of specially named folders over here in our file tree so let's click the new folder icon let's name this first folder static and when I need lowercase now so there we go static the next folder we need to create should be called templates and so I've got templates I'll press enter and we have the two folders now first static this holds any static file that means non-changing so it can be CSS JavaScript images any type of file like that so to organize those files inside of static I usually create more folders so I'll create one inside of this called CSS because I'm going to create a CSS file inside of the static folder so I've got static CSS and then we'll eventually create a file in there as well but now templates is where we're going to store our HTML files and with that we're going to insert some values from python into those HTML files and use those as templates for for our web page so let's start by creating our CSS file so I'll click on the CSS folder and I want a new file I'm going to name this style.css now this is not a CSS course I do have a CSS course on my channel and it's also been published on free codecamp so you can check that out I'm going to just paste in some very simple CSS Styles you can see I have a very simple CSS reset here if you're familiar with CSS if you're not of course you can copy this CSS code from my repository for this lesson if you want to I've got several Styles applied to the body of the HTML page and then I've got a few Styles applied specifically to the input and the button as well now if you see a white dot that means you need to save the file so I'm going to control s just to save that file now let's click on the templates folder I'm going to create a new file inside named index.html so this will be the home page that everyone sees is when they load our web app now if you're using vs code to create an HTML page you can use a shortcut here that's called Emit and Emmett has several commands I'm just going to type a exclamation mark which is an image abbreviation and with this abbreviation or shortcut if you will I can press Tab and I quickly get the outline or the skeleton if you want to say that for a web page so here's alt Z to just wrap that down so we can see the full line without going going off of the screen now I'm just going to fill in some information here so for the title I'm going to say get weather conditions and now besides that we're going to put a link to our style sheet and this is a little different even if you have written some HTML and CSS before so this is specific to how we're going to work with flask today and how it inserts some values so here I'm going to say link then I'm going to have my href and now inside of these quotes I'm going to use two curly braces and I'm going to say URL underscore for not form but four and then parentheses then single quotes the word static and after that I'm going to have file name equals and then I'm going to have another set of single quotes Styles slash style dot CSS so it is pulling in our CSS but this is just a little bit different than you may have written before now after these two curly braces here we need another space and we're going to type Rel which is an attribute of the link element and then we'll put equals and here we just have another set of double quotes and well we didn't finish the other double quote I guess I needed to end that double quote here sorry about that so let's delete that extra one it added so we've got a quote here with href and the href ends after the two curly braces so you want to quote there now we'll have our second set of double quotes and inside of this Rel we're going to say style sheet because that's what we're linking to and finally at the end we can have a slash and close out our link tag here so that is the full link now this is a little unusual compared to just linking to our style slash file.css but this is what flask is going to use to insert a value here because this is a template we will be inserting values into this file when it is called okay now inside of the body of our HTML we want to have an H1 and I'm going to say the same thing get weather conditions so you can just copy this from the title control C click here Ctrl V to paste it in underneath that we're going to have a simple form so we'll have our form and then it's going to have an action attribute right away so inside of this we're going to go to the slash weather page when we post our data from our form so inside of the form now we need an input and this input is going to be type text that's correct we can also give it a name equal to City and then after that let's give it an ID equal to City and I need that to go inside the quotes there we go then let's give it a placeholder like we saw in the example that says enter a city and then of course we need to close out our input tag with the slash there after that we need a button so we'll have our button and it is the submit type so vs code wants to help and now we have button type submit and let's just put the word submit on the button as well control s to save and we're finished with our index.html template for our app now we will come back and create one more HTML template very soon but right now we need to create a python weather module that will retrieve the weather for any City using that open weather map API and this part's going to be very similar to what we did when we retrieved that weather and we just looked at it in the terminal window so now over in our file tree let's create a new file and let's call it weather dot Pi let's import everything we're going to use at the top so I'm going to say from dot EnV and then I'm going to import load underscore.env also going to use pretty print so from ePrint I'm going to import oops import e-print and then I need to import the requests dependency that we added and I also need to import OS so the very first thing we want to do is load that API key value from our DOT EnV file and that's what load.env does so I'll just say load underscore.env put the parentheses on there to call that function now let's go ahead and Define our get current weather function so we start with the def keyword and I'll say get underscore current underscore weather and now it's going to receive a parameter and I'm going to say City but I want to give this a default value to say it's just pressed enter and the form is empty so by default I'm going to give it my area which is the Kansas City area you could provide your city or your nearest large city is what I would recommend if you want to put a default value here that's different than mine just to avoid a typo as I've been having lately I'm going to paste in this URL but let's go over the URL so you can get it accurately as well so here we've got request underscore URL notice it's an F string then it goes to http colon slash slash API dot openweathermap.org data slash 2.5 slash weather and then we have a question mark and this is where the params in the URL begin you need to put app ID equals then we use the OS module that we imported we'll say OS dot get EnV and then parentheses API AI key so we're getting that environment variable right here using OS dot get EnV and then we have an ampersand and then a q which is short for query and then that equals the city value that was passed in or Kansas City in my case if a value is not passed in one more Ampersand and I set the units to Imperial now you can look at the docks for the open weather map API because if you don't want Imperial if you want something else instead of degrees essentially for the weather you can change this to metric I believe okay now let's go ahead and get that weather data so we'll say weather underscore data equals request dot get and we pass in our request underscore URL and at the very end we need to add dot Json and put parentheses to call out because we want Json data and then we're going to return the weather underscore data so this this gets the data from the open weather map API and now I said we're making a module so to do that let's complete this by saying if two underscores name two underscores and then two equal signs equals main with also the two underscores which we've covered in this course so if this file is called directly weather.pi instead of calling the file that might call the entire application for the web then we're going to go ahead and run this file as if it's at the terminal once again so I'm going to print and then inside of the print statement I'm going to start with a new line and then I'll just say let's do three asterisks here and get all right weather conditions three more asterisks one more new line so that's just kind of a welcome to the app at the terminal window then we'll say City equals input and here we'll have a new line and please enter a city name and a colon and after that let's go ahead and come down and get our weather data so whether data is going to equal get current weather data and we're going to pass in whatever city was provided and again if they don't pass in a city it should go back to our default value here of Kansas City after that at the very end I just want to print say one new line and then we'll go ahead and pretty print oops don't want to do that having a hard time typing today at the end let's go ahead and pretty print our weather underscore data so this is if this file is called directly which is kind of the right thing to do for a module this would go ahead and provide the weather data at the terminal just like we learned how to do a couple of lessons back but today we're going to use this get current weather function in our web app so we can get that weather data and present it on the web with the template and now that we have our weather function we're finally ready to start working with flask directly and so let's go ahead and create another new file over here which will be the main file for the application sometimes people name that main dot Pi I'm going to name this server.pi because it will be a flask instance that is running our server essentially so that is also common you could name it either one you want but just remember what you do name it so I'm going to refer to it as server.pi like I used now inside of this we're going to create a route with hello world just to test it out first so I'm going to start start with from flask import flask with a capital f then I'm also going to import render underscore template and request now that is different than requests that we've imported in the other file I also need from weather import git current weather and we'll use that in just a moment now let's go ahead and Define our app so we say app equals flask and then inside of the parentheses we do two underscores name two underscores and that makes our app a flask app now we Define routes in flask and those are routes that we would access on the web so I'm going to say at app dot route and now I just want slash this would be the home page but then also commonly you should be able to access the home page if you go to slash index or slash index.html for example so I also want to add app dot route and then inside of this I want slash index so both of these will apply now following these routes we Define a function that will return something for the route so I'll say def index parentheses and now we'll go ahead and return something at this route so I'm going to return here I'm just going to say hello world to start out with just a simple example but of course we're not ready to run our file yet until we add our if name equals Main two more underscores and now in this if name equals main I'm going to start with app dot run and here I'm going to say the host is equal to now inside of quotes I'm just going to put 0.0.0.0 or zeros with dots in between that's going to make it run on our local host and then I'm going to say Port is I'll give it 8 000. so we're going to go to localhost Port 8000 to see the app after we start it so we have a basic route here for our index or our home page if you will and we'll return hello world and it's going to go ahead and start the server with this simple command so let's run this file now and here we see running on all addresses so it should be running as expected and notice we get a warning here as well this is a development server don't use it in a production deployment so we'll want to fix that in the future as well let's go ahead and look at our web app right now that should say hello world and we'll need to do that in the browser I'm in Chrome and I have a new tab open I'm going to type localhost and then I'm going to want 8 000 after it so localhost colon 8000 I'll press enter and right now we have our hello world as expected back in vs code I'm going to press Ctrl C to quit the server for now and then I'll close out the terminal window and let's go ahead and adjust that remember that warning we saw that said hey this is a development server we don't want that we need to go ahead and replace that because we are going to deploy this app essentially put it in production so to fix this let's open the terminal once again and here I'm going to type pip install waitress and now waitress is a package that is going to help serve our web app in production so now that I've installed that I've got a new dependency and that means I need to recreate the requirements file so once again pip freeze greater than symbol requirements.txt press enter it should now have added waitress to our requirements file let's check and yes there it is on line 14. and now that we have waitress added let's go ahead and add it to our flask app as well so I'll say from waitress and I'm going to import serve and serve is what we need to serve our applications so let's replace this app.run here with serve not server just serve and inside of this we need to start with app comma and then we can still say host with the four zeros we can still say Port 8000 all of that is fine we're now ready to add that second HTML page I'd talked about so click on index.html click somewhere in the file press Ctrl a which should select everything Ctrl C to copy everything then you can click away if you want to now let's create a new file here with this new file typeweather.html and inside of our weather.html we'll get a jump start just by pressing Ctrl V and pasting in everything we had inside of the index at first and then I'm going to press alt Z to wrap any of those lines down as well much of this will stay the same but we're going to make a few changes so we need the same CSS link that's no problem we do want to change the title of the page so let's go ahead and select that and then I'm going to press Ctrl D and I'm selecting the second instance here of get weather conditions because we're going to change both of these to say the same thing I'll press backspace and it deletes both of those and I'll press two curly braces then the word title two more curly braces and then the word weather so whatever city is entered into that previous form when we filled this page out it could say Kansas City weather or Paris weather or wherever but it's going to fill that in as we use this template now we still want the same form underneath because we want users to go ahead and be able to request more data or more City's weather if they choose to after they request the first one let's create some space here between the H1 and the form so we can put in some more information now I want a paragraph and in this paragraph I'm going to use two curly braces once again type the word status two more curly braces then and two more curly braces type the word temp two more curly braces now I'm using degrees again so I'm going to use the abbreviation in HTML entity four degrees if you wanted this change to a different system a different symbol you can look that up on your own but I'm going to use Ampersand deg semicolon which will give the degree symbol now I'm going to just click on this line press shift alt and the down arrow and it copies all of that down so now I'm going to say feels like and after that I can delete status and but I'll leave temp I'm going to replace the word temp with feels underscore like so these are the values that we are filling in when we get that weather information but currently we're not handling the weather route and when we make a request for weather be it on the index.html page we look for the weather route or even on the weather page itself we submit this form to the weather route and then that data comes in and fills it out so let's go to our server.pi and handle a route for weather so we need to go ahead and create that function and Route underneath where we have the Route 4 index so I'm going to say at app dot route and here I'm going to pass in quote slash weather now beyond that let's go ahead and Define our function I'm going to call this get weather remember our other function was get current weather so I'll just call this get weather underneath this we're going to get the city value first now that City value is going to come in from that form data so here we can say request dot args dot get and then we want to get the city value so now we should have retrieved that and we'll have weather underscore data going to equal get current weather and we'll pass in the city value so now that we have the weather we want to send that data to that template so here we're going to say return and then we'll say render underscore template and now inside of these parentheses the first value we want is the template itself which is weather.html now we need to pass all of the other values that we're going to use let me scroll up just a little so we have some room and I'll say title equals whether underscore data then we want to use brackets and say name after that this would be the city name of course as well after that we want status equals once again we're going to have weather underscore data brackets and now we need to get some specific information that's in that Json and if you remember back to the lesson a couple of times before we had a fairly large Json object to navigate to get this data so here we start looking at weather and then we get the first element in weather and so we use a zero to get that and then after that we still need to get the description and then after the description I want to capitalize so I'm going to pass capitalize here and call that as well so that's going to be the status such as cloudy or whatever the status is I believe cloudy or few clouds is what we just had for Kansas City now let's go to Temp we'll set that equal to and now this is an F string so we start with f and quotes now curly braces and we'll say weather underscored data once again brackets now we already have double quotes on the outside so we need to use single quotes and we'll have Main and then we have temp once again you need to refer to the Json object to know how to get this data out of the object and I'm not breaking all of that down here for you because I did it two lessons ago we've got main Temp and I want to format this to that dot one afterwards whatever it was dot point 7.8 so I had like 97.3 degrees for example so I just want the one digit so here I had colon then a period then one and F so that's how I'm formatting that F string instead of a 2 which you've seen that format here before when we used the bank accounts I believe okay after that another comma and then finally we need the feels like value so Fields underscore like set this equal to another F string so we have our double quotes our curly brace inside of here weather data and then we'll once again have the single quotes around Main and then we'll have another bracket single quotes around Fields underscore like and finally we're going to format this the same so colon dot 1f there's all of our information passed in so you get how we're getting that out of that Json object that is returned from our get current weather function and after we do that we're passing all of these in that we're using in the template so the words we're defining here to the left are what's used inside of our web other template so when we go back and look at weather we just have to say title status temp and feels like and we can use those inside of our template okay back in the server.pi one thing we didn't do is ever change our hello world and we want to do this but this will be fairly simple all we need to do here is say render underscore template as well and just pass in the index.html because it's not receiving any of these like the weather page is now if any of this went too fast feel free to go back to the previous lessons also of course my code is available at the link in the description and let's go ahead and run this code and make sure everything's working now as we expect it to and I'm going to choose run python file and now we're going to have to go back to the browser and look at the app I'm back in the browser I need to refresh our local host at Port 8000 and now we have our get weather conditions but what I notice is the CSS is not being applied I may have a typo let's go ahead and check out the functionality first though so here I'm going to type in New York and press enter and yes we've got the New York weather Haze and 88.1 degrees it feels like 93.2 degrees this is all good what's not good is we're missing the CSS being applied to the pages okay back in vs code I've made a very simple mistake easy to make I am looking in the file names or in the folder name Styles slash style.css inside of both the HTML files but when I look at the file tree I actually named my sub folder here inside of static CSS because I had CSS on my mind and not the word Styles so let's go ahead and change the name of this folder should be able to right click and choose rename which also looks like F2 would have done that and I'm going to switch this folder to style so I'm looking at static Styles and then the file style.css that will match what we put inside of both of our HTML files so we save that we should come back and go ahead Ike stopped my server if you haven't stopped it you might not need to I'm going to go ahead and restart this and let's go ahead and reload the home page so now the CSS applies like we expected to let's go ahead and type in a city name I'll put in Omaha and press enter and yes the weather app is working like we expect it to as well however this is the core usage what if we entered something that would be unexpected say we just press the submit button without entering a city or maybe we entered some spaces into the input and we submit I think we'll probably get an error well that's a surprise several spaces brought back a name from the API that I did not expect let's go ahead and hit submit without entering any spaces and see what we get now we have the internal server error that I expected so let's go make a few changes to handle these edge cases in our code we're back in vs code and we need to go to the weather module to start out and let's work with the module when it is called at the terminal line first because this will be easier to debug and check as we go what we need to do is get the input from the user and make sure that it is not an empty string meaning a string that actually has no characters but still the two quotes or a string that is full of spaces only so it would still be empty because then we could strip away those spaces and we would once again have an empty string so to do that we can put in a line of code here and I'm going to put a note and just say check for empty strings or string with only spaces so we know exactly what this line of code is doing so I'll say if not and then I'll use Bool and if you remember Boolean that's true or false well we're going to say we want content here so it won't be empty so we're looking at city but before we look at the city let's also strip away spaces so I'm using the strip method here so this strips away all those empty spaces because it would normally take away white space at the beginning and the end of a string but what if there wasn't anything in between so it's just going to strip away all of those spaces and then we're going to make sure we have something left so we can say if not Bool but first we're stripping away the spaces and then we'll go ahead and put our colon for the if statement then we'll just say City equals and let's give it a default value like Kansas City if you remember we put in a default value for our function and I put in Kansas City however that doesn't mean an empty string couldn't be passed to our function and in that case the default value wouldn't kick in so this line of code is going to check for that so now let's just run this module and see if it works when we do not enter anything or when I enter several spaces so now we'll run the code this is the error that we got in the web app this is not the code that we're running so I need to press Ctrl c a couple of times and now it's running at the terminal so it says get current weather conditions please enter a name I'm going to drag this up just a little bit I'm not going to enter a name at all I'm just going to press enter and now it returned the weather for Kansas City because that's the default value I gave in the code if we stripped away everything and the city name didn't exist so as we look back here City equals Kansas City let's do this one more time and now let's do it with several spaces so I will go ahead and run this code once again I just press the up Arrow to pull that line up and then press enter and that's what ran the code here now please enter a city name I'm going to enter in several spaces let's see what we get back do we get something from the API that is not Kansas City no we get Kansas City so once again we stripped away all of those spaces and then there was nothing left and so then it defaulted to Kansas City feel free to put in your own city name here but now that we have debugged this or worked around some edge cases inside of our weather module we also need to apply something like this to our get weather function inside of our flask server so let's go to the server.pi file here's our get weather function and we're getting the Value City from the arguments essentially the parameters sent in the URL and so after we get City this is where we would need to check and I really want to put in the exact same code here that we used in the weather module to check for that so I'm just going to copy this that I put in on lines 23 through 25 with control C go back to to the server dot pi and I'm going to put this code right here so that is once again going to check for an empty string after that we're going to get the weather data from the API but what if the API does not find the city that we pass in what if we pass in some strange name that could also be a problem let's go back once again to our weather module and let's run this one more time and I'll just put in a random string that I know is not a city name so when it says inner city name I'm just going to put in something strange like that let's see what we get back notice we get a different object instead of that Json weather object now we get an object that has a code of 404 which means not found and a message that says City not found likewise if we would run our app here one more time just this weather module and I type in a name or I'll just press enter so we get Kansas City information we notice inside of our larger weather Json object here that there is still a code right here the code is 200 that means successful so we could look for a successful code of 200 to know that our request has succeeded now there's nothing to fix in our weather module it presented the object that was returned just fine but inside of our server.pi file we actually need to handle that in case we don't get the object that we expect because then we would get an error here as we attempted to get the name and the different weather values from the weather object if we did not have a weather object so to handle this case I'll put one more note underneath here and I'll say city is not Bound by API and in that case we'll say if not weather data and then we'll look at that code value and notice it doesn't have an e at the end but it's abbreviating for code then it looks like cod actually which is kind of funny but nope it is for code if it's equal or this is if it's not equal to 200 notice 200 is not a string because that object didn't provide a string it provided the number so if our weather data code is not 200 then our request has not been successful and we will not have the weather data we expect so in this case I want to return a message simply saying City not found and we could do this just like we did with hello world and say City not found and I'll save this for now but instead let's create one more template to handle that so in our templates folder I'll just click on index.html and then the new file icon and I'll call this city Dash not Dash found dot HTML and now I'm going to go to the index dot HTML file and press Ctrl a to select all and Ctrl C to copy from there I'll go back to the city not found file and press Ctrl V to paste everything in also alt Z so it wraps down now there's not much to change here but I'm going to change the title and once again after selecting get weather conditions press Ctrl D so it selects the second version of that which is down below in the body of the page here I'm going to type City not found after that I'm going to put an H2 underneath City not found in the body and just put try again with a question mark and then we'll once again leave this same form so the user isn't stranded on this page they could once again enter in a city name maybe they just had a typo so this will be our city not found page so after creating this template let's go back to the server.pi and now we can render that template here instead of the city not found string so I'll have render underscore template once again and now we're just going to pass in the city Dash not Dash found not HTML file now with this new code in place we should be able to handle those possibilities those edge cases as we would call them inside of our web app as well so if our files are saved let's open the terminal once again and we want to run the server Dot Pi file so I'm just going to press play here and run this file and we can see it's running here let's go back to the browser and check it out so we had an internal server error before so I'm going to remove everything that came after the localhost 8000 now press enter and it should once again reload the app I'm ready to put in a town or a city name so I'll put in Austin press enter and yes it's working like expected so now if I just press submit without entering anything we get the Kansas City weather because that's what I put in for a default and if I put in some random characters that don't make any sense and press enter we get our city not found template and it says try again so I could try again I'll enter in many spaces which actually has no content whatsoever press enter and once again we get the Kansas City weather so that's really what we wanted to do it handles those and notice up here the city equals value when I put in all the spaces is represented as plus symbols inside of the URL which is a little interesting let's go ahead and enter something else it's just blank and then notice it's just City equals and nothing comes after it but we still get the Kansas City weather and now with our code feeling like it's complete it's ready to deploy to the web I'm back in vs code and now we're going to work with Git and GitHub and if you're not familiar with Git and GitHub you may want to stop the tutorial now learn about those before you try to proceed and deploy your web app because I'm not going to go into all of the details of how they work I'm just going to show you what I do because this is not a get or GitHub tutorial although I do have those on my channel okay so here we've already initialized our git repository earlier in this tutorial now with it initialized I see some files over here meaning they're new they're green in my file tree and I'm getting ready to add those but I'm I'm also looking at my file tree going hey this pie cash folder has been created that happens when we use modules we import modules then it just caches some things to work more efficiently but we really don't want to send that to GitHub either so let's once again go to the get ignore file and inside of there I'm just going to list the two underscores I cash and two more underscores and save and now that is also not going to be sent to GitHub with our git repository so once again it's already initialized so now I just need to add the files to the repository so I'll say get add and type a period that means all so I'm going to add all of those files now I'm going to commit the files to the repository so I say get emit Dash M for message and I'm going to say first commit press enter now all of those green files turn white in my file tree and they have been committed to my repository now they haven't been sent to GitHub yet so we need to go to GitHub and create a repository to send them to okay I'm on GitHub and I have an account here already if you don't you'll need to create one and then I want to click new for a new repository now I have a paid account because of my job I need to be able to do several things that only a paid account can do however if you have a free account you can only have public repositories I believe however I'm going to set mine to private because I'm just going to use it for this tutorial so here I'm putting in the repository name I'm going to put in Python Dash weather and so you could name yours whatever you want to after that I'm just going to scroll down and create the Repository after it does that it's going to give us this page of instructions and I'm really only interested in this part that says or push an existing repository from the command line and that's what we have back in vs code we have an existing git repository so I'm going to copy just by clicking this icon here all three of these commands and then we'll go run those commands inside of our terminal NBS code okay I'm back in vs code I'm going to type clear first here in the terminal just to clear everything else out now when I right click it's going to run the first two of those three commands and it's going to wait for me to press enter on the last one so I right click it runs the first one it runs the second one and now it's waiting for me to push this is a get push the repository here on my computer in vs code to GitHub so when I press enter that's exactly what's going to happen and it quickly sent those files to that GitHub repository now I'm back in the browser at the repository I'll click repository Title Here near the top left and we can see these files are now in the repository at GitHub so now we want to go to render.com where we're going to deploy this web app and it will pull these files from our GitHub repository into render on its own we can set that up so let's go do it and now I'm at render.com if you don't have an account here you can sign up for one for free I'm already logged in so it is just showing me the dashboard button I'm going to click that dashboard button and now I am logged in and I can go ahead and create a new web service which is what we want so by creating the new web service it's going to give us a list of our connected repositories now I have connected my GitHub to my account and you could do the same if you don't see it like it's offering to connect gitlab which is another service like GitHub to my account as well so you might see it over on the right if you're not connected so I'm connected and now I immediately see my python Dash weather repository because I just created it two minutes ago I'll click the connect button and it will start to pull the code in from GitHub and now I can set up my web service or my web app here inside of render.com I'm going to name this the same thing python-weather I don't need to change the region I'm on the main branch in my repository so that's fine this root directory is optional I don't need to change that we will be using python3 and we have been using python3 so that's fine where we have the build command pip install Dash R requirements.txt that's good because we do have a requirements file but we might also want to update pip as we have had some notifications about pip before needing updated so let's go ahead and put in hip install and we only need two L's there then I need Dash U capital u for that upgrade and then pip and then two ampersands and then it can do the next command which would be our requirements.txt so I just want both of those in there now as we come down to the start command here our start command is going to be python3 then we're going to run our server dot Pi file but we're not quite finished yet let's scroll down just a little bit further we're using this free instance which is fine but as we scroll down we need the advanced because we're going to add our environment variable remember we have an API underscore key in our DOT EnV file in development we need to take the value of that and put it right here back in vs code I'll close the terminal and click on my DOT ENB file here's my current API key value control C to copy that let's go back to that dashboard and we can put it in right here but we also need one other environment variable and no we did not have it in development but render needs it render needs to know what version of python we have been using so we'll say python version and now if you remember how to check your python version you could do that and put it in here if not let's quickly do that for you so back in vs code let's control in the back tick to open this up I'm going to just type Pi lowercase once again if you're on Mac or Linux type Python 3 I believe but after that you need dash dash version and then when I press enter you can see I've got python 3.11.2 if you want to enter in whatever version you have been using so here I'm going to put in 3.11.2 and remember I am going to change my API key value so don't try to use mine make sure you go to openweathermaps.org and get your own okay now that we've entered everything I believe we're ready to scroll down here and create web service so let's click that it will start to deploy and it will give us quite a few messages here in this this window I'll come back when it's finished I'm back and render says your service is live so that's what we wanted to hear let's scroll up and we can see our URL for our python web app right here it's at python-weather.on render.com so whatever you named your repository or your project here in render is probably what's here before dot onrender.com let's go ahead and click the URL and now we see our web app is actually on the web and you can share it with your friends let's go ahead and enter in another city name here I'm going to enter in Santa Fe press enter and there's the weather tonight it's getting a little chilly in Santa Fe maybe a warmer destination like Houston and press enter and yes the Houston weather is much warmer it feels like 95 right now so everything is once again working we can even check out not entering a city and I get Kansas City depends what city you put in for yours I'll enter in something that doesn't make any sense and of course that shouldn't be found and we get our city not found template so I'm happy with the results here I hope you are too and moreover congratulations on completing the python 4 beginners course and on completing this project remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 42,133

Keywords: how to create web application in python using flask, flask beginners project, flask for beginners, python web app, python web application, python, flask, python flask, flask python, python flask project, python beginners, flask beginners, flask web app, flask web application, how to create a web app with python, how to create a web app with flask, beginners flask tutorial, python tutorial for beginners, python tutorial, python web app tutorial, python web app flask

Id: jQjjqEjZK58

Length: 52min 52sec (3172 seconds)

Published: Tue Jul 18 2023