เริ่มต้นใช้งาน Firebase Data Connect โดยใช้ React

ในการเริ่มต้นอย่างรวดเร็วนี้ คุณจะได้สร้างและติดตั้งใช้งานฐานข้อมูลตัวอย่างขนาดเล็ก รวมถึงเข้าถึงฐานข้อมูลจากส่วนหน้าของ React

ข้อกำหนดเบื้องต้น

คุณต้องมีสิ่งต่อไปนี้เพื่อทําคู่มือเริ่มใช้งานฉบับย่อนี้ให้เสร็จสมบูรณ์

• สภาพแวดล้อม Node.js ที่มี NPM
• บัญชี Google

บทแนะนำ

mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

npx -y firebase-tools@latest deploy --only dataconnect

npx -y firebase-tools@latest \
         dataconnect:execute dataconnect/seed_data.gql

npx -y firebase-tools@latest dataconnect:sdk:generate

export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

export function useListMovies(
  options?: useDataConnectQueryOptions&<ListMoviesData>
): UseDataConnectQueryResult&<ListMoviesData, undefined>;

npx -y firebase-tools@latest \
          apps:create web react-example
npx -y firebase-tools@latest \
          apps:sdkconfig web \
          -o web-app/src/firebase-config.json
cd web-app
npm i firebase \
            @tanstack/react-query \
            @tanstack-query-firebase/react

import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebase-config.json';
import {
  QueryClient,
  QueryClientProvider
} from '@tanstack/react-query';

import { useListMovies } from '@dataconnect/generated/react';
import './App.css';

const app = initializeApp(firebaseConfig);
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Movies />
    </QueryClientProvider>
  );
}

function Movies() {
  const { isLoading, data } = useListMovies();
  if (isLoading) {
    return <h1>...</h1>
  }
  return (
    <>
      {data?.movies.map(
        movie => <h1 key={movie.id}>{movie.title}</h1>
      )}
    </>
  );
}

export default App;

npm run dev

ขั้นตอนถัดไป

ลองใช้ส่วนขยาย Data Connect VS Code

เมื่อพัฒนาด้วย Data Connect เราขอแนะนําอย่างยิ่งให้ใช้ส่วนขยาย Data Connect VS Code แม้ว่าคุณจะไม่ได้ใช้ Visual Studio Code เป็นสภาพแวดล้อมการพัฒนาหลัก ส่วนขยายก็มีฟีเจอร์หลายอย่างที่ช่วยให้การพัฒนาสคีมาและการดำเนินการ สะดวกยิ่งขึ้น

• เซิร์ฟเวอร์ภาษา GraphQL ที่ให้การตรวจสอบไวยากรณ์และคำแนะนำในการเติมข้อความอัตโนมัติที่เจาะจงสำหรับ Data Connect
• ปุ่ม CodeLens ในบรรทัดเดียวกับโค้ดที่ช่วยให้คุณอ่านและเขียนข้อมูลจากไฟล์คำจำกัดความของสคีมา และเรียกใช้การค้นหาและการเปลี่ยนแปลงจากคำจำกัดความของการดำเนินการได้
• ซิงค์ SDK ที่สร้างขึ้นกับคำจำกัดความ GraphQL โดยอัตโนมัติ
• การตั้งค่าโปรแกรมจำลองในเครื่องแบบง่าย
• การนำไปใช้งานในเวอร์ชันที่ใช้งานจริงที่ง่ายขึ้น

ใช้Data Connectโปรแกรมจำลองสำหรับ การพัฒนาภายใน

แม้ว่าบทแนะนำนี้จะแสดงวิธีทำให้ใช้งานได้สคีมาและโอเปอเรชัน Data Connect ไปยังเวอร์ชันที่ใช้งานจริงโดยตรง แต่คุณอาจไม่ต้องการทำการเปลี่ยนแปลงฐานข้อมูลเวอร์ชันที่ใช้งานจริง ขณะที่กำลังพัฒนาแอปอยู่ ให้ตั้งค่าData Connectโปรแกรมจำลอง และทำงานพัฒนาแอปกับโปรแกรมจำลองแทนเวอร์ชันที่ใช้งานจริง โปรแกรมจำลองจะตั้งค่าอินสแตนซ์ PGlite ในเครื่อง ซึ่งทำงานคล้ายกับอินสแตนซ์ Postgres ที่ใช้งานจริงใน CloudSQL

ดูวิธีเขียนสคีมาและ การดำเนินการสำหรับแอป

เมื่อพัฒนาแอปด้วย Data Connect การออกแบบสคีมาและการดำเนินการ เป็นหนึ่งในงานพัฒนาแรกๆ และสำคัญที่สุดที่คุณจะต้องทำ

• Gemini ในคอนโซล Firebase เป็นเครื่องมือ AI ที่สร้างData Connectสคีมาจากคำอธิบายแอปในภาษาที่เป็นธรรมชาติได้ เครื่องมือนี้ช่วยให้คุณเริ่มต้นใช้งานได้อย่างรวดเร็ว โดยเฉพาะอย่างยิ่งหากคุณไม่เคยทำงานกับ ฐานข้อมูลเชิงสัมพันธ์มาก่อน
• หรือจะเขียนสคีมาฐานข้อมูล การค้นหา และการเปลี่ยนแปลงโดยตรงโดยใช้ GraphQL ก็ได้ เริ่มต้นที่หน้าสคีมาData Connectการออกแบบ แล้วไปที่หน้าถัดไปเพื่อดูวิธีเขียนการดำเนินการ