--- 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 鏈。 ![](https://i.imgur.com/MWyrHjx.png =250x) >會選擇 ethereum 是因為之前的專案也是做 ethereum 相關的，所以選擇 ethereum。如果想了解其他的鏈像是 Solana，可以到[這裡](https://hackmd.io/mMIAfVlBRW2sf5E-y0tlIA)看。 ## Demo ![](https://i.imgur.com/BSKltgk.png) 再左上角可以看到一些基本的功能: 1. Home 賣場主頁面 2. Sell Digital Asset 賣 NFT 3. My Digital Assets 我買的 NFT 4. Creator Dashboard 我所賣出的 NFT 紀錄 我們可以去 Sell Digitial Asset 建立我們的 NFT ![](https://i.imgur.com/Zd4ou9A.png) 上傳成功後就去 Creator Dashboard 可以看到有成功上傳到賣場了 ![](https://i.imgur.com/3zXpc0s.png) 之後切換帳號可以在 Home 看到剛剛發佈的 NFT ![](https://i.imgur.com/4PO4GM2.png) 購買完 NFT 就會出現在 My digital Assets ![](https://i.imgur.com/JskL8F5.png) ## 遇到的錯誤 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/)