使用Moralis建立NFT. Part 1

Dhsia

Jun 15, 2022

1. Create Moralis Server

進入 Moralis.io 並創建一個新帳戶，登錄後您將看到儀表板：

點擊Create a new Server 建立Server(免費版上限為一個server) :

這裡示範是使用Eth Testnet (Rinkeby) ，點選 Add Instance

選擇區域，差別不大，本文選擇新加坡。

上圖可見Dapp URL & App ID ，後續編程會使用到，目前為止Moralis的dapp server 建置告一個段落。

2. 建立Next.js APP

使用Node.js command prompt 輸入以下指令創建新的 Next.js 專案：

npx create-next-app my-project --example with-tailwindcss

**上面指令將設置 Next.js 並設置 Tailwind CSS 以便我們進行一些最小的樣式設置，但在本文不會介紹太多樣式的問題。

創建專案後，進入到專案目錄並使用終端機輸入以下命令安裝此項目所需的套件包：

npm install moralis react-moralis @walletconnect/web3-provider

*這將安裝moralis 核心庫以及react-moralis，會提供我們方便使用Morails功能。 @walletconnect/web3-provider 是用以連接MetaMask以外的錢包，但本文僅使用到MetaMask，僅是用來消除Moralis包的警告。

# Via NPM:
npm install --save magic-sdk

安裝 magic-sdk

設定Moralis環境變數

在專案目錄下建立.env，並將第一步Moralis Server URL & Appid填入

MORALIS_SERVER_URL=(server url)
MORALIS_PUBLIC_APP_ID=(application id)

接著打開專案中pages目錄下的_app.js 改成下面的內容

import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider
      appId={process.env.MORALIS_APP_ID}
      serverUrl={process.env.MORALIS_SERVER_URL}
    >
      <Component {...pageProps} />
    </MoralisProvider>
  );
}
export default MyApp;

*透過將MoralisProvider包覆在專案的入口點, 我們可以將包含在其中的子組件都得到Moralis的功能支持。修改完之後，可以執行下列指令來執行專案: