基于星云链的智能合约与Dapp(九)——Dapp开发

安装neb.js

neb.js提供javascript开发的API接口

1.创建一个neb文件夹,在终端命令行中进入该文件夹,克隆neb.js

git clone https://github.com/nebulasio/neb.js.git

2.会新建一个neb.js文件夹,进入该文件夹,安装所有依赖

npm install

3.安装gulp

npm install gulp

4.打包生成neb.js等文件

gulp

5.执行成功会生成/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开发

将生产的nebulas.js和nebPay.js放在libs文件夹下,例如下图:
基于星云链的智能合约与Dapp(九)——Dapp开发_第1张图片
course.js源码如下:

'use strict';

var courseContract = function () {
    LocalContractStorage.defineProperty(this, "size");
}

courseContract.prototype = {
    init: function () {
        this.size = 0;
    },

    save: function (value) {
        this.size = value;
    },

    read: function () {
        return this.size;
    }
};

module.exports = courseContract;

course.html源码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Coursetitle>
    <script src="libs/jquery-3.3.1.min.js">script>
    <script src="libs/nebPay.js">script>
    <script src="libs/nebulas.js">script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
head>
<body>
<input type="text" class="form-control" style="margin-top: 20px; height: 40px;"
       id="line1">
<button type="button" style="margin-top: 10px;" class="btn btn-primary btn-lg btn-block" id="save">保存button>
<button type="button" style="margin-top: 10px;" class="btn btn-primary btn-lg btn-block" id="read">读取button>
<div id="value" style="font-size: 20px; color: red">div>

<script>
    var dappAddress = "n1uSBFi4JnGtUNu8mGKmdF5orMg8b7GnN7w";
    var NebPay = require("nebpay");
    var nebPay = new NebPay();


    $("#save").click(function () {
        var str = $("#line1").val().trim();
        var callArgs = "[\"" + str + "\"]";
        nebPay.call(dappAddress, "0", "save", callArgs, {
            listener: function (resp) {

            }
        });
    });


    $("#read").click(function () {
        var callArgs = "[]";
        nebPay.simulateCall(dappAddress, "0", "read", callArgs, {
            listener: function (resp) {
                $("#value").html(resp.result);
            }
        });
    });
script>
body>
html>

上面的源码使用了nebPay的方式调用智能合约中的方法,我们还可以使用nebulasapi.call的方式调用智能合约中的方法,例如:

<script>
    var dappAddress = "n1uSBFi4JnGtUNu8mGKmdF5orMg8b7GnN7w";
    var NebPay = require("nebpay");
    var nebPay = new NebPay();


    // 直接访问星云链的api
    var nebulas = require("nebulas"), Account = nebulas.Account, neb = new nebulas.Neb();
    // 设置使用的网络
    neb.setRequest(new nebulas.HttpRequest("https://testnet.nebulas.io"));

    $("#save").click(function () {
        var str = $("#line1").val().trim();
        var callArgs = "[\"" + str + "\"]";
        nebPay.call(dappAddress, "0", "save", callArgs, {
            listener: function (resp) {

            }
        });
    });


    /*   $("#read").click(function () {
     var callArgs = "[]";
     nebPay.simulateCall(dappAddress, "0", "read", callArgs, {
     listener: function (resp) {
     $("#value").html(resp.result);
     }
     });
     });
     */

    $("#read").click(function () {
        var from = Account.NewAccount().getAddressString();
        var value = "0";   // 金额
        var nonce = "1";   // 交易序号
        var gas_price = "1000000" // 手续费价格
        var gas_limit = "2000000" // 手续费限制
        var callFunction = "read";
        var callArgs = "[]"; //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) {
            $("#value").html(resp.result);
        }).catch(function (err) {
            $("#value").html("error:" + err.message);
        })
    });
script>
运行Dapp

第一步
基于星云链的智能合约与Dapp(九)——Dapp开发_第2张图片
第二步
基于星云链的智能合约与Dapp(九)——Dapp开发_第3张图片
第三步
基于星云链的智能合约与Dapp(九)——Dapp开发_第4张图片
第四步
基于星云链的智能合约与Dapp(九)——Dapp开发_第5张图片
到此为止,一个基于星云链的Dapp就开发完成了,不要吐槽举例的Dapp太简单了,重在演示过程。

下一章
内置库调用

你可能感兴趣的:(区块链,星云链)