بدء استخدام Firebase SQL 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

الخطوات التالية

جرِّب إضافة SQL Connect VS Code

عند التطوير باستخدام SQL Connect، ننصحك بشدة باستخدام إضافة SQL Connect VS Code. حتى إذا لم تكن تستخدم Visual Studio Code كبيئة التطوير الأساسية، يوفّر لك هذا الامتداد العديد من الميزات التي تجعل عملية تطوير المخططات والعمليات أكثر ملاءمة:

• خادم لغة GraphQL يوفّر عمليات التحقّق من البنية واقتراحات الإكمال التلقائي الخاصة بـ SQL Connect
• أزرار CodeLens في سطر الرمز البرمجي تتيح لك قراءة البيانات وكتابتها من ملفات تعريف المخطط وتنفيذ طلبات البحث وعمليات التعديل من تعريفات العمليات.
• الحفاظ على مزامنة حِزم SDK التي تم إنشاؤها تلقائيًا مع تعريفات GraphQL
• إعداد مبسّط للمحاكي المحلي
• نشر مبسّط للإصدار العلني

استخدام محاكي SQL Connect للتطوير المحلي

على الرغم من أنّ هذا البرنامج التعليمي قد أوضح لك كيفية نشر مخططات SQL Connect وعملياتها مباشرةً، من المحتمل أنّك لن تريد إجراء تغييرات على قاعدة بياناتك النشطة أثناء تطوير تطبيقك. بدلاً من ذلك، يمكنك إعداد محاكي SQL Connect وإجراء أعمال التطوير عليه بدلاً من قاعدة البيانات النشطة. يُعدّ المحاكي نسخة محلية من PGlite تعمل بشكل مشابه لنسخة PostgreSQL مباشرة على Cloud SQL.

تعرَّف على كيفية كتابة المخططات والعمليات لتطبيقك

عند تطوير تطبيقات باستخدام SQL Connect، يُعد تصميم المخططات والعمليات من أولى مهام التطوير وأهمها التي ستُكملها.

• ‫Gemini في وحدة تحكّم Firebase هو أداة مستندة إلى الذكاء الاصطناعي يمكنها إنشاء مخططات SQL Connect من وصف بلغة طبيعية لتطبيقك. يمكن أن تساعدك هذه الأداة في البدء بسرعة كبيرة، خاصةً إذا لم يسبق لك العمل مع قواعد البيانات العلائقية.
• يمكنك بدلاً من ذلك كتابة مخططات قاعدة البيانات والاستعلامات والتعديلات مباشرةً باستخدام GraphQL. ابدأ بالاطّلاع على الإرشادات في صفحة تصميم مخططات SQL Connect، ثم انتقِل إلى الصفحات التالية للتعرّف على كيفية كتابة العمليات.

SQL Connectكيفية الحصول على آخر المعلومات من

يمكنك استخدام SQL Connect لكتابة تطبيقات عميل تتفاعل مع البيانات المتغيرة في الوقت الفعلي. راجِع تلقّي إشعارات في الوقت الفعلي من SQL Connect.