Hi 游客

更多精彩,请登录!

比特池塘 区块链技术 正文

Web3与智能合约交互实战

zmhg799417
635 2 0
写在前面# d: V2 K! a& ?  b/ G$ M7 O
在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dapp。因此,我们需要一种友好的方式(比如一个web页面)来与智能合约交互,于是问题的答案就是web3.js。, ]+ w; y# {( i! F+ |
Web3.js
' ~2 _  n! X  I/ B' V% Q( Y8 L' SWeb3.js是以太坊官方的Javascript API,可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合,主要包括下面几个库:! r3 [; N% V. d# J. g; z& ^
web3-eth用来与以太坊区块链和智能合约交互
. b; ^3 Y" V* B2 I+ p' Dweb3-shh用来控制whisper协议与p2p通信以及广播
1 b* ]# u$ }+ Eweb3-bzz用来与swarm协议交互/ n; ^4 h2 \7 r- J. @( Z; {
web3-utils包含了一些Dapp开发有用的功能1 o; D, j. e1 D2 r
Web3与geth通信使用的是 JSON-RPC ,这是一种轻量级的RPC(Remote Procedure Call)协议,整个通信的模型可以抽象为下图。
5 f* i# r; D! R* C" I, J$ _8 _' [" z2 u6 W/ h  I- I+ N
- x! D  c( d. L6 E  w! \: E' J
搭建测试链
3 F$ Y4 |* g9 I在开发初期,我们并没有必要使用真实的公链,为了开发效率,一般选择在本地搭建测试链。在本文我们选择的Ganache(在此之前使用的是testrpc,Ganache属于它的升级版),一个图形化测试软件(也有命令行版本),可以一键在本地搭建以太坊区块链测试环境,并且将区块链的状态通过图形界面显示出来,Ganache的运行界面如下图所示。
+ P" y2 k. h3 J4 J6 O9 K7 V5 w从图中可以看到Ganache会默认创建10个账户,监听地址是http://127.0.0.1:7545,可以实时看到Current Block、Gas Price、Gas Limit等信息。0 }$ w, S0 I/ L1 B% P3 k
+ t, ?0 S4 R! r) h7 O2 ^3 k5 u
创建智能合约
- M# V6 P4 g$ F) P% T目前以太坊官方全力支持的智能合约开发环境是Remix IDE,我们在合约编辑页面编写如下代码:
+ W! R1 t9 z% W, P6 ]; x$ g
  1. pragma solidity ^0.4.21;
    - j% b, n7 `; H3 m5 Z7 S
  2. contract InfoContract {   6 l, e6 I& m8 D
  3.    string fName;* H$ K) y8 P. `2 N8 ]# p5 \; d
  4.    uint age;   
    , w3 Z3 e; r, s- V2 R
  5.    function setInfo(string _fName, uint _age) public {  b( J6 D9 T# g& R$ B- a4 g
  6.        fName = _fName;
    & P* P' C! r) e0 F0 B
  7.        age = _age;0 H2 C1 m/ C# s% l3 U
  8.    }   ) g! c' P2 `  I+ s5 `9 b- V8 l7 X
  9.    function getInfo() public constant returns (string, uint) {
    7 f# g; k# z' P5 @# Y
  10.        return (fName, age);' M; t9 R9 K, }2 [- J) J
  11.    }   , M, m1 V5 Q7 e# q) i: j$ e3 \
  12. }
复制代码

5 b$ B0 g8 V# w: B: k5 e代码很简单,就是简单的给name和age变量赋值与读取,接下来切换到 run 的 tab 下,将Environment切换成Web3 Provider,并输入我们的测试链的地址http://127.0.0.1:7545,这里对这三个选项做一简单说明:
( P3 {4 l% G: Y! ~" JJavascript VM:简单的Javascript虚拟机环境,纯粹练习智能合约编写的时候可以选择
& J$ Y% t' Y" S' _0 y! SInjected Web3:连接到嵌入到页面的Web3,比如连接到MetaMask
. ~: ]5 @( l4 M2 j- W5 L2 tWeb3 Provider:连接到自定义的节点,如私有的测试网络。7 A6 V7 g* N2 x4 \: `+ P
如果连接成功,那么在下面的Account的选项会默认选择 Ganache 创建的第一个账户地址。接下来我们点击Create就会将我们的智能合约部署到我们的测试网中。接下来 Remix 的页面不要关闭,在后面编写前端代码时还要用到合约的地址以及ABI信息。' V4 w4 ^4 \, ~; y9 H# p* _! H

$ r6 u# Q2 X! L安装Web3
( [+ w( Y! D% f在这之前,先在终端创建我们的项目:
# k7 M" l! k' X8 X> mkdir info! h# t* h2 o4 k6 L! d/ g' K- Z
> cd info
6 Y' P: n- ~* R. d6 F: b$ f接下来使用 node.js 的包管理工具 npm 初始化项目,创建package.json 文件,其中保存了项目需要的相关依赖环境。
9 ?" G8 g. P4 _8 t5 d- _> npm init
7 [* o) \( n' `  o一路按回车直到项目创建完成。最后,运行下面命令安装web.js:
* b4 g( x% e$ W: F' r> npm install web3
' t+ w; l" J. c2 O* o) p
: c* A0 P; K# x( x6 R注意: 在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件,这个问题在issue#1041中有体现,但官方好像一直没解决。不过可以在这里下载所需的文件,解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。
0 L' }4 \! e2 u0 s8 Y& U/ N/ }/ j1 a& P, e. v+ |/ W3 I

( ~' D, H3 `4 C8 C
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

成为第一个吐槽的人

zmhg799417 初中生
  • 粉丝

    0

  • 关注

    0

  • 主题

    16