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) ![1-growth_major_languages.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046230/cyid16vtmveh7msmqwrw.png) _{[Source]( https://www.unocero.com/noticias/python-el-lenguaje-de-mas-crecimiento-en-el-2017/)} [coffeesource.net](http://coffeesource.net/) has been developed utilizing [Django]( https://www.djangoproject.com/), 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. ***

*“Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.”* [Source]( https://www.djangoproject.com/).

![2-django-logo-positive.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046274/spdnlbzdxs4cvio4o0rq.png) _{[Source](https://realpython.com/learn/start-django/)}

***
The [repository]( https://github.com/coffeesource-net/coffeesource_app/) of the project is hosted on Github.

How was coffeesource.net built?

The first step was to create the repository on Github. [This](https://help.github.com/articles/create-a-repo/) is a simple guide on how to create and download a repository.

![3-github.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046332/pm3cqg0lmesoirlrp0xq.png) _{[Source]( https://github.com/)}

***
Once the repository is created and downloaded, we move to its root and proceed to configure an image of an Ubuntu server using [Docker](https://docs.docker.com/). 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. ![4-docker.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046541/nxv8qdtm0x4kff4ny82z.png)_{[Source]( https://www.docker.com/)} In the official Docker documentation you can find the tutorial [Quickstart: Compose and Django](https://docs.docker.com/compose/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](https://github.com/steemit/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: ![5-docker-compose-up.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046618/bw4es33hzqk81eyg6qcb.png) 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: ![6-djangoworked.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046652/vp6ackersi7xievrhbfj.png) Now we proceed to edit the file *settings.py*. In the section INSTALLED_APP, we add *app*, and eliminate the database configuration. ![7-installed-apps.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046673/sg54ykkmsz3ts1yd0r6k.png) _{The code is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/settings.py)}

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]( https://v4-alpha.getbootstrap.com/) in order to facilitate the construction of the website with responsive design included. We proceed to download the library from the [official site]( https://v4-alpha.getbootstrap.com/getting-started/download/). 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*.

Inside the *static/*, folder we create the folder *js/libs/*, and we copy inside this the file *bootstrap.min.js*, and we create the folder *css/libs/*, and we copy inside this the following files: *bootstrap.min.css y bootstrap.min.css.map*

![8-bootstrap.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046704/atweoymhzqjw7orvg5ec.png) _{[Source]( https://v4-alpha.getbootstrap.com/about/brand/)}

***
It is also necessary to include [JQuery](https://jquery.com/) 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]( https://jquery.com/download/) and proceed to copy the file *jquery-3.2.1.min.js* inside the folder *js/libs/*. ![9-jquery.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046732/bypybixor2fixmn1p1mk.png)_{[Source]( https://v4-alpha.getbootstrap.com/about/brand/)} 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: ![10-structure.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046757/hreirt0p6piyvrik3lhj.png) 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](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/templates/layout/index.html) 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* ![11-views.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046782/wgq17chig0x6rmlvrbr3.png) _{The code is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/views.py)} Then, we go to the file *app/urls.py*, and define the url corresponding to the home in the following way: ![12-urls.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046807/jx64xzpwy3y8lfgiqmhm.png) _{The code is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/urls.py)} Finally, we edit the file *app / templates / home.html* in the following way: ![13-home.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046828/czgbl75kqhlyy7r73sb6.png) _{The code is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/templates/home.html)} Now when going back to the browser and visiting the url *localhost: 8000*, we should see the home of [coffeesource.net](http://coffeesource.net/), in which the navigation bar and a form field used to enter a steemit username will be displayed. ![14-coffeesourcehome.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046855/f4nluhfcvnqkqgix4sf1.png) 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*. ![15-installedapps.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046876/gmuss5rbvn6didt96sbo.png) _{The code is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/settings.py)} 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](https://github.com/coffeesource-net/coffeesource_app/blob/master/accounts/views.py). Then we edit the file accounts/urls.py, adding the following code: ![16-account-urls.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046901/frj2acpcjyw6do1jkqsu.png) _{The code is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/accounts/urls.py)} 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](https://github.com/coffeesource-net/coffeesource_app/blob/master/accounts/templates/accounts/account_detail.html). 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: ![17-urls.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046930/fmrtsacspyyzd1vnjofh.png) _{The code is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/urls.py)} 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: ![18-homehtml.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511046956/i8ofyaiz3ry4dhdvmbhn.png) _{The file is available by following this [link](https://github.com/coffeesource-net/coffeesource_app/blob/master/app/templates/home.html)} 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](https://github.com/steemit/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](http://steem.readthedocs.io/en/latest/). ------------ To run coffeesource.net locally with Docker installed, we can clone the [repository](https://github.com/coffeesource-net/coffeesource_app) 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! *** ![alextrapprooff.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511047935/hfskfvzvxlscayihcwqi.png) ![proofkitandresgithub.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511047955/ufajetmnsq1iwtsar1mk.png) Here is the proof ;) Link to [master branch](https://github.com/coffeesource-net/coffeesource_app). Link to [dev branch](https://github.com/coffeesource-net/coffeesource_app/tree/dev).

Posted on Utopian.io - Rewarding Open Source Contributors