【前言】
這個 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。

這邊首先回顧一下第一部曲：（ 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，其為一個包含 signature 和 publicAddress 的函數。

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 官方文件可以看著做，除了英文的閱讀能力之外，實際上就不會有太大的困難。只是後端真的是我的死穴，搞了這麼久其實我都不是很確定自己是怎麼做出來的，哈…哈哈…

再來回顧第二部曲：（ 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++ 精通，沒想到這也是我唯一一個拋棄的安排哈哈哈哈哈哈哈哈。

【結語】

這個暑假最大的投入大概是搞這個 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 了！

最後是成果分享！
The Dinomention

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

【團隊成員】

【特別感謝】
HashLips
Patrick Collins
DappUniversity