تتيح لك حِزم تطوير البرامج (SDK) لعملاء Firebase Data Connect طلب طلبات البحث وعمليات التحويل من جهة الخادم مباشرةً من تطبيق Firebase. يمكنك إنشاء حزمة تطوير برامج (SDK) مخصّصة للعملاء في وقتٍ موازي أثناء تصميم المخططات وطلبات البحث وعمليات التحويل التي يتم نشرها في خدمة Data Connect. بعد ذلك، يمكنك دمج طرق من حزمة SDK هذه في منطق العميل.
كما ذكرنا في مكان آخر، من المهم الإشارة إلى أنّ Data Connect طلبات البحث والطفرات لا يتم إرسالها بواسطة رمز العميل ويتم تنفيذها على الخادم. بدلاً من ذلك، عند نشرها، يتم تخزين عمليات Data Connect على الخادم مثل "وظائف السحابة الإلكترونية". وهذا يعني أنّك بحاجة إلى نشر التغييرات المقابلة من جهة العميل لتجنّب إيقاف المستخدمين الحاليين (على سبيل المثال، في الإصدارات القديمة من التطبيق).
لهذا السبب، يوفّر لك Data Connect بيئة مطوّرين وأدوات تسمح لك بإنشاء نماذج أولية للمخططات وطلبات البحث والتغييرات التي يتم نشرها على الخادم. وتنشئ هذه الأداة أيضًا حِزم تطوير البرامج (SDK) من جهة العميل تلقائيًا أثناء إنشاء النماذج الأولية.
بعد تكرار التحديثات على تطبيقَي الخدمة والعملاء، تصبح التحديثات من جهة الخادم وجانب العميل جاهزة للنشر.
تنفيذ رمز العميل باستخدام حزمة SDK الخاصة بمنصّة Firebase JavaScript
يتناول هذا القسم كيفية تنفيذ العملاء باستخدام حزمة تطوير البرامج (SDK) Firebase JavaScript.
إذا كنت تستخدم React، يمكنك الاطّلاع على تعليمات إعداد بديلة وروابط تؤدي إلى مستندات إضافية تتعلّق بإنشاء حِزم React SDK لنظام التشغيل Data Connect.
بدء تطبيقك
أولاً، عليك إعداد تطبيقك باستخدام تسلسل Firebase العادي.
initializeApp({...});
إنشاء حزمة تطوير البرامج (SDK) لتطبيقك باستخدام JavaScript
كما هو الحال مع معظم مشاريع Firebase، يتم تنفيذ العمل على Firebase Data Connect العميل الرمز البرمجي في دليل مشروع على الجهاز. إنّ كلًّا من Firebase CLI وإضافة Data Connect VS Code مهمّان على مستوى الأدوات المحلية لإنشاء رمز العميل وإدارته.
ترتبط خيارات إنشاء حزمة SDK بعدة إدخالات في dataconnect.yaml
ملف
الذي تم إنشاؤه عند بدء مشروعك.
إعداد عملية إنشاء حزمة تطوير البرامج (SDK)
فيconnector.yaml
، أضِف outputDir
وpackage
و (بالنسبة إلى حزمة تطوير البرامج (SDK) على الويب)
packageJsonDir
.
generate:
javascriptSdk:
outputDir: "../movies-generated"
package: "@movie-app/movies"
packageJsonDir: "../../"
outputDir
لتحديد المكان الذي يجب أن يتم فيه إنشاء حزمة SDK
package
يحدِّد اسم الحزمة.
packageJsonDir
لتحديد مكان تثبيت الحزمة
في هذه الحالة، يجب تثبيت firebase@latest
لضمان استيفاء هذا الشرط.
إعداد حزمة تطوير البرامج (SDK) لـ JavaScript
ابدأ تشغيل مثيل Data Connect باستخدام المعلومات التي استخدَمتها لإعداد Data Connect (كلّها متوفّرة في Firebase console علامة التبويب Data Connect).
عنصر ConnectorConfig
تتطلّب حزمة تطوير البرامج (SDK) كائن إعدادات الموصّل.
يتم إنشاء هذا العنصر تلقائيًا من serviceId
وlocation
في
dataconnect.yaml
وconnectorId
في connector.yaml
.
استيراد المكتبات
هناك مجموعتان من عمليات الاستيراد اللازمة لبدء رمز العميل: عمليات استيراد Data Connect العامة وعمليات استيراد حِزم تطوير البرامج (SDK) المحدّدة والمُنشأة.
يُرجى ملاحظة عنصر ConnectorConfig
المُدرَج في عمليات الاستيراد العامة.
// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';
// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@myorg/myconnector';
استخدام طلبات البحث من حزمة JavaScript SDK
سيتضمّن الرمز الذي تم إنشاؤه مراجع طلبات بحث محدّدة مسبقًا. ما عليك سوى استيرادها واستدعاء execute عليها.
import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';
const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);
استدعاء طُرق طلب حزمة تطوير البرامج (SDK)
في ما يلي مثال على استخدام دوال اختصارات الإجراءات هذه:
import { listMovies } from '@movie-app/movies';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out // to the server.
listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}
الاشتراك في التغييرات
يمكنك الاشتراك في التغييرات (التي سيتم تعديلها في أي وقت تنفّذ فيه طلب بحث).
const listRef = listAllMoviesRef();
// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
updateUIWithMovies(data.movies);
});
await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`
استخدام التعديلات من حزمة JavaScript SDK
يمكن الوصول إلى طلبات التعديل بالطريقة نفسها المستخدَمة للطلبات.
import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';
const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));
الاتصال بمحاكي Data Connect
يمكنك اختياريًا الاتصال بالمحاكي من خلال استدعاء
connectDataConnectEmulator
ثم إدخال مثيل Data Connect
، على النحو التالي:
import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name
const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);`
// Make calls from your app
للتبديل إلى موارد الإنتاج، عليك وضع تعليق على السطور الخاصة بالاتصال بال المحاكي.
تنفيذ رمز العميل في React
توفّر أداة Firebase Data Connect حزمة تطوير برامج (SDK) تم إنشاؤها تتضمّن أدوات ربط لإطار عمل React باستخدام مكتبة متاحة من شركائنا في Invertase، وهي TanStack Query Firebase.
توفّر هذه المكتبة مجموعة من أدوات الربط التي تسهّل بشكل كبير التعامل مع المهام غير المتزامنة باستخدام Firebase في تطبيقاتك.
بدء تطبيقك
أولاً، كما هو الحال مع أي تطبيق ويب على Firebase، عليك إعداد تطبيقك باستخدام تسلسل Firebase العادي.
initializeApp({...});
تثبيت حِزم TanStack Query Firebase
تثبيت حِزم TanStack Query في مشروعك
npm i --save @tanstack/react-query @tanstack-query-firebase/react
npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0
إنشاء حزمة React SDK
كما هو الحال مع حزمة تطوير البرامج (SDK) العادية على الويب، كما هو موضّح في وقت سابق، تتعامل أدوات Firebase مع إنشاء حِزم SDK تلقائيًا استنادًا إلى المخطّط والعمليات.
لإنشاء حزمة React SDK لمشروعك، أضِف مفتاح react
إلى ملف الإعدادات
connector.yaml
.
generate:
javascriptSdk:
react: true
outputDir: "../movies-generated"
package: "@movie-app/movies"
packageJsonDir: "../../"
استيراد المكتبات
هناك أربع مجموعات من عمليات الاستيراد اللازمة لبدء رمز العميل في React: عمليات استيراد Data Connect العامة وعمليات استيراد TanStack العامة وعمليات استيراد محددة لحِزم تطوير البرامج (SDK) التي تم إنشاؤها باستخدام JavaScript وReact.
يُرجى ملاحظة نوع ConnectorConfig
المُدرَج في عمليات الاستيراد العامة.
// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';
// TanStack Query-related functions
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@myorg/myconnector';
// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@myorg/connector/react";
استخدام طلبات البحث والطفرات في برنامج React client
بعد اكتمال الإعداد، يمكنك دمج طرق من حزمة React SDK التي تم إنشاؤها.
في المقتطف التالي، لاحِظ الطريقة التي تبدأ بالبادئة use
useListAllMovies
من حزمة React SDK التي تم إنشاؤها. جميع عمليات use
هذه في حزمة تطوير البرامج (SDK) التي تم إنشاؤها،
سواء كانت استعلامات أو عمليات تحويل، تستدعي عمليات ربط طلبات البحث في TanStack:
- تستدعي طلبات البحث TanStack
useDataConnectQuery
وتُرجعها. - تستدعي عمليات التحويل خطاف TanStack
useDataConnectMutation
وتُرجعه.
import { useListAllMovies } from '@movies-app/movies/react';
function MyComponent() {
const { isLoading, data, error } = useListAllMovies();
if(isLoading) {
return <div>Loading...</div>
}
if(error) {
return <div> An Error Occurred: {error} </div>
}
}
// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';
function App() {
const queryClient = new QueryClient();
return <QueryClientProvider client={queryClient}>
<MyComponent />
</QueryClientProvider>
}
الاتصال بمحاكي Data Connect
يمكنك اختياريًا الاتصال بالمحاكي من خلال استدعاء connectDataConnectEmulator
ثم تمرير مثيل Data Connect
إلى الربط الذي تم إنشاؤه، على النحو التالي:
import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@movies-app/movies';
import { useListAllMovies } from '@movies-app/movies/react';
const dc = getDataConnect(connectorConfig);
connectDataConnectEmulator(dc, 'localhost', 9399);
function App() {
...
const { isLoading, data, error } = useListAllMovies(dc);
...
}
للتبديل إلى موارد الإنتاج، عليك وضع تعليق على السطور الخاصة بالاتصال بالemualtor.
أنواع البيانات في حزمة SDK
يمثّل خادم Data Connect أنواع بيانات GraphQL الشائعة. يتم تمثيل هذه العناصر في حزمة SDK على النحو التالي.
نوع ربط البيانات | TypeScript |
---|---|
الطابع الزمني | سلسلة |
التاريخ | سلسلة |
معرِّف فريد عالمي (UUID) | سلسلة |
Int64 | سلسلة |
مزدوج | الرقم |
عائم | الرقم |
اعتبارات خاصة لإنشاء حِزم تطوير البرامج (SDK)
ضبط المسارات بالنسبة إلى node_modules
بالنسبة إلى حزمة تطوير البرامج (SDK) لـ JavaScript، بما أنّ Data Connect يستخدم npm link
ل
تثبيت حزمة SDK، يجب إخراج حزمة SDK التي تم إنشاؤها في دليل على
المستوى نفسه لمسار node_modules
أو في دليل فرعي يمكنه
الوصول إلى node_modules
.
بعبارة أخرى، يجب أن تتمكن حزمة SDK التي تم إنشاؤها من الوصول إلى firebase
وحدة node لكي تعمل بشكل صحيح.
على سبيل المثال، إذا كان لديك node_modules
في my-app/
، يجب أن يكون ملف المخرجات
الدليل my-app/js-email-generated
حتى تتمكّن js-email-generated
من
الاستيراد من المجلد الرئيسي node_modules
.
my-app/
dataconnect/
connector/
connector.yaml
node_modules/
firebase/
js-email-generated/
// connector.yaml
connectorId: "my-connector"
generate:
javascriptSdk:
outputDir: "../../js-email-generated"
package: "@myapp/my-connector"
أو إذا كان لديك مستودع متعدّد الوحدات يتم فيه استضافة الوحدات في الجذر، يمكنك وضع دليل الإخراج في أي مجلد في مستودعك المتعدّد الوحدات.
my-monorepo/
dataconnect/
connector/
connector.yaml
node_modules/
firebase/
my-app/
js-email-generated/
package.json
// connector.yaml
connectorId: "my-connector"
generate:
javascriptSdk:
outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated
تعديل حِزم تطوير البرامج (SDK) أثناء إنشاء النماذج الأولية
إذا كنت بصدد إنشاء النماذج الأولية بشكل تفاعلي باستخدام إضافة Data Connect في VS Code
ومحاكي Data Connect، يتم تلقائيًا
إنشاء ملفات مصدر حزمة تطوير البرامج (SDK) وتعديلها أثناء تعديل ملفات .gql
التي تحدّد المخططات وطلبات البحث
والعمليات. يمكن أن تكون هذه ميزة مفيدة في سير عمل (إعادة) التحميل السريع.
.gql
وتعديل مصادر SDK
تلقائيًا.
بدلاً من ذلك، يمكنك استخدام سطر الأوامر لإعادة إنشاء حِزم تطوير البرامج (SDK) عند تغيير ملفات .gql:
firebase dataconnect:sdk:generate --watch
إنشاء حِزم SDK للدمج والإصدارات العلنية
في بعض السيناريوهات، مثل إعداد مصادر المشاريع لإرسالها إلى اختبارات التكامل المستمر، يمكنك استدعاء Firebase CLI لإجراء تحديث مجمّع.
في هذه الحالات، استخدِم firebase dataconnect:sdk:generate
.
اعتبارات أخرى حول الأطر
Angular
عند إنشاء الرمز، لن يرصد Angular CLI
التغييرات الجديدة بسبب
رمز تحسين التبعيات. لحلّ هذه المشكلة، عليك تعديل
angular.json
.
"projects": {
"myproject": {
"architect": {
"serve:": {
"prebundle": {
"exclude": ["@movie-app/movies"]
}
}
}
}
}