星云链智能合约开发（七）：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"
}

查询信息

至此，一个基于星云链开发的简单的Dapp就完成了。redis

总结

智能合约就比如传统开发中的服务端，只不过是搭建在区块链的节点上；
Dapp就比如传统开发中的前端，经过给定的方式调用咱们发布的智能合约中的方法；
数据存储在区块链上，区块链存储区相似于传统的key-value存储系统（好比：redis），固然咱们也能够结合其余存储方式综合使用。