Hi 游客

更多精彩,请登录!

比特池塘 区块链技术 正文

Web3与智能合约交互实战

zmhg799417
772 2 0
写在前面
! v) [+ ~# U8 q- F1 T$ F在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dapp。因此,我们需要一种友好的方式(比如一个web页面)来与智能合约交互,于是问题的答案就是web3.js。
/ i( q( W1 s8 jWeb3.js6 A* i! S+ G, P% R! P
Web3.js是以太坊官方的Javascript API,可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合,主要包括下面几个库:8 Y- W! V* s* W3 B- b" ]* b
web3-eth用来与以太坊区块链和智能合约交互
) g8 X5 @) Y; P' o8 q- O/ tweb3-shh用来控制whisper协议与p2p通信以及广播# o/ P4 m6 W( n
web3-bzz用来与swarm协议交互
1 e4 H5 D. `: V& mweb3-utils包含了一些Dapp开发有用的功能. Q- j* u1 {" C! O7 V) T) |2 F
Web3与geth通信使用的是 JSON-RPC ,这是一种轻量级的RPC(Remote Procedure Call)协议,整个通信的模型可以抽象为下图。
% f* R2 f. L) {% x
  \# m+ F9 \5 l* r! H( h
; Z9 n% W: |; A+ I' j1 X搭建测试链
1 U7 u# v  S7 q' e在开发初期,我们并没有必要使用真实的公链,为了开发效率,一般选择在本地搭建测试链。在本文我们选择的Ganache(在此之前使用的是testrpc,Ganache属于它的升级版),一个图形化测试软件(也有命令行版本),可以一键在本地搭建以太坊区块链测试环境,并且将区块链的状态通过图形界面显示出来,Ganache的运行界面如下图所示。
! p+ D/ ~, h- ]) r9 Y  m从图中可以看到Ganache会默认创建10个账户,监听地址是http://127.0.0.1:7545,可以实时看到Current Block、Gas Price、Gas Limit等信息。1 U+ U  P2 P) T3 B2 _

$ B, [6 m9 ]# p5 D创建智能合约
# M/ r) C$ c, L: T3 r$ e目前以太坊官方全力支持的智能合约开发环境是Remix IDE,我们在合约编辑页面编写如下代码:
7 ?6 v7 W; T% g2 a/ h! C3 c
  1. pragma solidity ^0.4.21;2 {# G! @, y0 D/ z2 U* P+ H  V: g
  2. contract InfoContract {   . I; J# q( S- H" {- H! x7 p
  3.    string fName;, M1 y! a! J  a$ [" K1 o! Y. l: L
  4.    uint age;   
    7 p2 C( B+ E: x$ o
  5.    function setInfo(string _fName, uint _age) public {5 `+ J( R: i) R3 \, ~1 n9 w
  6.        fName = _fName;& o  O8 `/ m4 ?7 W# v) O# H
  7.        age = _age;. E) J0 c- }! v2 g& b6 ^7 h% V
  8.    }   
    , }1 c7 c; F# c  |# U+ G- G
  9.    function getInfo() public constant returns (string, uint) {
    2 F9 L) A0 N/ d4 P# K- M( j* O* _
  10.        return (fName, age);1 y& ?, A* v) d
  11.    }   + X( k( L* ~$ D/ N7 p% e* g- N
  12. }
复制代码

+ S/ r; D  ?. Q5 t6 A  M  M# D代码很简单,就是简单的给name和age变量赋值与读取,接下来切换到 run 的 tab 下,将Environment切换成Web3 Provider,并输入我们的测试链的地址http://127.0.0.1:7545,这里对这三个选项做一简单说明:9 |2 e4 a: X$ g% X
Javascript VM:简单的Javascript虚拟机环境,纯粹练习智能合约编写的时候可以选择( A1 b0 _5 X  Z- e* W
Injected Web3:连接到嵌入到页面的Web3,比如连接到MetaMask4 x1 ^& b$ \& F# q7 N- B6 l5 n3 r6 }* m
Web3 Provider:连接到自定义的节点,如私有的测试网络。) J) w6 r4 s' B
如果连接成功,那么在下面的Account的选项会默认选择 Ganache 创建的第一个账户地址。接下来我们点击Create就会将我们的智能合约部署到我们的测试网中。接下来 Remix 的页面不要关闭,在后面编写前端代码时还要用到合约的地址以及ABI信息。9 b- d6 k. s, b) _0 b" o
* F% e8 n9 {; |3 O8 {1 }$ u0 G$ E
安装Web3
# A$ C2 ^* l' ^7 G在这之前,先在终端创建我们的项目:: E- i0 X& ?2 _
> mkdir info9 F$ u- N, F6 y
> cd info- @/ ]3 R! k& \- e, c
接下来使用 node.js 的包管理工具 npm 初始化项目,创建package.json 文件,其中保存了项目需要的相关依赖环境。0 {! [# r: k1 [$ ~, I
> npm init: D, h6 y% N$ G
一路按回车直到项目创建完成。最后,运行下面命令安装web.js:
: K0 ^3 z8 P8 ?0 d> npm install web32 W6 B; ?3 u) a) S
4 _' f* G2 o+ v1 W
注意: 在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件,这个问题在issue#1041中有体现,但官方好像一直没解决。不过可以在这里下载所需的文件,解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。, A, c4 v6 S3 ?. f
0 c" P  @1 A5 K* h1 v6 @$ O! C. j, v
4 P" g: e7 j9 `% {0 K
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

成为第一个吐槽的人

zmhg799417 初中生
  • 粉丝

    0

  • 关注

    0

  • 主题

    16