Alchemy Road to web3 week4 คู่มือภาษาไทย

เมื่อไม่นานมานี้โปรเจค Alchemy ได้เข้าสู่ web3 ด้วยมูลค่า 10.2 พันล้านดอลลาร์ และได้รับการระดมทุน 545 ล้านดอลลาร์.

Alchemy คือโปรเจคอะไร？

Alchemy คือแพลตฟอร์มสำหรับนักพัฒนา dApp บน web3. เป็นรากฐานที่อยู่เบื้องหลังตลาด NFT ยอดนิยมอย่าง OpenSea, Nifty และคอลเล็กชั่นระดับโลกที่สำคัญมากมาย.

12/2019, Alchemy เสร็จสิ้นการจัดหาเงินทุน Series A มูลค่า 15 ล้านดอลลาร์จาก Pantera Capital, Stanford University, Coinbase, Samsung,…

4/2021, Alchemy ได้เสร็จสิ้นการจัดหาเงินทุน Series B มูลค่า 80 ล้านดอลลาร์ โดยมีมูลค่า 505 ล้านดอลลาร์ นำโดย Coatue and Addition โดยมีส่วนร่วมจาก DFJ Growth, K5 Global, Chainsmokers, นักแสดง Jared Leto และครอบครัว Glazer.

10/2021, Alchemy ได้เสร็จสิ้นการจัดหาเงินทุน Series C มูลค่า 250 ล้านดอลลาร์ โดยมีมูลค่า 3.5 พันล้านดอลลาร์ นำโดย a16z.

2/2022, Alchemy ได้เสร็จสิ้นการจัดหาเงินทุน 200 ล้านดอลลาร์โดยมีมูลค่า 10.2 พันล้านดอลลาร์ซึ่งนำโดย Lightspeed และ Silver Lake.

Alchemy เป็นทีมที่มีพื้นฐานที่แข็งแกร่ง, เงินทุนที่เพียงพอ, ทำงานจริง, และยังไม่ได้ออก token.

และ Alchemy วางแผนที่จะใช้เงินทุนใหม่นี้เพื่อกระตุ้นการใช้งาน Web3, บางส่วนรวมถึงการเปิดตัว Web3 University, ซึ่งปัจจุบันเป็นงาน Road to Web3 เป็นเวลา 10 สัปดาห์ด้วยหนึ่ง NFT ต่อสัปดาห์. ผมเห็นว่าจำนวน nfts ที่มิ้นออกมานั้นน้อยมาก คาดว่าเนื่องจากความยากของงาน คนจำนวนมากจึงยอมแพ้ที่จะเข้าร่วม, หากโปรเจคนี้มี Airdrop ส่วนตัวผมมองว่าน่าจะได้เยอะอย่างแน่นอน.

เริ่มบทช่วยสอนในสัปดาห์ที่สี่แบบลงมือปฏิบัติ: วิธีสร้าง NFT Gallery

step1 สร้าง Project Setup

1.เปิด console และป้อน code ต่อไปนี้เพื่อสร้างต้นแบบโปรเจค Next JS และติดตั้ง TailwindCSS

ป้อน npx create-next-app -e with-tailwindcss nameoftheproject ดังที่แสดงในภาพด้านล่าง.

2.ป้อน cd nameoftheproject && code . (อย่าวางจุดสุดท้ายมันจะเปิดโปรเจคก่อนหน้านี้).

3.ป้อน npm run dev ใน console. หากไฟร์วอลล์ปรากฏขึ้น, ให้คลิกอนุญาตการเข้าถึง (ถ้าไม่ขึ้นก็ไม่ต้องกดอะไร).

4.กลับไปที่ vscode เปลี่ยนนามสกุลของไฟล์ index.tsx และ _app.tsx เป็น .jsx และลบส่วนที่แจ้งข้อผิดพลาดใน _app.jsx ดังที่แสดงในภาพด้านล่าง.

หรือเพียงแค่วางโค้ดด้านล่างแทน.

import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

step2 แก้ไข code 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 สร้าง Alchemy Application ใหม่

เข้าไปที่ alchemy ตรงหน้า dashboard กด CREATE APP.

2.ป้อนข้อมูล แล้วคลิก CREATE APP.

3.คลิก view key และคัดลอกคีย์ API ในช่องสีแดงที่ขีดไว้.

4.กลับไปที่ vscode ค้นหา const api_key ใน index.jsx ด้วย ctrl+f คุณจะพบ 2 ตำแหน่ง เปลี่ยนทั้งหมดเป็น key ที่คัดลอกไว้ในขั้นตอนก่อนหน้านี้แล้วบันทึก.

Step4 สร้างส่วนประกอบการ์ด NFT

1.สร้างไฟล์ใหม่ชื่อ nftCard.jsx ใต้ pages และวางโค้ดต่อไปนี้ลงไป.

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 ใน console กด Enter จากนั้นป้อน npm run dev ดังที่แสดงในภาพด้านล่าง.

2.แล้วก๊อป http://localhost:3000 ที่เราได้มาจาก console เมื่อกี้ไปเปิดใน Browser (เราได้มาทั้ง 3000 และ 3001 จากการรันสอง server ผมไม่รู้ว่าต่างกันยังไงเพราะลองเปิดทั้งสองแล้วรูปก็ออกมาเหมือนกันเลยเลือก 3000 ไป).

3.ใส่เลขกระเป๋าของคุณเอง แล้วคลิก Let’s go!

Step6 อัปโหลดไปยัง github

