Create Basic Web Application 🖥️ and 🚀Deployment🚀 Using Python!!

Hello Guys!!! 🤗

Today you are going to get introduce yourself to Flask for Python and create a basic web application for “Credit score rating” which includes an HTML template containing the structure of a web page, a CSS stylesheet containing design instructions, a Python backend that communicates with a web server and tops it off by deploying this application for free to Heroku! 😁

Quick Overview of Flask

HTML — Flask is using a programming language called HTML to create a structure of a web page.
CSS — It is used to style this structure and make it look more attractive.
Javascript — It is used to interact with the different elements on the web page.
Python — It is used to communicate with the webserver also known as backend. It is only a tiny fraction of Flask.

All the files are available at my GitHub repository.

Follow the steps to get your web app ready!

Create Folders — First, create an empty folder ‘ CreditScoreRatingApp’ on your PC. Inside it create other folders like:

‘templates’ to store all our HTML files,
‘static’ — inside it create ‘CSS’ folder to save all our stylesheets,

2. ‘templates’ folder for HTML file — Open a new notepad file and copy the below HTML code.

Save it in the ‘templates’ folder with ‘index’ name and extension as ‘.html’.

If you click on index.html, it will show below the web page.

3. ‘static’ — ‘CSS’ folder for CSS file — Open a new file in notepad and copy the below CSS code.

Save it in the ‘CSS’ folder with the ‘main’ name and extension as ‘.css’.

4. In the ‘CreditScoreRatingApp’ folder, add Python file— Open a new file in Spyder or any other Python IDE to create the ‘app.py’ file and copy the below Python code.

If user input is, it will show respective messages:

300 to 349— ‘Your score is Poor!!!’
350 to 599— ‘Your score is Average!!!’
600 to 799 — ‘Your score is Good!!!’
800 to 900 — ‘Your score is Excellent!!!’
Anything except above will show input is invalid and the max limit is 900 and the min limit is 300.

5. In the ‘CreditScoreRatingApp’ folder add .flaskenv file — Open a new file in notepad and copy the below code.

FLASK_APP = app.py

6. Now open the Anaconda command prompt and create a new virtual environment with the below commands:

conda create — name env2 (please check exact syntax below)

Then activate your newly created environment with the below line of code:

conda activate env2

You need to install flask on the new environment with the below code:

conda install -c anaconda flask

Now go to your directory of the ‘CreditScoreRatingApp’ folder. cd for change directory:

cd Downloads\Web App\CreditScoreRatingApp

Type flask run and hit enter.

Go to URL ‘http://127.0.0.1:5000/priyankad’

Enter a value in empty input box e.g. 850 and hit SUBMIT button.

Your webpage is completely functional now.

🤔 Remember if you make any changes to HTML, CSS or Python file then to you need to clear cache — Go to Settings option n Chrome — Privacy and security — clear browsing data — Cached images and files — Clear data.

You need to create two additional files:

Procfile:

On the Anaconda prompt, type Ctrl + C to quit. Then install gunicorn using:

pip install gunicorn

Type below to create a new empty file in the same folder directory

echo > Procfile

Go to ‘CreditScoreRatingApp’ folder and open ‘Procfile’ with notepad and delete text “ECHO is on.” and type ‘web: gunicorn app:app’ where first app is for your Python file name ‘app.py’ and save it.

2. Requirements file

To generate requirements file where all the requirements of your application get automatically generated — type below and hit enter:

pip freeze > requirements.txt

Deployment using HEROKU 😎

Go to “https://www.heroku.com” and login or sign up for new free account. Once you have created a new account, navigate to your dashboard on clicking on grid icon: