第 8 週：開發環境建置入門

上一週，大家站在「使用者」的角度，親手安裝了錢包、申領測試幣，以及連線了老師建置的領取學習幣的 dApp，並把 100 枚 MLC 放進自己的錢包。但當你望著錢包裡那串漂亮的餘額時，心裡或許會浮現一個問題：這一切的背後，那份「自動執行且不可竄改」的程式碼究竟長什麼樣子？又是誰、用什麼工具把它寫出來，以及部署上鏈的？這一週我們親手來試著編譯和部署智慧合約，並認識 dApp 所需的開發環境。我們會從回顧上週的成果出發，拆解 dApp 的前端與後端架構，然後逐一點亮四套開發環境：雲端 IDE（Remix）、本地網頁伺服器（Node.js + live-server）、AI Agent 輔助工具，以及老師規劃中的學生專案空間（雲端發布平台）。

8.1 開場：W07 總結與補充 — 從「用鏈」到「造鏈」

上週五（115/10/30）我們完成了一件對這門課來說意義重大的事：全班 94 位同學大部分都成功安裝 MetaMask，取得了自己的 0x 地址，透過申領表單完成編組後由老師統一發送 0.0001 枚 Base Sepolia 測試 ETH（不是自己去水龍頭領），再透過老師建置的領幣介面（mlc2026.tohot.xyz）呼叫智慧合約，各自領取了 100 枚 MLC。如果你還在 BaseScan 上翻到那筆交易，現在回頭看，它不只是一個餘額數字——那是你第一次以「帳戶所有者」的身分，對一份公開在鏈上的程式碼發出了指令，而那份程式碼沒有問你是誰，沒有跟你要密碼，只認你的數位簽章。

一、W07 六大重點快速回顧

1. 專案起源：老師為了打破「隔著毛玻璃學 Web3」的困境，親手建置了 MLC 課程代幣專案。
2. 需求分析（The Who / The What）：任何鏈上系統都從「為誰服務、要做什麼」兩個問題開始，合約上鏈後無法輕易還原，所以設計期要想深。
3. dApp 三層解構：前端介面、智慧合約（自動販賣機）、公開總帳（區塊鏈）。到 8.2 我們會把「智慧合約＋總帳」合稱為後端（運作機制），前端仍是面板——三層是依職責劃分，兩層是用來了解程式碼住在哪裡。
4. Layer 2 選擇：2026 年實作搬到 Base Sepolia，享受 2 秒出塊與微量 Gas，避開網路上的壅塞與水龍頭門檻。
5. 錢包安全：助記詞（BIP-39）離線保管三律，防範簽名釣魚。
6. 真實領幣：連線錢包、輸入通關密語以及領取 100 MLC，並在 BaseScan 驗證交易鐵證。

這六件事串起來就是一條完整的「使用者旅程」：從理解為何而做，到親手做了一次。為了讓同學有順暢的使用者體驗，我實作了方案 A 的「白名單機制」，和方案 B 的「課堂共享密碼」。方案 A 的「白名單」收集大家的錢包地址，合約內建名單逐一核對，方案 B「課堂共享密碼」，在課堂現場口頭公布一組通關密語，合約只存它的雜湊值。

實作一：讓我們來找找助記詞在哪裡？

上週安裝 MetaMask 時，新版流程不再像舊版那樣在安裝中途要你「抄下 12 個英文單字」。這是刻意的安全設計：新版 MetaMask 在建立錢包的過程中不會要你抄下助記詞——它改以密碼加密的雲端備份為主軸：你設的錢包密碼會把助記詞加密後分片備份，之後要查看助記詞，得進設定深處用密碼驗證才能開啟。這是刻意的安全設計：不強迫你在安裝當下抄寫，避免匆忙抄寫、甚至拍照存到相簿——助記詞一旦外流，錢包就不再安全。

