# 手把手教程 ——Alchemy Week4

**Published by:** [RogerZ](https://paragraph.com/@rogerz-2/)
**Published on:** 2022-08-17
**URL:** https://paragraph.com/@rogerz-2/alchemy-week4

## Content

Alchemy 教程目录Week1: How to Develop an NFT Smart Contract (ERC721) with Alchemy 教程 Week2: How to Build “Buy Me a Coffee“ Defi dapp with Alchemy 教程 Week3: How to Make NFTs with On-Chain Metadata - Hardhat and JavaScript 教程Week4: How to Create an NFT Gallery 教程官方教程在此，也可以看 youtube 视频链接，不想看我啰嗦的可以移步。 step0 环境配置系统环境： Window10 X64编程环境： nodeJS v16.15.0 NPM v8.5.5编程IDE： VS Codestep1 编辑项目1. 在文件夹下，进入 cmd 输入 npx create-next-app -e with-tailwindcss nftgallery，nftgallery 可以自行取名。2. 进入文件夹后，打开 VS Code，在 cmd 中输入 npm run dev。在浏览器中打开 localhost:3000，可以看到原始的页面 。3. 修改 ./pages 下的两个文件的后缀名，改为 .jsx4. 编辑 ./pages/index.jsx，复制以下代码并保存import Head from 'next/head' import Image from 'next/image' import { useState } from 'react' import { NFTCard } from './components/nftCard' import { api_key } from '../next-env.d' 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 = "KQlNfx1NHVyWFC62jMIwysYLUTHprKGe"; const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTs/`; if(!collection.length) { var requestOptions = { method: 'GET' }; 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 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} className="w-2/5 bg-slate-100 py-2 px-2 rounded-lg text-gray-800 focus:outline-blue-300 disabled:bg-slate-50 disabled:text-gray-50" onChange={(e)=>{setWalletAddress(e.target.value)}} value={wallet} type={"text"} placeholder="Add your wallet address"></input> <input className="w-2/5 bg-slate-100 py-2 px-2 rounded-lg text-gray-800 focus:outline-blue-300 disabled:bg-slate-50 disabled:text-gray-50" onChange={(e)=>{setCollectionAddress(e.target.value)}} value={collection} 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 5. 编辑 ./pages/_app.jsx，复制以下代码并保存import '../styles/globals.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp 6. 在./pages下新建 components文件夹，并新建 nftCards.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">{nft.id.tokenId.substr(nft.id.tokenId.length - 4)}</p> <p className="text-gray-600">{`${nft.contract.address.substr(0, 4)}...${nft.contract.address.substr(nft.contract.address.length - 4)}`}</p> </div> </div> <div className="flex-grow mt-2"> <p className="text-gray-600">{nft.descripiton?.substr(0, 150)}</p> </div> <div className="flex justify-center mb-1"> <a target={"_blank"} href={`https://etherscan.io/token/${nft.contract.address}`} className="py-2 px-4 bg-blue-500 w-1/2 text-center rounded-m text-white cursor-pointer">View on etherscan</a> </div> </div> ) } 7. 将./next-env.d 文件后缀名改为 .js，复制以下代码并保存，此文件在上传 github 时需 ignore，如果不上传 github，本步可以忽略module.exports = { api_key: "输入你的api_key" } step2 申请 Alchemy 帐号1. 注册 alchemy 帐号详细步骤可以回看 week1 教程的 step3。 https://www.alchemy.com/ 2. 进入 Dashboard，点击 create app。3. 依次填入 Name, Description，Chain 选择 Ethereum，Network 选择 Mainnet，然后点击 CREATE APP。4. 点击 VIEW KEY，复制 API KEY 的内容并粘贴到 ./next-env.d.js 文件中至此，全部搞定，查看效果图。输入 Azuki 的合约地址。step3 在官网提交任务并 claim NFT在官方申请网址中提交对应的信息。 https://alchemyapi.typeform.com/roadtoweekfour 在 mintkudos 网址中 claim Alchemy 的 NFT，通常需要一天至一周可以获得 allowlist 资格。 https://mintkudos.xyz/claim/853

## Publication Information

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