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

เมื่อไม่นานมานี้โปรเจค 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 ส่วนตัวผมมองว่าน่าจะได้เยอะอย่างแน่นอน.

เริ่มบทช่วยสอนในสัปดาห์ที่สิบแบบลงมือปฏิบัติ: วิธีสร้าง Twitter แบบกระจายอำนาจโดยใช้ Lens Protocol

Step1 เริ่มต้นโครงการ

1. ไปที่ https://replit.com/\\\~ กด Create เพื่อสร้างโปรเจค Note.js ของคุณ.

1. หลังจากสร้างสำเร็จแล้ว ให้ป้อนโค้ดต่อไปนี้ใน shell, หลังจากป้อนข้อมูลสำเร็จระบบจะแสดงข้อความ 'ok to process’ ก็ให้ป้อน y ตอบรอแพ็คเกจการติดตั้งที่โครงการต้องการเพื่อดาวน์โหลด และสร้างโครงการ.

npx create-next-app road-to-lens (road-to-lens คือชื่อโครงการของคุณ)

2. ป้อน cd road-to-lens ใน Shell เพื่อเข้าสู่โฟลเดอร์ จากนั้นป้อน npm install @apollo/client graphql เพื่อติดตั้งแพ็คเกจ graphql.

2. เนื่องจากโฟลเดอร์โครงการที่เราสร้างยังแสดงไม่หมด, เราต้องกด show hidden files เพื่อแสดงที่ช่อนอยู่ด้วย.

2. เปิดไฟล์ .replit ลบเนื้อหาต้นฉบับทั้งหมด แล้วเพิ่มโค้ดสองบรรทัดต่อไปนี้.

run = 'npm --prefix ./road-to-lens run dev'
entrypoint = './road-to-lens/pages/index.jsx'

3. คลิกปุ่ม "run" และอินเทอร์เฟซจะปรากฏขึ้น, ซึ่งหมายความว่าโครงการได้รับการ compiled สำเร็จแล้ว.

Step2 ลองใช้ Apollo GraphQL ในหน้า index.js ที่ lens แนะนำ

1. ตรงโฟลเดอร์ road-to-lens คลิกขวาเลือก Add File สร้างไฟล์ชื่อ apollo-client.js และเพิ่มโค้ดต่อไปนี้ลงในไฟล์.

// ./apollo-client.js

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "https://api.lens.dev",
    cache: new InMemoryCache(),
});

export default client;

2. ค้นหาไฟล์ pages/_app.js และแทนที่เนื้อหาไฟล์ด้วยโค้ดต่อไปนี้.

// pages/_app.js

import '../styles/globals.css'
import { ApolloProvider } from "@apollo/client";
import client from "../apollo-client";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp

3. ค้นหาโฟล์ pages/index.js และแทนที่โค้ดเก่าในไฟล์ด้วยโค้ดต่อไปนี้.

import { useQuery, gql } from "@apollo/client";

const recommendProfiles = gql`
  query RecommendedProfiles {
    recommendedProfiles {
          id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
          followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
          type
          }
          ... on RevertFollowModuleSettings {
          type
          }
        }
    }
  }
`;

export default function Home() {
  const {loading, error, data} = useQuery(recommendProfiles);

  if (loading) return 'Loading..';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      Hello
      {data.recommendedProfiles.map((profile, index) => {
        console.log(`Profile ${index}:`, profile);
        return (
          <div>
            <h1>{profile.name}</h1>
            <p>{profile.bio}</p>
            <div>{profile.attributes.map((attr, idx) => {
              if (attr.key === "website") {
                return <div><a href={`${attr.value}`}>{attr.value}</a><br/></div>
              } else if (attr.key === "twitter") {
                return <div><a href={`https://twitter.com/${attr.value}`}>@{attr.value}</a><br/></div>;
              }
              return(<div>{attr.value}</div>);
            })}</div>
          </div>
        );
      })}
    </div>
  )
}

