Hi 游客

更多精彩,请登录!

比特池塘 区块链技术 正文

Web3与智能合约交互实战

zmhg799417
676 2 0
写在前面8 i: i5 @( o- u7 e  `/ y
在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互。这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dapp。因此,我们需要一种友好的方式(比如一个web页面)来与智能合约交互,于是问题的答案就是web3.js。
8 M' G! f1 M/ V; W% lWeb3.js
* `6 E$ r" x# m" }# g, SWeb3.js是以太坊官方的Javascript API,可以帮助智能合约开发者使用HTTP或者IPC与本地的或者远程的以太坊节点交互。实际上就是一个库的集合,主要包括下面几个库:) A) h2 n, q5 k" S1 O, t
web3-eth用来与以太坊区块链和智能合约交互
6 d2 T1 L! L: n1 Nweb3-shh用来控制whisper协议与p2p通信以及广播0 V, V, C8 x# O1 [
web3-bzz用来与swarm协议交互) ~& ~& Z2 S& i$ P0 j
web3-utils包含了一些Dapp开发有用的功能
% Z" ]: ~! y& {3 j3 f0 w' E9 ?2 a# MWeb3与geth通信使用的是 JSON-RPC ,这是一种轻量级的RPC(Remote Procedure Call)协议,整个通信的模型可以抽象为下图。
  R: c3 n% r/ H9 U3 Z
% ^  P# ?$ q) o# G* B2 S6 n- K( i3 }1 ?# X
搭建测试链
  y) V+ w' o9 d2 D4 G. O. d- P/ z; Z+ }在开发初期,我们并没有必要使用真实的公链,为了开发效率,一般选择在本地搭建测试链。在本文我们选择的Ganache(在此之前使用的是testrpc,Ganache属于它的升级版),一个图形化测试软件(也有命令行版本),可以一键在本地搭建以太坊区块链测试环境,并且将区块链的状态通过图形界面显示出来,Ganache的运行界面如下图所示。  O  H' I9 v$ S" B
从图中可以看到Ganache会默认创建10个账户,监听地址是http://127.0.0.1:7545,可以实时看到Current Block、Gas Price、Gas Limit等信息。
* z0 g8 c8 I9 F5 |7 m4 ^/ `& Q& Y/ J7 ~2 h' r$ o
创建智能合约* s& G! L8 G0 d
目前以太坊官方全力支持的智能合约开发环境是Remix IDE,我们在合约编辑页面编写如下代码:; {, u/ v/ I/ Z  ?2 {
  1. pragma solidity ^0.4.21;6 Y3 C5 m4 i7 R! x
  2. contract InfoContract {   2 e9 u; d8 U( O! I: d/ a
  3.    string fName;6 t8 D5 s/ S( T8 v* H
  4.    uint age;   $ {$ T% H2 \5 ]6 m
  5.    function setInfo(string _fName, uint _age) public {
    " a8 {* \/ b4 s9 _8 e) ~% E
  6.        fName = _fName;+ z  D  I$ G6 v5 p
  7.        age = _age;
    ) c, p7 {2 V3 D' y( s  Q6 p% G  v& l: Y
  8.    }   1 P3 `$ x8 H( k2 I7 {8 X" b
  9.    function getInfo() public constant returns (string, uint) {9 n: [, }' Z1 l! _7 A7 ?
  10.        return (fName, age);& ^) U1 ]+ T9 U. ]
  11.    }   
    $ `" R  u4 {9 _1 j  l5 g# B
  12. }
复制代码

8 G: k8 y+ H7 }: g代码很简单,就是简单的给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
3 e) \) b8 n5 i4 u# k- eWeb3 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
6 B' [7 c. B9 i$ ^! r在这之前,先在终端创建我们的项目:. 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
" q$ M# a( M# [  U8 i2 I' S9 j  y一路按回车直到项目创建完成。最后,运行下面命令安装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路径下。
4 \" v, s# n, @7 P' y. I  |0 G' m2 C" V$ {2 Y

8 l( U& [9 O* F  Z% d8 [7 p9 J$ E6 K! t
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

成为第一个吐槽的人

zmhg799417 初中生
  • 粉丝

    0

  • 关注

    0

  • 主题

    16