---
tags: Blockchain
---

# 在乙太鍊上實作 NFT 鑄造網站
contributed by < [steven1lung](https://github.com/steven1lung) >

### 會使用到的技術
1. Polygon
2. Next.js
3. Tailwind ( CSS 的套件 )
4. [Solidity](https://hackmd.io/@steven1lung/r1p0N5wkc)
5. Hardhat
6. Ether.js
7. [IPFS](https://hackmd.io/@steven1lung/r1p0N5wkc)
> 可以看上次我的筆記介紹 Solidity 跟 IPFS

## Polygon
Polygon 可以說是建立和連接 Ethereum 區塊鏈的一種框架，可以簡單地想成是一個以太網路充滿著區塊鏈。Polygon 的其中一個目的是解決以太網路的問題、收集這些問題的解決方法、建立一個 ethereum 的經濟系統。

Polygon 網路是 ethereum-native，為了就是要可以操作任何有關 ethereum 現在甚至是未來的架構。這個框架提供了 layer-2 solution，意思是建立在鏈本身的框架，然後再補充其他功能性的地方。

Polygon因為是一個 plasma-based aggregator，所以也提供了建立一個去中心化應用程式 (dApp) 所需要的框架，像是安全性、規模、速度。區塊鏈之所以能發展如此快，plasma framework 也是幕後推手之一。
>關於 2-layer solution 的補充可以到[這裡](https://hackmd.io/@steven1lung/Ska4u0Vxc)

## Next.js
Next.js 是一個基於 react 的 SSR 框架。Next.js 還有著一些其他的優點，像是檔案即是 routing、支援 SSG 跟 SSR、Data fetching 有更多方式等等的優點。
> 關於 SSR 的補充可以到[這邊](https://hackmd.io/@steven1lung/HymQ72ml5)

## Ether.js
Ether.js 是用來操作 ethereum 、blockchain 的一個 library。
#### Features
1. 將私鑰都存在客戶端，非常安全
2. 可以匯入或是匯出 JSON wallet (Geth, Parity)
3. 可以匯入或匯出 BIP 39 mnemonic phrases (12 word backup phrase)
4. 透過 JSON-RPC, INFURA, Etherscan, Metamask 等等方法連接到 ethereum 節點
5. 輕量級 (300 kb 以下)
6. 有非常完整的功能給你操作 ethereum
7. 支援 typescript

## Hardhat
Hardhat 是一個用來編譯、佈署、測試、debug ethereum 軟體的開發工具，hardhat 可以幫開發者管理跟自動化建立智能合約跟 dApp 的過程。

Hardhat 有內建的一個網路，可以讓我們直接在本地端建立一個 ethereum 網路供測試開發，可以直接在本地測試一些函式功能、智能合約的 solidity 測試、stack 追蹤、輸出錯誤訊息，這些方便的 debug 工具都是 hardhat 提供的。

## 小結
瞭解了上面提到的這些工具，大概就可以想像出來整個應用程式大概是如何從零建構出來的。整個前端的介面就是使用類似 react 的 next.js 當作框架，然後對 ethereum、blockchain、smart contract 這些的操作透過 ether.js 這個 library 進行控制。上傳的 NFT assets 儲存在 IPFS 上，寫完後使用 hardhat 建立一個本地端進行測試然後 debug 看錯誤訊息或是看交易的 log。最後要公開發佈這個應用程式就是使用 polygon 連接到 ethereum 鏈。


>會選擇 ethereum 是因為之前的專案也是做 ethereum 相關的，所以選擇 ethereum。如果想了解其他的鏈像是 Solana，可以到[這裡](https://hackmd.io/mMIAfVlBRW2sf5E-y0tlIA)看。

## Demo

再左上角可以看到一些基本的功能:
1. Home 賣場主頁面
2. Sell Digital Asset 賣 NFT
3. My Digital Assets 我買的 NFT
4. Creator Dashboard 我所賣出的 NFT 紀錄

我們可以去 Sell Digitial Asset 建立我們的 NFT

上傳成功後就去 Creator Dashboard 可以看到有成功上傳到賣場了

之後切換帳號可以在 Home 看到剛剛發佈的 NFT

購買完 NFT 就會出現在 My digital Assets

## 遇到的錯誤
1. 在 `npm run dev` 後出現 `nonce too high` 可以去設定將帳戶重置即可。

#### 參考資料
[更詳細的作法](https://dev.to/dabit3/building-scalable-full-stack-apps-on-ethereum-with-polygon-2cfb)
[polygon](https://polygon.technology/)
[ether.js](https://docs.ethers.io/v5/)
[hardhat](https://hardhat.org/getting-started/)