那助記詞到底在哪裡？請在你的 MetaMask 依序點：右上角三點選單 → 設定（Settings）→ 安全 & 隱私 分類下的「Security and password」→ Manage wallet recovery → Secret Recovery Phrase 1 卡片右側的「Reveal」，輸入錢包密碼驗證後，才能看到那 12 個單字。（注意：新版介面把 Security 和 Privacy 拆成兩個獨立選項，助記詞入口在 Security and password 底下，不在 Privacy。）請照上週說的「黃金三律」處理：① 只抄在紙上；② 不拍照、不截圖、不貼到任何聊天軟體；③ 放在只有你知道的地方。今天請實際打開這個路徑，確認你看得到助記詞（不要把單字貼出來），並在開發日誌裡寫下「我確認助記詞藏在哪裡」這一句——這比抄下助記詞本身更重要。

實作二：在 BaseScan 驗證交易

上週領到 100 MLC 後，交易已經躺在鏈上了——今天我們學會自己去查證。打開 https://sepolia.basescan.org，把你的錢包地址貼進搜尋框，或直接搜尋上週領幣的 Tx Hash。你會看到那筆交易的：區塊高度、時間、發送方與接收方、呼叫的合約函式（claim）、轉入的金額（100 MLC），以及實際支付的 Gas。請找到上週那筆交易，查詢「交易狀態成功＋金額 100 MLC」的畫面——這就是區塊鏈「任何人都能查、誰也改不了」的鐵證。

1. 申領測試幣合約地址：0x146385AC1FaF84476aE6BBb0dba375294a87C62A

2. 我部署合約錢包地址：0xD9Ec851c989A42BA5273Ab033a3c0d7f52b24E0d

3. 我領取課程學習幣錢包地址：0xAd4d691326ac465501B7A8485E96825E8E668E78

4. 發放課程學習幣合約地址：0xfB145f51BB16E379cb8DC5EDf3A962dA36847F21

二、上週沒說完的事：領幣按鈕按下之後，到底發生了什麼？

當你在領幣介面上按下「領取」時，畫面背後其實發生了一連串精密的接力：

1. 前端捕捉點擊：網頁上的 JavaScript 監聽到按鈕事件，檢查你是否已「連接錢包」。
2. 組裝交易：前端把「呼叫合約的 claim 函式＋通關密語參數」組裝成一筆交易請求，送進你的 MetaMask。
3. 你的簽名：MetaMask 跳出確認視窗——這一步是關鍵，交易內容會被你的私鑰簽名，等於你親自蓋章授權。
4. 廣播上鏈：簽好的交易被廣播到 Base Sepolia 網路，進入某個節點的交易池（mempool）。
5. 打包與執行：排序器（sequencer）把交易打包進區塊，EVM 真的執行合約程式碼——檢查通關密語、檢查你是否已領過，如果未領過再把 100 MLC 記進你的錢包地址。
6. 結果回傳：交易上鏈成功後，前端收到回執，更新畫面顯示新的餘額；你也可以自己到 BaseScan 用交易雜湊（Tx Hash）查到這筆不可竄改的紀錄。

注意這條鏈上的權力分佈：前端只是傳令兵，真正的規則寫在合約裡，而授權的權利在你的私鑰手上。就算有人把前端網頁改得面目全非，他也無法不經你的簽名就動用你的資產——這正是 Web3「程式碼即法律，私鑰即主權」的具體展現。理解了這條資料流之後，我們來學習「自己寫那份合約，自己架那個前端」。

8.2 dApp 的前端＋後端架構：面板與運作機制

所謂 dApp（decentralized application，去中心化應用），本質上就是一個「長得像網站，但骨子裡的機制跑在區塊鏈上」的應用程式。如果用大家都熟悉的比喻來拆解，dApp 就像一台跨越虛實的自動販賣機：

一、前端（Frontend）：dApp 的控制面板

前端是使用者唯一能看到，也是唯一能直接互動的部分——例如 mlc2026.tohot.xyz 領學習幣的網頁。它的核心精神就是：把複雜藏起來，它提供美觀簡易操作的介面，讓使用者不必知道什麼是 ABI、什麼是 calldata，就能完成「連接錢包、按下按鈕，然後看結果」。前端主要由我們早已熟悉的網頁技術組成：HTML（骨架）、CSS（皮膚）和 JavaScript（肌肉），再加上能與區塊鏈對話的函式庫（例如 ethers.js 或 web3.js）。

