什么996? 有了这个工具咱自愿007...

来源 | 深入浅出区块链

作者 | Tiny 熊

出品 | 区块链大本营（blockchain_camp）

生活中，你常会为自己定一些小目标、列一些小计划，但仔细一想，你又完成了多少呢？说到底是没人监督你，即使你不做也可以耍赖...

那如果有一个链上笔记本呢？写到笔记本上的内容不可更改，你也不能耍赖偷懒，因为它删不掉、擦不去，永远都在那里。

到那时，“什么996啊，我自愿007！”

毕竟立下了那么多 flag，不是吗？

不要被吓到啊，其实，营长只是教你开发一个基于以太坊的 DApp — — 链上笔记本。老铁们，一起来动手实操吧。

注：本文以编写一个链上记事本为例，介绍如何开发一款 DApp，也将介绍如何使用 Truffle 工具把智能合约部署到以太坊正式网络上。

先做个小调查：

好啦，跟着营长一起实战吧！

项目背景及效果

链上记事本让事件永久上链，让事件成为无法修改的历史，从此再无删帖，之前有一个帖子，介绍如何 MetaMask 上链记事，现在我们通过这个 DApp 来完成。

链上记事本有两个功能：

添加一个新记事
查看之前(自己的)记事本

实现效果：

本合约也部署到以太坊官方测试网络 Ropsten，如 Englist first Note 的交易记录可以在EtherScan 查询。

项目准备

创建项目文件夹：noteOnChain，然后在目录下，执行：

truffle unbox pet-shop

使用 Truffle 对项目初始化。Truffle 的 Box，是一套套的开发模板，它会帮助我们安装好相应的依赖，快速的启动应用开发。如果我们项目需要是使用到 JQuery，Bootstrap 库，使用 pet-shop 这个 Box 是不错的选择，官方还提供了 React 、Vue 项目相应的模板。

合约实现

项目初始化会在 noteOnChain 目录下生成 contracts 目录来存放合约文件，在 contracts 目录下添加一个合约文件 NoteContract.sol：

