星云链Nebulas——6.开发和部署星云链DApp

经过前面一系列的基础学习，本篇将进入DApp开发阶段。

1、创建星云链NAS钱包

在星云链上，部署智能合约需要星云币，所以需要申请一个星云链的钱包。

1.1 下载官方web钱包

注意：出于安全性的考虑，星云不架设专门Web钱包网站，以免私钥触网导致信息被盗。将钱包下载到自己的计算机上，断开网络，离线执行这些操作更为安全。

GitHub地址为：

https://github.com/nebulasio/web-wallet

wenzildeiMac:study wenzil$ git clone https://github.com/nebulasio/web-wallet.git
Cloning into 'web-wallet'...
remote: Counting objects: 1592, done.
remote: Compressing objects: 100% (43/43), done.
remote: Total 1592 (delta 34), reused 48 (delta 21), pack-reused 1528
Receiving objects: 100% (1592/1592), 1.93 MiB | 156.00 KiB/s, done.
Resolving deltas: 100% (1119/1119), done.
Checking out files: 100% (54/54), done.
官方web钱包

双击 index.html打开 ，这时会启动浏览器，打开一个保存在本地的网页，即Web版钱包。

新建钱包页面

设置密码(密码至少是9位数) ，点击创建新钱包。

特别提醒: 请务必保证秘钥文件的安全，不要忘记密码（私钥是您数字资产的凭证，请不要告诉任何人，如不慎暴露或丢失，会面临丢失对应数字资产的风险，请谨慎保管）。

右上方可以选择主网、测试网络还是私有网络，为了方便演示，这里选择了测试网络。

新建钱包下载密码库文件

输入密码后，点击"新建钱包"按钮，然后点击"下载密码库文件"，会生成一个"n1"开头的文件，保存到电脑上，这里包含了这个钱包内的私钥信息，因此请妥善保管，避免遗失或被盗。

密码库文件

注意：密码库文件可以用于断开网络，进行离线交易，这个钱包内的秘钥信息都包含在内，请妥善保管，如不慎丢失，会面临丢失对应数字资产的风险。

1.2 使用web钱包

点击"钱包信息"，然后上传钱包文件。

切换到钱包信息

上传成功后，输入创建钱包时的密码，点击"解锁"。

解锁钱包

解锁成功后，会在当前页面出现类似如下页面，可以查看账户的地址、余额、私钥、二维码地址等信息。

解锁后的钱包信息

发现钱包余额为0，以下介绍如何获取测试网络的星云币。2018年5月22日，星云链推出了星云激励计划，在主网每提交一个有效DApp即可获得100NAS（注：提交的DApp需要官方审核，需要满足一定的条件，可以查看以下链接的内容）。当然，也可以用钱来购买主网的星云币，这里不作介绍，有兴趣的同学自行研究。

星云激励计划DApp审核规则指南

1.3 领取测试网络星云币

领取测试网络星云币网址：
https://testnet.nebulas.io/claim/

每天可以领取1NAS的测试币，领取的星云币只能在测试网使用，没有实际价值，与主网没有任何关系。

打开网址后，输入邮箱和钱包地址，然后"点击按钮进行验证"。

输入邮箱和钱包地址验证

然后，在"Check Balance"一栏输入钱包地址，再点击“Check Balance”按钮检查钱包余额。

检查钱包余额

成功的话，页面会弹出这样的提示。


钱包多了一个星云币

说明已经成功领取了一个星云币NAS，接下来就可以用来部署和测试自己编写的智能合约了。

2、编写和部署智能合约

这里就不介绍编写和部署智能合约的内容了，直接进入编写部分。

这里以一个简单的"文章发布"DApp为例来讲解，主要的功能是任何区块链上的用户都可以发表一篇标题不重复的文章，如果文章标题被占用，就只能查看这篇文章。

2.1 编写智能合约

先创建一个该DApp的工程目录，暂且命名为"nebulas_article_publish"，并创建一个名为"article_publish.js"的智能合约文件，终端操作如下：

wenzildeiMac:~ wenzil$ cd /Users/wenzil/Desktop/study 
wenzildeiMac:study wenzil$ pwd
/Users/wenzil/Desktop/study
wenzildeiMac:study wenzil$ mkdir nebulas_article_publish
wenzildeiMac:study wenzil$ cd nebulas_article_publish/
wenzildeiMac:nebulas_article_publish wenzil$ touch article_publish.js

