Etherscan教學：新手必看！從交易查詢到Gas費用，搞懂以太坊區塊鏈瀏覽器

Etherscan教學：新手必看！從交易查詢到Gas費用，搞懂以太坊區塊鏈瀏覽器

  Etherscan教學 Gas費用是什麼 Txn Hash查詢 以太坊交易查詢 以太坊區塊鏈瀏覽器 錢包地址分析 鏈上數據

想踏入Web3世界卻不知從何開始？近年來，隨著加密貨幣與區塊鏈技術的蓬勃發展，去中心化應用（DApp）的需求與日俱增，也吸引越來越多開發者投入這個藍海市場。本篇以太坊開發教學將提供一份完整的學習路線圖，帶你從DApp開發入門觀念建立，到實際操作業界主流的Truffle框架實戰與Web3.js前端互動，手把手完成你的第一個去中心化應用，解決你學習路徑混亂、資訊破碎的痛點。

DApp開發入門：你需要知道的核心觀念

在實際動手寫程式之前，建立正確且扎實的基礎觀念至關重要。這能幫助你在開發過程中更清楚自己正在做什麼，並在遇到問題時有能力追本溯源。讓我們從以太坊、智能合約，以及DApp的底層運作原理開始，為你的DApp開發入門之路打下穩固的基石。

什麼是以太坊與智能合約？

以太坊（Ethereum）不僅僅是一種像比特幣一樣的加密貨幣，它更是一個開源的、去中心化的區塊鏈平台。它允許開發者在其上建立和部署「智能合約」（Smart Contracts）。

  • 以太坊 (Ethereum): 可以想像成一台「世界電腦」，由全球成千上萬的節點共同維護，提供一個無法被單一實體操控、公開透明且永遠在線的運行環境。
  • 智能合約 (Smart Contract): 這是一段部署在以太坊區塊鏈上的程式碼。當預設的條件被滿足時，合約內的程式碼就會自動執行。它就像現實世界中的合約，但執行過程是自動化且不可竄改的，消除了中介機構的需求，例如銀行或律師。

簡單來說，智能合約是DApp的後端邏輯核心，而以太坊就是承載這些智能合約的底層平台。所有DApp的狀態改變與交易紀錄，都會被公開透明地記錄在以太坊的帳本上。

DApp的運作原理與架構解析

DApp（Decentralized Application）即「去中心化應用」。與傳統的App（例如Facebook或LINE）將後端程式碼與資料庫部署在中心化伺服器不同，DApp的核心邏輯（智能合約）是運行在去中心化的區塊鏈網路上。

一個典型的DApp架構包含以下幾個部分：

  • 前端 (Frontend): 使用者直接互動的介面，通常由React、Vue等網頁技術開發。這部分與傳統Web開發沒有太大差異。
  • 錢包 (Wallet): 例如MetaMask，作為使用者與區塊鏈互動的橋樑。使用者透過錢包管理自己的加密資產，並對交易進行簽名授權。
  • Web3.js / Ethers.js: 這是一個JavaScript函式庫，負責將前端的請求翻譯成區塊鏈看得懂的格式，並與以太坊節點溝通，是前端與智能合約之間不可或缺的翻譯官。
  • 智能合約 (Smart Contract): 部署在以太坊區塊鏈上，處理所有業務邏輯與狀態儲存，是DApp的後端核心。
  • 以太坊網路 (Ethereum Network): 由全球眾多節點組成的去中心化網路，負責運行智能合約並儲存所有交易紀錄。

了解這個架構，有助於你在進行以太坊開發教學的學習時，清楚掌握每個工具在生態系中所扮演的角色。

必備工具：Node.js, Ganache, MetaMask介紹與安裝

