Simple Web App with Flask and Heroku - Python GUI for Beginners

hello everyone and welcome to the very first battle of the app frameworks where i will demonstrate how to create different applications with different frameworks and then you get to decide who wins so today we will create a simple greeting app with flask which is not exactly a python framework but since so many of you guys have requested it how can i refuse and before we move on here's a quick overview of flask now flask is using a programming language called html to create a structure of a web page then it is using a language called css to style this structure and to make it look much prettier additionally it is also using javascript to interact with different elements on the page and then lastly it is using python to communicate with the web server also known as backend so python then is only a tiny fraction of flask which means that in this tutorial we will learn some basic html basic css we will of course learn how to connect them to python and we will also publish our application to the web by using a free service called heroku and we will begin by creating a new directory for our application we will call it say hello in camo case and inside we will create two additional folders the first folder is called templates and this is where we will store all our html files and we will create an additional folder called static with another folder called css inside it and as you guys may guess this is where we will store our css files also known as style sheets now traditionally we begin with the html so we will navigate to the templates folder and we will copy this url from our file system we will then open our code editor and this time surprise surprise i'm using sublime and then we can save this untitled file in the exact same directory we just copied now it looks like i'm already there so we will call this file index.html to indicate that this file contains html we will set the doctype to html of course we can then open an html tag and we will place a head tag inside it now inside the head tag is where we store data about the file also known as metadata so for example we can store our title in here in our case that would be say hello we can also select a character encoding with meta car set as in character set and we will set it to utf-8 and if you guys are not quite familiar with encoding utf-8 is 8-bit unicode where unicode is a format that includes all the languages in the world so it makes a lot of sense to use it next we will move on to the content of our page which we include inside a body tag now the first element i would like to have is a logo which we can easily add with an image tag where we need to specify a source attribute or an src attribute now in my case i will use the exact same logo that i've used in my kv app you can simply copy it from my github so we will just press on the right mouse button we will open this image in a new tab and we will copy the url and paste it inside our src attribute we will then add a line break with br which will place the rest of our elements below the image rather than beside it and then we can go ahead and create our form now this form has an action attribute which represents where we'd like to store the data we collect from the user now in my case i will store it in a variable called greet and we will then remember this value and use it inside our python file now another attribute our form has is a method which we will set to post because we are basically sending data to the server rather than fetching it if we wanted to fetch some data we would set it to get and we will of course need a closing tag for this form and we will first begin with a paragraph element now in order to create a paragraph we will simply create a p tag where the text of this paragraph would be what's your name we will then include an additional line break with br and we can then collect some input from the user by using an input tag the first attribute we will take care of is the type of data we are looking to collect since we are looking for a name the type would be text and additionally we will also name this input and we will call it name underscore input now input tags in html do not need a closing tag so we can simply move on to another line break and then we will include the last element on our page which is the button now even though html has a tag called button we do not use this tag inside forms so the way to create buttons inside a form is with an input tag without the typo with the type of submit and we will then also include the text of this button with value equals greet and then additionally we will also set an id attribute to this button which we will set to greet as well this little step will make it much easier for us to select this button in order to style it inside our css and ok it looks like we are done with our html file everything looks great we will then save this file we will navigate to our root folder actually the templates folder where we see this file where you can find our logo our paragraph our input field and lastly our button now my plan is to collect whatever input the user provides and as they click on the greet button we will replace the paragraph text with something like hello maria it's great to see ya for this we will create a new file by clicking on this tiny plus button and we will save it inside our root folder and we will call it app.py and we will begin with the imports so from flask we will import flask with a capital f and we will also import render template as well as request and lastly flash to initialize our application we will type app equals flask which takes in our main module represented by name and what this command does is it creates a class for our app now it's not a very traditional way to do so but it still counts next we will select a route for this app so we will type at app dot route which in my case would be slash hello and then this slash hello will represent the last part of our url for example myurl.com hello now we will need to associate this route with a function so right underneath we will define a brand new function called index and at first we are only going to display our html template now to do this we will type return render template which in our case would be index dot html and since we have saved this file inside the appropriate templates folder flask will be able to find it with no issues so let's go ahead and save this file we will then navigate to our terminal in my case anaconda where we will first activate our virtual environment with conda activate in my case n39 now i have already installed flask inside this environment if you haven't this is a perfect time to do so i'm going to include the commands in the description and once we have flask installed we will simply navigate to our root folder and then we can type flask run we will then copy this address with ctrl c we will open our browser we will paste this address and we will add the hello extension to it now we will press enter and here's our html template which we are accessing through flask rather than through our file system and if you guys are encountering an error saying you're using a production environment while you should be using a development environment don't worry i'm including the debugging commands in the description as well next we would like to make the text of this paragraph adjustable for this flask provides something called flashing messages and we can easily do this by specifying a set of curly brackets with an additional set of percentages and these symbols allow us to communicate with our python file this is part of the templating language of flask so inside these sets we will type for message in get flashed messages we would like to create a paragraph element with the message inside it and then right after we will open another set of curly brackets and percentage symbols where we will end this for loop we will save this file and we will move on to our app.py file where we will set the initial text of our message with flash that includes a message of what's your name let's save this file and perfect we still have our message appearing even though it is nowhere to be found in our html file now let's go ahead and set a different text to this message which will follow a click event on the greet button now in case you guys have encountered an error saying that you must select a secret key we can very easily set this key with app dot secret underscore key which we will set to some kind of a password it doesn't really matter we can then save this file and if you refresh the page everything should work now now in order to display a different message as soon as we press on the submit button we will create a brand new route we will call this route greet and since this time we are interacting with the server we will also need to specify the methods of our interaction now in my case i will select both post and get even though simply specifying post will do the trick and then we can go ahead and connect a function to this route now in my case or in our case we will call this function greet and we can then fetch the input we have collected from the user with request dot form where inside the square brackets we indicate the name of our input in our case that would be name underscore input so if we return to our html document that must match this field that my head is partially blocking so name input is matching name input and then our brand new flashing message would be flash hi plus the string instance of our user input and then we can concatenate a comma as well as great to see you and then lastly since we are using the exact same index.html template we used earlier we will simply copy the return statement from our previous route and we will place it underneath our new flashing message we will then save this file and we will navigate back to our browser and actually it's safer to rerun our flask application first so we will press on ctrl c twice and we will rerun this app by pressing the up arrow and we will hit enter now we can refresh this page we will enter our name in the input and we will press on greet boom our app is a hundred percent functional now let's make it pretty for this we will create a new file and we will save it inside our static folder inside our css folder and we will call this file main dot css and we will begin by targeting the body of our page and we will set the background color to a value of slate gray we will also align all the elements to the center with text align center let's save this file and let's go back to our html and connect it we can link our files inside the head tag with the help of the link tag where we will use the rail attribute to specify that we are linking a css style sheet and then we will use the a draft attribute to specify the location of this file now the way to do this with flask is to first open a set of curly brackets where we select a url for our static directory without the typo where the file name equals to css slash main dot css we will then close our round brackets and additionally we will also close our double set of curly brackets let's go ahead and save this file and we will of course refresh this page and make sure you are refreshing the hello route instead of the great route once you do it you'll see that all your elements are centered now and our background color is gray perfect now let's keep on styling and we will begin by styling our paragraph now in my case i would like to set the color to white i would like to set the font to shanti the size to 1.2 em and additionally i would also like to set a margin of 20 pixels all the way around cool so we can move on to the image element where i'll be much more specific about my margin so my top margin would be 60 pixels both our side margins would be zero and then our bottom margin would be 30. now additionally i would also like to make my image slightly smaller so we will select a width of 250 pixels cool let's move on with the inputs we will give it a width of 300 pixels as well as a height of 50 pixels then we can set the margin to 20 pixels and we will remove whichever default border our browser provides us with border equals none now i would like this input field to have rounded corners for this i will type border radius and let's set it to a radius of 10 pixels now the text we type inside this input field would have the font of shanti as well we will align it to the center with text align center and then lastly we will set the size to something slightly larger than our paragraph so 1.3 pm now we will also like to add some special styling to our greet button for this we will select the id we gave to it with a hashtag greet as the id was great and we will then set a background color of pale violet red we will then set the font color to white and lastly we will override the width that we gave to all our inputs and we will set it to 200 pixels instead of 300. now since we want to make our application slightly more interactive we will also add a great hover event where we will change the background color to medium violet red and we will change the corsor to a pointing hand which is called a pointer cool let's save this file and let's go back to our browser now if we simply refresh this page nothing happens and the reason is our browser remembers our previous style sheet now to fix it we will go to the settings and we will search for the cache we will click on clear browsing history and we will only clear our cached images and files so we will click on clear we will return to our application we will rerun it and boom much much nicer excluding our font but we will fix it right away i must have had a typo of some sort so let's test if everything still works we will type maria we will press on greet and awesome everything works now i would like to add a bit more interaction to this input field so first let's fix our fonts by specifying a font family rather than a font of shanti and we will of course copy this attribute and we will paste it in our second font indication and we will then scroll below the input field and we will create an input field with a focus event where we will set the border to a solid line with a thickness of 5 pixels and a color of 0 0 ffce which is pretty much the exact same turquoise we have in our logo now i can't remember if chrome is showing a weird default outline around a focused input so in any case we will still remove it with outline equals none we will of course refresh our cache again we will refresh the page and our font looks much much better since i'm very picky i will also edit the margin and yay i am finally happy now let's go ahead and test this application so we will first greet myself hi maria great to see ya perfect and because we are so inclusive we will also greet slenderman awesome long time no scene buddy and once we are happy with our app we can go ahead and deploy it but before we do so we need to generate two additional files in the root folder so we will go back to our terminal we will exit our flask application with control c and then we can install a python server called green unicorn we will do this with pip install gunny corn and once we have it installed we will generate a brand new file an empty one with echo greater than proc file where we absolutely have to have a capital p so we will press on enter we will return to our root folder and we will quickly edit this brand new empty file we can even do this with a notepad we will type web colon space gunnycorn space app colon and once again app where the first instance of app represents our app.py file so if you called your file main dot py this first app instance would have to be main and additionally make sure that all your spaces match to what i showed you here otherwise it might not work okay we will save this file with ctrl s and we will move on to the requirements file to generate this file we will simply type pip freeze greater than requirements dot txt and we will hit enter we will go back to our root folder and we will open this newly generated file and i can already tell we're gonna have some issues here so the requirements of our application were automatically generated excluding the markup save requirement we will try to install it with pip so we will type pip and we will paste the name of the module and hit enter now as you guys can see i already have it installed and i have it in the 2.0.1 version we will return to our text file and then instead of mark save at file and whatever the url is we will replace it with mark save equals equals the version and this is how you fix it we can then save this file and now we are finally ready to deploy our application so the first step is to upload the content of the root folder into a github repository i have called my repository greeting app underscore flask and it contains all the lovely files we were just working on and once everything is ready and loaded we will navigate to heroku.com and once we have created a free account we can then navigate to our dashboard you can do this through here just by pressing on dashboard and we will of course click on the new button and we will create a new app now in my case i will call my app say hello 888 and i will click on create app we will first go to the settings we will scroll a little below and we will add a build pack now in our case that would be python of course and we will save the changes then we will scroll all the way up we will select deploy we will connect our application through github now since i already connected my accounts heroku remembers it but in your case you will need to type your username and your password and then we can move on with the repository name now in my case i saved it as greeting app underscore flask we will then click on the search button and once heroku found our repository we will click on connect cool now we can scroll all the way down to the manual deploy section if you have a few branches you can select whichever branch you need i only have main so i will simply click on deploy branch cool so once you see this deploy to heroku message we can click on view and we will of course still need to specify our hello route and once we do that we can see that our beautiful application is finally online we have successfully deployed it and we can then copy this url and share it with anybody we'd like good job now thank you guys so much for watching if you found this tutorial helpful please don't forget to give it a like maybe leave me a comment subscribe to my channel turn on the notification bell or even better share this video with your friends with your co-workers even with your grandma who knows maybe she's gonna enjoy it no thanks again and i will see you very soon

Channel: Python Simplified

Views: 216,990

Keywords: flask, gui, ui, python programming, python gui, python ui, python flask, flask gui

Id: 6plVs_ytIH8

Length: 25min 6sec (1506 seconds)

Published: Sat Sep 25 2021