Eth.build Quickstart | Web3.0 dApp Dev 0x01

Web3.0 dApp Developer Growth Path | Web3.0 dApp Dev 0x02

Scaffold-Eth Quickstart | Web3.0 dApp Dev 0x03

1 Run 1.0 version locally

Let's try to run version 1.0 locally.

The 1.0 version don't need us to do much. We just need to clone the repo and start it.

1.1 Download the code, switch branch and initialize the submodules

First fork it

https://github.com/leeduckgo/set-purpose

Then clone it.

# clone Repo
git clone [forked repo]
# example: git clone https://github.com/WeLightProject/set-purpose.git
cd set-purpose
# Checkout another branch
git checkout feat/v0x01
# Initialized submodules
git submodule update --init packages/hardhat/contracts

1.2 Install dependencies

1.3 Start local test network

1.4 Deploy the contracts!

1.5 Start the application in another terminal

yarn start

1.6 Open in the browser!

Access the app:

http://localhost:3000

Now you see your application.

2 Debunk contract source code

pragma solidity >=0.8.0 <0.9.0; // Solidity version
//SPDX-License-Identifier: MIT

import "hardhat/console.sol";
// The reason why we import console.sol : https://hardhat.org/tutorial/debugging-with-hardhat-network.html, simply that we can do console.log in our contract.
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol

contract PurposeHandler { // Name of contract

  //event SetPurpose(address sender, string purpose);

  string public purpose = "Building Unstoppable Apps!!!"; // define and assign a variable purpose. This variable is directly stored on the blockchain. That is the unique feature of solidity: Assign is storing.

  constructor() {
    // what should we do on deploy?
  }

  function setPurpose(string memory newPurpose) public {
          // A function that pass newPurpose as parameter
          // You can learn more about memory/storage:
          // https://learnblockchain.cn/2017/12/21/solidity_reftype_datalocation
      purpose = newPurpose; // Update purpose to be newPurpose
      console.log(msg.sender,"set purpose to",purpose);
      //emit SetPurpose(msg.sender, purpose);
  }
}

3 Deploy your app on Github-pages

Becuase our web3.0 app is a pure front end application, we don't need to purchase or rent a server. We can just deploy the app on GitHub.

3.1 Switch network to test network in React app

Aha! Here is the first part that we need to change our code. Locate the following code at packages/react-app/src/App.jsx:

const targetNetwork = NETWORKS.localhost; // <------- select your target frontend network (localhost, rinkeby, xdai, mainnet)

Switch localhost to the test network that we want to deploy, like ropsten.

const targetNetwork = NETWORKS.ropsten;

Then we refresh the page, and we can see that it pops an alert to connect the test network.

Use metamask to connect the test network. Before that, we need some ETH to call the contract:

Ropsten faucet: https://faucet.ropsten.be/

3.2 Switch network to Ropsten network in Hardhat

This determines which network we are connecting in Hardhat.

Go to packages/hardhat/hardhat.config.js:

const defaultNetwork = "localhost";

Change localhost to ropsten。

const defaultNetwork = "ropsten";

3.3 Redeploy the contract

Since we changed the network, we need to redeploy our contract

We need to generate a new address in hardhat:

yarn run generate

Tips No.1：

You can see all the commands in package.json!

Tips No.2:

git basic commands:

git add . # add all changes
git commit -m "[msg]" # commit all changes
git push

Well, now we have a new ETH address of 0x1c95a91e74872ead0a4c726712cfdfab3292f284. We will use this address to deploy contracts.

Let's get some test ETH for the address:

Then run yarn deploy:

Oh, now our contract is on Ropsten test network!

https://ethereum.stackexchange.com/questions/65589/return-a-mapping-in-a-getall-function

We can find it on Etherscan:

3.3 Generate static websites

First we need to have a new branch to host all the static websites:

git checkout -b gh-pages

The best practice is to put this branch in another folder, so that our changes to gh-pages won't affect other files:

git checkout feat/v0x01
git worktree add ../set_purpose_gh_pages gh-pages

Run the following commands, and static pages that can be hosted on Github-pages are generated:

Websites are generated at packages/react-app/build, then we copy the folder's files to docs folder:

