# 使用Moralis建立NFT. Part 2 (未完)
###### 兌心科技 Insight Software : Web3.0 技術簡介
作者 : @dhsia17
###### tags: `開發者路徑`
#
Smart Contract 的部分

**建立ERC-721合約**

[OpenZeppelin](https://www.openzeppelin.com/) 是開源的智能合約庫，有各種智能合約範本，包括 ERC721 智能合約。因此只需要基於 OpenZeppelin 的現有合約，擴展特定的功能即可。

[Remix](https://remix.ethereum.org/#optimize=false&runs=200&evmVersion=null&version=soljson-v0.8.7+commit.e28d00a7.js) 是 Ethereum 官方提供的 IDE 。包含完整編譯器、執行、發佈合約等等的功能。無須安裝，用瀏覽器開啟即可。

打開Remix後，再Contracts中新增一個檔案MyOwnNFT.sol:

// SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.4;
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/math/SafeMath.sol";
contract MyOwnNFT is ERC721, ERC721Enumerable, ERC721URIStorage {
    using SafeMath for uint256;
    uint public constant mintPrice = 0;

    function _beforeTokenTransfer(address from, address to, 
                                    uint256 tokenId)
        internal
        override(ERC721, ERC721Enumerable)
    {
        super._beforeTokenTransfer(from, to, tokenId);
    }
    function _burn(uint256 tokenId) internal override(ERC721,  
                                         ERC721URIStorage) {
        super._burn(tokenId);
    }
    function tokenURI(uint256 tokenId)
        public
        view
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        return super.tokenURI(tokenId);
    }
    function supportsInterface(bytes4 interfaceId)
        public
        view
        override(ERC721, ERC721Enumerable)
        returns (bool)
    {
        return super.supportsInterface(interfaceId);
    }
    constructor() ERC721("MyOwnNFT", "MON") {}
    function mint(string memory _uri) public payable {
        uint256 mintIndex = totalSupply();
        _safeMint(msg.sender, mintIndex);
        _setTokenURI(mintIndex, _uri);
    }
}

constructor() ERC721(“MyOwnNFT”, “MON”) 這行，可以自由更改想要的名稱。

如圖，我將名稱改為我的名字

Mint在NFT的世界中意思為”鑄造”，也就是將數位內容鑄造成區塊鏈中獨一無二的代幣，因為在NFT市場中，第一手購買就是使用智能合約的mint()，所以我們需要了解mint()函式做了什麼。

鑄幣時我們會傳入URL做為參數，然後透過totalSupply()可取得新代幣的id，並透過_safeMint將其指定給一個新的NFT代幣，最後將URL設定給這個NFT代幣。

接著來Compile。


接著選到Deploy Tab，ENVIRONMENT選擇”Injected web3"， CONTRACT選擇剛才新增的檔案，然後確認與你的MetaMask連接並選擇Ropsten測試網路，確認你的帳戶中有代幣可以支付gas fee，然後點下 “Deploy”並在MetaMask確認。

簽署合約並支付測試代幣佈署合約上鏈

部署成功後詳細資料

也可以在Etherscan 查看更詳細的鏈上數據: [etherscan](https://rinkeby.etherscan.io/tx/0xbfbb27e6c21761a4a545ced68912e866132317c3d42a489a6984091612315b0e)(範例)


可以看到合約已成功Deploy並可以與其互動


**設定Moralis Server及Next.js專案**

如何新增Moralis Server 與建立 Next.js專案，設定環境變數及連接MetaMask請參考 [part 1](https://medium.com/@dhsia17/%E4%BD%BF%E7%94%A8moralis%E5%BB%BA%E7%AB%8Bnft-part-1-%E6%9C%AA%E5%AE%8C-8c17a5cdb69c).

**設定合約資訊**

在根目錄下建立一個contract.js，然後參考Remix中的資訊

合約布署的位址(Deploy頁面)，複製參數contractAddress。
複製參數contractAddress

ABI (Application Binary Interface)，複製contractABI

在根目錄下建立一個contract.js，然後參考Remix中的資訊

contract.js檔案如下

export const contractAddress = "0x783955a43c9b6e7f9193d230F7FE87b9803Cdb44";
export const contractABI = [
  {
    inputs: [],
    stateMutability: "nonpayable",
    type: "constructor",
  },
  {
    anonymous: false,
    inputs: [
      {
        indexed: true,
        internalType: "address",
        name: "owner",
        type: "address",
      },
      {
        indexed: true,
        internalType: "address",
        name: "approved",
        type: "address",
      },
      {
        indexed: true,
        internalType: "uint256",
        name: "tokenId",
        type: "uint256",
      },
    ],
    name: "Approval",
    type: "event",
  },
  //以下省略
];

**建立簡單的Sidebar**
首先，修改pages下的_app.tsx如下

import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";
import Link from 'next/link';
import { useRouter } from 'next/router';
const menuItems = [
  {href:"/dashboard",title:"Mint NFT"},
  {href:"/nftlist",title:"List NFTs"}
]
function MyApp({ Component, pageProps }) {
  const { asPath, pathname } = useRouter();
  console.log(pathname)
  return (
    <MoralisProvider
      appId={process.env.NEXT_PUBLIC_APP_ID}
      serverUrl={process.env.NEXT_PUBLIC_SERVER_URL}
    >
     <div className='flex flex-row h-screen w-screen' >
      {pathname!='/'?<aside className='h-screen 
              bg-indigo-500 md:w-60 p-2'>
      <nav className='h-full'>
        <ul>
          {menuItems.map(({ href, title }) => (
            <li className='m-2' key={title}>
              <Link href={href}>
                <a
                  className={`flex p-2 bg-fuchsia-200 rounded   
                          hover:bg-fuchsia-400 cursor-pointer`} >
                  {title}
                </a>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </aside>:null}
      <Component {...pageProps} />
    </div>
    </MoralisProvider>
  );
}
export default MyApp;

待續...

[文章來源](https://medium.com/@dhsia17/%E4%BD%BF%E7%94%A8moralis%E5%BB%BA%E7%AB%8Bnft-part-2-%E6%9C%AA%E5%AE%8C-26ea63a78164)

#

###### About Insight Software
###### 兌心科技的專業橫跨多個領域，雲端架構、遊戲製作、區塊鏈技術、去中心化金融、醫療資訊和物聯網服務等，致力於成為企業Web2.0到Web3.0的領航員，提供**雲服務、線路、區塊鏈技術、金庫**等解決方案。

#

### 聯絡方式
兌心聯絡信箱 :
[e-mail]

### 社群
[Website](https://www.insight-software.com/)
[Medium](https://medium.com/insight-software)
[Youtube](https://www.youtube.com/@insight-software)
[Telegram](https://t.me/Insight_software)
[Twitter](https://twitter.com/insightcapital_)
[Instagram](https://www.instagram.com/insight.capital/)