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 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.
“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.”
The repository of the project is hosted on Github.
How was coffeesource.net built?
The first step was to create the repository on Github. This is a simple guide on how to create and download a repository.
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.
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:
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
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.
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:
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:
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.
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.
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.
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
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:
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
Then, we go to the file app/urls.py, and define the url corresponding to the home in the following way:
Finally, we edit the file app / templates / home.html in the following way:
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.
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:
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:
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:
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,)
To run coffeesource.net locally with Docker installed, we can clone the repository directly from Github, and execute the following commands:
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!
Posted on Utopian.io - Rewarding Open Source Contributors