eth.build 快速上手 | Web3.0 dApp 開發(一)

買賣虛擬貨幣

eth.build 簡介

eth.build 是一個聚焦於 web3.0 的教育型沙盒,具備如下特性——

?無程式碼拖拽式程式設計?完全開源?視覺化地直觀地理解以太坊的工作方式

主頁地址:

https://eth.build/

youtube 學習頻道:

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

repo 地址:

https://github.com/austin**riffith/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快速上手就到這裡,這個「神器」還有很多玩法可以挖掘。

(來源:李大狗leeduckgo


免責聲明:

  1. 本文版權歸原作者所有,僅代表作者本人觀點,不代表鏈報觀點或立場。
  2. 如發現文章、圖片等侵權行爲,侵權責任將由作者本人承擔。
  3. 鏈報僅提供相關項目信息,不構成任何投資建議

推荐阅读

;