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

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

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

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

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

บทแนะนำ

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 ; cd ..

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

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

ลองใช้ส่วนขยาย Visual Studio Code

เมื่อพัฒนาด้วย Data Connect เราขอแนะนำให้ใช้ส่วนขยาย Visual Studio 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 การออกแบบ แล้วไปที่หน้าติดตามผลเพื่อดูวิธีเขียนการดำเนินการ