以太坊开发（20）Web3与智能合约交互实战

搭建智能合约开发环境

智能合约的开发环境依赖于node/npm，所以在搭建开发环境之前需要确保开发机已经安装了node/npm环境。

如果你还没有安装，mac下通过brew命令可以非常快速的安装

酿造安装节点

或者自己下载node安装包安装。

然后安装以下开发智能合约所需的工具：

Web3 JS - 用于开发以太坊客户端的 javascript 框架

npm install web3truffle - 以太坊开发框架

npm install -g truffleMetamask - 以太坊钱包，基于 Chrome 的插件

Ganache - 供本地使用的虚拟以太坊区块链，并自动创建 10 个本地区块链帐户用于测试

图片

Remix - 以太坊官方推荐的智能合约开发IDE，可以在浏览器中快速部署和测试智能合约。

图片

配置 Metamask 以连接到 Ganache 本地环境。 Ganache默认监听端口是7545，所以需要设置Metamask，如下，点击“Custom RPC”，然后设置本地虚拟区块链的地址

图片

图片

配置完成后，可以默认导入Ganache创建的账号。

图片

点击右边的key（show key），在弹出的界面中复制账户的token，然后点击Metamask右上角的头像，通过“Import Account”粘贴复制的token，导入，可以看到新导入的账户，账户默认已经有100 ETH。

图片

创建智能合约

在 Remix 编辑器中编写一个简单的智能合约 - HelloWorld

pragma solidity ^0.4.0;
contract HelloWorld {
   string public name;
   function HelloWorld() public {
       name = "Liping";
   }
   function setName(string _name) public {
       name = _name;
   }
}

合约编译完成后，点击“Run”选项卡，在“Environment”中选择“Web3 Provider”

图片

点击“确定”后，填写“http://localhost:7545”连接到我们在本地运行的Ganache虚拟区块链

图片

图片

连接成功后，“账户”下拉列表中会列出区块链中已有的账户：

图片

点击“Create”，将刚刚编写的智能合约代码部署到虚拟区块链上

图片

下一步将通过Web3 JS和Node.js编写智能合约的客户端。

通过 Web3 JS 访问智能合约

智能合约的传递可以通过Web3实现。 Web3 JS 通过 RPC 远程调用与以太坊节点连接。 然后通过Web3中的eth对象与以太坊进行交互。 过程主要是：

初始化Web3，设置区块链账户，设置智能合约Abi，设置智能合约地址，创建智能合约对象，通过智能合约对象与部署好的合约进行交互

完整代码（javascript）如下

 // 初始化 Web3
  if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
  } else {
      web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));
  }
  // 设置默认账户
  web3.eth.defaultAccount = web3.eth.accounts[0];
  // 设置合约 ABI
  var contractAbi = [
      {
          "constant": false,

          "inputs": [
              {
                  "name": "_name",
                  "type": "string"
              }
          ],
          "name": "setName",
          "outputs": [],
          "payable": false,
          "stateMutability": "nonpayable",
          "type": "function"
      },
      {
          "inputs": [],
          "payable": false,
          "stateMutability": "nonpayable",
          "type": "constructor"
      },
      {
          "constant": true,
          "inputs": [],
          "name": "name",
          "outputs": [
              {

                  "name": "",
                  "type": "string"
              }
          ],
          "payable": false,
          "stateMutability": "view",
          "type": "function"
      }
  ];
  // 设置合约地址
  var contractAddress = '0x01ee312a2055f212e09aa43e1b8d61f5634ccfc3';
  // 获取智能合约对象
  var contract = web3.eth.contract(contractAbi).at(contractAddress);
  // 调用合约对象的方法，返回name
  contract.name(function(err, value) {
      $('#name').html(value);
  })
  // 提交name的值
  $('form').on('submit', function(event) {
      event.preventDefault;
      contract.setName($('#input_name').val());
  });

代码比较简单精通以太坊智能合约开发，使用web3和jQuery。

重点讲解的是合约的ABI，以及如何获取合约Abi和合约地址。

什么是合约 ABI？ ABI是Application Binary Interface的缩写。 它是一个能够收缩的二进制接口。 可以理解为描述智能合约的接口描述。 当编译合约时，它的abi就确定了。

如何获取合约ABI和合约地址？

这可以很容易地通过 Remix 浏览器 IDE 获得。 在“Compiler”选项卡中，点击“Details”按钮，在弹出的页面中可以看到“ABI”区域，点击右侧的复制图标，可以将ABI复制到剪贴板。

图片

ABI的内容从上面的代码可以看出，一个简单的JSON描述文件。

如何获取合约的部署地址？

同样是通过 Remix 浏览器 IDE 获得的。 上面我们通过“运行”选项卡中的“创建”部署了智能合约。 当点击“创建”按钮时精通以太坊智能合约开发，XXXXX 的合约名称将显示在选项卡的底部。 列表框，这是我们部署的合约，点击复制图标，可以将合约的地址复制到剪贴板，

图片

通过合约的ABI和合约地址后，就可以构造合约对象，然后通过合约对象完成智能合约的一些操作。

Web3 API中文文档

创建接口

通过上面的代码，已经初始化了web3，创建了合约对象，所以只需要写一个简单的HTML文件就可以完成一个非常简单的界面

图片

图片

在输入框中输入其他内容，点击“Say Hello To”按钮，可以看到合约返回的name值已经变成了在输入框中输入的值。

通过Ganache的Blocks and Transactions接口，可以看到每一次操作都会形成对应的区块和交易记录。

图片

图片