然后用JavaScript编写一个智能合约的代码，整个代码如下：

'use strict'

var Article = function(text){
    if(text){
        var obj = JSON.parse(text);
        // 文章作者
        this.author = obj.author;
        // 文章标题
        this.title = obj.title;
        // 文章内容
        this.content = obj.content;
        // 发布者钱包地址
        this.address = obj.address;
        // 文章发布时间
        this.date = obj.date;
    }
};

Article.prototype = {
    toString : function(){
        return JSON.stringify(this)
    }
};

// 获取当前时间
function getCurrentTime() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentTime = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentTime;
};

// 智能合约存储区
var ArticleContract = function () {
    // 使用"LocalContractStorage"绑定Map属性
    LocalContractStorage.defineMapProperty(this, "articleData", {
        stringify: function (obj) {
            return obj.toString();
        },
        parse: function (text) {
            return new Article(text);
        }
    });
};

ArticleContract.prototype ={
    init: function(){
      //TODO:
    },

    /**
      * 根据文章标题或者对应的文章
      * author：文章作者
      * title：文章标题
      * content：文章内容
      */
    save: function(author, title, content){
        if(!author || !title || !content){
            throw new Error("文章标题、作者和内容不能为空")
        }

        if(author.length > 20) {
          throw new Error("文章作者名字过长")
        }

        if(title.length > 100) {
          throw new Error("文章标题过长")
        }

        if(content.length > 100000){
            throw new Error("文章内容过长")
        }

        var from = Blockchain.transaction.from;
        var article = this.articleData.get(title);
        if(article){
            throw new Error("该文章已存在，请勿重新发布");
        }

        article = new Article();
        article.author = author;
        article.title = title;
        article.content = content;
        article.address = from;
        article.date = getCurrentTime();
        this.articleData.put(title, article);
    },

    /**
      * 根据文章标题或者对应的文章
      * title：文章标题
      */
    get: function(title){
        if(!title){
            throw new Error("文章标题为空")
        }
        return this.articleData.get(title);
    }
}

module.exports = ArticleContract;

2.2 部署智能合约

跟以太坊平台一样，在星云链上部署智能合约写入区块链中需要支付一定的费用（即Gas）。
支付Gas的目的主要有如下几个：
1.保证节点正常运行防止蓄意攻击；
2.用于矿工的奖励；
3.防止恶意发布代码（如执行死循环操作）。

切换到Web钱包的"合约"选项，然后选择"部署"。

切换到合约选项

将合约代码粘贴到输入框，点击"选择钱包文件"进行上传，输入钱包密码后再点击"解锁"，会出现如下内容。

部署合约

点击"测试"按钮后，发现没有返回错误信息。


测试和提交智能合约结果

然后点击右边的"提交"按钮进行部署，成功后会返回交易的哈希以及合约地址（记得做好保存）。

2.3 测试智能合约

切换到"执行"选项，函数输入要测试的名称，如"save"，参数这里传如下内容：

["Wenzil","开发和部署星云链DApp","经过前面一系列的基础学习，本篇将进入DApp开发阶段。\n\n在星云链上，部署智能合约需要星云币，所以需要申请一个星云链的钱包。。。"]

然后跟之前一样，上传钱包文件，输入密码，点击"解锁"、"测试"和"提交"按钮一系列操作。

测试智能合约save函数

合约地址为：
n1yE6rWrGo8yd1E9Wzn6CqZB85gyLF65YdL

然后，可以测试get函数，如下


测试智能合约get函数

来到这里，表示已经成功部署合约并测试通过。

3、安装相关文件和插件

前端页面中需要用到两个js文件，分别是neb.js和nebPay.js，用于JavaScript中API的调用和支付接口的调用。

3.1 安装neb.js

neb.js提供了JavaScript开发的API接口，需要从GitHub下载。

1、clone项目neb.js

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

终端操作如下：

wenzildeiMac:study wenzil$ pwd
/Users/wenzil/Desktop/study
wenzildeiMac:study wenzil$ git clone https://github.com/nebulasio/neb.js.git
Cloning into 'neb.js'...
remote: Counting objects: 674, done.
remote: Compressing objects: 100% (95/95), done.
remote: Total 674 (delta 54), reused 64 (delta 20), pack-reused 557
Receiving objects: 100% (674/674), 1.05 MiB | 356.00 KiB/s, done.
Resolving deltas: 100% (377/377), done.