mkdir docs
cp -r packages/react-app/build/* ../set_purpose_gh_pages/docs

Delete the rest of the folders:

rm -rf packages package.json yarn.lock node_modules

Everything look great! Let's push this branch:

g add .
g commit -m "feat/init gh-pages"
git push --set-upstream origin gh-pages

3.4 Github-pages settings

We still need to set something in the Github repo pages. We go to Settings>Pages to set Branches and Folder.

Click the link in the green box. Now we see the first web3 Dapp we created!

https://leeduckgo.github.io/set-purpose

Tips No.3: Git Submodule

Sometimes our repo may rely on other repos. Then we need to use Git Submodule.

Other than that, we need to split the chunks of code to make the project structure better.

For example, we split the code of set-purpose and set-purpose-contracts in this tutorial.

Here is the cheatsheet for commands of git submodule:

# browse the help
git submodule -h
# add submodule
git submodule add https://github.com/leeduckgo/set-purpose-contracts.git
# clone all the submodules of repo
git clone --recurse-submodules https://github.com/leeduckgo/set-purpose.git
# only update selected submodule
# --init is the parameter required for the first update. The following is the path of submodule.
git submodule update --init packages/hardhat/contracts

Authors：

Scaffold-eth is a template for Ethereum dApp, and a combination of the best dApps. Scaffold-eth can help developers build app with efficiency and less bugs. It is a great resource for beginner developers of web3.0 dApp.

Scaffold-eth has the following components:

• hardhat: run local Ethereum network to deploy and test smart contract

• React: build front end with preset UI components and functional hooks

• Ant: build customized UI and use Bootstrap or other libraries for front end

• Surge: deploy and publish projects

• Tenderly / The Graph / Etherscan / Infura / Blocknative...

• Supports for L2 / Sidechains

Swift deployment

Environment

Scafford Eth is based on Node.js, so you need to install node.js and yarn.

Deploy Scaffold-eth scaffold

1. Fetch scaffold source code

git clone https://github.com/austintgriffith/scaffold-eth.git

1. Open up 3 terminals

TIPS: Many Terminal app supports split screen feature.

1. run 👷‍ Hardhat chain in the first terminal:

cd scaffold-eth
yarn install
yarn chain

1. deploy the smart contract at /scaffold-eth/packages/hardhat/contracts/ in the second terminal:

cd scaffold-eth
yarn deploy

1. run front end app in the third terminal:

cd scaffold-eth
yarn start

The sample contract under main branch stores and read the values. You can find the contract at /scaffold-eth/packages/hardhat/contracts/ and modify it then redeploy.

TIPS：

If you are interested in other contracts, you can checkout other branch to deploy different Dapp services. switchable branches with different contracts for example nft contract branch https://github.com/scaffold-eth/scaffold-eth/tree/simple-nft-example

play with the application

Back to the previous process. Now we have our contract deployed and front end and local chain network running.

Below is the code of the deployed contract.

pragma solidity >=0.8.0 <0.9.0;
//SPDX-License-Identifier: MIT

import "hardhat/console.sol";
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol

contract YourContract {

  //event SetPurpose(address sender, string purpose);

  string public purpose = "Building Unstoppable Apps!!!";

  constructor() {
    // what should we do on deploy?
  }

  // Storing purpose varible
  function setPurpose(string memory newPurpose) public {
      purpose = newPurpose;
      console.log(msg.sender,"set purpose to",purpose);
      //emit SetPurpose(msg.sender, purpose);
  }
}

The contract sets a public string variable purpose. The default value for purpose is "Building..." It also provides a setPurpose method to modify the purpose variable.

Conclusion

We built our Dapp with the scaffold scaffold-eth. Using hardhat, we can deploy local test network, switch networks and deploy your contracts in any networks. Here is the Quickstart for scaffold-eth.

About authors

Author: Core member of Nonce Geek Studio.

Contact the author:

WeChat: thf056 QQ: 1290017556 Email: 1290017556@qq.com

Github: https://github.com/99kies

CSDN: https://blog.csdn.net/qq_19381989

Translater：

msfew

Authors’ Information:

leeduckgo

xiaoyue

Eth.build is a educational Web3.0 sandbox with following features:

• No-code drag and drop programming

• Fully open-source

• Visualized workflow of Ethereum

Official website:

https://eth.build/

Youtube playlist:

https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi

Repository:

https://github.com/austintgriffith/eth.build

Eth.build Quickstart

Loading tutorial examples

Click "learn more". You will see a lot of tutorial examples. You can click the button to load and watch the tutorial!

Basic practices: getting the balance of ETH address

This is a simple demo that realize the feature that get the balance of ETH address.

We can learn the usage of eth.build from this example.

STEP 0x01. Create Text Block

Click INPUT>TEXT to create a text input box. INPUT has a set of input box components.

STEP 0x02. Create Balance Block

Click WEB3>BALANCE to create a balance box，WEB3 is a series of realization of ETH Web3 features, which is similar to the realizations in ether.js.

Looking at this block, you can see it is composed of three parts: INPUTS, hidden operation, and OUTPUTS. So, from computer's POV, these blocks can be viewed as a visualization of functions.

STEP 0x03. Link Text and Balance

We connect Text's output to Balance input, then they are linked.

STEP 0x04. Enter an address!

Copy and paste an address into Text. Oops! Our input of Balance becomes an integer.

STEP 0x05. Wei to ETH

Well, that's an integer, cause the unit of the number is wei. We can convert the unit to ETH, so we need to add two more blocks.

"Utils>From Wei" and "DISPLAY>WATCH". Utils is the set of universal components. DISPLAY is the set of output components.

STEP 0x06. Show it to ur FRIENDS！

That's all! You finished your first eth.build project, and you can show off in front of all your friends!

SAVE > Share, then you can get a link, send that link to your friend so that they can see the project:

STEP 0x07. Download your project

Maybe you want to save the project in your computer for later work.

Click "Save>Download" and "Load>Load From File".

More!

No-code Ethereum blockchain browser:

https://eth.build/build#3c50b1af5fd2956e808ac4d3132a9d063b8e2f9eac3b44d3971fe83165d5d0b8

From this example, we can see some advanced development of eth.build.

0x01. Modify the property

By modifying the Properties, we can modify blocks such as BUTTON, WATCH and etc. That will be nicer and customized. For example, I will have 0x01 as the number of click events for the buttons.

0x02. Title and QR code

By clicking "DISPLAY>TITLE", we can add title to our project.

Apart from that, we can add our contact QR code to the project!

Download QR code from your social media, then convert the QR code to URL by using tools like this(https://www.patrick-wied.at/static/qrgen/), then paste the url into Text. That's it!

Here is the QuickStart of eth.build. It has many more tricks to learn🤩！

Authors’ Information:

Leeduckgo

Msfew

区块链（英语：blockchain[1][2][3]或block chain[4][5]）是借由密码学[1][6]串接并保护内容的串连文字记录（又称区块）。

每一个区块包含了前一个区块的加密散列、相应时间戳记以及交易资料（通常用默克尔树（Merkle tree）算法计算的散列值表示）[7]，这样的设计使得区块内容具有难以篡改的特性。用区块链技术所串接的分布式账本能让两方有效记录交易，且可永久查验此交易。

——维基百科词条：区块链

这样的定义固然很正确，但是，一方面，这样的定义依然难以被普通人所理解；另一方面，我们也难以通过这个定义去理解「区块链技术为什么是赛博世界的重要基石」这个命题。

所以，我打算通过一个关于 「王国、国王与黑暗国王」 的寓言故事，来聊聊「到底什么是区块链」。

寓言故事中的对应关系说明：

王国——系统

外界——用户

国王——节点程序（国王和臣民共同构成节点服务器）

臣民——计算资源

黑暗国王——恶意节点程序

角色间关系简述：

• 外界向国王发送请求，请求包含「存储」和「计算」两个部分。

  • 「存储」的例子：帮我存储一个数字/帮我读取一个你之前存储的数字。

  • 「计算」的例子：告诉我 5 + 1 等于几。

• 国王将任务拆解，统筹臣民去完成任务。 例如外界给国王的请求是国王你帮我计算1*2*3*4*……*100，国王将任务拆解成很多小任务，臣民A负责计算1*2、臣民B负责计算3*4…… 暗黑国王可能会实施多种破坏行为，如拦截国王的信使；如收到外界的请求后，故意给出错误的回答（外界问 5 + 1 等于几，故意回答等于 8）。

1 单体时代——独裁统治

在很久很久以前，有一个王国，这个王国的国民秩序井然地从事着工作与生活，并向外界提供服务，这个王国仅有一个国王，国王负责给所有臣民下达指令，统筹完成一个个目标。

一切看上去很Okay，直到有一天，国王吃了绿色的蘑菇，食物中毒了。国民失去了指挥，王国陷入瘫痪，提供给外界的服务中断。在上帝救活国王之前，整个国家是停止运作的。

在 1946 年，计算机最初诞生的时候，我们的计算机系统大部分为单体系统。单体系统的最大问题是只要因为各种原因出现单点故障，那么这个系统就会停止运行，直到程序员处理了问题为止。

2 分布式系统时代——共同决策

为了解决这个问题，一个叫做 Lamport 的上帝发明了一种被称为 Paxos 的机制，让多个国王共同治理王国。

治理方式为：外界（用户）向身份为「提议人（Proposer）」的国王发出提案，例如提议调整税率。提议人国王将提案发送给其它的所有国王。其他的国王收到提案后，进行投票表决。多数一致的提案，则通过。因为所有国王都是可信的，所以臣民有疑问的时候，只要咨询任意状态正常的国王即可。

这样的话，即使有一个或几个国王食物中毒，其他的国王依然能按照机制维持王国的运转，王国解决了单体时代存在的问题，迈入了被称为「分布式系统时代」的新时代。

但是，一些新的问题浮现了——

黑暗国王问题：

国王之中出现了「黑暗国王」（可能是原有的国王被邪恶势力劫持）。黑暗国王会恶意伪造信息，例如，即使判断提案合理，依然投出否决票。

信使拦截问题：

国王之间通过信使传递信息。即使没有「黑暗国王」，也可能出现信使被截杀，从而伪造信息的情况。

因此，制度需要进一步升级，可以在存在「黑暗国王」与「信使拦截」问题的情况下，也确保整个国家正常运行。

专业术语版：

1990年，Lamport 发表了一篇论文，提出了 Paxos 共识协议（Paxos Protocols），可以确保在分布式系统在存在非拜占庭错误的情况下，只有有超半数的节点正常运作，那么这个系统就能正常运作。

**非拜占庭错误：**出现故障( Crash Failures，即不响应）但不会伪造信息的情况称为「非拜占庭错误」( non-byzantine fault）或「故障错误」( Crash Fault）。

拜占庭错误：伪造信息恶意响应的情况称为「拜占庭错误」( Byzantine Fault），对应节点为拜占庭节点。

3 分布式系统 2.0 时代——允许黑暗

王国在进一步发展，上帝 Castro 和 Liskov 在 Paxos 机制的基础上，提出了新的机制，这种机制被称为 PBFT。这种机制依然是基于投票表决，但是和上一个时代的机制有如下差异：

• 因为有「可能存在黑暗国王」这种前提假设，所以在投票过程中国王会相互通信。这样，假设有黑暗国王A，告诉国王B我同意提案α，但告诉国王C我不同意提案α。在上一个时代，这种行为无从被察觉。但是，现在在B和C收到了A的回答后，由于B和C会互相通信，那么他们核验之后，就会发现A给他们两个的回答不一致。

• 每个国王在收到 2/3*国王总数+1 个其它国王的相同的答复后，会告知提案请求人（Client）自己的答复。

• 当提案请求人接收到 1/3*国王总数+1 个相同的答复后，便确定自己的提案被正确处理了。

这种新的制度无疑是长足的进步，但是依然存在两方面的问题：

1. 国王间需要频繁通信，在国王很多的情况下效率急剧下降；

2. 很难做到让国王随意地加入和退出。

专业术语版：

1999年，Castro 和 Liskov 提出了 PBFT 实用拜占庭容错算法（Practical Byzantine Fault Tolerance Replication Algorithm），该算法可以容纳拜占庭错误和非拜占庭错误。在 PBFT 的假设中，恶意节点可能做出如下行为：

• 可能做出随机的或错误的答复或请求；

• 可能延迟或拒绝应答；

• 可能通过拒绝服务攻击正常节点，使之不能正常提供服务。

设总节点数为 N 个，在恶意节点 ＜ (N-1)/3 的情况下，PBFT 系统可以确保正常运算，不出现节点无法达成一致的问题，

4 区块链时代——自由世界

最终，王国到达了「区块链时代」。一个叫 Satoshi 的上帝引入了一种新的机制，这种机制叫做基于工作量的证明（PoW：Proof Of Work）。然后，Satoshi 给这个王国设立了一个具体的目标——记账。

任何外界人人都可以到这个王国来开设自己的账户，他们所拥有的钱，以及他们的每一笔转账记录，都会被记录到同一个大账本上。国王们只有一个使命：维护账本的唯一性且无前后矛盾。

• 账本唯一 —— 确保能存在一个账本被大家共同认可。

• 无前后矛盾 —— 不会有一笔钱花了两次，例如：小明不能拿五块钱买了冰棍，又拿同一笔钱买了辣条。

需要注意的一点是，和传统的中心化的记账系统不同的是，国王无需关心用户的密码问题。通过被称为密码学的自然法则，国王可以在不知道用户密码的情况下，验证用户是不是花的自己的钱。

简单来说，他们是通过如下机制来达成他们的使命的：

• 外界将他们的交易（交易举例：我要把10块钱转给小明）寄送给任意一个在线的国王。

• 收到交易的国王将这些交易寄送给其它的国王。

• 所有收到交易的国王要做出一道算术题，才可以将交易打包进一个区块里。区块是这个大账本中的基本单元，多笔交易包含在一个区块里。

  这个算术题有两个特点：

  1）算术题的难度是动态调整的，调整根据是最近2016个区块的叠加速度，如果过去区块叠加速度快了，那么就把算术题难度调大；如果过去区块叠加速度慢了，就把算术题难度调小。任意国王根据自己本地的账本就能计算出来。正是这个动态调整机制，确保了记账速度平均是 10 分钟出一个区块。也就是你发一笔交易，平均来说10分钟左右，你的交易会被记录到大账本里。

  2）交易的「身份证号」和上一个区块的「身份证号」是这个算术题中的变量之一，这样确保没有人能「抢跑」，提前把算术题算好。

  **信息的「身份证号」：**通过一种被称为哈希的方法，任意信息都能生成一串固定长度的「身份证号」。一堆交易可以生成一个身份证号，一个区块也可以生成一个身份证号。每一块数据的身份证号都是独一无二的。如果别人同时给我们数据和身份证号，那么我们可以用数据算出身份证号，然后看下我们自己计算出的数据的身份证号和别人给的是否一样，从而判断数据是不是被篡改过。

• 做出算术题的国王，把新的区块放到上一个区块的上面，也即给大账本添加了一些包含在区块中的新的交易，同时把新的区块寄送给其它国王。

• 其它国王收到区块后，验证区块的正确性——验证区块里面的交易是不是正确、算术题的答案是不是正确等等。如果验证通过，那么其它国王也会把这个区块放在他们本地的上一个区块上面。这时，他们再做算术题，就要依据新的区块的「身份证号」了。

  **区块链中的链式结构：**每一个区块中都包含了上一个区块的「身份证号」。

  一方面，这种结构让我们可以从最后一个区块追溯到最开始的那个区块。

  另一方面，这种结构也让过去的区块不能改动。因为一旦发生改动，这个区块的身份证号就变了，和已经保存在下一个区块里的这个块的身份证号就对不上了。

• 在整个过程里，所有国王坚持一个原则：**始终把区块数量最多的账本视为唯一账本。**这样，一方面确保了有一个被所有国王都认同的唯一账本；另一方面，即使偶然出现了出现了两个具有相同区块数量的账本，那么就让各个国王在自己收到的账本上，继续叠加区块，那么最终一定会有一个账本「脱颖而出」，成为包含区块数量最多的账本。

• 做出算术题的国王是有奖励的。这个奖励作为一笔特殊的交易写在这个国王打包的区块里。这个交易的内容用大白话就是：「系统奖励给打包这个区块的国王 α N元」。国王们在最开始的时候已经商量好了，这个 N 每四年减半，所以，这个系统里的钱的总量是固定的。

如果你是通过本文第一次接触区块链，那么上面的机制会有些复杂，可以先略过不看，仅领略这件事情达到的目标就行了，也就是——

「实现了一个所有国王共同维护的大账本，记录所有用户的交易记录，这个大账本可以确保全世界只有唯一的一份」。

在这个新的机制下，分布式系统 2.0 时代的问题被解决了。我们现在可以：

1. **容纳无数个国王。**不管国王有多少个，1 个或 100000000 个，记账速度始终是平均 10 分钟一个块。

2. **国王可以随意上线或下线。**因为只要有 1 个国王能做出系统出的计算题，那么这个系统就能正常运行。

专业术语版：

中本聪（Satoshi Nakamoto）在 2008 年发布了题为《比特币：一种点对点式的电子现金系统》的论文，该论文中提出了一种和传统的 BFT 共识机制不同的思路，通过工作量证明（PoW），可以让系统在能容纳拜占庭错误与非拜占庭错误的前提下，将通信复杂度从 BFT系列共识算法 的O(N^2)降低到O(N)，确保无论节点有多少，全网打包出块的速度是平均 10 分钟一个块。

在该论文中，这种新的共识机制被用于一个被称之为「比特币」的分布式记账系统。记账系统中的货币被称之为比特币。同时，为了确保会有节点自愿加入系统，参与区块打包，该论文中还设计了货币发行机制兼出块奖励机制。

2009 年，比特币系统正式开始运行，这是历史上第一个区块链系统。

5 新区块链时代——群雄逐鹿

在上一个时代，区块链这个概念正式登上了历史舞台。

但是，第一个区块链系统——比特币的目的非常纯粹，就是记账。此外，它还存在一个问题：因为国王们都在争做计算题，所以对计算资源与电力都会造成大量消耗。

因此，上帝们又有了新的想法：

1）区块链这种链式结构很好，我们不仅能用它来记账嘛，我们还可以用来做些别的什么，例如在交易里带上指令，在让所有的国王同时运行一个程序？——这个想法被付诸实践，也就成为了现在被人们所熟知的智能合约技术。

2）我们能不能在PBFT（分布式系统 2.0 时代）这类机制的基础上做改进，或者用另一种方式来确认哪个国王能出块？——这个想法被付诸实践，也就成为了现在五花八门的共识机制，除了 PoW、BFT 以外，还有 PoS（基于权益的证明）、PoC（基于容量的证明）等等等等。

3）系统中一定要有代币作为奖励吗？如果没有代币，只是做一个相较于传统的「分布式系统」具有更高自由度、开放度的「超级分布式系统」（我们依然称之为区块链），可以吗？——这个想法被付诸实践，也就成为了现在我国新基建的重要组成部分——「联盟链」。

6 总结

笔者认为，放到分布式系统发展的整个历程中去看，我们会发现区块链实际上是计算机技术发展的必然产物，从而真正地理解「区块链是什么」这个命题。

而「区块链是什么」这个命题，正是「为什么我们需要区块链」、「区块链究竟有哪些落地应用」、「为什么我国将区块链视为新基建的重要组成部分」等等关于区块链的命题的基础与原点，就像是直角坐标系中的（0, 0）。

理解了原点，便可以说，我们已经迈入了「区块链世界」的大门，这个世界里有许多新的机会、可能与想象空间。

欢迎来到区块链世界：）。

本文作者： 李大狗

简介： 李骜华（李大狗），上海对外经贸大学区块链技术与应用研究中心副主任，柏链教育CTO，首批FISCO BCOS（微众银行区块链框架）区块链认证讲师，Web3 dApp developer, 专注于区块链与函数式编程。

个人二维码：

• 无代码拖拽式编程

• 完全开源

• 可视化地直观地理解以太坊的工作方式

主页地址：

https://eth.build/

Youtube 学习频道：

https://www.youtube.com/playlist?list=PLJz1HruEnenCXH7KW7wBCEBnBLOVkiqIi

Repo 地址：

https://github.com/austintgriffith/eth.build

Eth.build 极速上手

加载现成的教学案例

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

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

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

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

STEP 0x01. 创建 Text Block

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

STEP 0x02. 创建 Balance Block

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

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

STEP 0x03. 链接 Text 与 Balance

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

STEP 0x04. 输入一个地址！

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

STEP 0x05. Wei to ETH

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

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

STEP 0x06. Show it to ur FRIENDS！

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

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

STEP 0x07. 本地保存

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

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

进阶玩法

无代码以太坊区块链浏览器：

https://eth.build/build#3c50b1af5fd2956e808ac4d3132a9d063b8e2f9eac3b44d3971fe83165d5d0b8

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

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

0x01. 修改属性值

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

0x02. 标题与个人二维码

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

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

从微信下载个人二维码后，通过草料二维码（https://cli.im/deqr）将二维码转换为`URL`，输入`Text`中即可。

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