بدء استخدام Firebase Data Connect باستخدام React

في هذا التشغيل السريع، ستنشئ قاعدة بيانات صغيرة نموذجية وتنشرها، ثم ستصل إليها من واجهة أمامية تستخدم React.

المتطلبات الأساسية

لإكمال هذا التشغيل السريع، ستحتاج إلى ما يلي:

  • بيئة Node.js مع NPM
  • حساب Google

برنامج تعليمي

برنامج تعليمي

1. إنشاء مشروع جديد على Firebase

ابدأ بإنشاء مشروع جديد على Firebase في وحدة تحكّم Firebase. بعد ذلك، يمكنك ترقية المشروع إلى خطة Blaze.

2. إعداد مشروعك

أنشئ دليلاً جديدًا وأضِف إليه مشروع Firebase. عند المطالبة، حدِّد الخيارات التالية:

  • اختَر المشروع الذي أنشأته في الخطوة السابقة.
  • لا تنشئ مخططًا باستخدام Gemini (في هذا البرنامج التعليمي، ستستخدم مخطط مثال تم إنشاؤه مسبقًا).
  • أنشئ مثيلاً جديدًا من Cloud SQL.
  • أنشئ نموذج React.
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3- مراجعة أمثلة على تعريفات 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
  }
}

4. نشر المخططات والعمليات

عند إجراء تغييرات على مخططات قاعدة البيانات أو طلبات البحث أو عمليات التعديل، عليك نشرها حتى يتم تطبيق التغييرات على قاعدة البيانات.

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

5- تعبئة قاعدة البيانات بنموذج البيانات

ستوفّر لك بيانات البداية هذه بعض المعلومات التي يمكنك الاطّلاع عليها عند اختبار التطبيق النموذجي. يُرجى العِلم أنّه في هذه الخطوة، يمكنك تنفيذ أي استعلام GraphQL، وهو أمر مسموح به للمهام الإدارية.

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

6. إنشاء حزمة تطوير برامج (SDK) لعميل JavaScript

يستخدم هذا الأمر تعريفات GraphQL لإنشاء مكتبة JavaScript خاصة بقاعدة البيانات، وتتضمّن تعريفات الأنواع. يمكنك استخدام هذه المكتبة في تطبيق العميل لتنفيذ جميع عمليات قاعدة البيانات.

يمكنك إنشاء مكتبات لأنظمة أساسية متعددة، بما في ذلك Kotlin لنظام Android وSwift لنظام iOS وFlutter، وذلك عن طريق إضافة تعريفات إلى connector.yaml.

 
npx -y firebase-tools@latest \
    dataconnect:sdk:generate
 حزمة تطوير البرامج (SDK) التي تم إنشاؤها تلقائيًا في 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>;

7. إعداد تطبيق ويب

نفِّذ هذه الأوامر لإضافة تطبيق ويب جديد إلى مشروعك على 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 ..

8. كتابة نموذج عميل 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;

9. تجربة تطبيق الويب

ابدأ تشغيل خادم التطوير لرؤية مثال التطبيق أثناء عمله.

 
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. ابدأ بصفحة مخططات Data Connect التصميم، ثم انتقِل إلى الصفحات التالية للتعرّف على كيفية كتابة العمليات.