iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

All In One NFT Website Development系列 第 30

Day 30【Project 呈現 & 結語】好我們現在把手伸出來然後喊出自己的能力

圖片 8.png

【前言】
這個 IT 鐵人的比賽,一開始是 Sen 問我要不要比,我本來是沒有多大興趣的,因為不會得名,也沒想到有什麼好寫的。只是接了 DINO 的工作之後,認為我要一次學那麼多東西,做出人生第一個可以說嘴的 Project,不寫文章紀錄一下真的是太可惜了!

然後我就開始召集親朋好友,因為我知道身邊真的很多人為了「心有餘而力不足」所苦,而且我看大家都想要在暑假充實自己,想學很多很多東西。但過往的經驗是大部分人都會無疾而終,因此我就自願出來當那個 push 大家的人,組成了一個團隊參加比賽。

終於結束了三十天,今天就來回顧一下我們這一個月都做了什麼吧!

【目標】
總 Project 的工作流程,也就是我們圍繞在 IT 鐵人比賽的文章主題為:

「在 NFT 商品網站中與以太坊錢包 - MetaMask 連動,並且認證錢包登入者是否持有我們發行的 NFT。後讓登入者進入 NFT holders 的專屬 VIP 區域進行互動。」

( Login Flow → Tokens Owner Check Flow )

以及「產品上鏈工程 & 實作 Minting dAPP」

( Deploy NFT Flow → Minting dAPP Flow )

我把這整個流程企劃分成兩部曲,每一部曲又分成兩個 Flow。

im-just-going-ca4ce2c899.jpg


這邊首先回顧一下第一部曲:( Login Flow → Tokens Owner Check Flow )

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

  1. 使用者會看見登入錢包按鈕(按鈕應該要有一些特效)(Login Flow)

    • 按下按鈕後要連到 MetaMask 系統
  2. 使用者點擊按鈕後出現 Loading 特效,同時跳出 Metamask 登入及連動同意*(Login Flow)*

    • 同意後,要從 MetaMask 得到當前登入者的以太坊地址
  3. 使用者同意後出現登入介面,讓其輸入欲登入的角色編號*(Tokens Owner Check Flow)*

    • 得到欲登入的角色編號後,去後方資料庫查詢此地址是否真的擁有此 NFT

      // 資料庫建構的部分由其他夥伴負責,這邊我負責檢查 Tokens 的持有地址

  4. 成功登入後的畫面*(Tokens Owner Check Flow)*

    // 網頁互動的部分由其他夥伴負責,這邊我負責顯示登入成功 or 失敗

【Login Flow】
(react.js, MetaMask@onboarding, web3.js, docker, Sequelize, Express, SQLite)

  1. 在使用者點下登入按鈕後,檢測使用者是否已經下載 MetaMask Chrome extension

    • 還沒下載:將按鈕改為 Click here to install MetaMask,按下後跳出網頁轉往下載頁面。
    • 已經下載:進入 Login Flow 的下一步。
  2. 產出一個亂數的 nonce

    在資訊安全中,Nonce 是一個在加密通信只能使用一次的數字。在認證協定中,它往往是一個隨機或偽隨機數,以避免重送攻擊。Nonce 也用於串流加密法以確保安全。如果需要使用相同的金鑰加密一個以上的訊息,就需要 Nonce 來確保不同的訊息與該金鑰加密的金鑰流不同。 *節錄自維基百科《Nonce》- https://zh.wikipedia.org/zh-tw/Nonc*e

  3. 確認此使用者過去是否登入過,藉由該使用者的 publicAddress 來確認其 nonce

    • 未登入過:創建一個新帳戶資訊在後端,並且初始化。進入 Login Flow 的下一步。
    • 登入過:儲存其 nonce。進入 Login Flow 的下一步。
  4. 當前端接收到了 nonce 需要跳出 MetaMask 的登入介面。呈現 Sign-In Message 並且在使用者登入時(輸入密碼時)呈現 Loading 圖示。

  5. 在使用者登入之後,會回傳authentication,其為一個包含 signaturepublicAddress 的函數。

  6. 當後端接收到了 authentication ****後會進行數位加密簽證,以確保這個 nonce 是被這個使用者所登入。以此就可以確保 publicAddress 與擁有者的所有權。

  7. 為了確保不被同樣的簽名重新登入,最後會重新產生新的 nonce

  8. 成功登入!並隨時偵測使用者是否登出,以及監測使用者是否更換帳號。

【Tokens Owner Check Flow】
(react.js, web3.js, ether.js, opensea.js)

  1. 連動到 Provider,在 opensea.js 之中需要取得 Web3.providers.HttpProvider 以及 OpenSeaPort 來取得鏈上的資料。
  2. 利用前述連動到 MetaMask 的登入系統傳來的帳戶地址,並且取得登入者自行輸入的 tokenID。
  3. 搭配智能合約的地址,可以從 seaport.getAssetBalance 來取得相關當前智能合約的資產持有狀況

