10分钟,前端工程师也能玩转区块链Web3.js开发

一个不想写后台的前端不是一个好全栈,前端也可以玩转区块链Web3.js开发。 老吴(北京志顶科技有限公司技术总监、区块链专家)针对前端工程师如何玩转Web3.js开发后端钱包这一主题,分享了自己开发后端钱包的实战经历,并慷慨地奉献了全部代码,给予了前端工程师一个近距离接触区块链开发的契机。 那么,一个前端工程师为什么要接触区块链?如何利用Web3.js开发后端红包的呢?在以太坊开发实战中,应该了解哪些概念?老吴又会在Web3.js编码方面分享给我们一些什么干货呢?希望以下内容对你有所帮助。

作者 | 老吴(北京志顶科技有限公司技术总监、区块链专家)

整理 | kou

以下为老吴在CSDN主办,区块链大本营、EthFans、柏链道捷(PDJ Education)、极客帮创投协办的「第 7 期 CSDN 区块链技术沙龙」上的发言内容,区块链大本营在不改变原意的情况下作了精心整理。

目前,有很多前端工程师存在后端转型需求,部分人还致力于向全栈工程师发展,而结合以太坊Web3会让这种转型变得更加容易,更有机会,因为区块链以太坊开发者属于稀缺性人才。

我今天主要分享的是我个人在区块链DApp开发中的实战经历,一个前端工程师如何成功转型做后端?又如何基于Web3.js开发一个后端钱包呢?

首先,我会带大家了解一下Web3和Web3.js到底是什么,在以太坊开发过程中,我们需要掌握哪些常用的基本概念;

其次,我会重点讲一下Web3.js的两个版本(v 0.2x.x和v1.0-beta),尤其是v1.0-beta,我会详细的介绍v1.0-beta的模块功能;

在这之后,我会简单分享一下Web3.js编码阶段中的一些干货;

最后,和我一起,开始Web3.js开发实战吧!

Web3.js究竟是什么

Web3的前世今生

Web时代的互联网主要用于传递信息,是信息的载体。

Web2.0开启了Web交互大时代,涌现出了很多优秀的交互平台及产品。

以太坊的出现重新定义了Web3,使之成为基于区块链进行价值传递的基础网络与价值网络。

一个JavaScript库

Web3.js是以太坊提供的一个JavaScript库,它封装了以太坊的RPC通信API,提供了一系列与区块链交互方法,使JavaScript与以太坊交互变得简单。

以太坊节点通过JSON-RPC提供外部访问接口,Web3.js是基于JavaScript和Node.js的JSON-RPC封装

JSON-RPC是一个无状态、轻量级的远程过程调用协议(RPC),与传输协议无关,可使用socket、HTTP或者其它协议,它使用JSON(RFC4627)作为数据格式。

基本概念

那么,在学习以太坊开发过程中,我们需要了解哪些概念呢?主要包括以下四点:区块(Block)、交易(Transaction)、合约(Contract)和账户(Account)。

区块、交易和账户

以太坊中区块是交易的载体,而交易则记载了账户间的信息互动。智能合约则是运行在以太坊虚拟机(EVM)上的应用。

区块:是交易的载体,包含区块数(blockNumber)、块哈希(blockHash)、交易等属性;

交易:包含在区块中,包含发起方(from)、交易对手方(to)、交易金额(Value)、哈希(Hash)等属性;

账户:账户和智能合约一样都是以太坊作为第二代区块链的标志,说到账户会包含很多概念,是账户私钥的密文,我们可以通过密码(password)解密私钥,只有拿到私钥之后才能对交易进行签名。

这里需要着重强调是,以太坊交易的状态保存在交易凭证(TransactionReceipt)中,而且即使交易被12次确认也不意味着交易在业务层面的成功,这只代表交易已经被矿工打包并在以太坊虚拟机上执行。

举一个例子,如果一个用户账户上除了以太币(ETH)之外还有其他代币,我们发起了一笔TPC(代币定价活动)的代币转账交易。此时,交易会被正常挖矿打包并得到确认,但是最终的交易结果却是失败,因为用户账户上的余额不足。

合约

合约:运行在以太坊的应用,既然是应用那么就包含编码、编译、部署、执行等方面,智能合约的出现使得人人都可以拥有自己的代币(Token Coin)。

对于Web3.js开发者而言,与合约打交道的时候很多,假如我们发行了一个ERC20的代币,想要查询某一账户该代币的余额则就需要在合约层面执行ERC20合约的标准方法balanceOf,而转账交易则需要调用合约里的transfer函数。

