Build a Crypto Currency Web App with python

A practical guide to building, writing test and ci/cd deployment pipelines with Django and tailwind

Photo by Jievani Weerasinghe on Unsplash

Introduction

Crypto currency nowadays forms and integral part of our lives as oppose to about 10 years ago, hence the reason a lot of us have fallen in love with it and one of the many advantages of us all being developers is the ability to build amazing applications to provide insights not just for us but for the general public at large.

As such using the cryptoCompare api , we shall build our own application to meet our needs as not just developers but as crypto enthusiast .

Setup

1. create an account on crypocompare were we shall get our api key and all the necessary data for our application
2. create a working directory and setup a virtual environment on your local machine
3. Activate virtual environment
4. Install django ==3.2
5. Create our django project by running

django-admin startpoject src .

6. We create a folder called templates in our working directory inside we create a base.html then another folder called partials and inside we create the following files _footer.html ,_navbar.html

Our base.html will contain the tailwind css CDN as seen below and also it will include the contents of our _footer.html and navbar.html using the include template tag. All of this properties will be inherited by our other files using the extends template tag.

base.html

_footer.html

The above contains the design of our footer

navbar.html

The above contains the contentof our navbar

6. lastly we create our app with

python manage.py startapp crypto

In our crypto app we create a urls.py file which shall contain all our urls as seen below

N.B remember to add the above urls.py in the urls.py in our src folder as below;

we move into the views.py in our newly created app and do the following imports and start writing the necessary functions

Basically what requests does is enable us to easily send HTTP request. We create a response object called res which enables us to get crypto news from the cryptocompare api using the news endpoint as seen in the url variable gotten from the cryptocompare website. Next we check if the url returns a 200 response and if so, we convert the response to a json object using json.loads(),which enables us to render the said output in the index.html file as seen below else we move into the else block as seen on the function

Index.html

This template inherits all the properties we setup in out base.html. We begin by iterating through the response we received from our index functions and then assigning the desired attributes where we want them to be displayed on the page for example {{i.title}} to get the title inside of the for loop.

Greed Fear Index

This is something pretty interesting i came across while putting together this article. So basically It is based on the premise that excessive fear can result in stocks trading well below their intrinsic values while, at the same time, unbridled greed can result in stocks being bid up far above what they should be worth. For me information about this especially with regards to the factors which affect the fear greed index of crypto, checkout this link alternative.me. which we shall their api on our app to visualize this. Below is our views.py

The explanation for this is pretty same with the one above. Below is our fear.html file

The above template inherits the properties we setup in our base.html and the out of the fear greed index with respective to todays date”22/09/2021” is

chowa cross

The next function we shall be looking at is the price function which aims to show the price of selected crypto currencies in USD and EUR along with their market capitalization.

What makes this funtion different from the others as you can see above in the response object is that we manually inputed the various currencies in the url.The json we reveice from this will have key value pairs which we will have to iterate through to get the desired information we need as seen in the price.html file below

N.B: Take note of the manner in which we did the iteration above

Lastly, lets incorporate a search function into our application so users can search information on the particular coin they are interested in

With regards to the request.Get.get(‘category’) ,you can look at it in lay man terms as means through which the search function links to the form tag in the front end by referencing the name attribute in this case which is “category” send in the index.html file. Below is the search.html file.

Testing

Testing is one of those things which a lot of new developers often turn to ignore but this could literally save your hours/days of debugging lol. lets move to the tests.py in our crypto app. For our testing we shall use unittest instead of pytest . Incase your new to testing, be sure to checking this aricle wrote with regards to testing in general for beginner python developers.

Pytest for Absolute Beginners

tests.py

Our app is pretty small app and as such the test we have carried out do not have any heavy complexity in them and believe some times test can get realy complicated.

So our first class that is TestAppConfig has two methods , the first aims at making sure were are actually working with the correct app while the second makes sure we do not have the wrong key in our settings.py

Next we gave SuperUserTest which test our ability to create a superuser in our app using the django defaults user class.

Lastly we have IndexPageTest class which test our just our index.html. The various methods in this class are self explanatory as such the test on the other html files can easily be done based on this.

Feel free to clone the repo , create a new branch and write more test and I shall merge and or correct you where necessary.

Finally run python manage.py test to make sure all are test are correct

N.B.

• You can read more about Unit testing framework
• SimpleTestCase is simply special subset of Django’s TestCase that is designed for webpages that do not have a model included
• SetUp simply customizes the initial state before a test case begins i.e it shall be run first before any other test

CI/CD pipeline

For our cd/cd pipeline we shall use github actions. What it does is automate our entire workflow which gives you the power to build, test and deploy your code directly from github. Below is a simply github action gotten from the actions marketplace on github which automatically runs the test we wrote in our application

Conclusion

A lot of people are nowadays are of the opinion that django templates are outdated with the arrival of many amazing front frameworks like react and vue but personally Istill do believe they are pretty power and hope this article can help make my point.

I do hope this article has given you enough insight needed to work with pretty much any 3rd party api you wish and or desire.

Be sure to checkout the github repo for the source code along side all the necessary references

GitHub - cforcross/Crypto_currency_Medium: For Medium Article