二、後端（Backend）：dApp 預先設定好的運作機制

通常網站的後端是一台由公司管理的伺服器，壞了可以重開機，資料錯了可以改回來。但 dApp 的「後端」不一樣——它就是部署在區塊鏈上的智慧合約：一段一旦發布就永久公開，自動執行，任何人都無法單方面關閉或竄改程式碼。它的任務和自動販賣機一樣：收到指令後，不靠任何人員介入，自動按照寫死的規則執行。區塊鏈串起全世界共享的公開總帳，所有狀態變更都會被永久記錄。

三、兩者怎麼對話？一張圖看懂資料流

前端與合約之間沒有直接的「函式呼叫」。互動分兩種：要改變狀態（如領幣、改狀態）必須發一筆需簽名的交易（Transaction）；如果只是讀取（如查餘額、讀取 message）則只做不需簽名，不花費 Gas 的唯讀呼叫（eth_call）。下面這張圖示是交易路徑，會改變狀態：

使用者點擊按鈕
   │
   ▼
前端（網頁 JS）組裝「要呼叫合約的哪個函式、帶什麼參數」
   │
   ▼
錢包（MetaMask）跳出視窗 → 使用者用私鑰簽名 → 交易上鏈
   │
   ▼
智慧合約（後端）在區塊鏈上被 EVM 執行 → 狀態寫入總帳
   │
   ▼
前端讀取鏈上結果 → 更新畫面（例如：餘額 0 → 100 MLC）

四、什麼該上鏈、什麼絕對不該上鏈？

上週我們設計 MLC 合約時立下了一條邊界：領取狀態登記簿（mapping(address => bool)）必須上鏈，因為「誰領過了」是需要全網共識以防止重複；但是學號名單、通關密語的明文、網頁圖片和聊天紀錄這類資料絕對不上鏈——上鏈的資料永久公開，寫入就要支付 Gas，而且一旦寫錯就救不回來。這是 on-chain（鏈上可信事實）與 off-chain（傳統資料庫／雲端硬碟）的分工原則：鏈上只放「必須被公開驗證、不可竄改」的記錄，堅守只將「最小必要事實」上鏈。

把這個原則套回 MLC 系統就很清楚：合約裡只記錄「地址 0xABC… 是否已領過（hasClaimed）」、「每個地址的 MLC 餘額」，以及「通關密語的雜湊值（secretHash，永遠不明文儲存）」，這是三件最小必要事實；至於「0xABC… 是哪位同學」、通關密語是什麼，以及學號對應哪一組，絕不上鏈，也不需要上鏈。這樣的設計有兩個好處：一是隱私，學號與錢包地址的對應關係不會永久曝光在公開帳本上；二是成本，字串和名單上鏈是又貴又慢，放在後端資料庫幾乎免費。記住這句話：「這個資料需要全世界驗證嗎？如果不需要，就別上鏈。」

舉個生活化的例子幫助記憶：想像一台放在走廊的自動販賣機。飲料的價目表、機器裡還剩幾瓶、誰投了錢卻沒拿到飲料——這些是必須公開且不能偷改的事實，就像鏈上的狀態；但老闆的進貨成本、維修人員的電話和機器的監視器密碼——這些絕對不會貼在機器正面，對吧？同樣的道理，dApp 也要把「公開可驗證的事實」和「營業秘密／個人資料」分開放：前者上鏈，後者放在傳統後端或資料庫。這個思維在期末專案設計時會用到——哪些資料上鏈，哪些不上，往往決定了合約安不安全，以及 Gas 成本貴不貴。

8.3 開發環境全景：四種工具，各司其職

「工欲善其事，必先利其器。」開發 dApp 的方式不少，但不需要一次學會所有工具，要先知道什麼時候用哪一套。這學期我們大約會用到四種開發環境：

一、雲端 IDE — Remix：智慧合約的搖籃