2、进入到clone项目的根目录，安装所有依赖

npm install

终端操作如下：

wenzildeiMac:study wenzil$ cd neb.js
wenzildeiMac:neb.js wenzil$ npm install

3、安装自动化构建工具gulp

npm install gulp

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

gulp

如果出现如下错误，用以下另外一种命令执行安装gulp

-bash: gulp: command not found

sudo npm install --global gulp

5、执行成功会生成"dist"文件夹，文件夹中有前端页面要使用的js文件。


安装neb.js

3.2 安装nebPay.js

NebPay SDK为不同平台的交易提供了统一的支付接口，开发者在Dapp页面中使用NebPay API可以通过浏览器插件钱包、手机App钱包等实现交易支付和合约调用。

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

安装方法同上，会生成nebPay.js文件

终端操作如下：

git clone https://github.com/nebulasio/nebPay
cd nebPay/
npm install
gulp
安装nebPay

3.3 安装Chrome钱包插件

调用netPay的api需要唤醒Chrome钱包插件进行支付，因此需要安装钱包插件，查看GitHub有详细的安装说明

GitHub地址：

https://github.com/ChengOrangeJu/WebExtensionWallet

4、创建和运行DApp

4.1 创建DApp项目

前面创建了一个工程名为"my_web_wallet"的文件夹，将打包生成的nebulas.js和nebPay.min.js文件放到lib文件夹（jquery-3.3.1.min.js也放到该文件夹），将article_publish.js放到contracts文件夹，新建index.html页面文件，这里用到Bootstrap框架开发简单的前端页面，工程结构如下：


项目工程结构

index.html源码如下：

<!DOCTYPE html>
<html>
<head>
  <title>文章发布</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <script type="text/javascript" src="./lib/nebulas.js"></script>
  <script type="text/javascript" src="./lib/nebPay.min.js"></script>
  <script type="text/javascript" src="./lib/jquery-3.3.1.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column">

        <h3>发布文章</h3>

        <form>
          <div class="form-group" style="margin-top:20px">
            <label for="author">文章作者：</label>
            <input id="input_author" type="text" class="form-control" placeholder="输入文章作者">

            <label for="title" style="margin-top:10px">文章标题：</label>
            <input id="input_title" type="text" class="form-control" placeholder="输入文章标题">
            
            <label for="content" style="margin-top:10px">文章内容：</label>
            <input id="input_content" type="text" class="form-control" placeholder="输入文章内容">
          </div>

          <div style="text-align:center;margin-top:20px">
            <button id="post" type="submit" class="btn btn-primary" style="padding:6px 16px">发布</button>
          </div>
        </form>

        <h3 style="margin-bottom:10px">查询文章</h3>

        <div class="input-group">
          <input type="text" class="form-control" placeholder="请输入文章标题" id="text_search" />
          <span class="input-group-btn">
            <button id="button_search" class="btn btn-primary">搜索</button>
          </span>
        </div>

      <div style="text-align:center;margin-top:30px">
        <h4 id="article_title"></h4>
      </div>
      <div style="text-align:center">
        <span id="article_author"></span><span id="article_date" style="margin-left:20px"></span>
      </div>
      <div id="article_content" style="margin-top:10px"></div>
    </div>
  </body>

  <script>
  "use strict";

  // 智能合约的地址
  var contactAddress = "n1yE6rWrGo8yd1E9Wzn6CqZB85gyLF65YdL";
  // 访问星云链的API
  var nebulas = require("nebulas"), Account = Account, neb = new nebulas.Neb();
  // 设置使用的网络，主网为"https://mainnet.nebulas.io"，测试网络为"https://testnet.nebulas.io"
  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;
  $("#button_search").click(function () {
    if (!$("#text_search").val()) {
      alert('搜索文章标题不能为空');
      return;
    }
    $('#article_content').text("");
    var from = contactAddress
    var value = "0";  // 金额
    var nonce = "0";  // 交易序号
    var gas_price = "1000000";  // 手续费价格
    var gas_limit = "2000000";  // 手续费限制
    var callFunction = "get";
    var callArgs = "[\"" + $("#text_search").val() + "\"]";
    console.log(callArgs);
    var contract = {  // 合约
      "function": callFunction,  // 方法名
      "args": callArgs    // 方法的参数
    }

    // 使用api.call执行合约中的方法
    neb.api.call(from, contactAddress, value, nonce, gas_price, gas_limit, contract).then(function (resp) {
      var result = resp.result;

      if (result === 'null') {
        $('#article_content').text("没有找到对应的文章");
        // 清空信息
        $('#article_title').text("");
        $('#article_author').text("");
        $('#article_date').text("");
        return;
      }
      console.log(result);
      result = JSON.parse(result);
      $("#article_title").text(result.title);
      $('#article_content').text(result.content);
      $('#article_author').text("文章作者：" + result.author);
      $('#article_date').text("发布时间：" + result.date);
    }).catch(function (err) {
      console.log("error :" + err.message);
    })
  })
  $('#post').click(function () {
    if (!$("#input_author").val() || !$("#input_title").val() || !$("#input_content").val()) {
      alert('作者、标题、内容输入不能为空');
      return;
    }
    var to = contactAddress;
    var value = "0";
    var callFunction = "save";
    var callArgs = "[\"" + $("#input_author").val() + "\",\""  + $("#input_title").val() + "\",\"" + $("#input_content").val() + "\"]";
    console.log(callArgs);
    serialNumber = nebPay.call(to, value, callFunction, callArgs, {    //使用nebpay的call接口去调用合约,
      listener: function (resp) {
        console.log("nebPay response:" + resp)
      }
    });
  })