一起来解剖Web3.js?

v 0.2x.x

v0.2x.x对于JSONRPC的封装不够完善,基于v0.2x.x开发我们不得不借助一些第三方的封装,比如: accounts,v0.2x.x官方文档中就推荐使用第三方的accounts封装。

这里我们不是说第三方的封装就不能用或者比官方的封装差,而这从侧面反应了v0.2x.x的不完善,这并不利于我们的后续开发和维护,会提供我们的开发成本降低我们的开发效率。

v1.0-beta

在我们的钱包开发选型时,综合各种因素,最终选择了Web3.js v1.0。即使在开发基于Web的以太坊应用时,有条件的情况下,我也建议大家选用1.0,我们可以基于express构建Node.js Webserver来给我们的Web应用提供服务。

我开发的钱包服务共有三大服务,监听服务、交易服务和HTTP服务,其中HTTP服务就是基于express构建的,结合Spring Cloud / Nodejs client注册到交易网关上,提供了非常稳定的服务支撑。

安全也是一个非常重要的因素,前段时间以太坊爆出一个非常严重的安全问题,某些应用开发者通过unlockAccount方式解锁账户以便于基于该解锁账户进行各类交易,但是交易完成后并没有lockAccount,那么这一波漏洞被有心的黑客发现并利用,不间断的盗取了unlockAccount上的大量以太坊,造成了巨大损失。

Web3.js对象包含以太坊开发的一些基本单元,其中Eth和Utils为最常用的单元。Eth单元中则封装以太坊交易的核心模块,包括Subscribe、Contract、Accounts、Iban、Abi等。

Subscribe – 订阅接口,可以通过该模块的接口订阅/监听新区块、日志等,注意该模块为WebSocket模式独有;

Contract – 合约接口,与智能合约部署、调用相关,开发Token类应用(或者DAPP)的玩家多多关注;;

Accounts – 账户接口,用户新建账户、账户交易签名等等

Abi – 主要用于以太坊执行智能合约函数的数据编码,后续会详细分享。

你想知道的一些干货!

钱包节点

安装以太坊官方钱包(安装后包含geth节点)

下载地址:https://github.com/ethereum/mist/releases

我们不论进行哪类开发,都需要部署开发环境,运行一个demo输出一个hello world! 详见https://Node.js.org/en/

Web3.js开发也不例外,也需要部署开发环境。其实部署以太坊开发环境非常简单,只需要我们下载一个以太坊官方钱包,并以正确的命令启动geth就可以了。

钱包包含两部分,以太坊节点geth和钱包管理客户端Ethereum Wallet

Etherscan

Etherscan是以太坊官方推出的区块链浏览器、以太坊统计分析平台、去中心化智能合约平台,里边包罗万象是我们进行以太坊开发的好助手。可以查询交易、查询账户、查询合约、查询合约交易、查询正在打包的交易、查询交易打包时间等等。

需要注意的是,使用ehterscan的时候要分清我们是在哪个网络上做的交易。

交易

预计算的Gas与交易实际使用的Gas可能是不同,最主要的原因在于某些交易在以太坊执行的时候,Gas是根据执行函数的参数动态调整的。Number used once或Number once的缩写,在密码学中Nonce是一个只被使用一次的任意或非重复的随机数值。

gasPrice是需要我们谨慎对待的参数,因为在gasLimit一定的情况下,gasPrice越高交易就会被矿工越早打包,在不同的业务场景我们可以适当调整gasPrice的取值,通常的做法是在默认gasPrice上提高10%。

常见交易错误

接下来,我们看一下运行以下代码返回的一些错误:

out of gas:你给的矿工费不够, 提高gasLimit

Insufficient funds forgas * price + value :交易发送账户的以太坊余额不够了,或者是你的以太坊余额不足以支付矿工费了(合约部署、通证转账)

not mined within 50blocks(Transaction was not mined within750 seconds):对不起,矿工很忙,挖矿打包要排队,最近50块可能轮不到你的交易了,但是这并不意味着你的交易会失败,那会不会打包呢?通常是会被打包的,只是等的时间长而已。记录transactionHash可以通过etherscan查看交易状态,也可以额外写个程序通过getTransaction/getTransactionReceipt获取最终交易状态

手把手带你开发后端红包

Web3实例化及账户余额查询

对于以太坊来说查询交易是开放的,不需要基于账户进行交易签名。

