Introduction to the NAS Nebula chain from zero development first Dapp

There should be a lot of small partners and I have always wanted to learn the blockchain, but always start, some concepts feel understood, there is no sense of understanding. In fact, this is "no practice" of the pot.

So-called to see 10 times than to think again, think again than to do it again. This is not the latest. The Nebula chain Nebulas has a developer incentive program that can be rewarded for every application submitted, so just take this opportunity to develop the first Dapp and understand what the so-called Dapp really is.

This article is almost DAPP Development 0 Foundation of the pit experience, recorded, barely on the 0 basis of the students can become a tutorial ~

If you have read this tutorial and have developed your own dapp, you can register the NAS by clicking here
Use my promotion link to submit, so that when you submit I will get another part of the reward, as a motivation for my writing ~

Before you start development, a series of preparatory actions are required. including the preparation of wallets, the construction of the environment and so on. Here to all kinds of concepts, I try to be easy to understand the words to describe, because I am also small white, may be described is not accurate enough, so welcome everyone to shoot bricks discussion.

Register Wallet

As a first step in development, you must first apply for a wallet.

Here's the purse you can imagine as you show the world's purse. It holds your oceans. In real life, your wallet in your hands, so others can not take, and then digital life, you need to have a password to unlock your wallet, when your password is lost, it is equal to the loss of your wallet, unable to recover, and caused the loss of property.

First, on GitHub, clone the official web wallet: Https://github.com/nebulasio/web-wallet

Next Open index.html file

So you open the web version of the wallet, enter the password you want (must not forget), click on New Wallet, click to download the password library file, save the Wallet file locally (must not be lost), at this time to generate a file beginning with N1:

The name of this file is your wallet address. Anyone with your wallet address can trade with you, meaning that someone else can transfer money to your wallet.

At this point, click on the Wallet information, upload your wallet and unlock, you can see the current information of your account. The period includes information such as your balance.

At this point you have signed up for one of your wallets and completed the first preparation.

The next step is to prepare the test currency for the test network. In https://testnet.nebulas.io/claim/every day can receive 1NAS of test coins, note that this coin collection is in the test network, and the main network does not have any relationship. The meaning of the main network and the test network can be understood as two different chains, in fact, the blockchain itself is the database, in fact, the main network and test network is two different database data, test network data only used to test does not produce real value.

After the collection, then open the wallet, in the upper right corner of the wallet can switch the main network and test network, then switch to the test network.

Check the wallet balance, found that it has been collected (if not shown successfully, please wait patiently, block confirmation has a delay, meaning to write the data into the blockchain, you need to wait for each chunk to confirm that the data is valid and safe to write data to the blockchain, so there is a delay)

You have successfully picked up your first Nas, and you will then deploy your smart contract with the tested NAS.

Write a deployment Smart contract

Before starting this section, let's explain how to understand the smart contract, or how to understand how a dapp works.

The simple vernacular of a smart contract is a piece of code that is stored on a blockchain and runs in a blockchain code execution engine. This part of the code, provided to the Dapp front-end some necessary interfaces, used to store or query data. You can understand that the smart contract is the backend, which provides the interface. The database he uses is the blockchain itself.

The smart contract seems to understand, then the blockchain itself is the database how to understand it?

Blockchain (Block-chain), as the name implies, is a block form of the linked list, all the data stored in the "chunks" of things, each chunk size is limited, all linked together with the list,

This should be very well understood, then the end and the database, is not the end of the gap?

A dapp front end, can be any form, such as the web version, such as the Android version, such as the iOS version, but because most of the blockchain development in the market is pre-existing, the official only provides a web version of the SDK to access the blockchain, so the general Dapp is mainly web version, After all, cross-platform.

So then, let's start editing our smart contract, the so-called backstage. This section refers to the official dictionary demo for revision.

This assumes that we want to make a "small open letter" Dapp, the main function is that any blockchain users can publish a title does not repeat the open letter, if the title is occupied, you can only view this open letter.

First create a new JS file, write the entity we need, such as an open letter, he should have the title, content, and author.

Second, we should have access to the storage space of our own smart contracts, so we create the storage space according to the official API:

The data here is stored in the form of Kep-value. I believe it is easy for everyone to understand.

