شروع کار با Firebase Data Connect با استفاده از React

در این آموزش سریع، شما یک پایگاه داده نمونه کوچک ایجاد و مستقر خواهید کرد و از طریق رابط کاربری React به آن دسترسی خواهید داشت.

پیش‌نیازها

برای تکمیل این راهنمای سریع، به موارد زیر نیاز دارید:

  • یک محیط Node.js با NPM.
  • یک حساب گوگل.

آموزش

آموزش

۱. یک پروژه جدید Firebase ایجاد کنید

با ایجاد یک پروژه جدید Firebase در کنسول Firebase شروع کنید. سپس، پروژه را به طرح Blaze ارتقا دهید.

۲. پروژه خود را راه‌اندازی کنید

یک دایرکتوری جدید ایجاد کنید و یک پروژه Firebase را در آن راه‌اندازی کنید. در صورت درخواست، گزینه‌های زیر را انتخاب کنید:

  • پروژه‌ای که در مرحله قبل ایجاد کردید را انتخاب کنید.
  • با Gemini طرحواره ایجاد نکنید (در این آموزش، از یک طرحواره نمونه از پیش ساخته شده استفاده خواهید کرد).
  • یک نمونه جدید Cloud SQL ایجاد کنید.
  • یک الگوی React ایجاد کنید.
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

۳. مثال‌های تعاریف GraphQL را مرور کنید

در Data Connect ، شما تمام طرح‌ها و عملیات پایگاه داده خود را با استفاده از GraphQL تعریف می‌کنید. وقتی پروژه خود را مقداردهی اولیه کردید، Firebase CLI چند نمونه تعریف برای شروع کار شما ایجاد کرد.

 dataconnect/schema/schema.gql (گزیده)
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
dataconnect/example/queries.gql (گزیده) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

۴. طرح‌ها و عملیات خود را مستقر کنید

هر زمان که تغییراتی در طرحواره‌ها، پرس‌وجوها یا جهش‌های پایگاه داده خود ایجاد می‌کنید، باید آنها را مستقر کنید تا تغییرات شما روی پایگاه داده اعمال شوند. 

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

۵. پایگاه داده را با داده‌های نمونه پر کنید

این داده‌های اولیه به شما امکان می‌دهد هنگام آزمایش برنامه نمونه، آنها را بررسی کنید. توجه داشته باشید که در این مرحله، شما GraphQL دلخواه را اجرا می‌کنید که برای وظایف مدیریتی مجاز است. 

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

۶. یک SDK کلاینت جاوا اسکریپت ایجاد کنید

این دستور از تعاریف GraphQL شما برای تولید یک کتابخانه جاوا اسکریپت مخصوص پایگاه داده شما، به همراه تعاریف نوع، استفاده می‌کند. شما از این کتابخانه در برنامه کلاینت خود برای انجام تمام عملیات پایگاه داده استفاده می‌کنید.

شما می‌توانید با اضافه کردن تعاریف به connector.yaml ، کتابخانه‌هایی برای چندین پلتفرم، از جمله Kotlin برای اندروید، Swift برای iOS و Flutter، ایجاد کنید. 

npx -y firebase-tools@latest \
    dataconnect:sdk:generate
کیت توسعه نرم‌افزار React که به صورت خودکار تولید شده است (گزیده) 
export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

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

۷. یک برنامه وب راه‌اندازی کنید

این دستورات را اجرا کنید تا یک برنامه وب جدید به پروژه Firebase خود اضافه کنید. 

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

۸. یک کلاینت React نمونه بنویسید

محتویات web-app/src/App.jsx را با این برنامه React ساده جایگزین کنید.

توجه داشته باشید که برنامه با استفاده از تابعی از SDK تولید شده، دسترسی لازم به پایگاه داده را تکمیل می‌کند. SDK تولید شده برای React از TanStack Query برای مدیریت وضعیت استفاده می‌کند. 

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 یک ابزار هوش مصنوعی است که می‌تواند طرحواره‌های Data Connect را از توضیحات زبان طبیعی برنامه شما تولید کند. این ابزار می‌تواند خیلی سریع شما را شروع کند، به خصوص اگر قبلاً هرگز با پایگاه‌های داده رابطه‌ای کار نکرده‌اید.
  • از طرف دیگر، می‌توانید طرحواره‌ها، کوئری‌ها و جهش‌های پایگاه داده را مستقیماً با استفاده از GraphQL بنویسید. با صفحه طرحواره‌های Design Data Connect شروع کنید و برای یادگیری نحوه نوشتن عملیات، به صفحات بعدی بروید.