以太坊智能合約編寫part3
在構建以太坊應用程序時，我們會編寫智能合約以及基於這些智能合約的應用程序。 為了讓我們的應用程序能夠與以太坊網路上的智能合約交互（或與以太坊網路本身交互），我們需要應用程序能連接到以太網路上的節點(伺服器)。 作為開發人員，我們有三個選擇：
- 在以太坊測試網路上啟用公司的節點，這可以是地端或雲端的機器，然後將我們的應用程序連接到該節點。
- 使用公司合作夥伴的節解，如果是個人開發可能可以詢問周遭的朋友。
- 使用 Infura.io 這一類的雲端服務，它有基本的免費版本。如果需要更多功能的付費版它當然也有。
Infura.io提供的遠端的以太坊與IPFS(星際檔案系統 — Interplanetary FileSystem)的端點服務(endpoint service)。本文的範例將會使用Infura.io的免費版本作為我們的練習。
第一步:註冊Infura
打開Infura的網頁https://infura.io/，並進行註冊。然後在這個頁面中建立一個我們要練習的project。
要create project請點選”create new key”(如上圖)。
再來就是為這個project命名了，請填入異於辨別的名稱。並且Network請選擇 Web3 API(如上圖)。
完成後我們會看到有一個API Key，這個之後我們會需要用到(如下圖)。
第二步:安裝web3.js 工具
web3.js是一個 JavaScript library，這是一個可以讓我們用CLI的方式與區塊鏈節點溝通的工具。基本上區塊鏈網路節點的溝通是採用 JSON RPC的介面，所以只要我們的開發程式可以使用JSON RPC的方式溝通，用甚麼語言開發都可以。
我們需要在我們的Linux或Mac電腦上安裝這一項工具。若我們使用的是Windows電腦，可以使用VM的方式。在這裡的示範電腦是使用在Windows電腦直接安裝Ubuntu Linux。有興趣的讀者可參考這一篇微軟的文件。
架設我們已經有Linux or Mac環境，請直接使用以下命令
npm install web3
要確認web3工具能不能work，請key node的命令(如下圖)。
接下來我們要用這一個工具檢查我們在小狐狸中的錢包餘額。輸入的命令如下:
> let infuraProjectId = “我們的project ID”;
project ID請尋找剛剛我們在infura.io新建的project(如下圖)。請注意，由於我們是使用測試網路，所以網路是選擇GORLI。project ID則是網址v3之後一長串的數字。
接下來的命令是:
> let metamaskWallet = ”你的小狐狸錢包地址”;
>let Web3 = require(“web3”);
>let web = new Web3(new Web3.providers.HttpProvider(“你在infura.io的點點網址”));
> web3.eth.getBalance(metamaskWallet).then(balance => console.log(balance));
如果一切正常則會如下畫面顯示
第三步:建立一個標準的智能合約平台
在以太坊智能合約編寫part1中我們使用了Remix來編寫我們的智能合約。接下來我們為我們在Part1的編寫智能合約的做一個User Interface，這個UI會連接到到middle layer。而Middle layer最後會跟我們的智能合約交互。
之前我們使用Remix來開發/編譯/佈署我們的智能合約，這一次我們將要使用Ganache(以前稱為TestRPC)，這是一個將佈署環境運作在我們畚箕的電腦上。在Windows環境可以在Windows App store找到。其他的OS可以在官網上找到。
安裝完成後會看到如下畫面
預設情況下，Remix IDE 會將我們的智能合約部署到其內部的以太坊網絡模擬的“JavaScript VM”。 在這裡，我們將改為將合約部署到 Ganache 。 我們可以通過Ganache expose的端點地址做到這一點。 Ganache 介面中有一個“RPC SERVER”端點地址。 這是我們將填入到Remix 連接到的地址。
如上圖所示，我們在Deploy&Run transactions的選項中。我們選擇環境是Ganache Provider(如上圖)。接著將endpoint 的port改成Ganache所示(如下圖)。
這時佈署與運作環境就已經轉到Ganache上了(如下圖)。其中CREATED CONTRACT ADDRESS的位址是我們後面會用到的。
為了能讓我們在本機電腦執行web3 library，我們需要安裝web.js(如下圖)，我們做一個空的資料夾，在這個資料夾中安裝web3.js。並且之後相關的代碼都放在這個位置。
製作簡易的前端網頁
我們在asset這個資料夾編寫 index.html與 main.css的檔案，在這裡我們使用Visual Studio來編寫(如下圖)。
在index.html檔中有兩個參數我們需要修改(如下圖)
這兩個參數我們們可以從Ganache中找到(如下圖)。其中myAccountNumber就是Ganache的FROM ADDRESS，而myContractAddress等同於CREATE CONTRACT ADDRESS 。
再來我們要確認web32的運作環境是不是如同跟Ganache所設定的一樣(如下圖)。
更新ABI(Application Binary Interface)
為了讓我們的UI與我們的智能合約交互，它需要定義合約的界面。 這個界面對我們的 UI 描述智能合約的內容，並通知UI哪些功能可用以及如何呼叫它們等。 所以這是一個智能合約對外的接口。
智能合約在編譯時會產生兩樣東西。一個bytecode，這是智能合約在實際運作在以太網路的程式。另一個就是ABI，一個智能合約與外界溝通的界面(如下圖)。
而溝通的方式如下圖。
所以我們的前端程式需要知道ABI的位址。而在Remix中，ABI位址在Solidity Compile(如下圖)。
貼上後就會向下圖一樣。
如果一切正常會看到如下畫面。下圖中我們會看到現有存在於智能合約中的資料。
我們可以試著重新update內容(如下圖)。
update asset之後重整網頁(再次從合約中擷取最新的資料)。
