Today, we will create a simple currency converter widget for our website. We will use Python and Flask together to build this simple widget. Let’s start.
HTTPS://GITHUB.COM/FINAGELTD/FINAGE-EXAMPLE-WIDGET
Flask Installation
Firstly, you need to create a folder and a venv folder inside this folder:
$ mkdir currencyconverter
$ cd currencyconverter
$ python3 -m venv venv
If you are using Windows, then you should use this command
$ py -3 -m venv venv
We will use Python3 for this project but if you want to continue with Python2, you need to use these commands;
$ python2 -m virtualenv venv
for Windows;
\Python27\Scripts\virtualenv.exe venv
After these steps, active your environment;
$ . venv/bin/activate
for Windows;
> venv\Scripts\activate
At least, install the Flask.
$ pip install Flask
Let’s start to build a currency converter
I’ll continue with MacOS, if you do not know how to use Flask on Windows. Please visit https://flask.palletsprojects.com/en/1.1.x/quickstart/
I’ll create an app.py and export it;
$ export FLASK_APP=app.py
Then, you should create a folder that named templates. Your architecture will look like this;
/app.py
/templates
/index.htmlapp.py and the index.html files will look like this.
| from flask import Flask |
| from flask import render_template |
| app = Flask(__name__) |
| |
| @app.route('/convert/') |
| @app.route('/convert/<base>/<to>/<amount>') |
| def convert(base=None, to=None, amount=None): |
| return render_template('index.html', base=base, to=to, value = value) |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Document</title> |
| </head> |
| <body> |
| |
| {{ base + to }} |
| |
| </body> |
| </html> |
Run,
flask run
and open the browser and go to http://127.0.0.1:5000/convert/gbp/usd/1 , you will see your index.html file here.
If you can see “gbpusd” in the output of this URL, then everything is okay.
Let’s continue. We will use the “Requests” library to make API requests. You can install “requests” with the given command below.
pip install requests
Also, we need to parse the requested JSON data. So, we need to import “json”.
import json
We are ready to make an API request to get latest currency value.
r = req.get('https://api.finage.co.uk/last?currencies='+currency+'&apikey=YOUR_API_KEY')This line will make an API request. We will get “currency” from the URL and calculate the amount. URL will fill the link that given above and it will look like this.
https://api.finage.co.uk/last?currencies=USDGBP&apikey=YOUR_API_KEY
Response
{"currencies":[{"name":"GBPUSD","value":1.29303,"change":0.0053,"difference":0.41}],"lastUpdate":"2020-07-28T20:31:34","lastUpdate_Timestamp":"1595968294"}In this project, we will get the base currency and the second currency from the URL. After that, our application will make an API request to get the latest values from the Finage. Also, we get the amount from the URL. Check the last status of the index.html and app.py below;
| from flask import Flask |
| from flask import render_template |
| import requests as req |
| import json |
| app = Flask(__name__) |
| |
| @app.route('/convert/') |
| @app.route('/convert/<base>/<to>/<amount>') |
| |
| def convert(base=None, to=None, amount=None): |
| currency = base + to |
| r = req.get('https://api.finage.co.uk/last?currencies='+currency+'&apikey=YOUR_API_KEY') |
| response = json.loads(r.text) |
| calculation = "%.2f" % (response["currencies"][0]["value"] * float(amount)) |
| value = response["currencies"][0]["value"] |
| change = "%.2f" % (response["currencies"][0]["change"]) |
| difference = "%.2f" % (response["currencies"][0]["difference"]) |
| last_update = response["lastUpdate"] |
| |
| return render_template('index.html', base=base.upper(), to=to.upper(), value = value, calculation = calculation, amount=amount, change=change, difference = difference, last_update=last_update) |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title> Currency Page </title> |
| </head> |
| <body> |
| |
| |
| <style> |
| html, body { background-color: #2A2B2A; font-family: Helvetica; } |
| div { -webkit-box-shadow: -5px 2px 42px -4px rgba(0,0,0,0.75); -moz-box-shadow: -5px 2px 42px -4px rgba(0,0,0,0.75); box-shadow: -5px 2px 42px -4px rgba(0,0,0,0.75); } |
| .converter { position: relative; display: block; margin: 50px auto; background: #E5446D; color: #fff; padding: 40px 20px; border-radius: 10px; width: 325px; } |
| .converter #base, #to { text-align: center; display: inline-block; font-size: 18px; padding-top: 15px; } |
| .converter .item { width: 45%; } |
| .converter #amount, #calculation { display: inline-block; text-align: center; font-size: 34px; vertical-align: sub; } |
| .converter #last_update { position: absolute; right: 10px; bottom: 7px; font-size: 11px; } |
| .currency-information { background-color: #FF8966; width: 325px; color: #fff; min-height: 100px; margin: 0 auto; padding: 20px; border-radius: 10px;} |
| .currency-information h4 { font-size: 28px; width: 100%; text-align: center; margin: 0; padding-bottom: 10px;} |
| .currency-information span { display: block; padding: 5px 0; text-align: center; } |
| </style> |
| |
| <div class="converter"> |
| |
| <span class="item" id="amount">{{amount}}</span> |
| <span class="item">→</span> |
| <span class="item" id="calculation">{{ calculation }}</span> |
| |
| <span class="item" id="base">{{base}}</span> |
| <span class="item">→</span> |
| <span class="item" id="to">{{to}}</span> |
| <span id="last_update">{{last_update}}</span> |
| </div> |
| |
| <div class="currency-information"> |
| <h4> {{ base + to }} </h4> |
| <span>1 {{ base }} = {{ value }} {{ to }} </span> |
| <span><b>Daily Difference:</b> {{difference}}</span> |
| <span><b>Daily Change:</b> {{change}}%</span> |
| </div> |
| |
| </body> |
| </html> |
If you make a request like http://localhost:5000/convert/usd/gbp/100
You’ll see something like this;
You can check the available currency list from here
https://docs.finage.co.uk/#/symbols/
If you want to try Finage’s API, you can get your FREE API with the link given below.
Register Free US Stock API
Visit Github to access this project.
https://github.com/FinageLTD/finage-example-widget
If you have any questions, please feel free to ask. Also, you can contact with our support team on the live chat section.