Remix IDE 是專為以太坊智慧合約設計的整合開發環境（IDE），而且是完全基於瀏覽器、完全雲端並且免安裝——只要有網路和瀏覽器，你就擁有了一套世界級的合約開發環境（官方網址：remix.ethereum.org）。它的強大在於「功能集中在單一介面，流程順暢」：從撰寫程式碼、編譯（Compile）、部署（Deploy）到測試與互動，全部都在同一個網頁裡完成，不需要在不同的軟體之間跳來跳去。雖然最新的版本也提供了 AI 功能，但是需要付費，不建議使用，我寧可付費使用其它 AI 熟悉好用的工具。

更棒的是，Remix 內建了一個模擬區塊鏈環境「Remix VM」。在 Remix VM 上部署合約完全免費，不需要真正的 ETH，可以放心地無數次練習測試「撰寫 → 編譯 → 部署 → 互動」的完整流程。等到合約在模擬環境裡跑順暢了，符合預期，未來再把環境切換成 Base Sepolia，真正發布到測試鏈上。

Remix 的畫面主要分成三個區域：

① 最左側的功能面板（Icon Panel）是工具箱——檔案總管（File Explorer）管你的 .sol 檔案、編譯器（Solidity Compiler，S 形圖示）負責把程式碼翻譯成機器語言，以及部署與執行（Deploy & Run）負責發布合約；

② 中間的主要視窗（Main Panel）是你花最多時間的工作區，編輯器和下方的終端機（所有執行結果、成功或錯誤訊息）都在這裡；

③ 點擊左側任一功能後，畫面中央偏左出現的側欄（Side Panel）就是它的設定台——例如編譯器的版本選擇、部署時的環境（ENVIRONMENT）與帳戶選擇都在這裡（注意：別點到最右側的 RemixAI 助理聊天框，那是 AI 對話窗，今天先認識介面就好）。^[1]

二、本地前端環境 — Node.js + live-server：dApp 的家（後續課程再安裝）

當我們把合約寫好了，下一步是給它一個「面板」。這個面板就是一般的網頁，但有一個關鍵差異：直接對 HTML 檔案按兩下（file:// 模式）和透過網頁伺服器開啟（http:// 模式）是兩種完全不同的結果。只有 http:// 模式下，網頁才能完整發揮功能——未來要連接錢包、呼叫合約，必須在開發前端時，在自己的電腦上「安裝一個網站伺服器」。

這件事靠 Node.js 做到：它讓 JavaScript 不只活在瀏覽器裡，還能在你的 Windows 和 macOS 電腦上執行，同時免費附贈套件管理員 npm（全世界最大的開源套件庫）。從 npm 安裝的 live-server 用來提供「個人網站伺服器」，可以監聽連接埠（預設 8080），也可以用 http:// 協定提供專案資料夾裡檔案進行相互通訊，還有即時刷新（Live Reloading）——存檔後瀏覽器自動重刷。^[2][3]

三、AI Agent 輔助開發 — 你的副駕駛

2026 年的開發環境還有一位新夥伴：AI Agent。這類工具可以聽懂我們用自然語言描述需求（例如：幫我寫一個按鈕，點擊後呼叫合約的 message() 函式，然後把結果顯示在畫面上），直接產生一段程式碼。老師現在用的是 Hermes^[5] 和 Antigravity 這兩套 AI Agent；去年還沒有 AI Agent 時，我直接使用 Gemini web bot 對話——用 Gemini 對話產生 Solidity 程式碼，再貼到 Remix IDE 編譯部署，完全可行。^[4]

AI 也會出錯，因此請記住：AI 是副駕駛，我們人類使用者才是真正的駕駛。AI 生出的程式碼可能有錯，也會有安全漏洞，或只是「表面上能動作，但是邏輯不對」，尤其智慧合約這種「寫錯就上鏈救不回來」的特性，絕對不能不仔細查看確認就繼續執行後續步驟。正確的協作姿勢是：我們要先認識 Solidity 程式的面貌，了解它的原理及結構。然後再用自然語言講清楚需求 → AI 產生初稿 → 理解程式碼在做什麼 → 修改及測試 → 確認無誤才部署上鏈。