ถึงขั้นตอนนี้ผมได้ลองโหลด git มาแล้ว git remote add origin แล้วแต่ก็ขื้น error รัวๆเลยไปหาวิธีแล้วก็เวิร์ดแถมง่ายด้วยนั้นก็คือโหลดโปรแกรม Github มาจากนั้นให้เราสร้าง main public repository แล้ว add nameoftheproject folder ลงเลย.

Step7 ส่งงาน

https://docs.google.com/forms/d/e/1FAIpQLSdNNLXMYZmIhjcWoT-UedS3AoGpRiPDRaNARUPGXLbX1TVvSg/closedform

เพียงกรอก URL github ของโปรเจคที่อัปโหลด.

step8 รับ nft

เราสามารถเช็ด nft ที่เรายังไม่ได้เคลมได้นะครับโดยเข้าไปที่ mintkudos จากนั้นต่อกระเป๋ามุมขวามือลองกดเช็ดดูถ้ามีปลุ่ม claim แปลว่าเรามี nft ที่เราสามารถเคลมได้แต่เรายังไม่ได้เคลม.

เท่านี้ก็จบกันไปแล้วนะครับกับ Alchemy Road to web3 week4 ใครมีคำถาม หรือสงสัยยังไงสามารถถามได้. ส่วนใครที่อยากจะสนับสนุนค่ากาแฟให้ผู้เขียนสามารถกดปุ่ม Collect Entry ได้ที่ด้านล่างนี้จากนั้นเราจะได้ nft บทความของ mirror.xyz chain optimism และสามารถเช็ด nft ที่เรา collect มาได้ที่ QxProfile.

Twitter Telegram Mirror

collect://

Alchemy คือโปรเจคอะไร？

เริ่มบทช่วยสอนในสัปดาห์ที่สี่แบบลงมือปฏิบัติ: วิธีสร้าง NFT Gallery

step1 สร้าง Project Setup

1.เปิด console และป้อน code ต่อไปนี้เพื่อสร้างต้นแบบโปรเจค Next JS และติดตั้ง TailwindCSS

ป้อน npx create-next-app -e with-tailwindcss nameoftheproject ดังที่แสดงในภาพด้านล่าง.

2.ป้อน cd nameoftheproject && code . (อย่าวางจุดสุดท้ายมันจะเปิดโปรเจคก่อนหน้านี้).

หรือเพียงแค่วางโค้ดด้านล่างแทน.

import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

step2 แก้ไข code 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 สร้าง Alchemy Application ใหม่

เข้าไปที่ alchemy ตรงหน้า dashboard กด CREATE APP.

2.ป้อนข้อมูล แล้วคลิก CREATE APP.

3.คลิก view key และคัดลอกคีย์ API ในช่องสีแดงที่ขีดไว้.

Step4 สร้างส่วนประกอบการ์ด NFT

1.สร้างไฟล์ใหม่ชื่อ nftCard.jsx ใต้ pages และวางโค้ดต่อไปนี้ลงไป.

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 ใน console กด Enter จากนั้นป้อน npm run dev ดังที่แสดงในภาพด้านล่าง.

3.ใส่เลขกระเป๋าของคุณเอง แล้วคลิก Let’s go!

Step6 อัปโหลดไปยัง github

Step7 ส่งงาน

https://docs.google.com/forms/d/e/1FAIpQLSdNNLXMYZmIhjcWoT-UedS3AoGpRiPDRaNARUPGXLbX1TVvSg/closedform

เพียงกรอก URL github ของโปรเจคที่อัปโหลด.

step8 รับ nft

Twitter Telegram Mirror

collect://

เริ่มบทช่วยสอนในสัปดาห์ที่สี่แบบลงมือปฏิบัติ: วิธีสร้าง NFT Gallery

step1 สร้าง Project Setup

step2 แก้ไข code index.jsx

Step3 สร้าง Alchemy Application ใหม่

Step4 สร้างส่วนประกอบการ์ด NFT

Step5 ทำการทดสอบ

Step6 อัปโหลดไปยัง github

Step7 ส่งงาน

step8 รับ nft

No comments yet

JQ

เริ่มบทช่วยสอนในสัปดาห์ที่สี่แบบลงมือปฏิบัติ: วิธีสร้าง NFT Gallery

step1 สร้าง Project Setup

step2 แก้ไข code index.jsx

Step3 สร้าง Alchemy Application ใหม่

Step4 สร้างส่วนประกอบการ์ด NFT

Step5 ทำการทดสอบ

Step6 อัปโหลดไปยัง github

Step7 ส่งงาน

step8 รับ nft

No comments yet

เริ่มบทช่วยสอนในสัปดาห์ที่สี่แบบลงมือปฏิบัติ: วิธีสร้าง NFT Gallery

step1 สร้าง Project Setup

step2 แก้ไข code index.jsx

Step3 สร้าง Alchemy Application ใหม่

Step4 สร้างส่วนประกอบการ์ด NFT

Step5 ทำการทดสอบ

Step6 อัปโหลดไปยัง github

Step7 ส่งงาน

step8 รับ nft

เริ่มบทช่วยสอนในสัปดาห์ที่สี่แบบลงมือปฏิบัติ: วิธีสร้าง NFT Gallery

step1 สร้าง Project Setup

step2 แก้ไข code index.jsx

Step3 สร้าง Alchemy Application ใหม่

Step4 สร้างส่วนประกอบการ์ด NFT

Step5 ทำการทดสอบ

Step6 อัปโหลดไปยัง github

Step7 ส่งงาน

step8 รับ nft

Alchemy Road to web3 week4 คู่มือภาษาไทย

Alchemy Road to web3 week4 คู่มือภาษาไทย

No comments yet

No comments yet