JavaScript中数字的最大长度−9007199254740992 and 9007199254740992 (即正负2的53次方),超过这个区间的数字需要转换为BigNumber操作。

账户Token余额查询

以下为ERC20 Token余额查询的代码实例:

以太坊转账交易

LoadAccount是我们进行以太坊转账交易的基础。Nonce默认值为getTransactionCount。

1)载入以太坊账户

2)获取Nonce,以太坊转账

Token(通证)转账交易

1)dataEncoder

这是一个通用的智能合约ABI函数数据编码处理类,主要是调用web3.eth.abi.encodeFunctionCall对智能合约函数进行数据打包,而打包的数据则作为转账交易的参数。换句话讲就是,告诉EVM执行合约的哪个函数参数是怎样的。

2)EstimateGas

ContractWrapper是对基础合约函数的封装,这段代码封装了计算执行合约交易所需的Gas。主要调用myContract.methods.myMethod([param1[,param2[, ...]]]).estimateGas(options[, callback])

3)transfer

我们为什么要计算Gas?为什么不直接把gasLimit设置为4000000上限?因为以太坊交易是基于gasLimit先扣取费用的,如果所有交易都设置为gas上限,可以想象如果发起多笔交易的时候,对账户的ether余额来说是有相当压力的。

最后,附上以上分享的项目代码:https://github.com/nerverwind/web3-example

作者简介:

老吴,北京志顶科技有限公司技术总监(前端),区块链专家,资深全栈工程师。长期从事区块链应用开发研究,有丰富的Java、PHP、Javascript、Node.js区块链实战经验,近期主要基于Node.js进行以太坊钱包服务开发。

注:本文为区块链大本营(ID:blockchain_camp)原创,未经授权不得擅自转载,如要转载请联系营长,微信:qk15732632926

原文发布于微信公众号 - 区块链大本营(blockchain_camp)

原文发表时间:2018-05-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏区块链源码分析

联盟链Fabric和公有链比特币的区别

最近研究了一下联盟链的代表超级账本这个开源项目,准备再做一个Fabric的源码分析系列,本文先总结一下Fabric和比特币的一些关键性的区别或者也...

3383
来自专栏书山有路勤为径

学会使用钱包

我们分开了解,什么事以太坊地址,Keystore,助记词,明文私钥。 地址:以 0x 开头的 42 位的哈希值 (16 进制) 字符串。

702
来自专栏区块链资讯

我需要运行自己的节点吗?

我们都听说过全节点数量越多,网络安全性越高,也就越去中心化。对于用户来说,运行一个全节点也就拥有更多的自主权和安全性。因此有些用户就会选择自己运行一个完整节点。...

1596
来自专栏技术杂谈

区块链到底是什么

任何需要保存的信息,都可以写入区块链,也可以从里面读取,所以从这角度看,它可以叫做广义上的数据库,并且是分布式的。

56618
来自专栏智能计算时代

什么是区块链

区块链是支撑比特币的基础技术,是过去一年的流行语之一。几乎每个人都在谈论区块链,而且有充分的理由。分布式账本是区块链技术的艺术术语,它提供了一个令人兴奋的新方法...

2694
来自专栏区块链资讯

又一方案实现发行Token的功能,BCH平台Token即将迎来大爆发

前段时间BCH社区中提出了多种智能合约方案,如虫洞Wormhole,Bitprim的Keoken,Cryptonize.it推出的彩色币协议,另一个是由Jona...

841
来自专栏区块链

NBitcoin:一次性全部搭建

您可以在本文链接中找到所有作为示例的易于运行控制台应用程序。

1.3K9
来自专栏汇智网教程

原 区块链是什么?彻底理解只需40行pyt

尽管有人认为区块链目前还是个不成熟的解决方案,但它无疑称得上是计算机发展历史上 的一个奇迹。但是,到底区块链是什么呢? 我们将通过动手实现一个迷你的区块链来帮你...

2649
来自专栏liuchengxu

用 Go 构建一个区块链 -- Part 6: 交易(2)

翻译的系列文章我已经放到了 GitHub 上:blockchain-tutorial,后续如有更新都会在 GitHub 上,可能就不在这里同步了。如果想直接运行...

781
来自专栏Seebug漏洞平台

以太坊蜜罐智能合约分析

在学习区块链相关知识的过程中,拜读过一篇很好的文章《The phenomenon of smart contract honeypots》,作者详细分析了他遇到...

1593

扫码关注云+社区