How have we built coffeesource.net?

Coffeesource is an open source project to create tools based on Steem's blockchain useful to the entire steemit community, and which seeks to encourage the growing community of Python developers and the development community in general to take an interest in Blockchain technology and contribute in open source projects using Utopian.io.

( @coffeesource.net is a creation of @kit.andres and @ecoinstant, who are building out new tools upon the Steem Blockchain)

_Source

coffeesource.net has been developed utilizing Django, framework web developed in Python, which allows the development of highly transactional and scalable web applications, in order to ensure a robust architecture to meet the demand of needs that arise when developing solutions for Steemit users.

---

---

The repository of the project is hosted on Github.

How was coffeesource.net built?

---

Once the repository is created and downloaded, we move to its root and proceed to configure an image of an Ubuntu server using Docker. Docker allows us to create light and portable containers that can be used on any machine with Docker installed, independently of the operating system, to execute Software applications.

_Source

In the official Docker documentation you can find the tutorial Quickstart: Compose and Django, with a simple explanation on how to start a simple application with Django and PostgreSQL. In the case of coffeesource.net, PostgreSQL is not being used yet, nor is any database engine.

The following is the content of the Dockerfile file, which states that the container will have installed Python 3.6.0 and will be an image of ubuntu 14.04:

Dockerfile

---

FROM python:3.6.0

