Back to Blog Stocks by Finage at July 19, 2020 3 MIN READ

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.html

app.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)
view rawapp.py hosted with ❤ by GitHub
<!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>
view rawindex.html hosted with ❤ by GitHub

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)
view rawapp.py hosted with ❤ by GitHub
<!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>
view rawindex.html hosted with ❤ by GitHub

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.