How to build an end-to-end DApp on Ultrain - 2
R

Step2:Write DApp

There are two Dapps to be written, one is MiningDapp, the other is UDapp. We use the Javascript SDK U3.js to write the DApps. To be simple, we create the two DApps in one project.

Written by DApp

In WebStorm, create a new project -> Node.js Express App-> Template select Pug (Jade); modify the project name to CarbonDApp;

Click ‘Create’ to create a project

Import project dependent class library

Copy all the directories in node_modules in CarbonProject to the node_modules directory of CarbonDApp, and repeat the directory skipping without copying;
Copy the CarbonDApp/node_modules/u3.js/dist/u3.js file to the CarbonDApp/public/javascripts directory.

Modify the DApp server port

Since the default 3000 port is already occupied, you need to modify the server port of the DApp.

Open the bin/www file and find var port = normalizePort(process.env.PORT || '3000'); change 3000 to 3001

Create an account information browsing page

Create an index.html page in the public directory and add the following code to the page:

<html> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="/stylesheets/style.css"> <script src="./javascripts/u3.js"></script> <script> let u3 = U3.createU3({ httpEndpoint: 'http://127.0.0.1:8888', httpEndpoint_history: 'http://127.0.0.1:3000', broadcast: true, debug: false, sign: true, logger: { log: console.log, error: console.error, debug: console.log }, chainId:'2616bfbc21e11d60d10cb798f00893c2befba10e2338b7277bb3865d2e658f58', symbol: 'UGAS' }); async function getBalanceInfo() { let SYMBOL = 'CARB'; let account = 'ben'; const ben_balance = await u3.getCurrencyBalance({ code:'ben', symbol: SYMBOL, account: account }); document.getElementById("carbon_balance").innerHTML = '账户余额:'+ben_balance; const bob_balance = await u3.getCurrencyBalance({ code:'ben', symbol: SYMBOL, account: 'bob' }); document.getElementById("bob_balance").innerHTML = '账户余额:'+ bob_balance; const tom_balance = await u3.getCurrencyBalance({ code:'ben', symbol: SYMBOL, account: 'tom' }); document.getElementById("tom_balance").innerHTML = '账户余额:'+tom_balance; const tony_balance = await u3.getCurrencyBalance({ code:'ben', symbol: SYMBOL, account: 'tony' }); document.getElementById("tony_balance").innerHTML = '账户余额:'+tom_balance; const jerry_balance = await u3.getCurrencyBalance({ code:'ben', symbol: SYMBOL, account: 'jerry' }); document.getElementById("jerry_balance").innerHTML = '账户余额:'+tom_balance; const jack_balance = await u3.getCurrencyBalance({ code:'ben', symbol: SYMBOL, account: 'jack' }); document.getElementById("jack_balance").innerHTML = '账户余额:'+tom_balance; } getBalanceInfo(); //transfer(); </script> </head> <body> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>CarbonCoin发行方</h1> <p>账户:ben</p> <p>描述:进行CarbonCoin发行的发行方,持有所有未分配的CarbonCoin</p> <p id="carbon_balance"></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>节能设备1</h1> <p>账户:bob</p> <p>描述:通过节能产生CarbonCoin的节能设备1</p> <p id="bob_balance"></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>节能设备2</h1> <p>账户:tom</p> <p>描述:通过节能产生CarbonCoin的节能设备2</p> <p id="tom_balance"></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>航空公司C</h1> <p>账户:tony</p> <p>描述:大型航空公司,化石能源使用大户</p> <p id="tony_balance"></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>汽车制造商D</h1> <p>账户:jerry</p> <p>描述:大型汽车制造商,化石能源使用大户</p> <p id="jerry_balance"></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>CarbonCoin销毁账户</h1> <p>账户:jack</p> <p>描述:用于CarbonCoin销毁的账户,持有所有销毁的CarbonCoin</p> <p id="jack_balance"></p> </div> </body> </html> Start the DApp service, test the page
In the npm interface, double click the start button

After the server is successfully started, visit http://127.0.0.1:3001/index.html and the following page appears:

It can be seen that the issuer ben account holds 10 million of all CARB Tokens issued; other accounts have not yet held CARB Token;

Create a mining.html page

Mining.html page, energy-saving device 1 and energy-saving device 2 send the calorie value generated in the first 30 seconds to the energy smart contract every 30 seconds, and redeem CarbonCoin;