RUN wget http://rubies.travis-ci.org/ubuntu/14.04/x86_64/ruby-2.3.1.tar.bz2 \
    && tar xvjf ruby-2.3.1.tar.bz2 \
    && cp -rp ruby-2.3.1/* /usr/local/ \
    && rm -rf ruby-2.3.1.tar.bz2 ruby-2.3.1/

RUN mkdir /code
WORKDIR /code

RUN easy_install -U pip
RUN pip install -U pip setuptools

ADD requirements.txt /code/requirements.txt
RUN pip install -r requirements.txt

---

Then we create the file requirements.txt, where we specify the Python libraries that we want to include in the project. This is where we precede to install the most current version of Django and steem-python, a library developed to access Steem's blockchain using Python.

requirements.txt

---

Django==1.11.7

# Libs
steem==0.18.103

---

Now we proceed to create the file docker-compose.yml, which specifies the services that need to be enabled in the application. In this case only the web server is needed.

version: '2'
services:
  web:
    build: .
    image: coffeesource
    command: python manage.py runserver 0.0.0.0:8000
    ports:
      - "3000:3000"
      - "8000:8000"
    volumes:
      - .:/code

Now we proceed to build the image by executing the following command using a terminal, located at the root of the project:

docker-compose build

By means of this command the image of Ubuntu is created and the liberies specified in the file requirements.txt are installed. This process may take awhile.

With Django installed, we proceed to create the django project using the command:

docker-compose run web django-admin.py startproject app .

This will create the file manage.py and the folder app/, in which we will find the files init.py, settings.py, urls.py y wsgi.py. The following is the structure that the project should have at this point.

coffeesource_app/
│   
│──  app/
│   └── __init__.py
│   └── settings.py
│   └── urls.py
│   └── wsgi.py
│
└── docker-compose.yml
└── Dockerfile
└── manage.py
└── requirements.txt

At this point we can now run the web server to verify that our django application is properly configured by using the following command:

docker-compose up

If everything is configured correctly, we should see in the terminal a similar response to that shown in the following image:

This indicates that the web server is running. To stop the web server, we use the ctrl + c keys. With the web server running, we go to a browser and visit the address localhost: 8000. We should see the following message from Django:

Now we proceed to edit the file settings.py. In the section INSTALLED_APP, we add app, and eliminate the database configuration.

_{The code is available by following this link}

First functionality of coffeesource.net.

In order to implement an easy-backlink system, in which it is easy to search the publications of a specific user and see the links of each of their entries, we developed a system that allows us to search for a username of a user of Steem and get the information from their posts using the steem-python library. For this purpose, a form has been designed that receives the username and, when submitting, redirects to a list of the entries of said user with the link to easily copy.

To finish configuring the general structure of the project, we created the folder templates/ en la carpeta app/. Inside the folder templates/ we create the folder layout/ and inside that one, we create the file index.html. This file will be the base of the .html of the application, where the common contents of all the pages are defined as the header and the footer, and from which the other .html files will inherit their structure. We also create the static/ folder inside the app/ folder. In this folder we will store all the static resources such as javascript and external css libraries and our own javascript, css and image files.

We are using Bootstrap 4 in order to facilitate the construction of the website with responsive design included. We proceed to download the library from the official site. Of the contents in the downloaded folder, we will only need to use the following files: bootstrap.min.js, bootstrap.min.css y bootstrap.min.css.map.

---

It is also necessary to include JQuery within the project, which simplifies Javascript coding, and which is required for the proper functioning of Bootstrap. We can download the latest version from the official site and proceed to copy the file jquery-3.2.1.min.js inside the folder js/libs/.

_Source

In order to implement the landing page of the application, we create a file called views.py inside the folder app/, and we create the file home.html inside the folder app/templates/.

Thus, we already have the general structure of the project that should look like the following:

As we said, the file app/templates/layout/index.html will be the foundation of all the .html files for the application. In this link we can find the content of the file, in which are defined all the sections such as the header, the footer y se importan las librerías css y javascript que definimos previamente (*Bootstrap y JQuery *).

We go to the app/views.py file and create the HomeView class, inheriting the generic view from Django TemplateView. This view will enable us for us the application home. We define that the template it will use will be home.html

_{The code is available by following this link}

Then, we go to the file app/urls.py, and define the url corresponding to the home in the following way:

_{The code is available by following this link}

Finally, we edit the file app / templates / home.html in the following way:

_{The code is available by following this link}

Now when going back to the browser and visiting the url localhost: 8000, we should see the home of coffeesource.net, in which the navigation bar and a form field used to enter a steemit username will be displayed.

The next step is to implement the form's functionality. The idea is that by entering a username of the Steemit network, the user is redirected to a page where he can see the user's latest posts and the corresponding link to easily copy. In order to design a scalable and ordered application from the beginning, we created the application accounts, in which we will define all the views corresponding to the information of Steemit users, such as profile detail, publications, rewards, etc. To create a new application, we execute the following command in the terminal:

docker exec -it coffeesourceapp_web_1 python manage.py startapp accounts

We proceed to include the new application in the INSTALLED_APPS in the file app/settings.py.

_{The code is available by following this link}

Now we are going to create a new view called AccountDetailView, in which we will show the latest publications of the user that was entered in the home form. Therefore, when someone enters a Steemit username in the home form, they will be redirected to this new view, in which we will make a request to the Steem blockchain through the steem-python library to obtain the information of the latest posts published by said user. To create this new view, we edit the file accounts / views.py. The content of this file is available at this link.

Then we edit the file accounts/urls.py, adding the following code:

_{The code is available by following this link}

We create the folder templates/accounts/ inside of the folder accounts/, and we create the file account_detail.html in the folder accounts/templates/accounts/. The contents of this file are available by following this link.

Finally, as our wish is that the url of a user's detail page has the format www.coffeesource.net/username, and not www.coffeesource.net/accounts/username we define in the main urls file, that is, app/urls.py the url that will redirect to the view AccountDetailView, defined in accounts/views.py, in the following way:

_{The code is available by following this link}

We modify the app / templates / home.html file, adding the action attribute to the form pointing to the url accounts: username_search_form, as follows:

_{The file is available by following this link}

Now, when entering the Steemit username in the form and submitting, the user will be redirected to the detail view with the list of latest publications and links.

Access to the Steem Blockchain using steem-python

In the application for now we are accessing Steemit's blockchain to get the posts published by a user. To do this, we are using the library steem-python , which we use in the following way:

---

from steem import Steem
s = Steem()
blog_entries = s.get_blog(account=”coffeesource.net”, entry_id=0, limit=30,)
print(blog_entries)

---

This will show us a list of the last 30 posts published by the account @coffeesource.net. The documentation of the library is available at the following link.

---

To run coffeesource.net locally with Docker installed, we can clone the repository directly from Github, and execute the following commands:

docker-compose build
docker-compose up

And visit localhost:8000 in our browser.

---

Thank you so much for reading this article, it is just the first step for us in a process of learning to develop tools on the blockchain. We are thrilled to be working with Utopian.io and all groups on the steem blockchain for a fuller, more enriching future full of transparency and community.

We will continue to develop the public functionality of the coffeesource.net tool.

Love and Light to All!

---

Here is the proof ;)

Link to master branch.
Link to dev branch.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---