最新内容会更新在主站深入浅出区块链社区
原文链接:Web3与智能合约交互实战
写在前面
在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dapp。因此,我们需要一种友好的方式(比如一个web页面)来与智能合约交互,于是问题的答案就是web3.js
。
Web3.js
Web3.js是以太坊官方的Javascript API,可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合,主要包括下面几个库:
web3-eth
用来与以太坊区块链和智能合约交互web3-shh
用来控制whisper协议与p2p通信以及广播web3-bzz
用来与swarm协议交互web3-utils
包含了一些Dapp开发有用的功能
Web3与geth通信使用的是 JSON-RPC ,这是一种轻量级的RPC(Remote Procedure Call)协议,整个通信的模型可以抽象为下图。
搭建测试链
在开发初期,我们并没有必要使用真实的公链,为了开发效率,一般选择在本地搭建测试链。在本文我们选择的Ganache(在此之前使用的是testrpc,Ganache属于它的升级版),一个图形化测试软件(也有命令行版本),可以一键在本地搭建以太坊区块链测试环境,并且将区块链的状态通过图形界面显示出来,Ganache的运行界面如下图所示。
从图中可以看到Ganache会默认创建10个账户,监听地址是http://127.0.0.1:7545
,可以实时看到Current Block
、Gas Price
、Gas Limit
等信息。
创建智能合约
目前以太坊官方全力支持的智能合约开发环境是Remix IDE,我们在合约编辑页面编写如下代码:
pragma solidity ^0.4.21;
contract InfoContract {
string fName;
uint age;
function setInfo(string _fName, uint _age) public {
fName = _fName;
age = _age;
}
function getInfo() public constant returns (string, uint) {
return (fName, age);
}
}
代码很简单,就是简单的给name
和age
变量赋值与读取,接下来切换到 run 的 tab 下,将Environment
切换成Web3 Provider
,并输入我们的测试链的地址http://127.0.0.1:7545
,这里对这三个选项做一简单说明:
Javascript VM
:简单的Javascript虚拟机环境,纯粹练习智能合约编写的时候可以选择Injected Web3
:连接到嵌入到页面的Web3,比如连接到MetaMaskWeb3 Provider
:连接到自定义的节点,如私有的测试网络。
如果连接成功,那么在下面的Account
的选项会默认选择 Ganache 创建的第一个账户地址。接下来我们点击Create
就会将我们的智能合约部署到我们的测试网中。接下来 Remix 的页面不要关闭,在后面编写前端代码时还要用到合约的地址以及ABI
信息。
安装Web3
在这之前,先在终端创建我们的项目:
> mkdir info
> cd info
接下来使用 node.js 的包管理工具 npm 初始化项目,创建package.json
文件,其中保存了项目需要的相关依赖环境。
> npm init
一路按回车直到项目创建完成。最后,运行下面命令安装web.js:
> npm install web3
注意: 在实际安装过程中我发现web3在安装完成后并没有
/node_modules/web3/dist/we3.min.js
文件,这个问题在 issue#1041中有体现,但官方好像一直没解决。不过可以在这里下载所需的文件,解压后将dist
文件夹的内容拷贝到/node_modules/web3
路径下。
创建 UI
在项目目录下创建index.html
,在这里我们将创建基础的 UI,功能包括name
和age
的输入框,以及一个按钮,这些将通过 jQuery 实现:
<!DOCTYPE html>