# Alchemy 第四周NFT获取教程

**Published by:** [Elsa](https://paragraph.com/@elsa-2/)
**Published on:** 2022-10-15
**URL:** https://paragraph.com/@elsa-2/alchemy-nft-2

## Content

step1 创建项目设置1.打开控制台并输入以下代码，从而创建 Next JS 项目样板并安装 TailwindCSS。 npx create-next-app -e with-tailwindcss nameoftheproject ，如图。2.输入cd nameoftheproject && code . （最后那个点别掉了，掉了打开的就是之前的项目）3.在控制台输入npm run dev ，如果电脑弹出防火墙，就点允许访问，不弹出也没关系。4.回到vscode，将index.tsx和_app.tsx的后缀改成.jsx，删除_app.jsx中报错的部分，如图。 或者直接粘贴下面的代码替换。import '../styles/globals.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp step2 修改index.jsx代码1.这一步具体每行代码的意义可以到官方看，我这里放最终的代码，方便大家完成任务，但是这对于学习web3是毫无作用的。将index.jsx的代码更改成如下代码。如图。import { NFTCard } from "./nftCard" import { useState } from 'react' 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 = "75dGSnZXuLyiwz-TRVYrJAhhZthlG9Tj" 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 = "75dGSnZXuLyiwz-TRVYrJAhhZthlG9Tj" 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} type={"text"} placeholder="Add your wallet address" onChange={e => setWalletAddress(e.target.value)} value={wallet}></input> <input type={"text"} 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 step3 创建一个新的炼金术应用程序1.进入alchemy.com ，点击create app。2.输入信息，点击create app。3.点击view key，将红框内的API KEY复制下来。4.回到vscode，在index.jsx中ctrl+f搜索const api_key，应该会搜索到2处，全部改成上一步复制的代码，然后保存。step4 创建 NFT Card 组件1.在pages下面新建一个名为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> ) } step5 运行测试1.在控制台输入cd nameoftheproject，按回车，然后输入npm run dev，如图所示即可。2.然后将http://localhost:3000 （我这里是这个链接，我看官方视频是3001，可能会不一样啊，我也不知道哈哈），就是上面那个图的第一行的链接，复制到浏览器。出现下图即可。3.输入你自己的地址，点击let‘s go，下面出现图片即可。step6 上传至githubstep7 项目提交直接填写上传的项目的github网址即可。

## Publication Information

- [Elsa](https://paragraph.com/@elsa-2/): Publication homepage
- [All Posts](https://paragraph.com/@elsa-2/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@elsa-2): Subscribe to updates