<center>![banner.png](https://www.valentinog.com/blog/wp-content/uploads/2017/12/django-2-on-delete-error.png)</center>

This tutorial is part of a series where different aspects of quickly creating and deploying STEEM web applications by using the Django framework as well as steem-python are discussed. Knowledge of programming with Python is advised, as well as HTML and CSS.

---

#### Repository
https://github.com/steemit/steem-python
https://github.com/django/django

#### What will I learn

- Creating a virtual environment
- Setting up a Django project
- Combining steem-python and Django
- Version control and deployment

#### Requirements

- Python 3.7
- Django 2.1.5
- steem-python 1.0.1
- git
- heroku
- gunicorn
- pipenv

#### Difficulty

- basic

---

### Tutorial

#### Preface

Django allows for quick development of web applications and since it uses Python as it's main programming language it also allows for easy combition with the steem-python library to develop STEEM web applications. This part will focus on process of starting a project from scratch and deploying it live. This tutorial will function as a framework for upcoming tutorials and will explain best practises for creating Django web apps.

#### Creating a virtual environment

Virtual environments are not required but are good practise. Software dependencies are saved in a special file which allows for easy deployment. `pipenv` will be used for this tutorial series. Assuming python3 is already installed, install `pipenv` as follows:

```
$ pip3 install pipenv
```

Now create a folder from which we will start working.

```
$ cd ~/
$ mkdir django
$ cd django
```

Create a new virtual environment and enter the virtual environment.

```
$ pipenv install django==2.1.5
$ pipenv shell
```

You should see parentheses around the folder name to indicate that you are in the virtual environment. You can always exit by typing `$ exit`.

```
(django) $
```


#### Setting up a Django project

Create a new project called stats.

```
(django) $ django-admin startproject stats .
```

This creates all the required files to run a Django web application. `manage.py` is the main file from which the server is run. The folder structure is as follows. 

```
.
├── Pipfile
├── Pipfile.lock
├── manage.py
└── stats
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
```

Test if everything is working by running the server from `manage.py` and visit the website locally at [http://127.0.0.1:8000/](http://127.0.0.1:8000/)
```
(django) $ python manage.py runserver
```

The terminal should show:
```
Performing system checks...

System check identified no issues (0 silenced).

You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

January 28, 2019 - 16:35:49
Django version 2.1.5, using settings 'steem.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
```

The unapplied migration are for setting up the database. For this tutorial no database will be required.

<center>
![Screenshot 2019-01-28 17.37.37.png](https://cdn.steemitimages.com/DQmWdJtHzyHfceGPMwHmyhqT2TC4N2hfLaLHGsuuAkcyhJR/Screenshot%202019-01-28%2017.37.37.png)</center>

#### Combining steem-python and Django

First install `steem-python`. Exit the server by pressing Ctrl + C.

```
(django) $ pip install steem==1.0.1
```

We will be creating a simple page that will display the most up to date statistics of the STEEM blockchain and updates every 3 seconds (blocktime). Django uses the concept of projects and apps to keep the code clean and reliable. A single project can contain multiple apps that can work together. Create an app called steemchain.

```
$ python manage.py startapp steemchain
```

A new directory is created for the app with its own subfolders and files.
```
├── Pipfile
├── Pipfile.lock
├── db.sqlite3
├── manage.py
├── stats
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── steemchain
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py
```

Open the project in your favourite editor and navigate to `settings.py` to register the app we just created.

```
# steem/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'steemchain.apps.SteemchainConfig', # new
]
```

To retrieve the data about the STEEM blockchain create a separate file `services.py` that takes care of interactions with the STEEM nodes.
```
(django) $ touch steemchain/services.py

```

The Blockchain class from `steem-python` contains the function `info()` that return a dict with the current blockchain statistics. Create the function `blockchain_data()` that makes the API call and returns the data.

```
# steemchain/services.py
from steem.blockchain import Blockchain


# retrieve current blockchain statistics
def blockchain_data():
    blockchain = Blockchain()
    return blockchain.info()
```

To display the data in the web application a view, `homePageView`, has to be created that calls the function we just created and parses the data to html. For this simple example a `HttpReponse()` will be used created in which we will manually write each html line. This response is returned to the user upon request.

```
# steemchain/views.py
def homePageView(request):
    data = blockchain_data()

    response = HttpResponse()
    # refresh every 3 seconds
    response.write('<meta http-equiv="refresh" content="3" />')

    # add each key, value par on a separate line
    for k, v in data.items():
	    response.write(f'{k}: {v}<br>')
    return response
```

Now the view needs to be connected to the right url. To display the data on the homepage a link between the empty url, `''`, and the view has to be created. The view from `views.py` is imported and linked to the url `''` by using the `path()` function.

```
(django) $ touch steemchain/urls.py

# steemchain/urls.py
from django.urls import path
from .views import homePageView

urlpatterns = [
    path('', homePageView, name='home')
]

```

The new `urls.py` for the app steemchain now has to be linked to the main `urls.py` file which then redirects to the steemchain `urls.py`. This is done by adding `include` and including `steemchain.urls`.

```
# stats/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('steemchain.urls'))
]
```

Now when a user visits the root url `''`, it will be redirected to `steemchain.urls` which than directs to the `homePageView` which pulls the data from the steem node and returns it as a `HttpResponse`. Test it by running the server and visiting [http://127.0.0.1:8000/](http://127.0.0.1:8000/)


```
(django) $ python manage.py runserver
```


#### Version control and deployment

A web application that is just running locally is not a real web application. Django allows for rapid deployment. Git and Heroku are powerful services that allow us to do just that. You will have to make separate accounts for both Git and Heroku.

First install Gunicorn that will be acting as the webserver.

```
(django) $ pipenv install gunicorn==19.9.0
```

Make sure that the pipfile has the following packages and lock the file.

```
# ./pipfile

[packages]
django = "==2.1.5"
gunicorn = "==19.9.0"
steem = "==1.0.1"
```

```
(django) $ pipenv lock
```

Heroku requires a procfile, create it and add the following line.


```
(django) $ touch Procfile


# ./procfile
web: gunicorn stats.wsgi --log-file -
```

Now set the `ALLOWED_HOSTS` in `settings.py` so the website can run from any ip. 


```
# pages_project/settings.py
ALLOWED_HOSTS = ['*']
```

All that is left now is pushing the code to both Git and Heroku for deployment. First initialise git in the project folder. Then add all the files to be committed and add a comment. `$ git status` allows for an overview of which files have changed since the last commit. Create a new repository on Github and link it to the project folder. Lastly push the code.

```
(django) $ git init
(django) $ git add -A
(django) $ git commit -m 'initial commit'
(django) $ git remote add origin https://github.com/Juless89/django-steem-stats.git
(django) $ git push -u origin master
```

When using git for the first time it is recommend to set the following variables.

```
$ git config --global user.name "Your Name"
$ git config --global user.email "yourname@email.com"
```

Create an Heroku app and link it to the newly created git repository. 

```
(django) $ heroku login
(django) $ heroku create
Creating app... done, ⬢ murmuring-castle-66732
https://murmuring-castle-66732.herokuapp.com/ | https://git.heroku.com/murmuring-castle-66732.git

(django) $ heroku git:remote -a murmuring-castle-66732
set git remote heroku to https://git.heroku.com/murmuring-castle-66732.git
```


Disable static files on Henroku and push the code.
```
(django) $ heroku config:set DISABLE_COLLECTSTATIC=1
(django) $ git push heroku master
```

Activate the Henroku app, set it to level 1. Level 1 is free to use. Then open the app to see it live.
```
(django) $ heroku ps:scale web=1
(django) $ heroku open
```

https://mysterious-beyond-70787.herokuapp.com/

Congratulations you have just created your first Django STEEM web application. 

---

The code for this tutorial can be found on [Github](https://github.com/Juless89/django-steem-stats)!

This tutorial was written by @juliank.