給前端工程師的 Web 3.0 入門

0 seconds of 1 minute, 51 secondsVolume 0%

00:00

01:51

李婷婷 Tina

給前端工程師的 Web 3.0 入門

當區塊鏈更加深入地與實體經濟結合，深入食衣住行育樂等日常生活的不同面向，我們預期「前端如何串接 Web 3」將會成為一個熱門的開發需求，甚至是未來前端工程師的必備技能。

Hahow AI 學習升級

19.1 k 的人也在觀看

5.0

(7)

關於課程

課程包含

包含 4 章 17 單元、4 項作業

課程時長

2 時 43 分鐘

課程總人數

64 位同學

觀看限制

不限觀看次數，還會附贈完課證書

學習升級

Hahow AI 學習助教

無需額外付費

即時問答、重點整理、測驗理解，讓知識派上用場

課程內容

合作優惠特價中！
2022/10/26-11/24 優惠售價 NT$ 2,880
11/25 00:00 將調回原價 NT$ 3,599

科技感網格背景中央呈現發光地球與數位電路，左側標示「Web2.0」，右側標示「Web3.0」，以連接線與節點象徵網路世代的轉變。

「課程簡介」標題置於深色網格背景上，左側搭配青綠色立體地球圖示，右側以青綠色圓點排列形成漸變裝飾，整體以青綠色外框點綴。

網路生態因區塊鏈技術的問世，出現除了大型中心化平台外的另外一種可能性。區塊鏈產業規模逐年增量成長，用戶對於去中心化相關應用的需求也逐年增加，無論是 NFT Mint Page，或者各種 Protocol 的使用介面，都是以網頁為主要呈現平台；前端工程師將會在這股趨勢當中扮演重要角色，成為 Web 2.0 和 Web 3.0 之間的橋樑。

隨著虛擬貨幣的支付範圍擴大，也將會帶動熱錢包的和其他 Dapp 的串接服務，我們預期「如何串接 Web 3.0」將會成為一個熱門的開發需求，甚至是未來前端工程師的必備技能！

本課程專為具有網頁前端基礎，想要進一步學習網頁如何與 Web 3.0 串接的學員所設計，透過概念學習與課程實作，完成一個具有 Web 3.0 最基礎的功能，也就是串聯錢包頁面的網頁！

橫幅標題為「為什麼要學習串接 Web 3.0」，以地球圖示、深色網格背景與綠色點陣裝飾呈現 Web 3.0 主題。

兩個並列的瀏覽器介面以向上延伸的折線圖連結，左側按鈕標示「Connect Wallet」，右側按鈕標示「Mint」，呈現連接錢包後進行鑄造的操作流程。

NFT Mint page 標題指出，Dapp 連接錢包串接需求遽增；畫面以深色網格背景、螢光綠框線與圓點作為視覺裝飾。

隨著虛擬貨幣的支付範圍持續擴大，元宇宙熱潮興起以及 NFT 項目發行的數量大幅增加，帶動了一波熱錢包串接和 Dapp 的開發需求。

標語「擴展技能樹為自己加薪，超前部署未來的網路應用趨勢」，以白色文字呈現，搭配黑色網格背景、青綠色圓點與線條裝飾。

現在就是超前部署、領先別人 N 步的機會：Web 3 將改變前端、後端與資料庫的互動結構，前端可直接與智能合約或去中心化存儲服務互動；學習 Web 3 掌握熱門市場加分條件與產業趨勢。

段落標題「適合上這堂課的人」，搭配青綠色地球圖示、網格背景與右側漸縮圓點裝飾。

以像素風人物與電路線條呈現兩類學習者：前端工程師對區塊鏈有興趣，產品經理想要參與 Web 3.0 開發。

・建議要有 Javascript、React 基礎語法開發經驗

・若還不熟悉，建議可以先看 React 官方文件，或是官方快速入門影片（英文教學）

「為什麼選擇 React？」標題搭配青綠色地球圖示、深色網格背景與右側點陣裝飾，呈現科技感的課程段落視覺。

科技感深色網格背景中，左側以發光原子圖示代表 React，右側以大型 V 形標誌代表 Vue，呈現兩套前端 JavaScript 框架的並列比較。

React 框架協作功能佳，適合開發大型專案，專案擴大時也能降低維護難度；多數 Web 3 開源專案使用 React，具備豐富現成模組、學習資源與開發前例可供參考。

「課程單元」標題橫幅，以青綠色地球網格圖示、黑色網格背景與右側點陣裝飾呈現，未提供其他課程內容文字。

