人生的第一桶金 —— Nebulas DApp 开发从零开始

时间  2019-11-26
标签 人生 第一桶金 nebulas dapp 开发 开始 栏目 兴趣爱好 繁體版
原文   原文链接

前言

5月7日 00:00 - 7月2日 00:00，Nebulas(星云) 有一个激励计划，开发DApp, 最高月度优秀奖励可达 20000 NAS 价值约 120w RMBhtml

人生的第一个一百万，第一桶金，兴不兴奋， 心不心动！！~ 无论你心不心动, 反正我心动了！前端

第一步确定是先注册一个帐号了， 注册连接java

好了，看到钱就兴奋不算一件坏事，不过还须要冷静下，这120w 不是这么好拿的，不过对于普通的开发者来讲 还有一个很大的福利, 只要你成功上架一个DApp,便可得到 100 NAS 价值 6000 RMB 这都我等来讲 也算一笔不大不小的收入, 若是写的优秀点的话，还有更多的奖项在等着，就算拿不到 120w，努力点 那个几万 甚至十几 二十万 仍是有可能的。具体能够查看官网说明。node

ps. 固然官方对帮忙推广宣传的，也有必定的奖励，若是小伙伴们经过我上面的邀请连接进入的，而且成功上架一个DApp的话 我也是能获取到 40 NAS，固然你本身自己的奖励不会减小（据社区小伙伴透露，经过别人邀请连接进入的，成功上架一个DApp 的奖励上升到110 NAS）git

准备工做

前言打了一波鸡血, 120w 想拿到，怎么说都要成功上架一个 DApp以后，才有这个机会。讲一下准备工做吧。github

  1. 首先你得会 JavaScript(TypeScript 也行)，不会的小伙伴 自行学习下。
  2. 其次你得了解下 DApp 是个什么东西？
  3. 开发流程是怎么样的？怎么部署以及发布？
  4. 去哪里提交上架？

DApp 是个什么东西？

其实建议自行 google 百度下，会清楚点，在这里我作个简单的介绍，本身的理解，可能有所出处。web

DApp 即 decentralized application (去中心化应用)，主要是至关于中心化应用来讲的。目前的App来讲，基本上都是中心化应用，有中心化的服务器，数据存储读取都是跟中心化服务器作交互。而去中心化应用，去掉的就是中心化的服务器，才用的是区块链的去中心化的数据库。chrome

最先应该是以太坊提出智能合约以后才出来的一个概念，至于智能合约，我的理解是至关于后端，数据经过智能合约存储在区块链上。数据库

开发流程

重头戏来了，基友星云链开发一个DApp的流程是怎么样的npm

  1. 先去星云官网注册帐号，注册连接
  2. 下载官方web钱包, 并使用该web钱包建立咱们本身的钱包
  3. 下载官方Chrome插件，github上有教程
  4. 开发智能合约，（本文会采用官方推荐的最简单的一个例子）
  5. 部署智能合约，（部署合约的时候须要少许的NAS, 测试链上的币能够在这里领取,正式链上的NAS,若是没有渠道的话，能够联系我微信 xuanyuan_1, 备注请按 掘金-DApp-你的名字, 若是你是按个人邀请连接注册的我将免费送你一点NAS币 用于部署智能合约。）
  6. 开发Web前端界面
  7. 部署前端界面（这块不熟悉的，或者没有域名的，也能够联系我）
  8. 提交DApp（坐等拿钱）

ps. 拿到手的是NAS，若是不想持有直接提现的话，能够去火币等交易所提现

本文会主要讲一下智能合约，以及web前端开发两个部分。

智能合约

若是没有智能合约这个概念的话，能够把这块理解后端的接口。星云的智能合约是基于 Chrome 的 V8 引擎开发的，支持 JavaScript 与 TypeScript。 智能合约的执行模型以下：

内置了一下 LocalContractStorage 模板来提供存储功能， BigNumber 模块进行数值的处理， Blockchain 对象能够取得当前合约所在的块和Transaction信息... 具体能够参考 官方的文档

