Hi 游客

更多精彩,请登录!

比特池塘 区块链技术 正文

Web3与智能合约交互实战

zmhg799417
1045 2 0
写在前面
/ \( a  g: y3 y$ `3 P  s9 i$ U* h在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dapp。因此,我们需要一种友好的方式(比如一个web页面)来与智能合约交互,于是问题的答案就是web3.js。6 C" _7 ]9 i) S
Web3.js+ N" }" v( T  I0 s
Web3.js是以太坊官方的Javascript API,可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合,主要包括下面几个库:
% Y5 @8 y; N# I8 }/ I- gweb3-eth用来与以太坊区块链和智能合约交互9 K7 o0 D1 j' C4 T
web3-shh用来控制whisper协议与p2p通信以及广播
- E$ X% R5 [! N/ p2 aweb3-bzz用来与swarm协议交互5 k2 S( W0 j% O6 I6 S) h7 {
web3-utils包含了一些Dapp开发有用的功能) w  n. c& W- z3 s* W% [! T
Web3与geth通信使用的是 JSON-RPC ,这是一种轻量级的RPC(Remote Procedure Call)协议,整个通信的模型可以抽象为下图。0 @2 V' g" h2 s5 P  L0 z6 z

8 \% h/ X8 l9 H
' g/ `+ l! B$ E& S$ I1 P搭建测试链6 h) X  {7 W- e$ ]6 f* [
在开发初期,我们并没有必要使用真实的公链,为了开发效率,一般选择在本地搭建测试链。在本文我们选择的Ganache(在此之前使用的是testrpc,Ganache属于它的升级版),一个图形化测试软件(也有命令行版本),可以一键在本地搭建以太坊区块链测试环境,并且将区块链的状态通过图形界面显示出来,Ganache的运行界面如下图所示。  `3 o+ B: s+ [  e9 Q
从图中可以看到Ganache会默认创建10个账户,监听地址是http://127.0.0.1:7545,可以实时看到Current Block、Gas Price、Gas Limit等信息。
% y: ~6 V  z# T) E/ g! d* o2 _7 E  J
7 j5 D3 K% e7 g2 N3 G创建智能合约8 W- B, o3 l- a) {
目前以太坊官方全力支持的智能合约开发环境是Remix IDE,我们在合约编辑页面编写如下代码:, E- l! F, t( _% z4 G: e
  1. pragma solidity ^0.4.21;
    " ~& t' O, A' q8 D& z
  2. contract InfoContract {   % _% V, u7 q2 j- q. ?  Y' s
  3.    string fName;
    / u3 f& P. S) Y$ q. M5 @
  4.    uint age;   
    4 A" J6 ?% R- @9 x: v5 d. k8 v7 i6 T
  5.    function setInfo(string _fName, uint _age) public {1 p8 ?/ P( R7 A9 F  ]! r' v
  6.        fName = _fName;! F( _& C6 p- V$ F$ p4 a
  7.        age = _age;
    0 n' S$ f" m. n7 B: A6 b
  8.    }   
    7 a$ D9 n6 l& |2 a! T
  9.    function getInfo() public constant returns (string, uint) {* H1 U5 M3 _2 Z8 o
  10.        return (fName, age);
    + x+ K3 K1 W& M0 b1 t6 a
  11.    }   6 K2 \3 R) K1 Q1 s
  12. }
复制代码

0 }; y5 F1 s" |' ^- R  o% i# u代码很简单,就是简单的给name和age变量赋值与读取,接下来切换到 run 的 tab 下,将Environment切换成Web3 Provider,并输入我们的测试链的地址http://127.0.0.1:7545,这里对这三个选项做一简单说明:; I) a9 B9 F, E& _  W
Javascript VM:简单的Javascript虚拟机环境,纯粹练习智能合约编写的时候可以选择
' k2 ^% w8 r6 ?' @6 V5 lInjected Web3:连接到嵌入到页面的Web3,比如连接到MetaMask) a2 n# Z" L+ R+ |: b! G; R
Web3 Provider:连接到自定义的节点,如私有的测试网络。
- t& g7 _  a0 f9 O& L如果连接成功,那么在下面的Account的选项会默认选择 Ganache 创建的第一个账户地址。接下来我们点击Create就会将我们的智能合约部署到我们的测试网中。接下来 Remix 的页面不要关闭,在后面编写前端代码时还要用到合约的地址以及ABI信息。6 ^, w9 g1 ?9 z( \) v
- K3 }5 _# p5 S6 m
安装Web3
8 P5 ^% U2 N; I; R在这之前,先在终端创建我们的项目:
0 u) h( P# l) }* F> mkdir info1 k& u, n- Q* v9 I0 f2 v
> cd info
) s1 \: y3 q! X4 D5 `6 K接下来使用 node.js 的包管理工具 npm 初始化项目,创建package.json 文件,其中保存了项目需要的相关依赖环境。
2 e0 w! l  Q' }1 a8 I> npm init
! z/ [2 m* Z1 A: o1 P9 k7 @. n一路按回车直到项目创建完成。最后,运行下面命令安装web.js:( A& T( U& j  I4 ?+ L. t
> npm install web32 F' _5 Z) Y4 C! J. x1 T, z

: i+ Q; E& e9 Q9 R7 x注意: 在实际安装过程中我发现web3在安装完成后并没有 /node_modules/web3/dist/we3.min.js 文件,这个问题在issue#1041中有体现,但官方好像一直没解决。不过可以在这里下载所需的文件,解压后将dist文件夹的内容拷贝到 /node_modules/web3路径下。
5 s6 k) x2 a& {3 `3 Y/ g
% M; Q1 r# t1 B7 T3 S
6 q: G- i2 Q2 f
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

成为第一个吐槽的人

zmhg799417 初中生
  • 粉丝

    0

  • 关注

    0

  • 主题

    16