跳到主要內容區塊

計資中心電子報C&INC E-paper

技術論壇

DAPP (Decentralized Application)開發環境建置及測試
  • 卷期:v0063
  • 出版日期:2022-12-20

作者:唐瑤瑤/ 臺灣大學計算機及資訊網路中心程式設計組程式設計師


簡介

目前的Web Application.運作模式後端是中央伺服器加資料庫,對某些應用場景容易造成使用者疑慮,例如線上投票。投票時若能使用區塊鏈Blockchain的去中心化技術,將投票結果儲存在各節點中,以保障投票之公平、公正性,相信是許多人認為最適當的投票方式。本文將重點探討運行於以太坊Ethereum Virtual Machine (EVM)之投票系統DAPP測試環境建置,藉以了解去中心化應用程式運作機制。

安裝測試環境

  1. 安裝VMware Windows 10。
  2. 安裝Visual Studio 2019 (必須包含C++ Compiler)。
  3. 下載js的msi檔安裝(務必全部install 含python...)。
  4. 安裝GANACHE https://trufflesuite.com/ganache/。此為一方便利用的圖形介面應用程式,可在本機模擬以太坊私有區塊鏈。
  5. 開啟windows cmd命令提示字元,不要使用Windows PowerShell:
    1. 安裝js - Ethereum JavaScript API。指令:npm install web3。
    2. 安裝Truffle -以太坊DAPP開發測試framework,方便程式師進行智慧合約編譯、部署、測試及包裝dapp。指令:npm install -g truffle。官網連結:https://trufflesuite.com/index.html
    3. 指令:truffle init會下載空的專案範本。可至官網下載其他範本及教學,這裡不再詳述。
  6. 安裝瀏覽器Edge extension -- MetaMask。此為加密錢包app,方便使用者存取各種區塊鏈(含正式及測試)的閘道。官網連結:https://metamask.io/download/

 

測試執行

  1. 執行Ganache,選取Quick Start(ETHEREUM)如下圖,自動產生10個測試帳號,每個帳號預設有00個ETH(以太幣),只能用在測試區塊鏈上。按下帳號最右邊show keys取得私鑰,待會MetaMask會用到。


    20221220_006306_01
     

  2. 執行MataMask,按下右上角我的帳戶->設定->網路,新增測試網路GANACHE,RPC URL的設定採用上圖Ganache RPC SERVER 值http://127.0.0.1:7545


    20221220_006306_02
     

  3. 錢包裡的預設帳號Account 1若沒有任何以太幣,無法創立合約及執行交易。所以我們要將測試用以太幣ETH匯入,按右上角我的帳戶,選擇匯入帳戶,將Ganache的第一個Account私鑰匯入,如下圖。


    20221220_006306_03

     

    20221220_006306_04

    匯入成功後,MetaMask帳戶Account 2中就有100 ETH可供使用了。(只能在測試區塊鏈)

    20221220_006306_05

  4. 開啟命令提示字元 cmd,切換目錄至truffle project,編輯truffle-config.js 設定host及port值如Ganache顯示如下:

    相關程式碼請參考 https://github.com/xilibi2003/election (來源書籍:自己動手開發區塊鏈應用業務)

    網路上更詳細的程式碼教學Full Stack Hello World Voting Ethereum Dapp Tutorial Part 1, Part 2, Part 3 https://medium.com/@mvmurthy/full-stack-hello-world-voting-ethereum-dapp-tutorial-part-1-40d2d0d807c2

     

    module.exports = {

      // See <http://truffleframework.com/docs/advanced/configuration>

      // for more about customizing your Truffle configuration!

      networks: {

        development: {

          host: "127.0.0.1",

          port: 7545,

          network_id: "*" // Match any network id

        }

      }

    };

  5. 編譯合約,指令:truffle compile。編譯成功將會在build/contracts目錄下生成合約ABI檔案。
  6. 部署至區塊鏈,指令:truffle migrate,成功後檢視Ganache 的blocks會新增4個,如下圖:


    20221220_006306_06
     

  7. 執行DAPP:
    1. 命令提示字元指令:npm install lite-server(若尚未安裝)。
    2. 命令提示字元指令:npm run dev,此時會開啟瀏覽器,預設網址為http://localhost:3000/。請注意工具列的MetaMask加密錢包會有提示出現。


      20221220_006306_06
       

    3. 瀏覽器MetaMask插件會自動執行,步驟一按下MetaMask提示,步驟2選擇對應之Account 2連線。

      20221220_006306_08

       

      20221220_006306_09

       

      20221220_006306_10
       

    4. 回到瀏覽器,投票畫面將完整呈現,選擇五色鳥,按下投票。


      20221220_006306_11
       

    5. MetaMask提示訊息會再度出現詢問,是否確認此筆交易:


      20221220_006306_12
       

    6. 確認後投票頁面將顯示結果如下,且此帳號已無法再投票。


      20221220_006306_13
       

  8. 接下來測試第2個帳號Account 3,重複上面動作,匯入Ganache帳號2的私鑰,點選連線。


    20221220_006306_14
     

  9. 連線成功後,回到投票頁面,投下夜鷺一票。結果將如下圖:


    20221220_006306_15
     

  10. 回到GANACHE,會看到多了2個交易區塊。至此整個投票DAPP於私有區塊鏈測試已經成功。接下來的挑戰會是連結以太坊公有測試網路Ropsten。


    20221220_006306_16
     

 

參考URL:

從零開始架設Win10的VMware虛擬機:https://www.youtube.com/watch?v=7t_nwBdEIYY

https://web3js.readthedocs.io/en/v1.7.0/

https://ethereum.org/zh-tw/javascript/

https://trufflesuite.com/index.html