安裝neb.js
neb.js提供javascript開發的API接口
- 創建一個neb文件夾，在終端命令行中進入該文件夾，克隆neb.js
git clone https://github.com/nebulasio/neb.js.git - 會新建一個neb.js文件夾，進入該文件夾，安裝所有依賴
npm install - 安裝gulp
npm install gulp - 打包生成neb.js等文件
gulp - 執行成功會生成/dist文件夾，文件夾中會生成我們要使用js文件。
- neb.js:Used in browser side. Including outside dependency.
- neb-light.js:Used in Repl console. Not including outside dependency.
- nebulas.js: Fully functional in the browser. Users can create an address, sign a transaction, and deploy/call a smart contract.
安裝nebPay
NebPay SDK 爲不同平臺的交易提供了統一的支付接口，開發者在Dapp頁面中使用NebPay API可以通過瀏覽器插件錢包、手機app錢包等實現交易支付和合約調用。
github地址：https://github.com/nebulasio/nebPay
安裝方法同上。會生成nebPay.js文件
開發Dapp
要實現的功能非常簡單：
- 調用合約中的save方法發佈信息
- 調用合約中的read方法讀取信息
建立項目
將前面生成的nebulas.js和nebPay.js放在libs文件夾下，我的目錄結構如下：
index.html源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星雲鏈Dapp</title>
</head>
<body>
<div>
<h1>發佈信息</h1>
<div>標題：</div>
<div><input type="text" id="title" style="width:370px"/></div>
<div>內容：</div>
<div><textarea cols="50" rows="10" id="content"></textarea></div>
<div><input type="button" value="發佈" id="publish"></div>
</div>
<div>
<h1>執行結果：</h1>
<div>
<textarea cols="100" rows="5" id="result"></textarea>
</div>
</div>
<br/>
<hr/>
<div>
<h1>查詢信息：</h1>
<div>作者地址：</div>
<div>
<input type="text" id="author" style="width:370px"/> <input type="button" id="search" value="查詢" />
</div>
<div>信息：</div>
<div id="queryResult" style="height:100px;width:370px;border:1px solid #aaa">
</div>
</div>
<div style="height:50px"></div>
<script src="libs/jquery-3.3.1.min.js"></script>
<script src="libs/nebulas.js"></script>
<script src="libs/nebPay.js"></script>
<script>
"use strict";
// 合約地址
var dappAddress = "n1hmSwsxM2S1Zo1Q5kMuQaKcnS1Xu8ATBbx";
// 直接訪問星雲鏈的api
var nebulas = require("nebulas"),
Account = nebulas.Account,
neb = new nebulas.Neb();
// 設置使用的網絡
neb.setRequest(new nebulas.HttpRequest("https://testnet.nebulas.io"));
// NebPay SDK 爲不同平臺的交易提供了統一的支付接口
// 開發者在Dapp頁面中使用NebPay API可以通過瀏覽器插件錢包、手機app錢包等實現交易支付和合約調用。
var NebPay = require("nebpay");
var nebPay = new NebPay();
// 執行合約返回的交易流水號，用於查詢交易信息
var serialNumber;
$("#publish").click(function () {
var title = $("#title").val().trim();
var content = $("#content").val().trim();
if (title === "" || content === "") {
alert("標題或內容不能爲空！");
return;
}
// 執行合約中的save方法
serialNumber = nebPay.call(dappAddress, "0", "save", "[\"" + title + "\",\"" + content + "\"]", {
listener : function (resp) {
console.log(resp);
// 清空信息
$("#title").val("");
$("#content").val("");
// 延遲5秒執行
intervalQuery = setInterval(function () {
queryResultInfo();
}, 5000);
}
});
});
// 定時器
var intervalQuery;
// 根據交易流水號查詢執行結果數據
function queryResultInfo() {
nebPay.queryPayInfo(serialNumber)
.then(function (resp) {
$("#result").val(resp);
var respObject = JSON.parse(resp)
if(respObject.code === 0){
alert(`提交信息成功!`);
clearInterval(intervalQuery);
}
})
.catch(function (err) {
console.log(err);
})
}
// 查看信息
$("#search").click(function () {
var author = $("#author").val().trim();
if (author === "") {
alert("作者地址不能爲空！");
return;
}
var from = Account.NewAccount().getAddressString();
var value = "0"; // 金額
var nonce = "0"; // 交易序號
var gas_price = "1000000" // 手續費價格
var gas_limit = "2000000" // 手續費限制
var callFunction = "read";
var callArgs = "[\"" + author + "\"]"; //in the form of ["args"]
var contract = { // 合約
"function": callFunction, // 方法名
"args": callArgs // 參數
}
// 使用api.call執行合約中的方法
neb.api.call(from, dappAddress, value, nonce, gas_price, gas_limit, contract).then(function (resp) {
var ressultObj = JSON.parse(resp.result);
$("#result").val(resp.result);
var title = ressultObj.title;
var content = ressultObj.content;
var time = new Date(ressultObj.timestamp);
$("#queryResult").html("標題：" + title + "<br/>" + "內容：" + content + "<br/>" + "時間：" + time);
}).catch(function (err) {
console.log("error:" + err.message)
})
});
</script>
</body>
</html>運行Dapp
發佈信息
第一步
第二步
第三步
第四步
第五步
根據流水號查詢的執行結果數據如下：
{
"code": 0,
"data": {
"data": "eyJGdW5jdGlvbiI6InNhdmUiLCJBcmdzIjoiW1wi5rWL6K+V5Y+R5biD5L+h5oGvXCIsXCLmtYvor5XlnKjmmJ/kupHpk77kuIrlj5HluIPkv6Hmga9cIl0ifQ==",
"contractAddress": "",
"type": "call",
"nonce": 1,
"gasLimit": "200000",
"gasUsed": "",
"chainId": 1001,
"from": "n1GjJ6CtCj9RLgcZfUD99A3fgA9fX2kuEJ5",
"to": "n1hmSwsxM2S1Zo1Q5kMuQaKcnS1Xu8ATBbx",
"value": "0",
"hash": "69640cacc2075b2af7a83d3882a4da92ab5b820b08ea182f9709e0f339fc47c5",
"gasPrice": "1000000",
"status": 2,
"timestamp": 1525943841
},
"msg": "success"
}查詢信息
至此，一個基於星雲鏈開發的簡單的Dapp就完成了。
總結
- 智能合約就好比傳統開發中的服務端，只不過是搭建在區塊鏈的節點上；
- Dapp就好比傳統開發中的前端，通過給定的方式調用我們發佈的智能合約中的方法；
- 數據存儲在區塊鏈上，區塊鏈存儲區類似於傳統的key-value存儲系統（比如：redis），當然我們也可以結合其他存儲方式綜合使用。