課程大綱共三大單元、170 分鐘：從 Web 1.0 到 Web 3.0、DApp 開發基礎，以及 DApp 進階實作，涵蓋 MetaMask、Etherscan、Ether.js、Web3Modal 與 React。

特別說明：課程中會提及部分投資術語（如總鎖倉量、交易量、倉位等），但由於不會影響課程主軸理解，因此老師不會額外講解，同學可以在遇到不熟悉的單字再自行查詢即可喔！

「課前準備」標題搭配青綠色地球網格圖示，置於黑色網格背景上，右側排列青綠色圓點裝飾，呈現科技感視覺。

一台筆電或桌上型電腦
軟、硬體設備需能安裝／執行：Metamask、Remix IDE

深色網格背景上的段落標題「你將會學到」，左側搭配青綠色立體地球圖示，右側以漸變大小的青綠色圓點作為裝飾。

了解網路的沿革與發展
了解並能夠使用 Web 3.0 開發工具
區塊鏈錢包串接與智能合約實作
創建 Dapp

「講師經歷」段落標題，以青綠色地球圖示、深色網格背景與右側由小至大的圓點圖樣作為視覺裝飾。

講師李婷婷（Tina Lee）具備區塊鏈智能合約工程師與資安審計專家身分，曾任加州柏克萊大學區塊鏈實驗室特約研究員兼技術導師，也是 The Z Institute 區塊鏈線上學院創辦人。

從學生時期開始自學程式語言，在 19 歲時發現了自己對區塊鏈和分佈式共識的熱情，辭去了在微軟的數據和人工智能顧問工作，投身區塊鏈產業。擁有豐富的接案與合作經驗，專業領域橫跨多鏈的開與審計，經手 TVL 超過 1B 的項目。

過去為私募基金 Evernew Capital 的研究顧問， 2018 年聯合創辦並擔任圖靈鏈和 TuringCerts 的技術長，後至加州柏克萊大學區塊鏈實驗室 Berkeley Blockchain Xcelerator 擔任特邀學者和技術導師。先後在 Microsoft、Chainlink、Certik、Status.im 和 Stacks 基金會工作，並成為 JP Morgan、Deloitt、HTC、Acer、KPMG、中華電信等知名企業之特聘內訓講師，發表過三篇區塊鏈論文於權威論壇 ACM 與 IEEE ，並在德國慕尼黑 MobiSys 獲頒全球最佳論文。

現為 The Z Institute 創辦人，與團隊積極開班培訓區塊鏈產業人才，盼能將台灣的人才輸出至全世界。

「為什麼選擇 Z 學院」標題橫幅，採用深綠色網格背景，搭配左側青綠色地球圖示與右側由大小圓點組成的裝飾圖案。

The Z Institute 自 2017 年提供區塊鏈顧問、企業內訓、專案開發與智能合約審計等服務，已培訓超過 2,000 名學員，並推出一系列模組化線上課程，協助學員學習 Web 3 產業。

「回覆與作業」頁面標題置於深色網格背景上，左側搭配青綠色地球圖示，右側以規律排列的青綠圓點矩陣作為科技感裝飾。

課後問答、作業批改頻率

💡 作業及回答問題每個月會批改及回答一次，如有較急的問題可至 Discord 頻道提出及討論。

課後問題與討論

💡 請加入專屬 Discord 頻道：https://discord.gg/pJUYVFs3zm

作業繳交方式

💡 請上傳作業至 Hahow 作業區

哪些人適合這堂課？

・前端工程師：對區塊鏈技術有興趣的前端工程人員・產品經理：想要參與 Web 3.0 開發的從業人員

你可以學到

・了解網路的沿革與發展・了解並能夠使用 Web 3.0 開發工具・區塊鏈錢包串接與智能合約實作・創建 Dapp

上課前的準備

需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）

・一台筆電或桌上型電腦・軟、硬體設備需能安裝／執行：Metamask、Remix IDE ・課程實作內容需使用域名，同學可以在未購買域名的情況下完成課程影片學習，但若想要跟隨老師的實作教學進行練習，則會需要額外購買域名，同學可以自行評估是否需要購買喔。

需要具備的背景知識

・建議要有 Javascript、React 基礎語法開發經驗・若還不熟悉，建議可以先看 React 官方文件，或是官方快速入門影片（英文教學）－官方文件：https://zh-hant.reactjs.org/tutorial/tutorial.html －快速入門影片：https://youtu.be/w7ejDZ8SWv8

單元一覽

4 章 17 單元｜總時長 163 分鐘

全部展開

從 Web 2.0 到 Web 3.0

單元 1 - 第一章節概覽