4. จะเห็นว่ามีการเปลี่ยนแปลงหน้าเว็บ และสามารถกดปุ่มด้านล่างเพื่อดูการเปลี่ยนแปลงหน้าเว็บแบบเต็ม.

5. ใต้โฟลเดอร์ road-to-lens สร้างโฟลเดอร์ชื่อ queries และสร้างไฟล์ชื่อ recommendedProfilesQuery.js จากนั้นคัดลอกโค้ดด้านล่างแล้วเอามาวาง. (r เล็กในรูปผิด)

// queries/recommendedProfilesQuery.js

import {gql} from '@apollo/client';

export default gql`
  query RecommendedProfiles {
    recommendedProfiles {
          id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
          followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
          type
          }
          ... on RevertFollowModuleSettings {
          type
          }
        }
    }
  }
`;

6. สร้างโฟลเดอร์ชื่อ components ภายใต้โฟลเดอร์ road-to-lens และสร้างไฟล์ใหม่ชื่อ Profile.js ใต้โฟลเดอร์ components อีกที. จากนั้นคัดลอกโค้ดต่อไปนี้ลงในไฟล์.

// components/Profile.js

import Link from "next/link";
export default function Profile(props) {
  const profile = props.profile;

  // When displayFullProfile is true, we show more info.
  const displayFullProfile = props.displayFullProfile;

  return (
    <div className="p-8">
      <Link href={`/profile/${profile.id}`}>
        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
          <div className="md:flex">
            <div className="md:shrink-0">
              {profile.picture ? (
                <img
                  src={
                    profile.picture.original
                      ? profile.picture.original.url
                      : profile.picture.uri
                  }
                  className="h-48 w-full object-cover md:h-full md:w-48"
                />
              ) : (
                <div
                  style={{
                    backgrondColor: "gray",
                  }}
                  className="h-48 w-full object-cover md:h-full md:w-48"
                />
              )}
            </div>
            <div className="p-8">
              <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
                {profile.handle}
                {displayFullProfile &&
                  profile.name &&
                  " (" + profile.name + ")"}
              </div>
              <div className="block mt-1 text-sm leading-tight font-medium text-black hover:underline">
                {profile.bio}
              </div>
              <div className="mt-2 text-sm text-slate-900">{profile.ownedBy}</div>
              <p className="mt-2 text-xs text-slate-500">
                following: {profile.stats.totalFollowing} followers:{" "}
                {profile.stats.totalFollowers}
              </p>
            </div>
          </div>
        </div>
      </Link>
    </div>
  );
}

7. กลับมาที่ pages/index.js แล้วลบ และแทนที่ด้วยโค้ดด้านล่าง.

import { useQuery, gql } from "@apollo/client";
import recommendedProfilesQuery from '../queries/recommendedProfilesQuery.js';
import Profile from '../components/Profile.js';

export default function Home() {
  const {loading, error, data} = useQuery(recommendedProfilesQuery);

  if (loading) return 'Loading..';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      {data.recommendedProfiles?.map((profile, index) => {
        console.log(`Profile ${index}:`, profile);
        return <Profile key={profile.id} profile={profile} displayFullProfile={false} />;
      })}
    </div>
  )
}

Step3 ปรับสไตล์หน้าให้เหมาะสม

1. กลับไปที่ shell และป้อนโค้ดด้านล่างนี้.

#ติดตั้ง Tailwind
npm install -D tailwindcss postcss autoprefixer
#สร้าง tailwind.config.js 
npx tailwindcss init -p

2. วางโค้ดต่อไปนี้ในไฟล์ tailwind.config.js ที่สร้างขื้น.

// tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. เพิ่มโค้ดต่อไปนี้ในไฟล์ styles/globals.css ของเราด้วย.

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step4 สร้างหน้าโปรไฟล์

1. ป้อนโค้ด mkdir pages/profile เพื่อสร้างโฟลเดอร์ pages/profile, จากนั้นสร้างไฟล์ pages/profile/[id].js พร้อมป้อนโค้ดด้านล่างนี้.

import { useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import fetchProfileQuery from "../../queries/fetchProfileQuery.js";

import Profile from "../../components/Profile.js";

export default function ProfilePage() {
  const router = useRouter();
  const { id } = router.query;

  console.log("fetching profile for", id);
  const { loading, error, data } = useQuery(fetchProfileQuery, {
    variables: { request: { profileId: id } },
  });

  if (loading) return "Loading..";
  if (error) return `Error! ${error.message}`;

  console.log("on profile page data: ", data);

  return <Profile profile={data.profile} displayFullProfile={true}/>
}

2. สร้างไฟล์ queries/fetchProfileQuery.js จากนั้นคัดลอก และวางโค้ดด้านล่างลงไป.

// queries/fetchProfileQuery.js

import { gql } from '@apollo/client';

export default gql`
query($request: SingleProfileQueryRequest!) {
    profile(request: $request) {
        id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
        followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
            type
          }
          ... on RevertFollowModuleSettings {
            type
          }
        }
    }
  }
`;

3. สร้างไฟล์ components/Post.js แล้วป้อนโค้ดด้านล่างลงไป.

// components/Post.js
export default function Post(props) {
  const post = props.post;

  return (
    <div className="p-8">
      <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
        <div className="md:flex">
          <div className="p-8">
            <p className="mt-2 text-xs text-slate-500 whitespace-pre-line">
              {post.metadata.content}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

4. ผลลัพธ์ที่ถูกต้องคือจะเห็นรูป Profile แล้วสามารถกดเข้าไปดูข้อมูลต่างๆได้.

Step5 ส่งงาน

ส่ง github และ replit.

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

Step6 รับ NFT

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

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

Twitter Telegram Mirror

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

เริ่มบทช่วยสอนในสัปดาห์ที่สิบแบบลงมือปฏิบัติ: วิธีสร้าง Twitter แบบกระจายอำนาจโดยใช้ Lens Protocol

Step1 เริ่มต้นโครงการ

1. ไปที่ https://replit.com/\\\~ กด Create เพื่อสร้างโปรเจค Note.js ของคุณ.

npx create-next-app road-to-lens (road-to-lens คือชื่อโครงการของคุณ)

2. เปิดไฟล์ .replit ลบเนื้อหาต้นฉบับทั้งหมด แล้วเพิ่มโค้ดสองบรรทัดต่อไปนี้.

run = 'npm --prefix ./road-to-lens run dev'
entrypoint = './road-to-lens/pages/index.jsx'

Step2 ลองใช้ Apollo GraphQL ในหน้า index.js ที่ lens แนะนำ

// ./apollo-client.js

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "https://api.lens.dev",
    cache: new InMemoryCache(),
});

export default client;

2. ค้นหาไฟล์ pages/_app.js และแทนที่เนื้อหาไฟล์ด้วยโค้ดต่อไปนี้.

// pages/_app.js

import '../styles/globals.css'
import { ApolloProvider } from "@apollo/client";
import client from "../apollo-client";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp

3. ค้นหาโฟล์ pages/index.js และแทนที่โค้ดเก่าในไฟล์ด้วยโค้ดต่อไปนี้.

import { useQuery, gql } from "@apollo/client";

const recommendProfiles = gql`
  query RecommendedProfiles {
    recommendedProfiles {
          id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
          followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
          type
          }
          ... on RevertFollowModuleSettings {
          type
          }
        }
    }
  }
`;

export default function Home() {
  const {loading, error, data} = useQuery(recommendProfiles);

  if (loading) return 'Loading..';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      Hello
      {data.recommendedProfiles.map((profile, index) => {
        console.log(`Profile ${index}:`, profile);
        return (
          <div>
            <h1>{profile.name}</h1>
            <p>{profile.bio}</p>
            <div>{profile.attributes.map((attr, idx) => {
              if (attr.key === "website") {
                return <div><a href={`${attr.value}`}>{attr.value}</a><br/></div>
              } else if (attr.key === "twitter") {
                return <div><a href={`https://twitter.com/${attr.value}`}>@{attr.value}</a><br/></div>;
              }
              return(<div>{attr.value}</div>);
            })}</div>
          </div>
        );
      })}
    </div>
  )
}

