How to build your first blockchain-based app in 15 minutes

Vladimir Zhuravlev
Feb 14, 2020 · 8 min read

I have prepared a tutorial on how to create a dApp on the Waves blockchain. Read on for a step-by-step process of development, with screenshots.

Why build apps on a blockchain?

Blockchain is a way of decentralizing data storage. The technology can therefore be used as a substitute for a traditional database. Blockchain provides functionality that can be useful in building an application’s architecture, including transparency of operations and, of course, this decentralized data storage. Data on a public blockchain cannot be changed and can be easily checked by any internet user.

In this tutorial, we’ll create a web app that uses blockchain instead of a centralized database, using native JavaScript and the well-known HTML with CSS. Let’s explore in practise what the features of the technology are, and how to use them in your development.

What are we going to develop?

We’ll consider the Certificado project as an example of a blockchain-based app. The project aims to solve a real-world problem — forgery of certificates of education. For instance, documents can easily be forged in Adobe Photoshop, and this makes certificates lose their value. It is easier to create a certificate using the software and add it to your CV portfolio than to take a course on Coursera, for example.

The mission of Certificado is to add value to certificates issued online, with two features:

  • Transparent storage of certificates on a blockchain
  • Only administrators can add certificates to the database

How are we going to build the app?

This will be a classic web app built using HTML and JavaScript, addressing the blockchain to store diploma data. We chose the Waves blockchain with an additional tool, Waves Keeper. This browser extension allows an administrator to login without disclosing his private key (a password, in the world of blockchain).

Certificado is not a decentralized application (dApp), since business logic is not fixed in a smart contract. The app simply uses the blockchain for data storage and no smart contracts are needed.

Step-by-step overview

Certificate creation interface

Let’s start with the classic part — interface creation. Lay out two pages: index.html for adding certificates and check.html to validate a document.

index.html layout:

The next step is to implement the mechanism for adding a diploma. For that, we’ll figure out where to add the diploma. Now, it’s time to get started with the Waves blockchain!

Install the Waves Keeper browser extension to create and manage your accounts on the blockchain.

Waves Keeper — connecting to the blockchain

Click on the ‘Create a new account’ button. Check that you have chosen testnet in the bottom left corner. This network allows the use of test WAVES tokens so you can experiment with transactions.

This page will be available after account creation. Please note that the account has four fields: an address and a public key used for identification on the network, as well as a private key and a seed phrase that acts as a password. You must not reveal your private key or seed phrase! That’s why the symbols are hidden with asterisks.

The upper part of the Waves Keeper window displays your balance. At first, this will be a depressing zero. Let’s fund the account via Waves Faucet, which issues test tokens. Click on the ‘Transactions’ button and move to Waves Explorer:

This tool displays all blockchain data in a convenient form. All the information about your account is on the page. There’s nothing interesting so far, neither transactions nor balance. Later, you can easily track changes here. Anyone can do this with Waves Explorer!

In the bottom left corner you can go to the Faucet page:

Enter your account address and prove that you’re not a robot. Then you’ll receive 10 testnet WAVES on your balance:

Now we have some tokens for experimenting! Let’s continue with the most interesting part and teach our app to communicate with the blockchain. In our already created account, you can save data using its Data State. Right now it’s empty:

We can change account data using transactions. This isn’t a problem since Waves Keeper has an API for such tasks:

But before we move on to studying the API, we need to understand one of the key elements of a blockchain — a transaction.

A transaction is a record of completing some action. For instance, money transfer is a transaction. Issuing a new currency is a transaction. And just recording data is also a transaction! There is a specific transaction type for each type of action.

We are interested in type 12 — Data Transaction — in the picture above, because our goal is to store data.

Sending certificates to the blockchain

We use Waves Keeper to send the transaction.

Transaction sample in Waves Keeper:

We create a click handler on the ‘Add diploma’ button to store data about the document in the transaction.

sendData function:

Now, when the user clicks the ‘Send!’ button, he adds a certificate to the blockchain using Waves Keeper:

After you enter a password for the extension, you will see information about the transaction and a request to sign it:

What information about the transaction do we see? First of all, the Data Transaction type, meaning that the aim of the transaction is to send data to the blockchain. We see the data itself: under the key ‘1’ the user saves the name of a diploma holder with its number, ‘Sasha Ivanov’. Also, we can see a unique transaction id and the fee for sending such a transaction to the blockchain.

Transaction sent! That means at least three things:

  1. The account balance has decreased, since 0.001 WAVES was spent on the fee.

2. A Data Transaction was added to the transaction list on the Waves Explorer account page

3. The certificate is displayed under the Data tab. The certificate ownership of number 1 by Sasha Ivanov is fixed in the blockchain. No one can hide or change this information.

Verification of certificates’ validity

We’ve created an app that allows an administrator to issue certificates. Waves Explorer displays certificates recorded on the blockchain.

However, it is more convenient to verify the validity of a diploma using a separate form, without the need to use Waves Explorer. Let’s create an additional page for this form!

check.html layout:

The simple layout allows us to create a user-friendly interface, helping anyone to check the certificate’s validity and to verify it definitively with Waves Explorer:

All we have to do is make the ‘check cerificado!’ button work. Let’s add the checkData() handler:

checkData function:

The main point is to send a GET request to the blockchain API:

Requesting this API method enables us to receive a set of data that lies in the account’s state from the Data tab in Waves Explorer. You can see a set of available API methods for the Waves blockchain here. With the available functionality you can, for instance, add transactions, read data and receive token data.

By adding the ability to receive data from the blockchain in our app, we’ve created a form available to any website user. Everyone can check the diploma’s validity for free since there is no fee for reading the data.

Extra task for user experience

Finally, our app has two pages for adding and verifying certificates! The last point to implement is the ability to share the link to check your certificate.

Certificate sharing functionality:

The certificate validation link can be sent so that the verifier does not need to fill out the form. A link like ‘URL/check.html?2 Vladimir Zhuravlev’ is enough for the form to be automatically filled in with the relevant data, 2 Vladimir Zhuravlev.


In fairly brief terms, we’ve implemented Certificado, our full-fledged web app. Blockchain can be a convenient and reliable way to store data, and Waves Keeper and Waves Explorer are great tools for working with it, which should be integrated into your app.

Using a blockchain instead of a regular centralized database, you can add unique functionality to an app and improve its value to your users. There are lots of tools to simplify the development process in the Waves ecosystem. In addition to Waves Keeper and Waves Explorer, we have Waves Signer, client libraries for different programming languages and the Ride programming language for smart contracts.

Develop apps on the Waves blockchain, join our developer community and ask any questions you have in the Telegram chat!

Waves Protocol

Open blockchain protocol and development toolset for Web 3.0 applications and decentralized solution

Waves Protocol

Waves is an open blockchain protocol and development toolset for Web 3.0 applications and decentralized solutions, aiming to raise security, reliability and speed of IT systems. It enables anyone to build their apps, fostering mass adoption of blockchain.

Vladimir Zhuravlev

Written by

Waves Association 🏄 Telegram: @vlzhr

Waves Protocol

Waves is an open blockchain protocol and development toolset for Web 3.0 applications and decentralized solutions, aiming to raise security, reliability and speed of IT systems. It enables anyone to build their apps, fostering mass adoption of blockchain.