Eth.build Overview

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!

image-20210917102528583
image-20210917102633107
image-20210917102938705

Basic practices: getting the balance of ETH address

image-20210917104531017

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.

image-20210917104858238

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.

image-20210917113330225

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.

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

image-20210917113718107

STEP 0x04. Enter an address!

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

image-20210917113848959

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.

image-20210917114243087

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!

image-20210917114533319

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

image-20210917114727200

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.

image-20210917122822025

0x01. Modify the property

image-20210917122804436

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.

image-20210917122956248

0x02. Title and QR code

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

image-20210917123424682

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

image-20210917123505349

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!

image-20210917123708696

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