Step by step to teach you to develop and deploy your first de-centralized application (Dapp)-Pet Shop

"Hui Xin Yun" for everyone regularly updated articles, "Hui new cloud" It hardware and software projects business platform

Today we are going to write a complete de-centric (blockchain) application (Dapps), this article can be combined with the writing of smart contracts to see. write in front

Before reading this article, you should know something about Ethereum and smart contracts, and if you don't know it, it's recommended that you look at Ethereum first.

Besides, you'd better get some knowledge of HTML and JavaScript.

This article through the example teaches everybody to develop the central application, the application effect is as follows:

From this article, you can learn to:

Building an intelligent contract development environment

Create a truffle project

Write a smart contract

Compiling and deploying smart contracts to blockchain

How to interact with WEB3 and smart contracts

Use of Metamask

Small column users can download the full Dapp code at the end of the tutorial. Project Background

Pete has a pet shop with 16 pets, and he wants to develop a hub-and-go app that lets people adopt pets.

In truffle box, the code for the Pet-shop site section has been provided, and we only need to write the contract and the interactive part. Environment Construction

Install node

Installing TRUFFLE:NPM install-g Truffle

Installing ganache

The ganache (or ganache CLI) has replaced the TESTRPC. Create a project

Set up the project directory and enter

Create a project using truffle unbox

This step will take a while

You can also use truffle init to create a completely new project. Project directory Structure

contracts/Smart Contracts folder, all the smart contract files are placed here, which contains an important contract Migrations.sol (later on)

Migrations/is used to handle deployment (migration) of smart contracts, and migration is an additional special contract to save changes to the contract.

test/Smart Contract Test Case folder

truffle.js/configuration file

Other code can write smart contracts for the time being without a tube

Smart contracts assume the background logic and storage of distributed applications. Smart contracts are written using solidity and can read solidity series articles

Under the Contracts directory, add the contract file Adoption.sol

compiling and deploying smart contracts

The truffle integrates a developer console that can be used to generate a development chain for testing and deploying smart contracts. compiling

Solidity is a compiled language and requires that the readable solidity code be compiled into an EVM bytecode to run.

Dapp the root directory pet-shop-tutorial,

Output

Deployment

Once compiled, it can be deployed to the blockchain.

There is already a 1_initial_migration.js deployment script under the Migrations folder to deploy the Migrations.sol contract.

Migrations.sol is used to ensure that the same contract is not deployed.

Now let's create a deployment script of our own 2_deploy_contracts.js

Before you perform the deployment, you need to ensure that a blockchain is running and you can use

Ganache to open a private chain for development testing, the default is to run a development chain on port 7545.

This is the case when ganache is started:

Next, execute the deployment command:

After execution, there is a similar output,

In the open ganache you can see changes in the blockchain state, which now produces 4 blocks.

This means that the smart contract has been deployed. Test

Now let's test the smart contract, the test case can be written in JavaScript or solidity, where solidity is used.

Create a new Testadoption.sol in the test directory and write a testing contract

Assert.sol and Deployedaddresses.sol are provided by the truffle framework and do not provide a truffle directory under the test directory.

Add adopt test Cases to testadoption contract run test Cases

In the terminal, perform the

If the test passes, the terminal outputs:

create user interface and smart contract interactions

We have written and deployed and tested our contracts, and then we write the UI for the contract so that the contracts can actually be used.

In truffle box pet-shop, the front-end code for the app is included, and the code is in the src/folder.

Open the Src/js/app.js in the editor

You can see the app object used to manage the entire app, and the init function loads the pet information and initializes the WEB3.

WEB3 is a library that implements communication with the Ethereum node, and we use WEB3 to interact with the contract. Initialize WEB3

Next, let's edit app.js to modify the INITWEB3 ():

Delete the comment and modify it to:

The code takes precedence over the WEB3 instance provided by mist or metamask, and if not, creates one from the local environment. Instantiate a contract

Using Truffle-contract will help us save the contract deployment information, we do not need to manually modify the contract address, modify the Initcontract () code as follows:

Handling Adoptions

Modify the markadopted () code:

Modify the Handleadopt () code:

running in the browser Installing Metamask

Metamask is a plug-in form of the Ethereum light client, the development process using Metamask and our Dapp to interact is a good choice, through this link installation, after installation, the browser toolbar will display a small Fox icon. Configure Wallets

After accepting the privacy statement, the following page appears:

Here we create a good wallet for us by restoring a ganache as our development test wallet. Click Import Existing DEN in the page to enter the mnemonic words ganache display.

Then you want the password, click OK.

Figure: connecting the development Zone block chain Network

The default connection is the Ethereum main network (upper left corner display), select Custom RPC, add a network: http://127.0.0.1:7545, after the point is returned, the following is displayed:

This is shown in the upper left corner as private Network, the account is the default first account in ganache.

As of this metamask installation, the configuration is complete. Installing and configuring Lite-server

Next requires a local Web server to provide access to the service, truffle box Pet-shop provides a lite-server that can be used directly, and we'll see how it works.

Bs-config.json indicates the working directory of the Lite-server.

./SRC is the Web site file directory

./build/contracts is the contract output directory

At the same time, the dev command is added to the scripts of the Package.json file:

When running NPM run Dev, the Lite-server startup service is started <