區塊鏈 Blockchain – 開發你第一個 DAPP(上)

/ 0 評 / 0

來到了區塊鏈的下一階段-在以太坊上開發你第一個 DApp (Decentralized Application 去中心化應用)。

在開始這個部份之前,已假定你認識相關的概念或看過我以下所寫的文章,接下來就直接進入本次主題。

DApp 與 Smart Contract 的分別

區塊鏈 Blockchain – 智能合約 Smart Contract

區塊鏈 Blockchain – 以太坊測試網絡 Ethereum Testing network

開發一個 DApp 聽起來好像很難,其實不然,比起傳統的 App 來說都差不多,只是後面接起來的區塊鏈而已。

一般而言,開發 DApp 可以濃縮三個部份:

  1. 搭建本地開發環境;
  2. 編寫及部署智能合約到測試網絡;
  3. 提供交互界面 UI 及測試合約;

以上三步完成後,最後還要仔細檢查智能合約的安全性,確認無誤就可以直接部署到以太坊主網對外發佈了。

在本篇以下面的例子,按步驟動手試一次,可以了解到開發一個 DApp 究竟需要怎樣做。

目標:開發一個基於以太坊的寵物店,主要功能是展示寵物的資料及提供領養功能。

搭建本地開發環境

以 macOS Mojave 為例,我們需要用到 node.js, npm, truffle, MetaMask, ganache(下篇將會詳細介紹)

安裝 node.js 及 npm

Samson-iMac:~ samson$ brew install node

安裝 truffle

Samson-iMac:~ samson$ npm install -g truffle  #安裝 Truffle

安裝 Ganache

從官方網站下載:https://truffleframework.com/ganache

使用 truffle box 建立項目

建立完成後會看到整個項目的目錄結構:

contracts/ : 包含所有項目中智能合約 Solidity 代碼,當中還有個非常重要的 Migrations.sol 智能合約,這個容後再介紹;

migrations/ : 主要是 Truffle 用於部署智能合約的一個遷移系統;

test/ : 包含 JavaScript 和 Solidity 的 test cases;

truffle.js : Truffle 的設定檔;

至於目錄中還有其他相關文件,此處暫時先不用理會,繼續往下看

編寫及部署智能合約到測試網絡

編寫智能合約

contracts/ 目錄新增一個文件並命名為 Adoption.sol,並輸入以下代碼:

編譯智能合約

Samson-iMac:pet-shop samson$ truffle compile

顯示編譯成功,接下在準備部署合約之前,需要先告訴編譯器要部署 Adoption,所以,我們要建立一個文件"告訴"編譯器

migrations/ 目錄新增一個文件並命名為 2_deploy_contracts.js,並輸入以下代碼:

設定完畢,接下來開啟安裝好的 Ganache,它是一個本地的以太坊測試網絡的 GUI 界面的軟件,可以看到網絡內所有帳號和交易資料。

部署智能合約到測試網絡

輸入以下指令,將智能合約部署到測試網絡

Samson-iMac:pet-shop samson$ truffle migrate

可以看到我們剛才部署的智能合約已經建立成功

提供交互界面 UI 及測試合約

我們已完成了智能合約的建立和部署到我們本地的測試網絡,接下來是建立UI,令用戶能夠正常地使用寵物店應用,我們會使用名為 web3 的一款 JavaScript 庫,而最主要的文件是在/src/js/下的app.js,打開如下

基本的代碼已準備好,還需要補充一些邏輯代碼如下:

在 Chrome 瀏覽器安裝 MetaMask 插件

  1. 到 MetaMask 官方網站 https://metamask.io/ 下載安裝 MetaMask;
  2. 啟動並同意條款後,點擊 "Import using account seed phrase";
  3. 切換到 Ganache 的 Accounts 頁面下,會看到一串助記詞,將它複製並貼到 MetaMask;
  4. 按指示設置密碼;
  5. 點擊上方的 Main Network,選擇 Custom RPC;
  6. 在 New Network 輸入 "http://127.0.0.1:7545",點擊"Save";
  7. 看到上方顯示 Private Network及顯示到賬戶資料即可;

啟動 lite-server

輸入命令

Samson-iMac:pet-shop samson$ npm run dev

啟動成功會自動開啟您的 DAPP (http://localhost:3000)頁面

您可以選擇喜歡的狗,然後點擊 Adopt 領養,此時,MetaTask 將會跳出交易信息,點擊 Submit 即可,返回你的寵物店 DAPP,將會顯示 Success代表已成功領養,同時,你這筆交易亦被記錄進網絡中。

至此,您的第一個 DAPP 就已經完成了!

而下篇文章,將會詳細介紹各步驟及智能合約的邏輯代碼。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *