iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

All In One NFT Website Development系列 第 2

Day 2【Project 分析、Metamask】Why is Microsoft Word the best IDE for programming?

【前言】
這篇文章要來分析我負責的整個項目,並且準備所有我需要的東西!

【(使用者看見的)前端與(後方運作的)後端】

  1. 使用者會看見登入錢包按鈕(按鈕應該要有一些特效)
    • 按下按鈕後要連到 MetaMask 系統
  2. 使用者點擊按鈕後出現 Loading 特效,同時跳出 Metamask 登入及連動同意
    • 同意後,要從 MetaMask 得到當前登入者的以太坊地址
  3. 使用者同意後出現登入介面,讓其輸入欲登入的角色編號
    • 得到欲登入的角色編號後,去後方資料庫查詢此地址是否真的擁有此 NFT
      // 資料庫建構的部分由其他夥伴負責,這邊我負責檢查 Tokens 的持有地址
  4. 成功登入後的畫面
    // 網頁互動的部分由其他夥伴負責,這邊我負責顯示登入成功 or 失敗

【參考資料】

BAYC Login Bathroom

【分析需求】
首先呢,有前端還有動畫特效,好,我可能要會使用或讀懂前端三巨頭
網站連動到 MetaMask,好,我可能要用 metamask.io, React.js
查詢並檢驗 NFT 持有者的地址,好,我可能會用到 opensea.js, ethers.js, web3

其實規劃的當下並沒有很確定未來自己會用到什麼,所以就是瘋狂上網查資料把可能用的或可以用到的全部都集合起來,再慢慢細看哪個東西可以在實作上幫助我。


// 跟各位分享一個 Youtube 影片,我現在的情況真的很像這樣...
// C hashtag?

經過我的「研究」之後發現,不管是 React.js, Solidity 等我很有可能需要具備的東西,都是跟 HTML + CSS + JavaScript 息息相關的(至少長的很像),所以管他什麼以太坊錢包連動還是檢查該地址持有的 Tokens,反正前端三巨頭先學會就對了!到時候如果真的做不出來至少我的按鈕還會發光!(錯誤觀念)

幸虧前端三巨頭的環境建置非常容易,Visual Code 打開然後 Extensions 給他用下去就好!這邊就不細講了,網路上應該很多資源講得比我更精準!

【MetaMask】
這邊超級精簡地介紹一下什麼是 MetaMask。 它是一款支援以太鏈上加密貨幣的虛擬錢包,可以歸類成一種私鑰管理器,並不會儲存大家的錢包資料、密碼、私鑰。
支援平台:Browser Extension, Mobile app
支援功能:可與 DApp 互動、能保存 ERC-20 發行的幣種(只能顯示 ETH)
支援語言:English
官方網站:metamask.io

【小結】
雖然還沒有開始應對需要具備的知識,但有對於 Project 分析的過程以及不斷的與團隊成員 Meeting 後,真的有對自己該做什麼事情有很大的了解。尤其是學習計畫的排程,這讓我知道此時此刻自己應該往哪個方向去準備,還有我剩下多少時間、需要多少時間。

過去在學校學習的過程可能都很強調個人能力,像是 Coding 要多厲害又多厲害,還是自己能考多高分、羨慕別人考多高分。但在這樣一個團隊合作的 Project 之中,多方溝通進而了解需求並且準確地實踐是最重要的。因為如果沒有確認好自己該做什麼,即便成品多麼 Fancy 也是要打掉重做的!


上一篇
Day 1【序】我現在是天真無邪的學生
下一篇
Day 3【NFT】你那邊還來得及,趕快 all in Bitcoin
系列文
All In One NFT Website Development30

1 則留言

0
ALu
iT邦新手 5 級 ‧ 2021-09-14 00:29:19

我現在就正在重做,ㄏㄏ

我要留言

立即登入留言