在開始實戰之前，我們需要先建置好開發環境。以下是三個在DApp開發入門階段最重要的工具：

  1. Node.js & npm: Node.js是一個讓JavaScript能在伺服器端運行的環境。npm則是其套件管理器，我們將用它來安裝Truffle、Web3.js等開發工具。請至Node.js官網下載並安裝LTS（長期支援）版本。
  2. Ganache: 一個個人的本地以太坊區塊鏈。它能讓你快速啟動一個用於開發和測試的區塊鏈環境，並提供10個預設帳戶，每個帳戶都有100個ETH的測試幣。這讓你可以在不花費任何真實Gas Fee的情況下，進行智能合約的部署與測試。可至Truffle Suite官網下載桌面應用程式。
  3. MetaMask: 最受歡迎的瀏覽器錢包插件。它讓你的瀏覽器能夠直接與DApp互動。使用者透過MetaMask管理帳戶、簽署交易，是Web3世界最重要的入口。請至MetaMask官網安裝對應的瀏覽器擴充功能。

請確保以上三項工具都已正確安裝並能正常運作，這是進行後續Truffle框架實戰的基礎。

Truffle框架實戰：高效部署你的第一個智能合約

環境都準備好了嗎？接下來，我們要進入本篇以太坊開發教學的重頭戲——使用Truffle框架來開發、編譯、部署我們的第一個智能合約。Truffle是一套功能強大的開發套件，能大幅簡化DApp的開發流程。

步驟一：使用Truffle初始化專案

首先，打開你的終端機（Terminal或Command Prompt），建立一個新的專案資料夾並進入該資料夾。

mkdir MyFirstDApp
cd MyFirstDApp

接著，我們需要全域安裝Truffle。如果尚未安裝，請執行以下指令：

npm install -g truffle

安裝完成後，使用truffle init指令來初始化你的專案：

truffle init

執行成功後，你會看到Truffle幫你建立了一些預設的資料夾與檔案：

  • contracts/: 存放Solidity智能合約原始碼的地方。
  • migrations/: 存放部署腳本的地方，Truffle會依照編號順序執行。
  • test/: 存放合約測試腳本的地方。
  • truffle-config.js: Truffle專案的設定檔，包含網路設定、編譯器版本等。

步驟二：撰寫與編譯Solidity智能合約

現在，讓我們來撰寫一個簡單的智能合約。在contracts/資料夾中新增一個名為SimpleStorage.sol的檔案，並貼上以下程式碼：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.13;

contract SimpleStorage {
    uint256 private storedData;

    function set(uint256 x) public {
        storedData = x;
    }

    function get() public view returns (uint256) {
        return storedData;
    }
}

這個合約非常簡單，它包含：

  • 一個名為storedData的私有變數，用來儲存一個數字。
  • 一個set函式，可以讓我們傳入一個數字來更新storedData。
  • 一個get函式，可以讀取目前storedData的值。

寫好合約後，回到終端機，執行編譯指令：

truffle compile

如果一切順利，Truffle會將編譯後的合約ABI（Application Binary Interface）等資訊存放在build/contracts/資料夾中。ABI就像是智能合約的API說明書，讓外部應用（如Web3.js）知道如何與這個合約互動。

步驟三：設定部署腳本並連接Ganache本地鏈

合約編譯完成後，我們需要告訴Truffle如何將它部署到區塊鏈上。首先，打開truffle-config.js檔案，找到networks的設定區塊，並取消註解development網路的設定，讓它看起來像這樣：

networks: {
  development: {
    host: "127.0.0.1",     // Localhost (default: none)
    port: 7545,            // Standard Ethereum client port for Ganache
    network_id: "*",       // Any network (default: none)
  },
},

這裡的port: 7545需要對應你本機上Ganache運行的RPC伺服器端口，預設通常是7545。請確保你的Ganache應用程式正在運行中。

接著，到migrations/資料夾，新增一個名為1_deploy_simple_storage.js的檔案（檔名前面的數字很重要，代表執行順序），並加入以下內容：

const SimpleStorage = artifacts.require("SimpleStorage");

module.exports = function (deployer) {
  deployer.deploy(SimpleStorage);
};

這個腳本的作用很單純：引入我們剛剛寫好的SimpleStorage合約，並使用Truffle提供的deployer物件將它部署出去。

