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!
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🤩!