四、成果發布空間 — 後續課程再實作

前端面板做好後，下一步當然是「讓別人也看得到」。發布純前端 dApp 有兩條路：

① 免費的現代化雲端平台——去年課程就介紹過 Vercel、Netlify 和 GitHub Pages 三個方式，這些至今仍是主流，都附帶 HTTPS 與公開網址。

② 這學期老師額外提供雲端主機（drmarcolab.cloud 的 cPanel 空間），我可以為每個專案組準備專屬發佈空間：每組一個子網域（例如 組別名.drmarcolab.cloud），以及一個只能存取自己組別子資料夾的 FTP 帳號。上一堂課同學們使用的申領測試幣及領取課程學習幣都是利用了我的雲端主機。細節期中考過後再來公佈。^[8][6]

五、環境選擇準則：什麼時候用哪一套？

8.4 實作三：Remix 上完成你的第一份 Solidity 合約

仿照老師歷年課程的經典橋段^[8]，今天我們要在 Remix 上親手把第一份合約從無到有地做出來，發布出去，然後再和它互動。這份合約叫 HelloWorld.sol，功能很單純：部署的那一刻，自動把一句話存進鏈上，之後任何人都可以免費讀取。麻雀雖小，但它包含了智慧合約裡的所有基本結構。

步驟一：建立 HelloWorld.sol

1. 用瀏覽器開啟 https://remix.ethereum.org。
2. 在左側功能面板點「檔案總管（File Explorer）」，在 contracts 資料夾上按右鍵 → New File，輸入檔名 HelloWorld.sol，按 Enter。
3. 中間主要視窗會出現一個空白分頁，標題正是 HelloWorld.sol，等待你寫入程式碼。

步驟二：貼上程式碼，並逐行認識每一行在做什麼

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;               // 告訴編譯器：請用 0.8.20 版（含）以上、0.9.0 以下的規則檢查

contract HelloWorld {                  // 宣告一份新合約誕生；大括號內就是這台「販賣機」的機身
    string public message;             // 狀態變數：公開的文字欄位，會永久記錄在鏈上；
                                          public 會自動產生一個免費讀取的 message() 函式

    constructor() {                    // 建構子：部署上鏈的那一刻，自動執行「僅一次」
        message = "Hello Web3 World!";
    }
}

第一列：授權許可證 (License Identifier)

// SPDX-License-Identifier: MIT

這是什麼？ 這是一行「註解」，它在告訴全世界，我們的程式碼是開源的，採用 MIT 這個寬鬆的授權條款。

第二列：編譯器版本 (Pragma)

pragma 怎麼選版本？ 老師把本課 MLC 合約（MarcoLabCoin.sol）的編譯器版本對齊到 ^0.8.20，HelloWorld 也用同一個版本。^0.8.20 的意思是「0.8.20 或更高，但不包含 0.9.0」——Solidity 更新很快，pragma 就是確保「不論誰、在哪裡編譯，都用相容的規則」來處理。^[7]

第三列：合約宣告 (Contract Declaration)

contract HelloWorld { ... }

這是什麼？ 這是在宣告一份新合約的誕生。contract 是 Solidity 的關鍵字，而 HelloWorld 是我們為這份合約取的名字（習慣上，合約名稱首字母大寫）。

大括號 {} 的意義？所有屬於 HelloWorld 合約的邏輯、規則和資料，都必須寫在這對大括號裡面。就像是在為我們的「自動販賣機」劃定它的機身範圍。

狀態變數與建構子

第一部分：狀態變數 (State Variable)

string public message;

這是什麼？ 這是在宣告一個「狀態變數」。可以把它想像成是「自動販賣機」的記憶體 。凡是宣告為狀態變數，它存放的內容，都會被永久地公開地記錄在區塊鏈上，成為這份合約狀態的一部分。

逐字解析：

