يوضّح لك هذا الدليل السريع كيفية استخدام Firebase SQL Connect مع أداة الترميز بالذكاء الاصطناعي لإنشاء تطبيقات علائقية كاملة المكدس بسرعة. من خلال تزويد وكيلك بمهارات الوكيل في Firebase، لن تحتاج إلى كتابة رمز قاعدة بيانات أساسي أو ضبط نقاط النهاية يدويًا. ستتعرّف على كيفية إعداد مشروعك المحلي وضبط مساعدك المستنِد إلى الذكاء الاصطناعي واستخدام طلب واحد لإنشاء مخطّط PostgreSQL آمن وعمليات GraphQL وواجهة مستخدم أمامية كاملة في React. يمكنك استخدام ما تتعلمه هنا لإنشاء واجهات مستخدم أمامية لأي من المنصات التي تتيحها Firebase SQL Connect.
قبل البدء
لإكمال هذا الدليل السريع، تأكَّد من إعداد بيئتك باستخدام ما يلي. إذا كنت بحاجة إلى مساعدة مفصّلة لنظام التشغيل الخاص بك، اطّلِع على دليل الإعداد العادي:
- Node.js: ثبِّت Node.js لتشغيل Firebase CLI وتشغيل واجهة مستخدم أمامية في React تم إنشاؤها.
Firebase CLI: ثبِّت Firebase CLI على مستوى العالم:
npm install -g firebase-toolsأداة الترميز بالذكاء الاصطناعي: ثبِّت محررًا حديثًا مستندًا إلى الذكاء الاصطناعي (مثل Antigravity، استوديو Android، Cursor، أو Windsurf).
إعداد مساحة العمل
أولاً، افتح أداة الترميز بالذكاء الاصطناعي المفضّلة لديك وأنشئ دليل مشروع جديدًا. افتح الوحدة الطرفية المدمَجة في أداتك ونفِّذ أمر الإعداد:
firebase init dataconnect
يرشدك هذا الأمر خلال عملية إعداد مشروعك. عند المطالبة، اختَر الخيارات التالية:
- إنشاء مشروع Firebase جديد
- تخطّي إنشاء مخطّط Gemini
- إنشاء مثيل Cloud SQL جديد
- إنشاء نموذج React
- اختيار نعم لتثبيت مهارات الوكيل في Firebase
إنشاء تطبيقك باستخدام الذكاء الاصطناعي
بعد تثبيت مهارات الوكيل في Firebase، يمكن لمساعدك المستنِد إلى الذكاء الاصطناعي إنشاء مخطّط SQL Connect وعملياته ورمز الواجهة الأمامية مباشرةً من طلب عالي المستوى.
انسخ أحد الطلبات التالية والصقه في مساعدك المستنِد إلى الذكاء الاصطناعي لإنشاء الخلفية وعلاقات قاعدة البيانات وواجهة مستخدم أمامية في React:
المثال 1: تطبيق مراجعة الأفلام
الطلب:
Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.
المثال 2: واجهة متجر إلكتروني
الطلب:
Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.
المثال 3: مدوّنة متعددة المؤلّفين
الطلب:
Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.
ما الذي ينشئه مساعدك المستنِد إلى الذكاء الاصطناعي؟
عند تنفيذ هذه الطلبات، يتعامل مساعدك المستنِد إلى الذكاء الاصطناعي تلقائيًا مع المهام الفنية الصعبة:
- مخطّط قاعدة البيانات (
dataconnect/schema/schema.gql): يترجم متطلباتك إلى جداول علائقية باستخدام توجيه@table، ويدير تلقائيًا المفاتيح الخارجية والمفاتيح الأساسية. - عمليات GraphQL (
dataconnect/[connector_name]/*.gql): ينشئ الاستعلامات والتعديلات الدقيقة التي يتطلبها تطبيقك، والتي يتم تأمينها باستخدام توجيه@auth. - SDK الذي تم إنشاؤه (
src/dataconnect/): يستخدم Firebase CLI لإنشاء حزمة SDK للعميل مكتوبة بشكل صارم على الفور استنادًا إلى المخطّط والعمليات. - واجهة مستخدم أمامية في React (
src/): يربط تطبيق React كاملاً ومنسّقًا بشكل جميل يستخدم حزمة SDK التي تم إنشاؤها للتواصل مع الخلفية الجديدة.
النشر في مرحلة الإنتاج
لنشر المخطّط والاستعلامات والتعديلات في مرحلة الإنتاج، نفِّذ الأمر التالي في الوحدة الطرفية:
firebase deploy --only dataconnect
بعد النشر، انتقِل إلى وحدة تحكُّم Firebase لعرض المخطّط المباشر وتنفيذ العمليات مباشرةً على مثيل Cloud SQL.
الخطوات التالية
بعد إكمال الدليل السريع، إليك بعض الخطوات التالية:
- استكشِف مستودع تطبيق دليل سريع وأنشئ تطبيق SQL Connect باتّباع الدروس التطبيقية حول الترميز.
- أضِف بيانات إلى قاعدة البيانات وراقِب خدمة SQL Connect في وحدة تحكُّم Firebase.
- مزيد من المعلومات عن تطوير المخطّطات، الاستعلامات و التعديلات
- مزيد من المعلومات عن حِزم SDK للعميل و حِزم SDK للمشرف.