# eth.build 快速上手 | Web3.0 dApp 开发（一）

By [leeduckgo](https://paragraph.com/@leeduckgo) · 2021-10-17

---

Eth.build 是一个聚焦于 Web3.0 的教育型沙盒，具备如下特性——

*   无代码拖拽式编程
    
*   完全开源
    
*   可视化地直观地理解以太坊的工作方式
    

> **主页地址：**
> 
> [https://eth.build/](https://eth.build/)
> 
> **Youtube 学习频道：**
> 
> [https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi](https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi)
> 
> **Repo 地址：**
> 
> [https://github.com/austintgriffith/eth.build](https://github.com/austintgriffith/eth.build)

Eth.build 极速上手
--------------

### 加载现成的教学案例

点击「learn more」，会弹出很多现成的教学案例，可点击按钮进行加载或查看教学视频！

image-20210917102528583

image-20210917102633107

image-20210917102938705

### 基础操作实践：以以太坊余额抓取为例

image-20210917104531017

这是一个简单的例子，实现了从以太坊抓取余额的功能。

我们可以通过这个例子来学习`eth.build`的使用。

#### STEP 0x01. 创建 Text Block

通过`INPUT`\>`TEXT`创建一个文本输入框。`INPUT`是输入组件的集合。

image-20210917104858238

#### STEP 0x02. 创建 Balance Block

通过`WEB3`\>`BALANCE`创造一个余额查询块，`WEB3`是一系列以太坊`WEB3`功能的实现，和`ether.js`中的实现等价。

image-20210917113330225

观察这个Block，会发现抽象来看它由三部分组成：输入`INPUTS`、处理（隐藏）和输出`OUTPUTS`，因此，这些 Blocks，从计算机的角度可以看做是函数`Functions`的可视化。

#### STEP 0x03. 链接 Text 与 Balance

我们将 Text 的输出连上 Balance 的输入，这两个 Block 就链接起来了。

image-20210917113718107

#### STEP 0x04. 输入一个地址！

随便找到一个地址，将其复制到`Text`中，我们会发现`Balance`的输入变成了数字。

image-20210917113848959

#### STEP 0x05. Wei to ETH

但这是一个整数，因为这个数字的单位是`wei`，我们可以将其转换为`ETH`，所以我们再添加两个Block——

「`Utils`\>`From Wei`」和「`DISPLAY`\>`WATCH`」。Utils 是通用组件的集合，DISPLAY 是输出组件的集合。

image-20210917114243087

#### STEP 0x06. Show it to ur FRIENDS！

好了，你已经完成了你的第一个`eth.build`作品，你可以把它 show 给你的朋友！

image-20210917114533319

`SAVE` > `Share`，你会获得一个网址，你可以把这个网址发给你的朋友，他打开就能见到你的作品：

image-20210917114727200

#### STEP 0x07. 本地保存

也许你需要把它保存在本地，以便于之后的加载。

「`Save`\>`Download`」和「`Load`\>`Load From File`」可以满足你的需求。

### 进阶玩法

> 无代码以太坊区块链浏览器：
> 
> [https://eth.build/build#3c50b1af5fd2956e808ac4d3132a9d063b8e2f9eac3b44d3971fe83165d5d0b8](https://eth.build/build#3c50b1af5fd2956e808ac4d3132a9d063b8e2f9eac3b44d3971fe83165d5d0b8)

这是一个无代码版本的以太坊区块链浏览器！

通过这个例子我们可以康康`eth.build`有哪些进阶玩法。

image-20210917122822025

#### 0x01. 修改属性值

image-20210917122804436

通过`Properties`的修改，我们可以给`BUTTON`、`WATCH`等Block修改名称等属性值，这样就呈现更加友好。例如我会用`0x01`等标记上按钮的点击顺序。

image-20210917122956248

#### 0x02. 标题与个人二维码

通过「`DISPLAY`\>`TITLE`」我们能给作品显眼地标记上自己的大名。

image-20210917123424682

除此之外，我们还能通过`Text`和`QR`的组合在作品上加上个人二维码！

image-20210917123505349

从微信下载个人二维码后，通过草料二维码（[https://cli.im/deqr）将二维码转换为\`URL\`，输入\`Text\`中即可](https://cli.im/deqr%EF%BC%89%E5%B0%86%E4%BA%8C%E7%BB%B4%E7%A0%81%E8%BD%AC%E6%8D%A2%E4%B8%BA%60URL%60%EF%BC%8C%E8%BE%93%E5%85%A5%60Text%60%E4%B8%AD%E5%8D%B3%E5%8F%AF)。

image-20210917123708696

`eth.build`快速上手就到这里，这个「神器」还有很多玩法可以挖掘🤩。

---

*Originally published on [leeduckgo](https://paragraph.com/@leeduckgo/eth-build-web3-0-dapp)*