Next, you only need to write two more functions, one is to store open letters, one is to query open letter, logic is relatively simple, directly paste code:

In this way, we have completed a simple smart contract.

Deploy smart Contracts

Remember the 1 NAS of the test network you just picked up, and he started to come in handy. You know, the deployment of our code to the chain is not free, otherwise wasted resources are not willing to do, so we need to pay a certain amount of gas, as long as the transaction, or understand that the blockchain to the database to write data, you need to pay gas, Gas is a unit of measurement for NAS (of course pioneered in ETH). Why gas is needed, in addition to ensuring that the code running is not worthless, there is another reason to prevent someone from maliciously publishing code, such as writing a dead loop.

Now, open your wallet, click on the contract, then click Deploy, copy your smart contract code into the contract code, then unlock the wallet, click Test, find that no error is returned, you can click Submit deployment:

After successful deployment, will tell you the hash of the transaction and the contract address, must be well preserved, otherwise it will be lost (as if the official wallet has not provided the function of querying the historical transaction)

Here the contract address is the address of the code you have just deployed, each smart contract has a contract address, the contract address and the payment of some gas, you can call the contract code.

Test a smart contract

Click on the wallet execution, at this time we test write an open letter, here function write contract definition

Save ()
Parameters passed in:
["An open letter to beginners", "we will continue to work hard, eventually success"]
Destination address, write the contract address.

Click Test to find no errors, then submit.
After waiting for the block confirmation, we will check again, just the data has not been submitted successfully:

Click Test to see the results:

The successful return of our open letter. The contract has been deployed.

Developing front-end pages

Now that our smart contracts are deployed, we have a backend server with a database as a blockchain. Now you just need to write a front end and show it to the user.

The official JS version of the API, allowing the browser to access the blockchain data, the SDK address is as follows:
Https://github.com/nebulasio/neb.js

First, clone the project down:

git clone https://github.com/nebulasio/neb.js.git

• 1
• 2

Then, you need to use a packaging tool called Gulp

So use NPM to install:

install -g gulp

• 1

When the installation is complete, run Glup package

After packing, a/dist folder is generated under the project folder, which is copied to our working directory and used as a file dependency.

Because the author has not contacted the front-end development, so here front-End Select Bootstrap+jquery, because they are very friendly to the novice, 0 Foundation can quickly get started.

First, in the HTML file, introduce the required dependent files:

    <Scripttype= "Text/javascript" src=< Span class= "Hljs-value" "./dist/nebulas.js" ></script> <script  Type= "Text/javascript" src= ". Jquery-3.3.1.min.js "></script > <script src=" http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js "></SCRIPT>        

• 1
• 2
• 3
• 4
• 5

Then write the front-end style, where the front end is relatively simple, provide a search box, a display box, a entry box:

When the user enters the letter name, invokes the NEB interface to fetch the data and display the data according to the callback:

For example, at this point I search for an article, called "An open letter to beginners," the feedback is as follows:

This means that the content has been queried. The next step is to complete the submission section.

At this point, depending on the API of Nebpay, you can call the Chrome wallet plugin to pay:

Where Nebpay is a copy of the document according to the official example.

    <script type="text/javascript" src="./dist/nebPay.js"></script>

• 1
• 2

This time, edit an open letter, click Submit, you can pop up the wallet page for gas payment:

After submission, you can find the content of the open letter you wrote.

If you click No response, then you do not have to install the Chrome plugin wallet, click here to install Https://github.com/ChengOrangeJu/WebExtensionWallet

So it's done!

Because it is a static web page, it is deployed directly to your server so that other users can access it.

When your deployment is complete, you can go to the official website to submit Dapp to get incentive awards ~ ~

If this article is helpful to you, please click like and spread ~ ~

In this article, Dapp has been submitted and deployed as well as open source

Application address is: http://androidwing.net/nas-dapps/theletter/

Project address is: Https://github.com/githubwing/TheLetter

Welcome to star, if you want to exchange blockchain technology, you can add QQ Group: 615075629

Reference article:
51 Package: Teach you an hour to develop DAPP, tens of thousands of bonuses, etc you take

Https://github.com/nebulasio/wiki

Introduction to the NAS Nebula chain from zero development first Dapp