![Cover image for Consuming API with Django and Chart.js [Part 3]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzqqdntmyv5afvvxusjxl.jpeg)
This is going to be the third and final part of this series. In the previous part of this series; our aim was just to get our application to work. Now that we have achieved that; in this part, we will be making our code more presentable.
Objectives:
I) Carry out separation of concerns.
II) Add styling to our page to make the User Interface clean.
Objective I
All of our business logic was written in one single function in the views.py file. We will be correcting that here by separating our code into the service.py and views.py files.
We have to ensure that our service.py file is not aware of any HTTP communication, so we completely isolate the following logic to the views.py file; the handling of input extraction from the HTTP request, input validation and, handling of HTTP parameters. Every other logic will go into the service.py file. Explanation of the code will be included as comments in the various files where we will be making changes.
services.py
First, we create a services.py file in our price application directory.
Then we will add the code containing our functions below
import requests
from datetime import date, timedelta , datetime
from .forms import PriceSearchForm
#function to get the current and today-10days dates respectively
class getDateService():
def getCurrentDateView(self):
datetime_today = date.today() #get current date
date_today = str(datetime_today) #convert datetime class to string
date_10daysago = str(datetime_today - timedelta(days=10)) #get date of today -10 days
#assign 'date from' and 'date to' for chart template heading
date_from = date_10daysago
date_to = date_today
return date_from,date_to
#function to make the api get call and retrieve the default 10days api data.
class getDefaultData():
def makeDefaultApiView(self, date_from, date_to):
PriceFormSearch = initialData(date_from, date_to) #call the initial data function and append the values to the search form
search_form_default= PriceFormSearch
return search_form_default
class getUserInputDateRange():
def userFormInputView(self, date_from, date_to, date_today):
if date_to > date_today: #if the date to from input is greater than today's date; there wont be data for the extra days, so we change the 'date_to' input back to todays's date
date_to = date_today
PriceFormSearch = initialData(date_from, date_to)
search_form_current= PriceFormSearch #when the page reloads, set the default form date input values to the dates picked by the user
return search_form_current
class outOfRange():
def ooR(self, date_from, date_to, range_error):
from_date= datetime.strptime(date_from, '%Y-%m-%d').date()
to_date= datetime.strptime(date_to, '%Y-%m-%d').date()
if from_date < (to_date - timedelta(days=90)): #check if the date range is not greater than 3 months
range_error= 'No more than 3 months data can be displayed'
PriceFormSearch = initialData(date_from, date_to)
search_form_values= PriceFormSearch
return date_from, date_to, range_error, search_form_values
def initialData(date_from, date_to): #initial data function to render our date inputs out with chosen value
initial_data={'date_from':date_from,
'date_to':date_to,
}
PriceForm = PriceSearchForm(initial=initial_data) #append the date_from and date_to values to the search form
return PriceForm
views.py
You can go ahead and do a complete overhaul of your views file and replace the content with the code below.
import requests
from django.shortcuts import render
from .forms import PriceSearchForm
from .services import getDateService,getDefaultData,getUserInputDateRange,outOfRange #import business logic from services.py layer
# Create your views here.
def chart(request):
bitcoin_price= None
wrong_input = None
range_error = None
# assign the functions imported from services.py to variables to allow for easier use
initiateDateGet = getDateService()
initiateDefaultDataGet = getDefaultData()
initiateUserDateGet = getUserInputDateRange()
initiateRangeErrorGet = outOfRange()
date_from, date_to = initiateDateGet.getCurrentDateView() #get the dates for present day and present day - 10 days
search_form= initiateDefaultDataGet.makeDefaultApiView(date_from, date_to) #use the 10days period obtained from the function above to set the default form values
bitcoin_price = getBitcoinData(date_from, date_to)#use the 10days period obtained from the function above to get dafualt 10days data
from_date, to_date = getUserDateView(request) #if request method is 'post', validate the form and get date range supplied by user and use it for the api call
if from_date is not None and to_date is not None: #check if data was supplied by the user
date_today=date_to #assign todays date to date_today variable
date_from, date_to, date_out_of_range, search_form = initiateRangeErrorGet.ooR(from_date, to_date, range_error) #check if the supplied date range is not greater than 3 months
if date_out_of_range is not None:
range_error = date_out_of_range #if date range is more than 3 months, render this error in the html page
bitcoin_price = None
else:
bitcoin_price, date_from, date_to, wrong_input = getUserInputData(from_date, to_date, date_today, wrong_input) #if there is data supplied my the user via the form, proceed to make the api call and retrieve the required data
search_form = initiateUserDateGet.userFormInputView(from_date, to_date, date_today ) #make the date range submitted in the form supplied by the user via the form the default input of the form
context = {
'search_form': search_form,
'price': bitcoin_price,
'wrong_input':wrong_input,
'date_from':date_from,
'date_to':date_to,
'range_error': range_error
}
return render(request, "chart.html", context)
#function to confirm if valid date ranges have been supplied by the user.
def getUserDateView(request):
date_from = None
date_to = None
search_form= PriceSearchForm(request.POST or None) #get post request from the front end
if request.method == 'POST':
if search_form.is_valid(): #Confirm if valid data was received from the form
date_from = request.POST.get('date_from') #extract input 1 from submitted data
date_to = request.POST.get('date_to') #extract input 2 from submitted data
else:
raise Http400("Sorry, this did not work. Invalid input")
return date_from,date_to
def getUserInputData(date_from, date_to, date_today, wrong_input):
from_date= None
to_date= None
requested_btc_price_range= None
if date_to > date_from: #confirm that input2 is greater than input 1
if date_to > date_today: #if the date to from input is greater than today's date; there wont be data for the extra days, so we change the 'date_to' input back to todays's date
date_to = date_today
api= 'https://api.coindesk.com/v1/bpi/historical/close.json?start=' + date_from + '&end=' + date_to + '&index=[USD]' #use the 10days period obtained above to get dafualt 10days value
try:
response = requests.get(api, timeout=10) #get api response data from coindesk based on date range supplied by user with a timeout of 10seconds
response.raise_for_status() #raise error if HTTP request returned an unsuccessful status code.
prices = response.json() #convert response to json format
requested_btc_price_range=prices.get("bpi") #filter prices based on "bpi" values only
from_date= date_from
to_date= date_to
except requests.exceptions.ConnectionError as errc: #raise error if connection fails
raise ConnectionError(errc)
except requests.exceptions.Timeout as errt: #raise error if the request gets timed out after 10 seconds without receiving a single byte
raise TimeoutError(errt)
except requests.exceptions.HTTPError as err: #raise a general error if the above named errors are not triggered
raise SystemExit(err)
else:
wrong_input = 'Wrong date input selection: date from cant be greater than date to, please try again' #print out an error message if the user chooses a date that is greater than input1's date
return requested_btc_price_range, from_date, to_date , wrong_input,
def getBitcoinData(date_from, date_to):
api= 'https://api.coindesk.com/v1/bpi/historical/close.json?start=' + date_from + '&end=' + date_to + '&index=[USD]'
try:
response = requests.get(api, timeout=10) #get api response data from coindesk based on date range supplied by user
response.raise_for_status() #raise error if HTTP request returned an unsuccessful status code.
prices = response.json() #convert response to json format
default_btc_price_range=prices.get("bpi") #filter prices based on "bpi" values only
except requests.exceptions.ConnectionError as errc: #raise error if connection fails
raise ConnectionError(errc)
except requests.exceptions.Timeout as errt: #raise error if the request gets timed out after 10 seconds without receiving a single byte
raise TimeoutError(errt)
except requests.exceptions.HTTPError as err: #raise a general error if the above named errors are not triggered
raise SystemExit(err)
return default_btc_price_range
Objective II
We will be using crispy forms to make our forms look really crispy😉. All pun intended.
Run the command below
pip install django-crispy-forms
Then after installation, we'll need to adjust our settings file. Add this under your installed app section
#3rd Party
'crispy_forms'
and this directly below the installed app settings.
CRISPY_TEMPLATE_PACK = 'bootstrap4'
It should look exactly like this
chart.html
We are going to add this error alert code to our chart.html file to cap possible data that can be obtained to 3months so our chart does not become unreadable. We'll also be changing our form code, replacing our previous span elements with hidden input, and adding an h4 tag header to give our chart a dynamic title.
<!-- raise error when selected date range is more than 3 months -->
{% if range_error %}
<div class="alert alert-warning" role="alert">
{{range_error}}
</div>
{% endif %}
<div class="row">
<!-- form to filter dates on chart -->
<form id="myForm" action="" method='POST'>
{% csrf_token %}
<div class="d-flex flex-nowrap cover">
{{search_form| crispy}} <!-- render form with crispy forms -->
<div class="">
<button type="submit" class="order-2 btn btn-primary mt-3"> Render</button>
</div>
</div>
</form>
</div>
<h4 class="text-center">Bitcoin price change from {{date_from}} to {{date_to}}</h4>
{% for date,price in price.items %}
<input type="hidden" class="date-item" value="{{date}}">
<input type="hidden" class="price-item" value="{{price}}">
{% endfor %}
Please ensure you add all the code above within the {block element} template tags.
Next, add the bootstrap CDN and link to your CSS stylesheet within the {block style} template tags.
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Local css -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
chart.js
Since we are appending the data received from the api to our input element now, we can no longer use innerHtml. We need to go to our chart.js file and make little changes to lines 7 and 12. Change innerhtml to value.
date[i] = dates[i].value
price[j] = prices[j].value
style.css
Create a style.css file in your CSS folder and add the following lines of code to it.
.form-control {
width: unset;
margin: 0 !important ;
display: unset !important;
}
.form-group, .form-group div{
margin-right:0 !important ;
width: 33%;
display: unset !important;
}
.cover{
text-align: center;
justify-content: space-evenly;
}
form{
margin-bottom: 2rem;
}
input{
cursor: pointer;
}
.btn{
margin-top: 0 !important;
}
.chart-container{
width: 100% !important;
}
@media (max-width: 760px) {
.form-control{
width: 100%;
}
}
@media (max-width: 991px) {
.btn{
margin-top: 25px !important;
}
}
Congratulations. We have carried out separation of concern, so our code looks more readable and we have also added little styling to make it look much more presentable. Here is the new look of our application.
Thank you for coming this far. You can access the Github repo here.
If you have any questions, feel free to drop them as a comment or send me a message on Linkedin or Twitter and I'll ensure I respond as quickly as I can. Ciao 👋
Top comments (0)