星雲鏈智能合約開發（七）：Dapp開發

時間 2021-01-30

標籤 javascript html 前端 java jquery git github redis npm gulp 欄目 JavaScript 简体版

原文原文鏈接

安裝neb.js

neb.js提供javascript開發的API接口javascript

建立一個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錢包等實現交易支付和合約調用。html

github地址：https://github.com/nebulasio/nebPay前端

安裝方法同上。會生成nebPay.js文件java

開發Dapp

要實現的功能很是簡單：jquery

調用合約中的save方法發佈信息
調用合約中的read方法讀取信息

創建項目

將前面生成的nebulas.js和nebPay.js放在libs文件夾下，個人目錄結構以下：git

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"/>&nbsp;<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

發佈信息

第一步

第二步

第三步

第四步

第五步

根據流水號查詢的執行結果數據以下：github

{
    "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"
}