string：代表這個變數的「型別」是文字字串。
public：這個關鍵字非常重要！它會自動為我們產生一個名為
message 的「查詢按鈕」，讓任何人都可以隨時免費地來讀取這個變數的內容。
message：我們為這個變數取的名字。

第二部分：建構子 (Constructor)

constructor() { ... }

這是什麼？ constructor 是一個特殊的函式，它是「開機設定」
它的特性： 這個函式只會在部署到鏈上的那一刻，自動執行一次，

程式碼解析：

message = "Hello Web3 World!";
這行程式碼的指令是：「在合約誕生的那一刻，請立刻將"Hello Web3 World!" 存入我們剛剛定義的 message 記憶體位置中。」

步驟三：編譯

1. 點左側功能面板的「Solidity Compiler」（S 形圖示）。
2. 在側欄確認 COMPILER 版本與程式碼中的 pragma 相符。
3. 按下藍色大按鈕「Compile HelloWorld.sol」。
4. 成功：編輯器左側檔名旁出現綠色勾勾，下方終端機沒有紅色錯誤訊息。

步驟四：部署到 Remix VM

1. 點左側功能面板的「Deploy & Run Transactions」（以太坊 logo 圖示）。
2. 側欄最上方 ENVIRONMENT 選擇 Remix VM（預設值，免費免 Gas）。
3. 確認 Deploy 方塊中的 Deploy 欄位顯示 HelloWorld。
4. 按下 Deploy 按鈕。
5. 在下方終端機看到一筆交易紀錄，側欄最下方出現「Deployed Contracts」區塊，裡面躺著你剛誕生的合約——恭喜，你的第一份合約已經「上鏈」（模擬鏈）了！

步驟五：與合約互動——讀取 message()

1. 在「Deployed Contracts」索引標籤，你會看到 Deployed Contract 右側標示 1，表示目前已佈署 1 個合約。
2. 接下來你會看到有一個藍色燈號的 message ——這就是狀態變數 public 自動產生的免費讀取函式（藍色代表唯讀非交易；橘色代表會寫狀態發交易——在真實網路會跳出錢包簽名視窗，在 Remix VM 模擬環境裡則直接執行）。按一下它右邊的 Call 按鈕。
3. 按下它後，下方會回傳 "Hello Web3 World!"，終端機也同步記錄了這次查詢。

回頭看這五個步驟，就是一個開發者的完整日常：撰寫（Write）→ 編譯（Compile）→ 部署（Deploy）→ 互動（Interact）。這就是智慧合約佈署的整個流程。

8.5 課堂調查活動

🎯 課堂調查活動一：合約內容指認

跟完老師示範的五個步驟後，打開 iClass 的課堂調查，六題單選，題目不計分，但參加問卷會給分。

請保留著二樣東西：① 你的 Remix VM 部署成功截圖（含 Deployed Contracts 區塊）② message() 回傳值的抄錄。

🎯 課堂調查活動二：AI 認知大作戰

打開 iClass 的課堂調查，憑直覺先投票（猜猜看），不要往下翻看答案。調查結束後再展開下方折疊框對解答。

由於暫時還不鼓勵使用 AI 工具來生成程式碼，所以我們先來猜猜看。

8.6 本週總結、下週預告與開發日誌

一、本週工具地圖總整理

二、三個容易忘的提醒

1. 合約上鏈前一定在 Remix VM 多跑幾次；真的要上測試網前，先確認自己看得懂每一行程式碼在做什麼。
2. AI 產生的程式碼一律視為「草稿」，部署前必須經過你的眼睛——特別是每一個 external 函式都要問「誰能呼叫」（存取控制的標準做法見 ^[9]）。
3. 發布到任何公開網址前，先檢查前端程式碼裡沒有密鑰、私鑰或測試用的設定值。

下週預告（第 9 週）：Solidity 程式設計（一）

下週我們正式進入 Solidity 語法的正題：型別、狀態變數、函式的可見性（public / external / internal / private）、存取控制修飾詞，以及「儲存槽（storage）」這個影響 Gas 的底層機制。今天的 HelloWorld 就是堂入門課——同學們務必自己練習一遍。