大家好，我是帝哥（@CoinmanLabs），今天帝哥带大家一起来看看第四周的任务。

我们将公共数据存储在区块链上并不容易访问。查询区块链实际上**是开发人员最大的提升之一，**他们需要从链的起源开始收集连接点和回答问题所需的数据。

假设开发人员想要回答以下问题：“钱包拥有哪些 NFT？”。

这听起来像是一个简单的询问，但答案远非易事。

在这种情况下，开发人员需要找到在给定链上铸造的所有 NFT，然后按照所有转移函数来了解当前拥有 NFT 的人。

这项任务可能需要开发人员数周时间，由于 Alchemy 已经查询了完整的区块链并为其数据建立了索引，因此 NFT API 使您能够完全访问信息。

如何创建 NFT 图库教程

在本教程中，您将学习如何使用 Alchemy NFT API 来构建一个能够基于三件事获取 NFT 的 NFT 库：

1. 钱包地址
2. 收货地址
3. 钱包地址+收款地址

前面我们一直使用的是VScode，但是后续很多人都跟帝哥说不是很会使用，所以今天在这里帝哥在给大家介绍使用一个新的网站。https://replit.com/，十分方便我们开发。

好，下面开始我们今天的课程。

1.初始化项目

我们是选取replit上面新建一个项目

# 创建成功以后在shell里输入如下代码，其中coinmanlab为你的项目名字，不要有大写，可以随意
npx create-next-app -e with-tailwindcss coinmanlab

2.编写代码

因为本教程将使用 Javascript 而不是 Typescript，所以在编写代码之前，需要将文件修改成Javascript认可的文件，参考如下：

代码需要修改如下：

app.jsx

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

index.jsx

import { NFTCard } from "./nftCard"
import { useState } from 'react'
import Head from 'next/head'
import Image from 'next/image'

const Home = () => {
  const [wallet, setWalletAddress] = useState("");
  const [collection, setCollectionAddress] = useState("");
  const [NFTs, setNFTs] = useState([])
  const [fetchForCollection, setFetchForCollection] = useState(false)

  const fetchNFTs = async () => {
    let nfts;
    console.log("fetching nfts");
    const api_key = "Coinman"
    const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTs/`;
    var requestOptions = {
      method: 'GET'
    };

    if (!collection.length) {

      const fetchURL = `${baseURL}?owner=${wallet}`;

      nfts = await fetch(fetchURL, requestOptions).then(data => data.json())
    } else {
      console.log("fetching nfts for collection owned by address")
      const fetchURL = `${baseURL}?owner=${wallet}&contractAddresses%5B%5D=${collection}`;
      nfts = await fetch(fetchURL, requestOptions).then(data => data.json())
    }

    if (nfts) {
      console.log("nfts:", nfts)
      setNFTs(nfts.ownedNfts)
    }
  }

  const fetchNFTsForCollection = async () => {
    if (collection.length) {
      var requestOptions = {
        method: 'GET'
      };
      const api_key = "1111"
      const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTsForCollection/`;
      const fetchURL = `${baseURL}?contractAddress=${collection}&withMetadata=${"true"}`;
      const nfts = await fetch(fetchURL, requestOptions).then(data => data.json())
      if (nfts) {
        console.log("NFTs in collection:", nfts)
        setNFTs(nfts.nfts)
      }
    }
  }
  return (
    <div className="flex flex-col items-center justify-center py-8 gap-y-3">
      <div className="flex flex-col w-full justify-center items-center gap-y-2">
        <input disabled={fetchForCollection} onChange={(e) => { setWalletAddress(e.target.value) }} value={wallet} type={"text"} placeholder="Add your wallet address"></input>
        <input type={"text"} onChange={(e) => { setCollectionAddress(e.target.value) }} value={collection} placeholder="Add the collection address"></input>
        <label className="text-gray-600 "><input onChange={(e) => { setFetchForCollection(e.target.checked) }} type={"checkbox"} className="mr-2"></input>Fetch for collection</label>
        <button className={"disabled:bg-slate-500 text-white bg-blue-400 px-4 py-2 mt-3 rounded-sm w-1/5"} onClick={
          () => {
            if (fetchForCollection) {
              fetchNFTsForCollection()
            } else fetchNFTs()
          }
        }>Let's go! </button>
      </div>
      <div className='flex flex-wrap gap-y-12 mt-4 w-5/6 gap-x-2 justify-center'>
        {
          NFTs.length && NFTs.map(nft => {
            return (
              <NFTCard nft={nft}></NFTCard>
            )
          })
        }
      </div>
    </div>
  )
}

export default Home

同时我们需要新建一个jsx文件，nftCard.jsx，代码如下：

export const NFTCard = ({ nft }) => {

  return (
    <div className="w-1/4 flex flex-col ">
      <div className="rounded-md">
        <img className="object-cover h-128 w-full rounded-t-md" src={nft.media[0].gateway} ></img>
      </div>
      <div className="flex flex-col y-gap-2 px-2 py-3 bg-slate-100 rounded-b-md h-110 ">
        <div className="">
          <h2 className="text-xl text-gray-800">{nft.title}</h2>
          <p className="text-gray-600">Id: {nft.id.tokenId}</p>
          <p className="text-gray-600" >{nft.contract.address}</p>
        </div>

        <div className="flex-grow mt-2">
          <p className="text-gray-600">{nft.description}</p>
        </div>
      </div>

    </div>
  )
}

现在我们的代码编写完毕了，但是还有部分需要我们去更改的，更改如下：

index.jsx里有两个地方有const api_key = "Coinman"，需要把这个api_key的值修改为你的alchemy账号的ETH主网的api key，具体如图所示：

另外这张图大家不知道注意没有，帝哥标注出来了三个点，需要我们注意的：

第一点就是我们需要修改为jsx，这里上面跟大家说了，第二点在我们的shell的工具的时候，注意看我们的项目名是coinmanlab，但是我们的目录是CoinmanLabs，下面我们需要去运行起来我们的项目，就不能在这个总的目录下面执行，所以我们需要先进入到coinmanlab执行。那我们一起是来试试吧。

# 进入你的项目
cd coinmanlab
# 执行项目
npm run dev

当我们正确执行后页面会显示出来我们的页面结果：

最后我们输入钱包地址查询即可显示出来我们的NFT：

因为我们第四周需要提交项目地址，所以我们在这里将我们的项目公布出去，填写表格的时候使用即可，下面的是帝哥的项目：

以上就是第四周的任务了，大家别忘记了填写表格完成哦，表格页面在下方：

我是懂币帝，用技术带你领略区块链魅力，第一时间获取行业最新资讯：

推特：@CoinmanLabs

微信：CoinmanLabs（社群客服微信进群）