關於本網站
Web3 的應用與實務 • 建立 Web3 體驗
🎓 課程資訊
本網站專為淡江大學資訊管理學系 114學年上學期「Web3 課程」建置，用來建立 Web3 應用體驗。
透過此平台，學生能將課堂理論與實作結合，親手應用區塊鏈底層技術和顧問思維，體驗 Web 3.0 的互動應用，包括錢包操作、智慧合約互動，以及使用 AI 協助開發去中心化應用程式（dApp）。
我們把這門課變成了一個微型 DAO (去中心化組織) 的實驗場。課程的特色：
- 入場領代幣 (Course Token):
本課程設計學生的入場方式，然後體驗如何領得 100 枚課程代幣，這裡沒有分數，而是參與權。 - 培養顧問腦 (Proof of Work):
不要當寫 Code 的工匠。我們學習利用 AI 勾勒藍圖、做決策、解決問題，以及團隊共同作業。 - 鏈上來互評 (On-Chain Consensus):
學生用領取的代幣來參與投票，這就是區塊鏈世界的「社群共識」的簡單應用。 - 努力即資產 (SBT NFT):
期末專案通過驗證後，學生額外獲得一枚靈魂綁定的 NFT。這枚 NFT 徽章永久記錄努力成果。
領取 ERC-20 課程代幣
依照課程設計流程，學生在完成數位錢包連結及通關密碼驗證後，智慧合約將自動鑄造 100 枚 MarcoLab Coin（MLC），並發送至學生的錢包，作為參與課程活動的正式憑證。
去中心化投票
學生將使用所領取的 MLC 代幣進行期末專案投票，這一過程模擬 DAO（去中心化自治組織）的治理機制，確保協議能透過智慧合約以公開透明的方式執行。
NFT 紀念徽章
透過額外協議的疊加，賦予 MLC 代幣更多用途。例如，完成指定任務可獲得獎勵，或領取符合 ERC-721 標準的 NFT 紀念徽章，象徵課程完成。由於採用 Sepolia 測試鏈，學生可在 Rarible 等二級市場查看並展示專屬數位資產。
技術架構
- Frontend:
Astro + React + Tailwind - Blockchain:
Ethereum Sepolia Testnet - Library:
Ethers.js v6 - Contract:
Solidity (ERC20 / ERC721)
💻 專案開發日誌 (DevLog)
1. 智能合約開發：課程代幣經濟
撰寫 Solidity 智能合約，實作 ERC-20 (MLC) 標準代幣，設計作為課程參與憑證與獎勵機制的代幣模型，確保代幣能正確鑄造與流轉。
2. 環境建置與技術選型
初始化 Astro 專案架構，配置 Tailwind CSS 系統，確立以「高效能、低延遲」為核心的開發基底，實現完全響應式 (RWD) 設計。
3. 前端錢包串接基礎
引入 Ethers.js v6 函式庫，實作 MetaMask 連接按鈕，解決 Web3 應用最基礎的「帳號讀取」與「鏈上狀態監聽」功能。
4. 代幣鑄造功能 (Mint) 實作
開發前端互動介面，串接智能合約的鑄造函式，讓使用者能透過網頁直接領取課程代幣，完成「參與即獎勵」的初始流程。
5. 投票系統原型 (Voting Prototype)
建立核心投票元件，設計候選人卡片 UI，並實作基本的投票按鈕與數據顯示功能。
6. 權限控管：身分驗證與白名單
整合 Google Apps Script 後端 API，建立學號白名單 (Whitelist) 驗證機制。在簽署交易前確認使用者為本課程修課同學，確保治理機制的安全性。
7. UX 挑戰：非同步交易延遲 (The Async Problem)
在開發過程中發現區塊鏈交易確認時間較長（Latency），使用者容易因為介面無反應而感到焦慮，甚至重複發送交易，導致體驗不佳。因此嘗試不斷的調整與修正。
8. 核心優化：交易生命週期回饋
深度重構投票元件，將交易狀態細分為三階段：「簽署中 (Signing)」 ➔ 「打包中 (Mining)」 ➔ 「確認完成 (Confirmed)」，提供清晰的視覺回饋。
9. 核心優化：防呆與狀態鎖定
實作 Loading State 鎖定機制，當交易正在進行時自動禁用按鈕，防止使用者重複點擊 (Double Click)，大幅提升系統的強健度。
10. 優化：Astro 跨頁面狀態保持一致
解決 Astro View Transitions (SPA 模式) 在換頁時導致錢包斷線的問題。實作 astro:page-load 全域監聽，自動恢復連接狀態，實現無縫瀏覽體驗。
11. NFT 獎勵機制整合
部署 ERC-721 合約，將領取 NFT 紀念徽章的流程與投票機制整合。當使用者完成投票後，系統引導進入鑄造 (Mint) 流程，並在前端即時顯示交易連結。
12. 正式部署與品牌整合
將專案部署至雲端，並整合至 ToHot.xyz 網域生態系，設定 SEO Meta Tags 與 Open Graph 社群預覽圖，建立完整的專案識別。
⚠️ 注意：本平台運行於 Sepolia 測試網，所有代幣與 NFT 均無真實貨幣價值。
請勿將真實資產轉入測試合約地址。