How to build a Web Application with Python and Flask
Bertha 👩🏾💻 Kgokong, MBA
Founder @KaraboAI @MobileGPT @Skhokho @TatiDigital @SkoloOnline | AI Chatbots | MBA, Generative AI, AI Speaker, Entrepreneur, Ex President GIBS Business Club
Flask is one of the most popular python web application frameworks - in this article we discuss how to get started to develop and python flask web application.
Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja.
Our Flask Folder Structure
Our folder structure is going to be quite simple. We need the following files:
- index.html will have our front end html code. We will not be writing CSS and JS code - but will use Bootsrap library to style our html
- api.py - this file will host our code that communicates with the API to fetch the data that we need to display in our front-end
- app.py - this file will host the flask app code, where we initialise the app and communicate with the index html file and api file
| | |____TEMPLATES | |______index.html | |____ app.py | |____ api.py
API file contents
This file will contain all of the api components, we need the requests library for this file to work.
pip install requests
We then call the API and get the data, that will be used in the front-end. We have selected to parse just a few variables from the data and only call top 10 coins, but this code can be modified to fetch more coins from the API.
from requests import Request, Session
from requests.exceptions import ConnectionError, Timeout, TooManyRedirects
import json
class Crypto:
def get_top_5(self):
url = 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest'
parameters = {
'start':'1',
'limit':'5',
'convert':'USD'
}
headers = {
'Accepts': 'application/json',
'X-CMC_PRO_API_KEY': 'enter-your-api-key-here',
}
session = Session()
session.headers.update(headers)
response = session.get(url, params=parameters)
data = json.loads(response.text)
return data['data']
def get_top_10(self):
url = 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest'
parameters = {
'start':'1',
'limit':'10',
'convert':'USD'
}
headers = {
'Accepts': 'application/json',
'X-CMC_PRO_API_KEY': 'enter-your-api-key-here',
}
session = Session()
session.headers.update(headers)
response = session.get(url, params=parameters)
data = json.loads(response.text)
return data['data']
This file included two functions:
- The firs function, we are calling the API to return only the first 5 - top 5 coins. Then we are only returning the 'data' object of the response
- In the second function - we are returning top 10 coins.
App file contents
We start by installing flask
pip install flask
Initialise the flask application:
Index.html file contents
The final file is the index.html - the front facing user client file. The results are displayed in this file to the website users.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin=">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<br>
<br>
<br>
<br>
<h1>Skolo Online Crypto Tracker</h1>
<h3>Displaying the latest Crypto prices from CoinmarketCap API</h3>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Cryto Name</th>
<th scope="col">Symbol</th>
<th scope="col">Slug</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
{% for obj in results %}
<tr>
<td>{{obj.name}}</td>
<td>{{obj.symbol}}</td>
<td>{{obj.slug}}</td>
<td>{{obj.quote.USD.price}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></scrip>
-->
</body>
</html>
The HTML template just displays the data in a table format. The document is styled using Bootsrap - https://getbootstrap.com/