Building Wakio — a hackathon experience

Building Wakio — a hackathon experience

Note from the Sia/Skynet team: Wakio is an incredible app that showed us how a smooth user experience could be brought to the world of decentralized applications. Congratulations again on your hackathon win, and thank you so much for detailing the process of building Wakio.

The background

I discovered Sia while searching for an open-source alternative to private data-storage services (e.g. Google Drive and Dropbox) to back up my files. I gave it a test run for a couple of weeks and loved it, so I decided to adopt it as one of my backup systems. Shortly after, Skynet was released, enabling users to share files through Sia’s decentralized network. Thanks to its velocity, and simplicity in usage, different applications started to appear hosted directly on Skynet, making the Sia ecosystem grow more and more interesting. In this context I read that Sia and Namebase were partnering to make a hackathon, so, in order to both help the community grow, and gain better insight into the technology, I decided to participate.

In all honesty, I had not heard of Namebase until the hackathon was promoted, but it quickly became clear its usefulness. You see, whenever you upload a file to Skynet, skynet assigns it a unique identifier (called a Skylink) that looks like this:

dAArs_bX0skS6gf6kt64BPXnp6XqW9_aVZKRHO2j9mUN6A

To retrieve your file, you need to visit siasky.net/. The nice thing about Skylinks is that they unequivocally represent each file in the network… the problem is that they are impossible to remember. Here is where Namebase becomes useful. Namebase allows (through the use of the handshake blockchain) to link human-readable domain names to Skynet links. This means that you can point something simple to remember, like the word wakio, to the 47 random-characters long skylink. Now, you can access your file, or application, by simply visiting siasky.net/hns/.

Once I understood how the technology worked, it was time to decide on a project. My first idea was to make a decentralized chat application, however, I didn’t manage to find a way to decentralize the sending of messages between users. After abandoning the idea of the chat, I decided to create a blog. I had seen blogging tools hosted in Skynet, but none of them seemed simple enough to use. In all existing cases the user needed to install complex tools (such as Jekyll, or node) to create a post, and then manually upload it to skynet. My goal was to create a decentralized blogging platform that was self contained. That is, a blog that was hosted in Skynet, and allowed you to create new posts (as well as modify and delete them) without the need of exiting the blog or using external tools. So I started.

Note from Skynet team: Since then, SkyDB has been released. SkyDB enables building applications like decentralized chat. Check out SkyMessages, currently in development by redsolver.

Building a Decentralized Blog

The core functionality of the platform was ready on its first version. The users would choose a title and write the post content in a simple text-box. Then, on clicking “add post”, the post’s content would be embedded into a predefined html object and appended to the end of the website.

First version of the blog — boring — but with all the core functionality working.

Finally, by clicking on “publish” the whole code of the website would be copied and uploaded to Skynet. Skynet then returned a new link which now contained all the functionality of the blog, and the new post embedded in its body.

My first blog posts explained how the platform worked. Currently available at: https://siasky.net/KAABGIAxcp1nfvtnIZ0AFVrOA8maLP9hztnvNQVo5mhD6w

To make it easy for users to write and format posts I chose to replace the text-box with the simplest and smallest “what you see is what you get” editor available, called pell. Pell is an amazing editor that enables us to write rich posts, with titles, formatted text, links, and images. The best part? I modified pell so the images get uploaded automatically to Skynet, therefore keeping the blog, and its content, completely decentralized.

The pell editor is one of the main features of the blogging platform

Next, in order to make the blog more appealing, I worked on its style. Since I wanted to keep it clean, simple to read, but general enough for different types of blogs I decided to use the “clean” theme available in wordpress blogs.

A clean, yet stylish look for the blogs! Based on wordpress clean theme.

Simplifying Crowded Blogs

Something I noticed is that, after a couple of posts, the blog started to get crowded, and it was hard to find the posts, since long posts were occupying a lot of space in the page. Therefore, I decided to (i) crop long posts, and create a button “show more” to expand them, and (ii) divide the blog in pages. I’m not going to bore you with the details, but this turned out to be a little more complex than expected, since you need to handle many border cases. Anyway, after a couple of days, the blogs had pages and posts that could be expanded. This in turn allowed to greatly improve the performance of the blog in general. Since only 4 posts were showing at any time, the blog was performant even when containing thousands of posts! I know because I uploaded a blog with a thousand posts (don’t tell the people at Sia how I wasted space in tests).

Adding pages and contracting the posts allowed to keep the blog easy to navigate and read.

Until now, all the posts were being stored on Skynet and in order to access them I had to use their Skylinks. I decided to integrate my blog with Namebase. Without entering into technical details, in order to link a handshake domain to a skylink you need two “passwords”. These are what in cryptography we call a public and private key. These keys are, as the skylinks, long strings of random characters, making it impossible to remember. In order to simplify this I decided to give the user the possibility of choosing a single password, long but simple to remember, and use it to protect and embed the keys in the blog itself. At the time of publishing, the user would input their password, the keys got decrypted, and used in Namebase to point the human-readable handshake domain to the skylink with the updated blog version. I tested this on my main blog, bunnu, where I was adding a posts each time a new feature was available.

Adding the Final Features

While the blogs were completely usable at this point, there were missing some main features. The last couple of days of the hackathon I expanded them by adding the ability to (i) add videos to the posts, either from Youtube, Vimeo, Youku (main video platform in China), or by uploading them, and (ii) modify the posts title and content (yes… until then you needed to delete them and write them again), and (iii) modify the blog title and description. See an example of this at https://siasky.net/hns/mutio.

Keep Calm and Make a Blog

At this point, I had a working blogging platform, super simple to use and capable to create rich posts. The only thing left to do was to create a landing page to help users create their blog in a couple of steps. The focus was to have a friendly website, oriented towards non-technical users, that transmitted the idea that creating a blog and using it was simple and accessible for everyone. I went for a single-page format, with few big titles, and many buttons calling to action: start your blog! Thus, Wakio’s landing page was born.

Wakio’s landing page: the goal was to ensure non-technical users that the platform was simple to use.

What the Future Holds

In the future, I am looking forward to adding themes to the blogs, and why not — seeing if it’s possible to transform it into a fully decentralized content management system (CMS). A Twitter for Wakio needs to be created, in which I will offer to help people with creating their blogs. Furthermore, I’m planning on giving away handshake domains, so people can also fully leverage the capabilities of the platform.

Final Notes: Thank You

I’ve got to admit that developing Wakio was a fun and rewarding process, in which I was not only able to learn new technologies (such as Skynet and the Namebase API), but also to revisit my HTML, CSS and Javascript knowledge. I also feel the need to congratulate both Sia/Skynet and Namebase developers for having great APIs, which are correctly documented and behave exactly as expected. This has become rare lately in many projects… especially blockchain related ones. So, again, my sincere congratulations to both projects.

Finally, I would like to thank the Sia/Skynet team for inviting me to write this blog post, and all my friends who served as testers for the platform. Interestingly enough, some of them really loved the technology and decided to give it a try in the following hackathon organized by Sia and Near. But that is a story for another post.

Try out Wakio now, and get your first fully decentralized blog out on the new Internet.

Guillermo Gallardo.

Building Wakio — a hackathon experience was originally published in Sia Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.