区块链交互的去中心化应用程序使用 web3.js 和 Ethers.js 库

下面我们来点实在得，对于我们前端开发，我们想要开发驻留并与区块链交互的去中心化应用程序，就必须使用 web3.js 和 Ethers.js 库。

web3.js

web3.js 是一个JavaScript API库。要使 DApp 在以太坊上运行，我们可以使用web3.js库提供的web3对象。web3.js 通过RPC调用与本地节点通信，它可以用于任何暴露了RPC层的以太坊节点。web3 包含 eth 对象 - web3.eth（专门与以太坊区块链交互）和 shh 对象 - web3.shh（用于与 Whisper 交互）

添加web3

将 web3 引入到你的工程中，其实跟我们现有的引用方式基本一致

npm: npm install web3

bower: bower install web3

metor: meteor add ethereum:web3

vanilla: dist./web3.min.js

使用

然后你需要创建一个web3的实例，设置一个provider。为了保证你不会覆盖一个已有的provider，比如使用Mist时有内置，需要先检查是否web3实例已存在

if (!web3) {

  web3 = new Web3(web3.currentProvider);

} else {

  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

}

复制代码

由于这套API被设计来与本地的RPC结点交互，所有函数默认使用同步的HTTP的请求。如果你想发起一个异步的请求。大多数函数允许传一个跟在参数列表后的可选的回调函数来支持异步

web3.eth.getBlock(48, function(error, result){

  if(!error)

      console.log(result)

  else

      console.error(error);

})

复制代码

API的具体目录可以点击查看

Ethers.js

为以太坊区块链及其生态系统提供一个小而完整的 JavaScript API 库 它最初是与 ethers.io 一起使用，现在已经扩展为更通用的库。功能上基本和web3.js差不多。

特点如下：

将私钥保存在客户端，安全 可信赖

可支持导入和导出的 JSON钱包文件 （Geth，Parity和crowdsale）

从任何合同ABI创建JavaScript 元类对象，包括 ABIv2 和 可读的 ABI

支持通过 JSON-RPC，INFURA ， Etherscan 或 MetaMask 连接到以太坊节点。

库 非常小 （压缩~88kb;未压缩284kb）

工具

当然除了上面这些，我们也会用到很多工具去完善我们的开发

Truffle: 提供了一个使用以太坊虚拟机编译和测试智能合约的开发环境，用作项目中的构建依赖项

Remix IDE: 编写和使用智能合约的完美环境，我们可以使用它直接从浏览器创建、修改和执行智能合约。它更像是一个编辑器

MetaMask: 一个 Chrome 扩展程序，可让您从浏览器连接到以太坊区块链网络

Ganache: 提供了一个本地区块链环境来测试您的智能合约

构建

我们想构建一个全栈 Dapp 如果您想为项目添加用户界面，react.js、vue.js 或 angular.js 是很好的 javascript 前端框架，因为它们可以使用 ethers.js 或 web3.js 轻松与区块链网络集成。有多种平台可让您在不编写代码的情况下创建完整的 Dapp比如：Bunz、Dapp builder、Atra io、Bubble io

结论

总的来说，Web3.0 不是一种技术，而是一个概念。我们前端开发者也不用很慌张，不管技术发展成什么样子，都会用到前端。我们可以利用我们 react.js、vue.js 或 angular.js 去为我们自己开发的 Dapp 应用去搭建属于我们自己的平台，也可以利用 nodejs 通过使用web3.js这个以太坊提供的工具包，来完成合约的编译，发布，合约方法调用的一整个流程。