這個部分的前端其實沒有很困難,因為都有 API 官方文件可以看著做,除了英文的閱讀能力之外,實際上就不會有太大的困難。只是後端真的是我的死穴,搞了這麼久其實我都不是很確定自己是怎麼做出來的,哈…哈哈…

215962261_4115464681835712_6428446235092815000_n.jpg


再來回顧第二部曲:( Deploy NFT Flow → Minting dAPP Flow )

Deploy NFT Flow】
(python, JavaScript, Solidity)

  1. 隨機合圖並且產生相對的 MetaData。
  2. 建置 ERC-721 的智能合約。
  3. 上傳測試資料(圖片以及 MetaData )至 IPFS。
  4. 利用 Ethereum.Testnet 來試 Mint 以及在 Opensea.Testnet 的顯示狀況,並且測試買賣流。
  5. 確認無誤即可上架主網。

【Minting dAPP Flow】
(react.js, web3.js, ether.js, Solidity)

  1. 從 Remix 取得智能合約的 ABI。
  2. 利用 Redux 來傳遞資料,首先在 Reducer 初始化取得資料。
  3. 把 Store 當作中間層,將 Reducer 匯入。
  4. 在 Action 之中利用 Store 抓取資料。
  5. 利用 useDispatch, useSelector 把剛剛取得的 Blockchain 資料匯入前端。
  6. 建設前端的數量設定按鈕,以及 Mint 鈕,Mint 鈕按下去之後要連到 smartContract.methods.mint

Learning

綜合以上所有的企劃流程,我在這個企劃裡面學到的語言(幾乎從零到會)如下:

Front-End: HTML, CSS, JavaScript, react.js, MetaMask@onboarding, web3.js, ethers.js, opensea.js

Back-End: docker, Sequelize, Express, SQLite

Picture Blending: python, JavaScript

Ethereum: Solidity

是不是超級壯觀,天ㄚ我都不知道我自己三個月的學習能力能夠那麼高,這個暑假應該是我這輩子目前為止,最充實的三個月了。其實我原本預想之中的規劃並沒有那麼滿,頂多就是把 DSA in C++ 精通,沒想到這也是我唯一一個拋棄的安排哈哈哈哈哈哈哈哈。

spiderman-likes-learning.jpg


【結語】

這個暑假最大的投入大概是搞這個 NFT Project。其實籌辦的人從上一個學期就跟我講過很多很多次,問我她如果想要做一個 NFT 我可不可以幫她。只是偷偷告訴大家我自始至終,直到她真的找了繪師之前,我都沒有認為這件事情會開始動工。

我自己,包含團隊裡的其他成員。我相信每個人都突破自身極限非常非常多。以我的例子來說,我原本對前端三巨頭是一概不知的,就因為要在網頁裡面 Interact with MetaMask,還有 Verify Token Owner,就開始了這滿到漫出來的暑假。

另外一個更為嚴峻(難到我無法用言語形容)的任務就是 Deploy ERC-721 Token,也就是上架所謂的 NFT。沒錯,這裡我又要重新熟悉 Solidity 這個我早就放棄(根本沒學會過)的語言,架設 Smart Contract 來把 Token 推上主網。並且實作一個 Minting dAPP 讓顧客可以在我們的官網上面 Mint NFT。

這也重新打開我對 Ethereum Blockchain Engineer 的嚮往。一直以來因為我非本科系的背景,又加上笨到不行的小腦袋,導致我對 Software Engineer 這個位子是想都不敢想。但經過這個嘗試之後,我才有機會更深入了解各個 ERC 的程式碼長什麼樣子,拿來做什麼。也有勇氣重新去學習 Solidity 還有區塊鏈的程式實作。

謝謝大家看到這裡,不管是只看了某幾天還是只看見這篇文,還是超棒的三十天的文都看完,都謝謝大家!希望明年我還能來參加這個比賽,只是就要想想要做什麼 Project 了!

00.png

最後是成果分享!
The Dinomention

大力推薦其他團隊成員的文章!

【團隊成員】

Name 標題 Tags
ALu All In One NFT Website Development BlockChain, Modern Web
Cooksuhr 1995到2021,php到react網站開發歷程 Modern Web
ExcitedMail 杰哥的考研紀錄 Computer Science
foodchain 三十天內用C++寫出一個小遊戲 Software Development
momojn C++ 三十天學習紀錄 Software Development
chen_yanlong 學密碼學也猜不到你的手機密碼 Cryptography
yywoli 從資料庫到資料分析視覺化 Data Analysis

【特別感謝】
HashLips
Patrick Collins
DappUniversity

thanks-love.jpg


上一篇
Day 29【Deploy NFT - Deploy on Mainnet】你看,出來了
系列文
All In One NFT Website Development30

尚未有邦友留言

立即登入留言