步驟四：成功部署合約到鏈上

所有準備工作都已就緒！現在，讓我們執行最後的部署指令，將合約部署到Ganache本地鏈上：

truffle migrate --network development

--network development這個參數會告訴Truffle使用我們在truffle-config.js中設定好的development網路。執行後，你應該會在終端機看到部署過程的詳細資訊，包含交易Hash、合約地址、花費的Gas等。同時，在Ganache的介面上，你也會看到其中一個帳戶的ETH餘額減少了，這就是部署合約所花費的Gas Fee。

恭喜！你已經成功完成了Truffle框架實戰中最關鍵的一步——將智能合約部署到區塊鏈上。

Web3.js教學：打造與DApp互動的前端介面

智能合約部署上鏈後，它就像一個在雲端的後端程式，但一般使用者無法直接與它互動。這時，我們就需要一個前端介面，並透過Web3.js教學來學習如何串連起使用者、錢包與智能合約。

Web3.js是什麼？它如何連接以太坊？

Web3.js是一個強大的JavaScript函式庫集合，它允許我們的前端應用程式透過HTTP或IPC連線與本地或遠端的以太坊節點進行互動。簡單來說，它扮演的角色是：

  • 翻譯官: 將JavaScript的函式呼叫，轉換成以太坊節點能理解的JSON-RPC請求。
  • 橋樑: 建立前端應用與以太坊區塊鏈之間的溝通管道。
  • 工具箱: 提供一系列便利的工具，讓我們可以查詢區塊鏈狀態、發送交易、與智能合約互動等。

透過Web3.js，開發者不需要深入了解以太坊底層的P2P協議，就能輕鬆地在網頁上打造功能完整的DApp。

實作：串接MetaMask錢包讀取帳戶資訊

首先，我們需要在前端專案中引入Web3.js。你可以使用npm安裝：

npm install web3

接著，在你的JavaScript檔案中，你可以用以下程式碼來偵測並連接使用者瀏覽器中的MetaMask錢包：

import Web3 from 'web3';

let web3;
let userAccount;

async function connectWallet() {
    if (window.ethereum) {
        web3 = new Web3(window.ethereum);
        try {
            // 請求使用者授權帳戶
            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
            userAccount = accounts[0];
            console.log('錢包已連接，帳戶地址：', userAccount);
            // 可以在此處更新UI，顯示帳戶資訊
        } catch (error) {
            console.error('使用者拒絕連接錢包');
        }
    } else {
        alert('請先安裝MetaMask！');
    }
}

// 監聽帳戶切換事件
if (window.ethereum) {
    window.ethereum.on('accountsChanged', (accounts) => {
        userAccount = accounts[0];
        console.log('帳戶已切換：', userAccount);
    });
}

這段程式碼會檢查window.ethereum物件是否存在（由MetaMask注入），若存在則建立一個新的Web3實例，並跳出視窗請求使用者授權連接。成功後，我們就能取得使用者的錢包地址。

實作：調用智能合約的讀取與寫入功能

連接到錢包後，下一步就是與我們部署好的SimpleStorage合約互動。我們需要兩樣東西：合約的ABI與合約的地址。

ABI可以在專案的build/contracts/SimpleStorage.json檔案中找到。合約地址則可以在執行truffle migrate時的終端機輸出中找到。

// 接續上一段程式碼

// 替換成你的合約ABI與地址
const contractABI = [ ... ]; // 從SimpleStorage.json複製完整的ABI
const contractAddress = 'YOUR_CONTRACT_ADDRESS';

// 建立合約實例
const simpleStorageContract = new web3.eth.Contract(contractABI, contractAddress);

// 讀取數據 (呼叫get函式)
async function readData() {
    const data = await simpleStorageContract.methods.get().call();
    console.log('從合約讀取到的資料：', data);
    // 將data顯示在UI上
}

