Alchemy 是什么项目？

2019 年 12 月，Alchemy 完成1500 万美元 A 轮融资，资方为 Pantera Capital，斯坦福大学，Coinbase，三星等。

2021 年 4 月，Alchemy 以 5.05 亿美元估值完成8000 万美元 B 轮融资，Coatue 和 Addition 领投，DFJ Growth、K5 Global、Chainsmokers（烟鬼组合）、演员 Jared Leto 和 Glazer 家族参投。

2021 年 10 月，Alchemy 以 35 亿美元估值完成2.5 亿美元 C 轮融资，由 a16z 领投的。

2022 年 2 月，Alchemy 以 102 亿美元估值完成2 亿美元融资，Lightspeed 与 Silver Lake 领投。

Alchemy 是一个背景强大、经费充足、踏实做事、没有发币的团队，这样的项目不刷，难道去刷土狗吗？

并且，Alchemy 计划将新资金用于推广 Web3 采用，这方面的一些举措包括推出 Web3 University，就是现在的 Road to Web3 活动，活动为期 10 周，每周一个 NFT。看了下 nft 数量极少，估计由于任务难度大，很多小伙伴直接放弃，这样的项目若是空投，绝对是大毛。

手把手第四周教程开始：如何创建 NFT 画廊

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 上传至 github

代码上传至 github 教程

step7 项目提交

提交链接

直接填写上传的项目的 github 网址即可。