Create a mining.html page in the public directory, enter the following code:

<html> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="/stylesheets/style.css"> <script src="./javascripts/u3.js"></script> <script> let u3_bob = U3.createU3({ httpEndpoint: 'http://127.0.0.1:8888', httpEndpoint_history: 'http://127.0.0.1:3000', broadcast: true, debug: false, sign: true, logger: { log: console.log, error: console.error, debug: console.log }, chainId:'2616bfbc21e11d60d10cb798f00893c2befba10e2338b7277bb3865d2e658f58', keyProvider: '5JoQtsKQuH8hC9MyvfJAqo6qmKLm8ePYNucs7tPu2YxG12trzBt',//bob's private_key symbol: 'CARB' }); let u3_tom = U3.createU3({ httpEndpoint: 'http://127.0.0.1:8888', httpEndpoint_history: 'http://127.0.0.1:3000', broadcast: true, debug: false, sign: true, logger: { log: console.log, error: console.error, debug: console.log }, chainId:'2616bfbc21e11d60d10cb798f00893c2befba10e2338b7277bb3865d2e658f58', keyProvider: '5KXYYEWSFRWfNVrMPaVcxiRTjD9PzHjBSzxhA9MeQKHPMxWP8kU',//tom's private_key symbol: 'CARB' }); function wait(ms = 0) { return new Promise(res => setTimeout(res, ms)); } function randomFrom(lowerValue,upperValue) { return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue); } async function mining() { let owner_account = 'ben'; const tr_bob = await u3_bob.contract(owner_account); const tr_tom = await u3_tom.contract(owner_account); // let amount = U3.format.UDecimalPad(2000,4); let heat_bob = randomFrom(15000,20000); let heat_tom = randomFrom(15000,20000); await tr_bob.recordHeat(heat_bob,{ authorization: [`[email protected]`] }); await tr_tom.recordHeat(heat_tom,{ authorization: [`[email protected]`] }); var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("bob_log").innerHTML = 'time :'+t+', heat value :'+ heat_bob; document.getElementById("tom_log").innerHTML = 'time :'+t+', heat value :'+ heat_tom; } mining(); var int=self.setInterval("mining()",30*1000); </script> </head> <body> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>节能设备1</h1> <p>账户:bob</p> <p>描述:通过节能产生CarbonCoin的节能设备1</p> <p id="bob_log"></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>节能设备2</h1> <p>账户:tom</p> <p>描述:通过节能产生CarbonCoin的节能设备2</p> <p id="tom_log"></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <button onclick="int=window.clearInterval(int)">stop</button> </div> </body> </html>

Go to http://127.0.0.1:3001/mining.html and the following page appears:

There are two things to note here.

When sending data to the energy smart contract, you need to hold the private key of the account before you can sign and send it. In order to simplify the programming, the private key is directly written to the webpage. In the actual program, the private key needs to be protected and hidden.

To simplify the writing, the Bob and tom DApp programs are written directly to a page. Actually, they should be two DApp program instances, which are running on two devices respectively.

Now our energy-saving equipment can already send data to the smart contract, and after the energy smart contract receives the data, it will pass the data to the operator server, and the operator server will call the energy smart contract again to exchange carboncoin. So we need to establish EnergyServer;

Step3: EnergyServer

Establish event monitor and handle events

In this section, we will deal with the above calorific value data upload event.

1.1 Establish listener event server code

In the bin directory of the CarbonDApp project, create a new file msgBroker.js and enter the following code.

const { createU3 , format} = require('u3.js/src'); const http = require('http'); const port = 3002; let u3 = createU3({ httpEndpoint: 'http://127.0.0.1:8888', httpEndpoint_history: 'http://127.0.0.1:3000', broadcast: true, debug: false, sign: true, logger: { log: console.log, error: console.error, debug: console.log }, chainId:'2616bfbc21e11d60d10cb798f00893c2befba10e2338b7277bb3865d2e658f58', keyProvider:'5JbedY3jGfNK7HcLXcqGqSYrmX2n8wQWqZAuq6K7Gcf4Dj62UfL',//ben's private key symbol: 'UGAS' }); let server = http.createServer((request, response) => { const { headers, method, url } = request; console.log(method); console.log(url); let body = []; request.on('error', (err) => { console.error(err); }).on('data', (chunk) => { body.push(chunk); }).on('end', () => { body = Buffer.concat(body).toString(); console.log("received msg:", body); if (body != null && body.trim()!="") { var obj = JSON.parse(body); let heatValue = JSON.parse(obj[1]).heat.split(",")[0]; let account = JSON.parse(obj[1]).heat.split(",")[1]; exchangeCarbonCoin(account,heatValue); } response.on('error', (err) => { console.error(err); }); response.statusCode = 200; response.setHeader('Content-Type', 'application/json'); response.write("ok"); response.end(); }); }); server.keepAliveTimeout = 0; server.timeout = 0; server.listen(port, function () { console.log((new Date()) + " Server is listening on port " + port); }); function wait(ms = 0) { return new Promise(res => setTimeout(res, ms)); } async function exchangeCarbonCoin(account,heat) { let SYMBOL = 'CARB'; let code = 'ben'; const tr = await u3.contract(code); let heatValue = format.DecimalPad(heat,4); const result = await tr.exchangeCarbonCoin('ben', account, heatValue+' ' + SYMBOL, 'test', { authorization: [`[email protected]`] }); let tx = await u3.getTxByTxId(result.transaction_id); while (!tx.irreversible) { await wait(1000); tx = await u3.getTxByTxId(result.transaction_id); if (tx.irreversible) { console.log(tx); break; } } }

The code establishes a service on port 3002. After the energy-saving device uploads its calorific value, the smart contract will send the energy-saving device to the service to upload the calorific value data. The service calls the exchangeCarbonCoin method of the energy smart contract to exchange the CarbonCoin.

1.2 Establish a listener event server startup script

Open the CarbonDApp/package.json file and add the following code to the scripts property: "event": "node ./bin/msgBroker"

1.3 Start the listening server

Refresh the npm window with the ‘event’ option

Double-click event to complete server startup

1.4 Register event monitoring mechanism on the chain

Query the internal network address of the machine through the ifconfig command, for example: 10.20.8.32

In the CarbonProject/test directory, create the registerEvent.js file; enter the following code in the file

const U3Utils = require('u3-utils/dist/es5'); const { createU3, format, listener } = require('u3.js/src'); const config = require('../config'); const chai = require('chai'); require('chai') .use(require('chai-as-promised')) .should(); const should = chai.should(); const expect = chai.expect; const assert = chai.assert; describe('Test cases', function() { it('event register', async () => { let account = 'ben'; const u3 = createU3(config); await u3.registerEvent(account, 'http:// 10.20.8.32:3002'); U3Utils.wait(1000); }); it('event unregister', async () => { let account = 'ben'; const u3 = createU3(config); await u3.unregisterEvent(account, ' http:// 10.20.8.32:3002'); U3Utils.wait(1000); }); });

Note that the registered address is modified to be the internal network address of the machine, and 127.0.0.1 cannot be used.
Run the event register test case to complete the event registration;

1.5 Test calorie value for CarbonCoin function

Visit http://127.0.0.1:3001/mining.html page, every 30 seconds, both bob and tom will randomly send a random value between 15000 and 20000 as the calorific value to convert the smart contract to CarbonCoin;
Visit and refresh the http://127.0.0.1:3001/index.html page, you can find that the CarbonCoin account of bob and tom is increasing every 30 seconds;

Step4:Improve DApp functionality

Add transfer function

After the energy-saving equipment acquires CarbonCoin, it can sell CarbonCoin to the enterprise, such as airlines, etc. The simple embodiment is that the equipment account can be transferred to the corporate company account;

Open the /CarbonDApp/index.html page and add the code

1.1 U3 object used when establishing the transfer

let u3_bob = U3.createU3({ keyProvider:'5JoQtsKQuH8hC9MyvfJAqo6qmKLm8ePYNucs7tPu2YxG12trzBt',//bob's private key }) let u3_tom = U3.createU3({ keyProvider:'5KXYYEWSFRWfNVrMPaVcxiRTjD9PzHjBSzxhA9MeQKHPMxWP8kU',//tom's private key })

1.2 Add the js code of the transfer to call the corresponding smart contract method

async function sendCoin(from,to){ let SYMBOL = 'CARB'; let code = 'ben'; let coins = U3.format.DecimalPad(this.randomFrom(100,500),4); if (from == 'bob'){ const tr = await u3_bob.contract(code); const result = await tr.transfer(from, to, coins + ' ' + SYMBOL, 'sendCoin', { authorization: [`[email protected]`] }); let tx = await u3_bob.getTxByTxId(result.transaction_id); while (!tx.irreversible) { await wait(1000); tx = await u3_bob.getTxByTxId(result.transaction_id); if (tx.irreversible) { alert("bob send coin success:"+ coins); break; } } } else if (from == 'tom'){ const tr = await u3_tom.contract(code); const result = await tr.transfer(from, to, coins + ' ' + SYMBOL, 'sendCoin', { authorization: [`[email protected]`] }); let tx = await u3_tom.getTxByTxId(result.transaction_id); while (!tx.irreversible) { await wait(1000); tx = await u3_tom.getTxByTxId(result.transaction_id); if (tx.irreversible) { alert("tom send coin success:"+ coins); break; } } } }

1.3 Add a call to the sendcoin() method on the page, update the following code

<div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>节能设备1</h1> <p>账户:bob</p> <p>描述:通过节能产生CarbonCoin的节能设备1</p> <p id="bob_balance"></p> <p><a href="#" OnClick="sendCoin('bob','tony')">给航空公司C转账</a></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>节能设备2</h1> <p>账户:tom</p> <p>描述:通过节能产生CarbonCoin的节能设备2</p> <p id="tom_balance"></p> <p><a href="#" OnClick="sendCoin('tom','jerry')">给汽车制造商D转账</a></p> </div>

1.4 Access the page and test the function

Visit: http://127.0.0.1:3001/index.html, click the "Transfer to the airline C" button, wait for a period of time (up to about 10 seconds, confirm the time for the Ultrain transaction), the following prompt appears, indicating the transfer success.

Add a company to convert CarbonCoin to a charity point function

By converting CarbonCoin into charitable points, the company makes its own contribution to reducing carbon emissions and enhances its reputation:

Open the /CarbonDApp/index.html page and add the code

2.1 U3 object used when establishing point redemption

let u3_tony = U3.createU3({ keyProvider:'5KbHvFfDXovPvo2ACNd23yAE9kJF7Mxaws7srp6VapjMr7TrHZB',//tony's private key }) let u3_jerry = U3.createU3({ keyProvider:'5JFz7EbcsCNHrDLuf9VpHtnLdepL4CcAEXu7AtSUYfcoiszursr',//jerry's private key })

2.2 Add the redeemed js code to call the corresponding smart contract method

async function exchangeScore(account){ let SYMBOL = 'CARB'; let code = 'ben'; let to = 'jack'; let coins = U3.format.DecimalPad(this.randomFrom(10,50),4); if (account == 'tony'){ const tr = await u3_tony.contract(code); const result = await tr.exchangeScore(account, to, coins + ' ' + SYMBOL, 'sendCoin', { authorization: [`[email protected]`] }); let tx = await u3_tony.getTxByTxId(result.transaction_id); while (!tx.irreversible) { await wait(1000); tx = await u3_tony.getTxByTxId(result.transaction_id); if (tx.irreversible) { alert("tony buy score success:"+ coins); break; } } } else if (account == 'jerry'){ const tr = await u3_jerry.contract(code); const result = await tr.exchangeScore(account, to, coins + ' ' + SYMBOL, 'sendCoin', { authorization: [`[email protected]`] }); let tx = await u3_jerry.getTxByTxId(result.transaction_id); while (!tx.irreversible) { await wait(1000); tx = await u3_jerry.getTxByTxId(result.transaction_id); if (tx.irreversible) { alert("jerry buy score success:"+ coins); break; } } } }

2.3 Add a call to the exchangeScore() method on the page, update the following code

<div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>航空公司C</h1> <p>账户:tony</p> <p>描述:大型航空公司,化石能源使用大户</p> <p id="tony_balance"></p> <p><a href="#" OnClick="exchangeScore('tony');return false;">购买公益积分</a></p> </div> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>汽车制造商D</h1> <p>账户:jerry</p> <p>描述:大型汽车制造商,化石能源使用大户</p> <p id="jerry_balance"></p> <p><a href="#" OnClick="exchangeScore('jerry');return false;">购买公益积分</a></p> </div>

2.4 Access the page and test the function

Visit: http://127.0.0.1:3001/index.html, click the "Buy Charity Points" button, wait for a period of time (up to about 10 seconds, confirm the time for the Ultrain transaction), the following prompt appears, indicating that the points are successfully redeemed. At the same time, you can see the number of CarbonCoins destroyed in the CarbonCoin destruction account at the bottom of the page.

Query the public welfare points exchange history

By enquiring the redemption history of charity points, we can establish a ranking of corporate charity points.

3.1 Creating a page

In the CarbonDApp/public/ directory, create a new leaderboard.html and enter the following code:

<html> <head> <meta charset="UTF-8"> <title>leaderboard</title> <link rel="stylesheet" href="/stylesheets/style.css"> <script src="./javascripts/u3.js"></script> <script> let u3 = U3.createU3({ httpEndpoint: 'http://127.0.0.1:8888', httpEndpoint_history: 'http://127.0.0.1:3000', broadcast: true, debug: false, sign: true, logger: { log: console.log, error: console.error, debug: console.log }, chainId:'2616bfbc21e11d60d10cb798f00893c2befba10e2338b7277bb3865d2e658f58', symbol: 'UGAS' }); function wait(ms = 0) { return new Promise(res => setTimeout(res, ms)); } async function getLeaderboard() { let owner_account = 'ben'; const tr = await u3.contract(owner_account); const result = await u3.getAllTxs(1,10000000,{"actions.name":"exchangeScore"},{_id:-1}); //console.log(result); let content = ''; for ( let i = 0 ;i< result.results.length;i++){ content = content + '<tr><td>'+ result.results[i].actions[0].data.from+":"+result.results[i].actions[0].data.quantity +'</td></tr>'; } document.getElementById("leaderboard").innerHTML = content; } getLeaderboard(); </script> </head> <body> <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> <h1>leaderboard</h1> <table id="leaderboard"> </table> </div> </body> </html>

We use the u3.getAllTxs(1,10000000,{"actions.name":"exchangeScore"},{_id:-1}); method to query all redemption transactions and print their specific data to the page.

3.2 Run page

Visit http://127.0.0.1:3001/leaderboard.html and you can see the following page:

Here is a history of all points redemption.

Summary

This tutorial system describes how to write an end-to-end web version of the DApp application. Although it has been simplified in the process of writing, it generally describes the overall picture of DApp application development, developers can do the basis of this framework. Enrich and improve your DApp application.

About developing DApp on iOS and Android, you can integrate u3.js into the corresponding hybrid Native development framework, and the principle is the same as the web version DApp.

read more
Ultrain Launched Its Latest Explorer;You May Now Look Up Token Online!
I

As the testnet of Ultrain is now online, many developers tried to draft smart contract and used Ultrain’s explorer for contract deployment.One of the most popular contract is the ones that send out token, as we imagine people enjoy that small dosage of endorphin as they experience the action of sending out Token.Even the tech team of Ultrain all eager to test out the process of creating new account, applying for resources, as well as drafting, deploying and executing contracts to execute the final act of sending out Token.

After the full procedure, however, product manager often compliant the fact that Ultrain’s explorer only allows Token contract deployment and utilization, and user can not view the Token information through the existing version of the explorer. Thus, a series of updates and engineering optimization were made to the latest version of the explorer. Want more juicy details? KEEP READING!

1 Home Page: New Data Info
Open the latest version Ultrain explorer, besides the complemented renovated visual back ground,you will soon see some of the key statistics of the chain such as trading volume, account number, number of contracts and Token number. Which significantly improved user experiences by letting them get to the information they need in a glance.

2 Token Look up
After deploying the Token contract, you may now find all your essential token information through the Ultrain explorer. Making your life easier!


3 Look Up Token Infor within an account
Beside a list of token, users can now see detailed token information within their individual account. Instead of manually searching for the token information you want, explorer will automatically update the Token infor. Detail matters!

4 Compatible with Wireless Access
Other than the visual update, and optimization on account registration, contract deployment and contract usage. You may now access the explorer on your wireless device, it is convenient for user to access explorer with their cellphone.


5 Others
Ultrain’s internal development team also improved upon the performance, data storage, as well as the page upload speed.

Link to Ultrain’s explorer, https://explorer.ultrain.io/ , try it out for yourself. Please feel free to contact us at Developers’Potal-forum https://bbs.ultrain.io/ if you have any question.

read more
There are no topics in this category.
Why don't you try posting one?