WEB3 程式開發教學,如何使用 MetaMask 連結區塊鏈
沒什麼更好的方式,比寫一個小程式,更能了解區塊鏈的運作了,看完本文,你應該就能快速認識 web3 相關技術,了解區塊鏈的運作,以及網頁如何與區塊鏈互動。
MetaMask 教學
MetaMask 是什麼
MetaMask 是一種瀏覽器延伸外掛,各種主流瀏覽器都有支援,如果你想要開始學習使用比特幣或是以太幣,或是任何加密貨幣,MetaMask 是最好的選擇,不需任何身分驗證,馬上可以擁有自己的錢包。
當然可以選擇在幣安或是其它交易所申請帳號,但必須經過身分驗證,需要上傳身分證明,大頭照等等,和去銀行開戶是一樣的意思,好處是交易所可以買賣貨幣,投資理財等功能。
MetaMask 可以讓你連上各種區塊鏈,傳送或接受加密貨幣,使用加密貨幣購買商品等。
使用 MetaMask 最大的特點是不需第三方審核、匿名、抗審查,這本來就是區塊鏈的特性,但其實區塊鏈可以追蹤,所有的交易都是公開透明,要在這一筆一筆關聯的交易當中,達到完完全全的匿名,要非常了解區塊鏈運作。
最重要的,你的資產,你自己保管,沒有人審核或保護你的資產,弄丟了就是丟了。
如何安裝 MetaMask
開啟 MetaMask 下載網頁 Download MetaMask | Blockchain wallet app and browser extension
點擊【Install MetaMask for (Your Browser)】。












選擇 Localhost 8545,後面會用到。
同樣的錢包地址,可以在不同的鏈上使用,這個錢包擁有的貨幣,就是這條鏈上的資料,需要時時注意不要搞混了。
Ganache 教學
Ganache 是什麼呢?這是一個區塊鏈工具,可以在本機建立開發用途的區塊鏈,在不是很瞭解區塊鏈的時候,裝上這個工具,寫個小小的互動程式,讓你原本從一片迷霧中觀看區塊鏈,突然看清了區塊鏈是如何運作。
如何安裝 Ganache
如果你剛好使用 MacBook,恭喜你,使用 Homebrew 只需一行指令。
brew install --cask ganache
Ganache 基本操作

點擊 QUICKSTART,Ganache 會產生 10 個以太幣錢包地址給我們,每個錢包都有 100 顆真正的以太幣 (可惜不能在 Ethereum Mainnet 使用),

- 帳號
- 區塊瀏覽器
- 交易
- 智能合約
- 助憶詞
- 錢包地址
- 以太幣數量
- 儲存區塊鏈狀態
- 密鑰 (Private Key)
這 10 個錢包地址可以匯入到 MetaMask,首先點擊鑰匙,將 PRIVATE KEY 複製起來。

點擊瀏覽器上的 MetaMask 圖示

- 點擊右上角帳號圖示
- 點擊 Import Account
- 把剛複製的 Private Key 貼上去

完成,已匯入 Account 2,100 ETH nice。

那如果我想要轉以太幣給 Account 1 呢?該如何操作?
先取得 Account 1 的錢包地址,複製起來。
切換到 Account 2,點擊 Send。





好像數字不太對,轉了 10 顆以太幣,應該還有 90 顆才對啊,礦工也需要吃飯,給點瓦斯費也是合理的。
切換到 Account 1,發現多了 10 ETH,讚。

瀏覽一下區塊狀況,第一個區塊已產生,裏面有一筆交易。

Dapp 程式開發
什麼是 Dapp 呢?Dapp 是去中心化應用程式,並不是某種技術規範,只是整合了區塊鏈的特性而開發的 APP,我們就稱之為 Dapp。
Dapp 通常有以下特性,和一般 APP 有所區別:
- 去中心化
- 使用者擁有數據的所有權
- 程式碼開源
為了達到以上特性,會將應用程式建立在區塊鏈架構上,但使用區塊鏈開發的程式就真的去中心化嗎?讓使用者擁有資料的所有權?
這可能是一些迷思,這些特性是開發者可以決定,並不一定要使用區塊鏈,一樣可以去中心化,開源系統原始碼,讓使用者擁有資料權限。
迷思:
- 使用區塊鏈開發的程式,就是去中心化的應用程式。
- 使用區塊鏈開發的程式,就保證使用者擁有數據的所有權。
- 使用區塊鏈開發的程式,不一定保證程式碼開源。
想嚐一嚐 Dapp 的滋味,不如直接來個小小測試程式。
如何使用 MetaMask 開發程式
安裝 [MetaMask 瀏覽器延伸外掛](Download MetaMask | Blockchain wallet app and browser extension) 是一定要的。
以下是在 MacBook 中示範,你必須知道如何使用 yarn,或是 npm,會一些基礎的網頁開發技術。
開啟終端機,建立一新目錄,進入目錄後,輸入如下指令
yarn init
這樣會在此目錄中初始化 node 專案。
然後輸入如下指令
yarn add lite-server
目的是安裝一個輕量的 http server,方便本機網頁開發。
輸入如下指令開啟 visual code。
code .
或是使用你喜歡的編輯器也行。
修改 package.json,新增 scripts 如下,之後在終端機輸入 yarn dev 就會啟動 localhost server。
{
"dependencies": {
"lite-server": "^2.6.1"
},
"scripts": {
"dev": "lite-server"
}
}
新增一個 metamask.html,寫一段 javascript 程式:
if (typeof window.ethereum !== 'undefined') {
console.log('MetaMask is installed!');
}
在終端機輸入指令
yarn dev
開啟瀏覽器,輸入網址 http://localhost:3000/metamask.html 。
開啟網頁開發者工具的主控台,option + command + i,就會看到 log ~ MetaMask is installed!
輸入以下程式,讓網站連結 MetaMask。
ethereum.request({ method: 'eth_requestAccounts' }).then(console.log);
執行這指令會跳出 MetaMask 視窗,需要允許這個網頁能夠讀取我們的錢包地址,和錢包結餘等。


當有多個錢包地址在切換時,使用下列事件偵測。
ethereum.on('accountsChanged', function (accounts) {
console.log(`account changed ${accounts[0]}`)
})
最重要的可以傳送以太幣~
const transactionParameters = {
to: '0x6362579e4261a2459433494Decc7D0c521BE12d8', // 目的地址
from: '0x16DA5DAAf0cBD07dE5a390E1D45B644d93AAA97E', // 來源地址
value: '0x00', // 數量, 16進制
};
const txHash = ethereum.request({
method: 'eth_sendTransaction',
params: [transactionParameters],
});
傳送 0 顆以太幣,一樣需要 gas fee。


MetaMask 提供的 API 雖然非常簡便,也是比較低階的 API,所以開發者通常會選用方便一點的 library,像是 ethers 或 web3.js,對於智能合約的交互會更好控制。
最後
只是閱讀文章得到的資訊總是似懂非懂,自己試試看比較能了解 WEB3 和區塊鏈。
以上只是純前端的 Dapp 程式,還需要智能合約程式開發,或搭配後端服務程式,才能較完整的稱為 Dapp,不過稍微淺嚐一段,對區塊鏈特性的認識,加強不少。