How to Build a DApp for the Nebulas Incentive Program (Demo)

Nebulas
Nebulasio
Published in
5 min readApr 29, 2018

Want to know how to develop a DApp worthy of tens of thousands RMB in only one hour? Look here!

The Nebulas Incentive Program was announced yesterday. With this program, we promise to reward developers and promoters with more than $3 million USD (this estimated is based on April 28 prices).

Participating in this incentive program is relatively easy. As long as you know JavaScript and have the time to learn how to develop a DApp development, you’ll very likely to win a reward. There’s over $150,000 USD in the monthly reward’s total prize pool, and a single developer could in theory win all of it. The more DApps you develop, the more rewards you can get!

Click here for more details on the Nebulas Incentive Program.

After releasing the incentive program, a lot of developers expressed their interest to learn about DApp development, including developers who know relatively little about DApps and are unsure how to get started developing one.

To help JavaScript developers learn more about DApps, the Nebulas community is offering this tutorial, which is a quick start guide to help Javascript developers learn how to develop a DApp on the Nebulas mainnet in no time.

Developer Rewards in the Nebulas Incentive Program are very high and also relatively easy to win. However, not all applications submitted will qualify for rewards. For example, a simple “Hello world” will not qualify. Only DApps that can run, have interfaces, and have real world use cases can win.

Developing a DApp that is eligible for the Nebulas Incentive Program

This DApp selects a simple use case: to build a user’s own dictionary, named ‘Super Dictionary’. Anyone can use it to search for the definitions of a word on the blockchain and also contribute new words.

Three steps are required to make this simple DApp:

First, create a web page with text boxes and buttons.
Then, create a simple smart contract that only needs dozens lines of code written in JavaScript.
Finally, complete the interaction between the web page and the smart contract.

Code repository address is here.

We will introduce all the three steps in detail in the rest of this article.

1. Create a Webpage

As for our Super-Dictionary, the webpage will interact in the following way:

(1) The user imports a word in the input box, waiting for a detailed explanation.
(2) If the word has been assigned an explanation before, then the detailed content will be returned (Figure 1).
(3) If the word hasn’t been assigned an explanation before, then the user is allowed to add their explanation for the word (Figure 2).

Figure 1
Figure 2

2. Writing the Smart Contract

The operating logic of Super Dictionary is not complicated, especially when the development language is JavaScript. It can be completed with just tens of lines of code, simple and quick!

There are three main components of our smart contract demo:

  1. The data structure of an dictionary item
  2. The function for querying an item
  3. The function for adding a new item to the dictionary

Adding a Data Structure for a Dictionary Entry

In this project’s smart contract, we define a data structure for a dictionary item: including the author, the name (key), and the explanation (value), as shown in the following figure:

Completing the Function for Adding & Searching Entries

The LocalContractStorage module provides a state trie-based storage capability. It only accepts strings as a key-value pair. All data are stored to a private state trie associated with current contract address, and only the contract can access them. Thus, the query function can be simplified into a similar ‘get’ operation for the key value of a map. Adding new entries will become a ‘put’ operations onto a map.

After finishing the smart contract, we need to deploy the contract on Nebulas. There are many ways to deploy, and the recommended way is to use the contract deployment function of the Nebulas official WebWallet. With its Contract/Deploy function, you can easily deploy your contract on Nebulas, and in the upper right corner, you can choose to deploy your contract on the testnet or the mainnet, as shown below:

3. Interaction between the Webpage and the Smart Contract

After the webpage is created and the smart contract is deployed, we want to make it easy for the webpage to call the functions in the smart contract.

To solve this problem, Nebulas has provided a JavaScript SDK for users to call contract functions.

Additionally, a chrome-extension wallet is provided to community members to facilitate interactions between the web page and the smart contract.

The project’s repository address is: https://github.com/ChengOrangeJu/WebExtensionWallet.

You can just simply post a message on the chrome-extension to evoke the plug-in’s built-in functionality, which will call the function already deployed on the smart contract. A sample is shown below:

The following is a screenshot of the three steps: (1) send transaction, (2) waiting for the transaction result, (3) complete the transaction

send transaction
waiting for the transaction result

Voila, you’ve finished developing your first DApp in Nebulas!

It’s so simple, isn’t it? So what are you waiting for, come on and join the development!

Supplementary materials:

How to build a DApp on Nebulas

About Nebulas:

Nebulas is a next generation public blockchain, aiming for a continuously improving ecosystem. Based on its blockchain valuation mechanism, Nebulas proposes future-oriented incentive and consensus systems, and the ability to self-evolve without forking. Committed to technological innovation, Nebulas seeks to expand the boundaries of blockchain technology and ecosystems.

Official development document: Click here

--

--

Nebulas
Nebulasio

nebulas.io / Nebulas is a next generation public blockchain, aiming for a continuously improving ecosystem.