</script>

</html>

4.2 运行DApp

直接打开indext.html，界面如下：


打开网页

输入文章作者、标题、内容后，点击"发布"按钮，会弹出Chrome钱包插件。如果之前没有导入钱包文件，需要解锁。


弹出钱包插件

如果之前导入过钱包，会弹出如下信息，不需要手动填写任何内容。


弹出生成交易信息

点击"生成交易"按钮，会弹出如下内容。


确认交易对话框

再点击"确认"按钮，会弹出交易状态详情信息。


交易状态详情

过了一会，发现交易成功。
这时回到页面，输入提交时填写的文章标题来查询（即"测试标题"）来检查。


检查发布的文章内容

结果跟发布的内容一样，说明数据已经写入了区块链。是不是发现了一个问题？就是发布时间不是东八区的时间，时间格式也有点问题（转换时间格式的JS代码有点问题）。

当然，可以查看部署合约时创建的文章，同时也可以查看打印输出的内容。


查看部署合约时创建的文章

这里运行的只是本地html文件，需要部署到服务器上，别人才能访问。该DApp功能比较简陋，还有很多需要完善的地方，这里不作继续讨论。

至此，整个星云链DApp开发流程已经走完了，可以去主网提交DApp了，哈哈。

PS：刚入坑的小白，很多不懂，还请各位大佬多赐教，谢谢！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,194评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,058评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,780评论 0赞 346
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,388评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,430评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,764评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,907评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,679评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,122评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,270评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,867评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2赞 348

推荐阅读更多精彩内容

  • 第六课 技术小白如何开发一个DAPP区块链应用(以宠物商店为例)
    1. 文章摘要 【本文目标】 通过逐步的指导和截图举证，一步步带领一个技术小白完成一个宠物商店DAPP应用的开发和...
    笔名辉哥阅读 15,574评论 15赞 54
  • “秦医生，希望你幸福”
    “秦医生穿着白大褂的时候，像天使一样” 01 “与你若只如初见，何须感伤离别” “你不会用，我来吧。” 思言默默地...
    络文阅读 422评论 0赞 4
  • 2017-12-22
    陈艳兰YS17032 【连续27天打卡】 A、今日完成情况 @般若波罗蜜多心经 5遍 @背故事 1篇 3遍 B、今...
    艳兰Freya阅读 138评论 0赞 2
  • 《呼兰河传》
    断断续续地读完了《呼兰河传》 。 第一次读萧红的书，惊叹于她的文笔，20世纪初的东北生活活灵活现的展现出来。 书里...
    简简单单书写阅读 370评论 0赞 0
  • 捣蛋鬼们的日常
    by 金加隆 1 “咦，这是什么？” 莱姆斯无奈地拨开像章鱼触手一样紧紧缠在他身上的小天狼星的胳膊，答道：“这是一...
    金加隆阅读 341评论 0赞 2