在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dapp。因此,我们需要一种友好的方式(比如一个web页面)来与智能合约交互,于是问题的答案就是web3.js。
Web3.js
Web3.js是以太坊官方的Javascript API,可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合,主要包括下面几个库:) A) h2 n, q5 k" S1 O, t
web3-eth用来与以太坊区块链和智能合约交互
web3-shh用来控制whisper协议与p2p通信以及广播0 V, V, C8 x# O1 [
web3-bzz用来与swarm协议交互) ~& ~& Z2 S& i$ P0 j
web3-utils包含了一些Dapp开发有用的功能
Web3与geth通信使用的是 JSON-RPC ,这是一种轻量级的RPC(Remote Procedure Call)协议,整个通信的模型可以抽象为下图。
6 n- K( i3 }1 ?# X
搭建测试链
在开发初期,我们并没有必要使用真实的公链,为了开发效率,一般选择在本地搭建测试链。在本文我们选择的Ganache(在此之前使用的是testrpc,Ganache属于它的升级版),一个图形化测试软件(也有命令行版本),可以一键在本地搭建以太坊区块链测试环境,并且将区块链的状态通过图形界面显示出来,Ganache的运行界面如下图所示。 O H' I9 v$ S" B
从图中可以看到Ganache会默认创建10个账户,监听地址是http://127.0.0.1:7545,可以实时看到Current Block、Gas Price、Gas Limit等信息。
7 m4 ^/ `& Q& Y/ J7 ~2 h' r$ o
创建智能合约* s& G! L8 G0 d
目前以太坊官方全力支持的智能合约开发环境是Remix IDE,我们在合约编辑页面编写如下代码:; {, u/ v/ I/ Z ?2 {
- pragma solidity ^0.4.21;6 Y3 C5 m4 i7 R! x
- contract InfoContract { 2 e9 u; d8 U( O! I: d/ a
- string fName;6 t8 D5 s/ S( T8 v* H
- uint age; $ {$ T% H2 \5 ]6 m
- function setInfo(string _fName, uint _age) public {
- fName = _fName;+ z D I$ G6 v5 p
- age = _age;
- } 1 P3 `$ x8 H( k2 I7 {8 X" b
- function getInfo() public constant returns (string, uint) {9 n: [, }' Z1 l! _7 A7 ?
- return (fName, age);& ^) U1 ]+ T9 U. ]
- }
- }
代码很简单,就是简单的给name和age变量赋值与读取,接下来切换到 run 的 tab 下,将Environment切换成Web3 Provider,并输入我们的测试链的地址http://127.0.0.1:7545,这里对这三个选项做一简单说明:0 }4 T7 K7 i. z( s: e `
Javascript VM:简单的Javascript虚拟机环境,纯粹练习智能合约编写的时候可以选择9 Q& F5 h7 i7 F H% I
Injected Web3:连接到嵌入到页面的Web3,比如连接到MetaMask
Web3 Provider:连接到自定义的节点,如私有的测试网络。/ Q$ {: b. I- Q" H( X" X$ [
如果连接成功,那么在下面的Account的选项会默认选择 Ganache 创建的第一个账户地址。接下来我们点击Create就会将我们的智能合约部署到我们的测试网中。接下来 Remix 的页面不要关闭,在后面编写前端代码时还要用到合约的地址以及ABI信息。1 v6 [0 G: v2 [/ ]6 ^$ i
4 T% C1 I' g; r+ s! q" t
安装Web3
在这之前,先在终端创建我们的项目:. o5 P- K \; l) \/ R: s! U
> mkdir info' w, `7 b" ]: P
> cd info, X/ W$ O* k- { x
接下来使用 node.js 的包管理工具 npm 初始化项目,创建package.json 文件,其中保存了项目需要的相关依赖环境。; g+ }8 |4 t) E/ b/ H$ u
> npm init
一路按回车直到项目创建完成。最后,运行下面命令安装web.js:7 N- K1 P9 Q; a+ @8 A1 X
> npm install web31 v4 z# @# F( s0 d. \
6 F7 L1 D l2 }
注意: 在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件,这个问题在issue#1041中有体现,但官方好像一直没解决。不过可以在这里下载所需的文件,解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。
0 G' m2 C" V$ {2 Y