// 寫入數據 (呼叫set函式)
async function writeData(value) {
    if (!userAccount) {
        alert('請先連接錢包');
        return;
    }
    
    // 傳送交易，這會觸發MetaMask跳出簽名視窗
    simpleStorageContract.methods.set(value).send({ from: userAccount })
        .on('transactionHash', (hash) => {
            console.log('交易Hash:', hash);
        })
        .on('receipt', (receipt) => {
            console.log('交易已確認:', receipt);
            readData(); // 寫入成功後，重新讀取一次資料更新UI
        })
        .on('error', (error) => {
            console.error('交易失敗:', error);
        });
}

在這段程式碼中：

  • .call()用於呼叫智能合約中不會改變區塊鏈狀態的唯讀函式（如get），它不需要花費Gas，可以立即得到結果。
  • .send()用於呼叫會改變區塊鏈狀態的寫入函式（如set），它需要由使用者帳戶發起交易，並支付Gas Fee。這個過程是非同步的，我們會監聽transactionHash、receipt等事件來追蹤交易狀態。

透過以上步驟，你就完成了一個最基本的DApp：使用者可以連接錢包，並透過網頁介面讀取與寫入智能合約上的數據。這正是本篇Web3.js教學的核心實作。

常見問題 (FAQ)

學習以太坊開發需要哪些先備知識？

建議具備基礎的程式設計能力，特別是JavaScript。由於智能合約主要使用Solidity語言撰寫，它是一種靜態型別語言，語法風格類似C++和JavaScript，若有相關經驗會更容易上手。此外，對區塊鏈的基本原理（如交易、Gas、錢包）有初步了解，也能加速學習過程。

Truffle和Hardhat哪個比較適合新手？

Truffle和Hardhat都是目前最主流的以太坊開發框架。Truffle發展歷史較久，社群資源和教學文件相對豐富，對於初學者來說，跟著教學文件一步步操作較為容易，是很好的入門選擇。Hardhat則更為靈活且擴充性強，特別是在測試和本地網路模擬方面有其獨到之處，受到許多進階開發者的喜愛。對於新手，建議可以從Truffle開始，建立起完整的開發流程概念後，再依需求評估是否轉換或學習Hardhat。

我該如何將DApp部署到以太坊主網或測試網？

將DApp部署到公開網路（主網或測試網如Sepolia）的流程與部署到本地Ganache鏈類似，主要差異在於truffle-config.js的網路設定。你需要：

  1. 一個節點服務提供商（如Infura或Alchemy）的API端點URL。
  2. 一個含有足夠測試幣（用於測試網）或真實ETH（用於主網）的錢包助記詞（Mnemonic Phrase）或私鑰。
  3. 安裝@truffle/hdwallet-provider套件來處理錢包連線。

在truffle-config.js中新增一個網路設定（例如sepolia），填入以上資訊，然後執行truffle migrate --network sepolia即可。切記，絕對不要將含有真實ETH的私鑰或助記詞直接寫在程式碼中或上傳到公開的程式碼庫（如GitHub）。

開發DApp的成本高嗎？

開發階段的成本幾乎為零。使用Ganache本地鏈進行開發與測試完全免費。當需要部署到公開測試網時，可以透過「水龍頭（Faucet）」網站免費領取測試幣來支付Gas Fee。真正的成本發生在將智能合約部署到以太坊「主網（Mainnet）」時，你需要支付真實的ETH作為Gas Fee，費用會根據當時的網路壅塞程度與合約的複雜度而有所不同，從幾十美元到數百美元都有可能。

結論

恭喜你完成了第一個DApp的開發與部署！本文從DApp開發入門的核心觀念，到Truffle框架實戰的智能合約部署，再到Web3.js教學的前端互動整合，涵蓋了以太坊開發最核心的步驟。這趟旅程只是你踏入Web3世界的第一步，區塊鏈的世界廣闊且充滿機會，後續還有更複雜的合約邏輯、代幣標準（ERC-20, ERC-721）、去中心化儲存（IPFS）等著你去探索。持續學習與動手實作，是成為一位優秀區塊鏈開發者的不二法門。立即動手，開啟你的Web3開發之旅吧！

相關文章

返回頂端