Day 30【Project 呈现 & 结语】好我们现在把手伸出来然後喊出自己的能力

【前言】
这个 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