iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 17
1
Blockchain

區塊練起來-智能合約與DApp開發系列 第 17

[區塊練起來-智能合約與DApp開發] DAY 17 - DApp 環境建置與開發工具

貼心小語

上一篇提到了 DApp 的概念及運作原理,其中我選擇使用 web3.js 以及 Angular 來開發,這篇將會一步一步把環境建置完畢。


Angular 安裝

透過 npm 來安裝:

npm install -g @angular/cli

然後我們來建立一個叫 BlockchainResume 的 Angular 專案:

ng new BlockchainResume

此時會出現是否要 Angular Route 就選擇 ,並要選擇 stylesheet 的格式,這邊選 SCSS
完成後我們要將 Angular 專案用開發模式啟動,並且會在本地端的 4200 port 上運行:

ng serve

進入 http://localhost:4200 就會看到初始畫面:
https://ithelp.ithome.com.tw/upload/images/20190831/20119338vmbLOisy6D.png

web3.js 安裝

一樣透過 npm 來安裝:

npm install web3

MetaMask 安裝

MetaMask 是非常熱門的以太坊錢包,屬於擴充功能,適用於 Chrome 、 Firefox 等瀏覽器, 它可以在Chrome上運行而不需要額外安裝專用瀏覽器,因此十分熱門。
安裝步驟如下:

  1. 進入Chrome線上應用程式商店
  2. 搜尋MetaMask
  3. 安裝MetaMask

安裝完後申請錢包的過程中,務必保存助憶詞,可以靠助憶詞匯入帳戶。
介面十分簡單,下方的圖是我整理的介面簡介:
https://ithelp.ithome.com.tw/upload/images/20190901/20119338tSqDl1S2uR.png
安裝完後我們可以先行設定連上 Ganache 私有鏈,打開切換網路選單,選擇 自訂RPC,並填入資料,預設 Ganache 的 RPC URL 為:http://localhost:7545/

BootStrap 安裝

其實這個不一定要有,因為我們主要是針對功能做開發, BootStrap 是快速做個樣式用的,如果是 Angular 老手可能會想說為什麼不用 Angular Material ,因為比起 Material , BootStrap 在某些方面套樣式比較快XD

先透過 npm 安裝 BootStrap ,用途是取得樣式:

npm install bootstrap

再透過 npm 來安裝 Angular 專用的 BootStrap 庫,用途是讓某些元件的功能可以跟 Angular 相容:

npm install @ng-bootstrap/ng-bootstrap

接著要套用 BootStrap 的樣式到全域,所以直接修正 angular.json 裡面的 styles

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
],

我們替 BootStrap 做一個 SharedModule ,有需要特定功能的元件再 import 到這個 Module 就好,然後 有需要用到的 Module 再 import 這個 BootstrapModule

ng g m modules/shared/bootstrap

然後先暫時用 Button 的當範例:

import { NgModule } from '@angular/core';
import { NgbButtonsModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    exports: [
        NgbButtonsModule
    ]
})
export class BootstrapModule { }

重新輸入 ng serve 就會套用囉!


今日小結

把該安裝的都先裝好,如:Angular 、 web3.js 以及 MetaMask 。再次提醒,千萬要把錢包的12個助憶詞記起來喔!


上一篇
[區塊練起來-智能合約與DApp開發] DAY 16 - 介紹 DApp
下一篇
[區塊練起來-智能合約與DApp開發] DAY 18 - web3.js 取得 Provider
系列文
區塊練起來-智能合約與DApp開發31

尚未有邦友留言

立即登入留言