1
2
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.
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.
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:
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.
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:
https://gist.github.com/vlzhr/37e8b19d69acdf30078421e97f23b9d0
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.
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:
https://docs.waves.exchange/en/waves-keeper/waves-keeper-api
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.
We use Waves Keeper to send the transaction.
Transaction sample in Waves Keeper:
https://gist.github.com/vlzhr/4c2015f1c614b656826a3622d786c084
We create a click handler on the âAdd diplomaâ button to store data about the document in the transaction.
sendData function:
https://gist.github.com/vlzhr/448a0a26072960a80ef60ce4d4151ac6
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:
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.
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:
https://gist.github.com/vlzhr/e7e7c849980f19e49fae84a20b1ddb0c
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:
https://gist.github.com/vlzhr/b2b455a4de8e19d44ccff03b90478dfe
The main point is to send a GET request to the blockchain API:
https://testnodes.wavesnodes.com/addresses/data/3N6EmqqQ1pZderX8sNMrfVuEo85ocPoqs2M.
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.
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:
https://gist.github.com/vlzhr/8fc5394215b14e5b599c65edf1bf4dfc
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!
Read Waves News channel
Follow Waves Twitter
Watch Waves YouTube
Subscribe to Waves Subreddit
How to build your first blockchain-based app in 15 minutes was originally published in Waves Platform on Medium, where people are continuing the conversation by highlighting and responding to this story.
1
2
Manage all your crypto, NFT and DeFi from one placeSecurely connect the portfolio youâre using to start.