區塊鏈 Blockchain – 開發你第一個 DAPP（上）

來到了區塊鏈的下一階段－在以太坊上開發你第一個 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 就已經完成了！

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