写智能合约

直接上代码

"use strict";

var DictItem = function(text) {
  if (text) {
    var obj = JSON.parse(text);
    this.key = obj.key;
    this.value = obj.value;
    this.author = obj.author;
  } else {
    this.key = "";
    this.author = "";
    this.value = "";
  }
};

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

var SuperDictionary = function () {
  LocalContractStorage.defineMapProperty(this, "repo", {
    parse: function (text) {
      return new DictItem(text);
    },
    stringify: function (o) {
      return o.toString();
    }
  });
};

SuperDictionary.prototype = {
  init: function () {
    // todo
  },

  save: function (key, value) {
    key = key.trim();
    value = value.trim();
    if (key === "" || value === ""){
        throw new Error("empty key / value");
    }
    if (value.length > 64 || key.length > 64){
        throw new Error("key / value exceed limit length")
    }

    var from = Blockchain.transaction.from;
    var dictItem = this.repo.get(key);
    if (dictItem){
        throw new Error("value has been occupied");
    }

    dictItem = new DictItem();
    dictItem.author = from;
    dictItem.key = key;
    dictItem.value = value;

    this.repo.put(key, dictItem);
  },

  get: function (key) {
    key = key.trim();
    if ( key === "" ) {
      throw new Error("empty key")
    }
    return this.repo.get(key);
  }
};
module.exports = SuperDictionary;
复制代码

上面的智能合约就是就是官方demo里的，吐槽一下写这个demo的人 多是以前写 java 的或者是强行把 TypeScript 撸成 JavaScript。

完成能够改写成下方形式, （为了节省篇幅把说明直接写在注释里了）

// 构建一个SuperDictionary 类 ES5的写法 能够用ES6 class的写法也行
var SuperDictionary = function () {
  LocalContractStorage.defineMapProperty(this, "repo");
};

SuperDictionary.prototype = {
  // 这个方法比较有，初始化合约的时候 作相应的处理， 好比说 初始化的时候 绑定直接是用户
  init: function () {
    // todo
  },
  /** * 保存内容 * key: 关键字 * vlaue: 关键字所对应的定义 */
  save: function (key, value) {
    key = key.trim();
    value = value.trim();
    if (key === "" || value === ""){
        throw new Error("empty key / value");
    }
    if (value.length > 64 || key.length > 64){
        throw new Error("key / value exceed limit length")
    }
    /** * Blockchain.transaction.from 即本次请求的区块链地址 */
    var from = Blockchain.transaction.from;
    var dictItem = this.repo.get(key);
    // 若已经存在 则这个词已经被抢注了 抛出异常
    if (dictItem){
        throw new Error("value has been occupied");
    }
    // 很自信的以为 下面的写法是对的 没想到测试没经过 可怕
    // dictItem = {
    // author: from
    // key,
    // value
    // }
    // 最后改为以下写法
    dictItem = {};
    dictItem.author = from;
    dictItem.key = key;
    dictItem.value = value;
    // 保存
    this.repo.put(key, dictItem);
  },
  // 获取相关保存的词
  get: function (key) {
    key = key.trim();
    if ( key === "" ) {
      throw new Error("empty key")
    }
    return this.repo.get(key);
  }
};
module.exports = SuperDictionary;
复制代码

这个DApp要实现的什么功能，其实看合约 就知道了。这是一个名为 SuperDictionary 的DApp, 主要实现的功能即为能够在这个 DApp 查询一个词，若这个词没有被人抢注，你就能够本身注册下（好比说 搜个人大名 Duke 基本上不会有人注册，我给它一个定义 世上最帅的人，那么这条信息就将永久保存在星云链上，别人再使用这个DApp 查询 Duke 能够看到 我给他下的定义。）

星云链的智能合约有三点简要的规范：

  1. 智能合约代码必须是一个Prototype的对象；
  2. 智能合约代码必须有一个init()的方法，这个方法只会在部署的时候被执行一次；
  3. 智能合约里面的私有方法是以_开头的方法，私有方法不能被外部直接调用；

部署智能合约

部署智能合约有三步

  1. 检查你的帐户的状态
  2. 若帐户里有足够的钱来支付手续费则开始解锁帐户（解锁时间为12小时）
  3. 再解锁的期间 发送部署BankVault合约的交易

详情可查看这里

这三步都须要发一个请求出去，并且例子上的地址是 localhost 意味着 你还须要编译安装一个星云链的代码，至关于成为星云链的一个节点。 so trouble!!! 我只是想安静的撸一个 DApp， 这些是什么鬼！！！

别担忧我有招（其实官方也考虑到这点了）

到官方github 把 web版钱包 下载下来，npm install 安装依赖，再 node server.js 运行服务。再接下来在浏览器中输入 http://localhost:8080/ 便可看到以下界面

这样咱们就部署成功了，到此为止咱们就基本上完成了，DApp后端部分的工做，咱们能够开始愉快的撸前端界面了。

ps. 开发的时候，咱们最好用的是测试链，测试链上的币能够在这里领取，可是提交

前端界面

基本上的界面，你们就自我发挥吧。主要来说一下会遇到的坑点。怎么调用

官方提供了一个方法 nebPay, 可是官方并无把他提交到npm上去，有点忧伤，只能本身动手 占个坑， 直接可使用 npm install nebpay 就能够下载

最开始本身傻逼了，觉得只能上传到npm上才能用，后来发如今 package.json 直接写 "${name}":"git+${it's github url}"也行，拿nebPay举例即为"nebpay": "git+https://github.com/nebulasio/nebPay"。

api 调用

前面讲了前端调用合约的方式，具体代码怎么写呢,我简单的封装了下，你们能够作个参考

import NebPay from 'nebpay'
const nebPay = new NebPay()
/** * * @param {String} callFunction 调用合约的方法 * @param {Array} param 请求的参数 * @param {Boolean} needPay 是否须要支付 */
const api = function (callFunction, param = [], needPay = false) {
  return new Promise((resolve, reject) => {
    const to = dappAddress
    const value = '0'
    const callArgs = JSON.stringify(param)
    /** * 若是只查询类的请求 就不须要去支付 直接使用 nebPay 的 simulateCall 便可 * 若是不是查询类的 须要调用支付接口 使用 nebPay 的 call 调用 */
    const way = needPay ? 'call' : 'simulateCall'
    nebPay[way](to, value, callFunction, callArgs, {
      listener: (res) => {
        console.log('listener', res)
        try {
          resolve(JSON.parse(res.result))
        } catch (e) {
          reject(res.result)
        }
      }
    })
  })
}
复制代码

显而易见，只要用到了两个方法，call 与 simulateCall, 二者的在因而否须要修改合约里的内容。好比查询类的就想咱们的合约里的 get 方法，咱们就用 simulateCall， 可是如咱们合约里的 save 方法就须要使用 call，会调用 nebulas 的 chrome 钱包插件，须要支付少许的矿工费，这样咱们才能把咱们的信息永久保存在星云链上。

结语

一不当心啰啰嗦嗦了，写了一堆，不知道对小伙伴们，有没有帮助。今天（2018-05-21）已是激励计划的第三周了，基本上简单的应用都被人占坑了，若是想要过审核，须要多一点点创意，多一点点功能把 DApp 作的稍微饱满点, 单人闭门造车已经很难了，有兴趣的或者有好想法的小伙伴，一块儿组个队一块儿玩，后续的机会仍是有的。真获奖了奖励平分。 我微信及手机号为： MTg5MDY3Nzc1NzM= （加微信就好 ^_^ 请备注 掘金）

发了这篇文章以后 有很多人找我。发几个币给我玩玩呗。 我感受仍是有必要说明下: 部署合约须要正式链上的 NAS, 须要的很是少，连一分钱都不到，因此我在前面提到送一些NAS，只是为开发所需（毕竟经过交易所什么的来即麻烦又费时费钱）。我并非土豪，抱有其余目的的小伙伴 能够无视我了！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程