// queries/recommendedProfilesQuery.js

import {gql} from '@apollo/client';

export default gql`
  query RecommendedProfiles {
    recommendedProfiles {
          id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
          followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
          type
          }
          ... on RevertFollowModuleSettings {
          type
          }
        }
    }
  }
`;

// components/Profile.js

import Link from "next/link";
export default function Profile(props) {
  const profile = props.profile;

  // When displayFullProfile is true, we show more info.
  const displayFullProfile = props.displayFullProfile;

  return (
    <div className="p-8">
      <Link href={`/profile/${profile.id}`}>
        <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
          <div className="md:flex">
            <div className="md:shrink-0">
              {profile.picture ? (
                <img
                  src={
                    profile.picture.original
                      ? profile.picture.original.url
                      : profile.picture.uri
                  }
                  className="h-48 w-full object-cover md:h-full md:w-48"
                />
              ) : (
                <div
                  style={{
                    backgrondColor: "gray",
                  }}
                  className="h-48 w-full object-cover md:h-full md:w-48"
                />
              )}
            </div>
            <div className="p-8">
              <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
                {profile.handle}
                {displayFullProfile &&
                  profile.name &&
                  " (" + profile.name + ")"}
              </div>
              <div className="block mt-1 text-sm leading-tight font-medium text-black hover:underline">
                {profile.bio}
              </div>
              <div className="mt-2 text-sm text-slate-900">{profile.ownedBy}</div>
              <p className="mt-2 text-xs text-slate-500">
                following: {profile.stats.totalFollowing} followers:{" "}
                {profile.stats.totalFollowers}
              </p>
            </div>
          </div>
        </div>
      </Link>
    </div>
  );
}

7. กลับมาที่ pages/index.js แล้วลบ และแทนที่ด้วยโค้ดด้านล่าง.

import { useQuery, gql } from "@apollo/client";
import recommendedProfilesQuery from '../queries/recommendedProfilesQuery.js';
import Profile from '../components/Profile.js';

export default function Home() {
  const {loading, error, data} = useQuery(recommendedProfilesQuery);

  if (loading) return 'Loading..';
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      {data.recommendedProfiles?.map((profile, index) => {
        console.log(`Profile ${index}:`, profile);
        return <Profile key={profile.id} profile={profile} displayFullProfile={false} />;
      })}
    </div>
  )
}

Step3 ปรับสไตล์หน้าให้เหมาะสม

1. กลับไปที่ shell และป้อนโค้ดด้านล่างนี้.

#ติดตั้ง Tailwind
npm install -D tailwindcss postcss autoprefixer
#สร้าง tailwind.config.js 
npx tailwindcss init -p

2. วางโค้ดต่อไปนี้ในไฟล์ tailwind.config.js ที่สร้างขื้น.

// tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. เพิ่มโค้ดต่อไปนี้ในไฟล์ styles/globals.css ของเราด้วย.

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step4 สร้างหน้าโปรไฟล์

import { useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import fetchProfileQuery from "../../queries/fetchProfileQuery.js";

import Profile from "../../components/Profile.js";

export default function ProfilePage() {
  const router = useRouter();
  const { id } = router.query;

  console.log("fetching profile for", id);
  const { loading, error, data } = useQuery(fetchProfileQuery, {
    variables: { request: { profileId: id } },
  });

  if (loading) return "Loading..";
  if (error) return `Error! ${error.message}`;

  console.log("on profile page data: ", data);

  return <Profile profile={data.profile} displayFullProfile={true}/>
}

2. สร้างไฟล์ queries/fetchProfileQuery.js จากนั้นคัดลอก และวางโค้ดด้านล่างลงไป.

// queries/fetchProfileQuery.js

import { gql } from '@apollo/client';

export default gql`
query($request: SingleProfileQueryRequest!) {
    profile(request: $request) {
        id
        name
        bio
        attributes {
          displayType
          traitType
          key
          value
        }
        followNftAddress
        metadata
        isDefault
        picture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        handle
        coverPicture {
          ... on NftImage {
            contractAddress
            tokenId
            uri
            verified
          }
          ... on MediaSet {
            original {
              url
              mimeType
            }
          }
          __typename
        }
        ownedBy
        dispatcher {
          address
          canUseRelay
        }
        stats {
          totalFollowers
          totalFollowing
          totalPosts
          totalComments
          totalMirrors
          totalPublications
          totalCollects
        }
        followModule {
          ... on FeeFollowModuleSettings {
            type
            amount {
              asset {
                symbol
                name
                decimals
                address
              }
              value
            }
            recipient
          }
          ... on ProfileFollowModuleSettings {
            type
          }
          ... on RevertFollowModuleSettings {
            type
          }
        }
    }
  }
`;

3. สร้างไฟล์ components/Post.js แล้วป้อนโค้ดด้านล่างลงไป.

// components/Post.js
export default function Post(props) {
  const post = props.post;

  return (
    <div className="p-8">
      <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
        <div className="md:flex">
          <div className="p-8">
            <p className="mt-2 text-xs text-slate-500 whitespace-pre-line">
              {post.metadata.content}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Step5 ส่งงาน

ส่ง github และ replit.

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

Step6 รับ NFT

Twitter Telegram Mirror

JQ

JQ

เริ่มบทช่วยสอนในสัปดาห์ที่สิบแบบลงมือปฏิบัติ: วิธีสร้าง Twitter แบบกระจายอำนาจโดยใช้ Lens Protocol

Step1 เริ่มต้นโครงการ

Step2 ลองใช้ Apollo GraphQL ในหน้า index.js ที่ lens แนะนำ

Step3 ปรับสไตล์หน้าให้เหมาะสม

Step4 สร้างหน้าโปรไฟล์

Step5 ส่งงาน

Step6 รับ NFT

No comments yet

JQ

JQ

เริ่มบทช่วยสอนในสัปดาห์ที่สิบแบบลงมือปฏิบัติ: วิธีสร้าง Twitter แบบกระจายอำนาจโดยใช้ Lens Protocol

Step1 เริ่มต้นโครงการ

Step2 ลองใช้ Apollo GraphQL ในหน้า index.js ที่ lens แนะนำ

Step3 ปรับสไตล์หน้าให้เหมาะสม

Step4 สร้างหน้าโปรไฟล์

Step5 ส่งงาน

Step6 รับ NFT

No comments yet

เริ่มบทช่วยสอนในสัปดาห์ที่สิบแบบลงมือปฏิบัติ: วิธีสร้าง Twitter แบบกระจายอำนาจโดยใช้ Lens Protocol

Step1 เริ่มต้นโครงการ

Step2 ลองใช้ Apollo GraphQL ในหน้า index.js ที่ lens แนะนำ

Step3 ปรับสไตล์หน้าให้เหมาะสม

Step4 สร้างหน้าโปรไฟล์

Step5 ส่งงาน

Step6 รับ NFT

เริ่มบทช่วยสอนในสัปดาห์ที่สิบแบบลงมือปฏิบัติ: วิธีสร้าง Twitter แบบกระจายอำนาจโดยใช้ Lens Protocol

Step1 เริ่มต้นโครงการ

Step2 ลองใช้ Apollo GraphQL ในหน้า index.js ที่ lens แนะนำ

Step3 ปรับสไตล์หน้าให้เหมาะสม

Step4 สร้างหน้าโปรไฟล์

Step5 ส่งงาน

Step6 รับ NFT

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

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

No comments yet

No comments yet