pragma solidity ^0.5.0;contract NoteContract {        mapping(address => string [] ) public notes;    constructor() public {    }    event NewNote(address, string note);// 添加记事    function addNote( string memory note) public {        notes[msg.sender].push(note);        emit NewNote(msg.sender, note);    }    function getNotesLen(address own) public view returns (uint) {        return notes[own].length;    }}

合约关键是状态变量 notes 的定义，这是一个 mapping，保存着所有地址下所有的记事本。

修改记事本逻辑

如果需要修改笔记功能，可以在合约中加入以下代码：

event ModifyNote(address, uint index);    function modifyNote(address own, uint index, string memory note) public {notes[own][index] = note;emit ModifyNote(own, index);}

如果需要只有自己能修改笔记可以 modifyNote 的第一行加上:

require(own == msg.sender)

合约部署

先为合约添加一个部署脚本：

var Note = artifacts.require("./NoteContract.sol");module.exports = function(deployer) {  deployer.deploy(Note);};

truffle 部署的命令是：

truffle migrate

默认情况下，会部署到本地的 Ganache 提供的测试网络，本文介绍下如何通过 Truffle 部署到太坊官方网络，这里以 Ropsten 为例介绍。

Infura 节点服务注册与 HDWalletProvider 安装

大多数人应该都没有部署自己的节点，我们可以使用 Infura 提供的节点服务。

有部分人可能不解 Infura 服务，其实 MetaMask 后面的节点服务就是 Infura。

然后通过 HDWalletProvider 连接到 Infura 节点，并为我们签署交易，通过下面命令安装 HDWalletProvider：

npm install truffle-hdwallet-provider

在使用 Infura 之前，我们需要注册一个访问 Infura 服务的 Token，

注册地址为：https://infura.io/register，注册后创建一个 Project，复制节点 url：

为 truffle 配置一个新网络

修改 truffle.js 加入一个新网络.

首先引入 HDWalletProvider：

var HDWalletProvider = require("truffle-hdwallet-provider");

配置签名的钱包助记词：

var mnemonic = "orange apple banana ... ";

助记词其实不应该明文配置保存，最好配置在一个隐私文件里，并被代码管理工具所忽略。

加入新网络，以 Ropsten 为例：

networks: {    ropsten: {      provider: function() {        return new HDWalletProvider(mnemonic, "https://ropsten.infura.io/xxx")      },      network_id: 3,      gas: 7003605,      gasPrice: 100000000000,    }   }

HDWalletProvider 的第一个参数是助记词（确保账号有足够的余额），第二个参数是上面复制的 Infura 节点服务地址，gas 和 gasPrice 分别配置部署时的 Gas Limit 和 Gas Price。

部署

通过以下命令来选择网络部署：

truffle migrate --network ropsten

此过程大约需要等待半分钟，正常的话会输出像下面的提示：

Running migration: 1_initial_migration.js  Deploying Migrations...  ... 0xd79bc3c5a7d338a7f85db9f86febbee738ebdec9494f49bda8f9f4c90b649db7  Migrations: 0x0c6c4fc8831755595eda4b5724a61ff989e2f8b9Saving successful migration to network...  ... 0xc37320561d0004dc149ea42d839375c3fc53752bae5776e4e7543ad16c1b06f0Saving artifacts...Running migration: 2_deploy_contracts.js  Deploying NoteContract...  ... 0x7efbb3e4f028aa8834d0078293e0db7ff8aff88e72f33960fc806a618a6ce4d3  NoteContract: 0xda05d7bfa5b6af7feab7bd156e812b4e564ef2b1Saving successful migration to network...  ... 0x6257dd237eb8b120c8038b066e257baee03b9c447c3ba43f843d1856de1fe132Saving artifacts...

可以用输出的交易 Hash 到 https://ropsten.etherscan.io/ 查询。

前端界面

Truffle Boxs 为项目生成了 html 前端文件 src/index.html，删除原来 Boxs 提供的宠物相关代码，加入一下 html：

<div class="form-group">  <div class="col-sm-8 col-sm-push-1 ">        <textarea class="form-control" id="new_note" ></textarea>    </div>      <button for="new_note" class="" id="add_new">添加笔记</button>    </div>  <div id="notes" ></div>

以上 html 定义了一个文本框 textarea 用来输入笔记，定义了一个 button 用来提交笔记上链。定义了一个 ID 为 notes 的 div，用来加载已有笔记。初始内容为空，后通过 web3 读取到合约里笔记后，通过 JQuery 插入。

合约交互

删除原来 Boxs 提供的加载宠物逻辑，逻辑分三个部分：

初始化 web3 及合约
获取笔记填充到前端页面
发布笔记上链

初始化

在 initWeb3 函数中，完成 web3 的初始化：

// 最新dapp 浏览器或MetaMask  if (window.ethereum) {  App.web3Provider = window.ethereum;  try {    // 请求账号授权    await window.ethereum.enable();  } catch (error) {    // User denied account access...    console.error("User denied account access")  }}// Legacy dapp browsers...else if (window.web3) {  App.web3Provider = window.web3.currentProvider;}else {  App.web3Provider = new Web3.providers.HttpProvider('http://localhost:9545');}web3 = new Web3(App.web3Provider);

完成 initContract 初始化合约：

initContract: function() {    $.getJSON('NoteContract.json', function(data) {      App.contracts.noteContract = TruffleContract(data);      App.contracts.noteContract.setProvider(App.web3Provider);      App.contracts.noteContract.deployed().then(function(instance) {        App.noteIntance = instance;        return App.getNotes();      });    });    return App.bindEvents();}

获取笔记填充到前端页面

initContract 函数里，noteIntance 保存了部署后的合约实例，getNotes 用来获取当前账号的所有笔记:

getNotes: function() {    App.noteIntance.getNotesLen(App.account).then(function(len) {      App.noteLength = len;      if (len > 0) {        App.loadNote( len - 1);      }     }).catch(function(err) {    });}

目前 solidity 还无法支持返回动态类型的数组，没有办法直接获取到如 string 数组的内容，所有这里采用一个变通的方法，先获取到笔记的长度，然后通过 loadNote 来逐条获取笔记：

loadNote: function(index) {    App.noteIntance.notes(App.account, index).then(function(note) {      $("#notes").append(      '<div > <textarea >'      + note      + '</textarea></div>' ;      if (index -1 >= 0) {        App.loadNote(index - 1);      }    } ).catch(function(err) {    });}

发布笔记上链

使用 JQuery 监听用户点击 add_new 按钮，然后调用合约的 addNote 函数把用户输入的笔记存储到智能合约。

bindEvents: function() {    $("#add_new").on('click', function() {      $("#loader").show();      App.noteIntance.addNote($("#new_note").val()).then(function(result) {         return App.watchChange();      }).catch(function (err) {        console.log(err.message);      });    });}

运行 DApp

使用以下命令，启动 DApp 服务：

npm run dev

在浏览器打开 http://localhost:3000，

浏览器的 MetaMask 也需要连接 Ropsten 网络，确保网络一致。

然后，看看效果吧！！！

原文链接：

https://learnblockchain.cn/2019/03/30/dapp_noteOnChain/

推荐阅读：

裁员25%, 梅西也拯救不了全球第一款区块链手机!
别的公司裁员996, 区块链公司一将难求, 什么样的公司最容易招到开发者？
用一枚比特币环游世界? 他是不是疯了...
强推！十大顶级大数据可视化工具 | 程序员硬核评测
程序员的双肩包，大概能装下整个宇宙！
深入卷积神经网络背后的数学原理 | 技术头条
源码泄露是裁员报复还是程序员反抗 996？
他说：当一个程序员决定告别996，什么都有可能发生！

猛戳"阅读原文"有惊喜哟

老铁在看了吗？?