以太坊开发学习记录(前端方向)

前言

近年来,区块链的概念炒得沸沸扬扬,各种比特币,以太币,瑞博币,数不尽数。或许你隔三差五的听到周围的哥们儿在用区块链做游戏,用区块链做政务,用区块链去改变世界。但是就是对如何入手成为一个区块链工程师感到很懵逼,感觉很难融入这个圈儿。无独有偶,小编作为一个前端er,对区块链的也感觉是可望不可即。近来,有机会学习到了以太坊区块链的相关知识,在此给大家做一个科普。以便更多的前端er快速入门,更多的有兴趣者能够更多的的了解。

基础概念

以太坊是什么

以太坊(英文Ethereum)是一个开源的有智能合约功能的公共区块链平台,通过其专用加密货币以太币(Ether)提供去中心化的虚拟机(“以太虚拟机” Ethereum Virtual Machine)来处理点对点合约。

智能合约形象的说就是一个为用户提供数据逻辑处理及存储的服务端集合。就类似于服务端语言,数据库等的组合。智能合约通过 Solidity进行开发,其语法比较简单,入门较快。通过官方推荐的IDE,remix 进行开发、编译、测试、发布。

以太坊链路

以太坊有很多的链路,所以的正式应用发布在Main主网上面,一般测试开发的话可以选用Rinkeby,Kovan,Ropsten等进行开发,当然也可以自己搭建私链进行开发。TODO 部署私链

如果使用Rinkeby的话,可以获取自己的钱包地址发布到社交平台(Google Plus, Twitter, facebook)的动态链接复制到Rinkeby官方获取 获取测试ETH。
获取界面

以太坊交互工具

合约都具有自己的ABI,其中也就是合约的接口信息,通过以太坊部署后就会有一个合约地址。通过以太坊可以查询到对应的合约信息,交易记录,事件等。Etherscan是一个以太网官方提供的为去中心化应用的数据查看分析平台。同时也有对应的测试网络 Rinkeby Etherscan,Ropsten Etherscan等。

如果不通过合约获取事件及交易记录的话,可以通过官方提供的Api接口来查询,主网API, Rinkeby API,其他同理。

普遍的通用的与合约交互的工具就是Web3.js。前端可以直接调用合约方法,而智能合约又是一个服务器与数据库的集合。所以前端和智能合约就能形成一个完整的DAPP。 然而如果服务端是Nodejs进行开发的话,也可以直接进行与合约的交互,获取数据,监听事件,设置参数等。

钱包工具

访问一个DAPP进行交易的话,需要有一个钱包工具,钱包APP有很多(因为你也可以开发一个的),推荐的有Trust Wallet。 PC端的推荐Metamask,目前已比较成熟,内部默认集成web3 0.20版本。使用钱包有一个很关键的点,也是很多新人最大的疑问,为什么不需要手机号码注册呢?因为是去中心化的产品,所以钱包地址也是根据一组 助记词来生成一个根账户的(需了解更多可以了解一下HD Wallet)。一定一定要牢记住这个助记词,因为任何人都可以拿着这个助记词来恢复你的钱包。区块链的世界,没有个人信息认证,谁拥有钱包,谁就拥有这个钱包内的数字货币的使用权。metamask界面

前端开发

如何引用Web3.js

首web3.js是一个访问智能合约的工具。在开发之前需要注意所使用的版本,0.201.0之间在API方法上会有较大的区别。比如:

0.20版本初始化合约:

1
var Contract = web3.eth.contract(abi).at(addr)

1.0版本初始化合约:

1
var Contract = new web3.eth.Contract(abi, addr, {})

仅此一点可以看到0.20与1.0在处理方式上的区别。那么我们该如何选取对应的版本呢,下面简单的做一个部分的小对比:

  • 0.20的所有的方法都是通过回调方式获取,当然可以通过bluebird进行处理。0.10的方法通过call是返回的一个Promise对象。
  • 0.20只支持IPC连接和HTTP连接,而1.0还支持Websocket连接方式。
  • 1.0在Websocket模式下提供了getPastEvents的方法,可以获取合约的历史事件。
  • 0.20的部分工具方法,在1.0中归纳到了util对象中来。
  • 1.0 中新增了subscribe方法,可以对结点的一些事件进行订阅监听。

在使用中,一般建议在数据获取中使用1.0版本,然后在发起交易的时候就用钱包自带的web3环境(目前基本上都是0.20)。那么决定了用哪个版本,那么该如何使用呢,本文的前端示例,以使用Vue为基础环境。以下为项目中的一个案例,通过建立web3.js ,然后在main.js里面引入为web3,并通过Vue.use(web3)进行插件的安装。这样,在全局都可以使用this.$web3 访问到web3对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Web3 from 'web3'
import config from '../config'
import util from './util'
export default {
install: async function (Vue, options) {
var web3 = window.web3
var tweb3 = new Web3(new Web3.providers.WebsocketProvider(config.eth.host))
if (typeof web3 !== 'undefined') {
Vue.prototype.$mweb3 = web3
Vue.prototype.$isNativeWeb3 = true
if (typeof web3.currentProvider === 'object') {
Vue.prototype.$metamask = {
isMetaMask: web3.currentProvider.isMetaMask,
isConnected: web3.currentProvider.isConnected()
}
util.getNetwork().then(res => {
Vue.prototype.$metamask.getNetwork = res
util.checkNetwork(res)
})
}
} else {
Vue.prototype.$mweb3 = tweb3
Vue.prototype.$isNativeWeb3 = false
}
Vue.prototype.$web3 = tweb3
}
}

未完待续

文章作者: liming liu
文章链接: http://unkonws.info/2018/09/27/以太坊开发学习记录(前端方向)/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 黎明