بدء استخدام Firebase SQL Connect باستخدام Flutter

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

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

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

  • بيئة مثبّت عليها الأدوات التالية:
  • حساب Google

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

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

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

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

  • إنشاء مشروع جديد في Firebase
  • عدم إنشاء مخطط باستخدام Gemini (في هذا البرنامج التعليمي، ستستخدم مخططًا نموذجيًا تم إنشاؤه مسبقًا )
  • إنشاء مثيل جديد في Cloud SQL
  • إنشاء نموذج Flutter
 
mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

2. مراجعة تعريفات GraphQL النموذجية

في SQL 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
  }
}

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

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

 
firebase deploy --only dataconnect

4. تعبئة قاعدة البيانات ببيانات نموذجية

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

 
firebase dataconnect:execute dataconnect/seed_data.gql

5. إنشاء حزمة SDK لعميل Dart

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

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

 
firebase dataconnect:sdk:generate
 حزمة SDK لـ Dart التي تم إنشاؤها تلقائيًا (مقتطف) 
class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

6. إعداد تطبيق Flutter

نفِّذ هذه الأوامر لإعداد تطبيق Flutter لاستخدام مشروع Firebase.

عندما يطلب منك الأمر flutterfire ذلك، اختَر مشروع Firebase الذي أنشأته سابقًا، واختَر المنصات التي تريد استهدافها.

 
cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

7. كتابة نموذج لعميل Flutter

استبدِل محتويات flutter_app/lib/main.dart بتطبيق Flutter البسيط هذا.

يُرجى العِلم أنّ التطبيق يُكمل عملية الوصول اللازمة إلى قاعدة البيانات باستخدام دالة من حزمة SDK التي تم إنشاؤها.

 
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/dataconnect_generated/generated.dart';
import 'package:flutter_app/firebase_options.dart';

class MyApp extends StatelessWidget {
  late final Future<QueryResult<ListMoviesData, void>>
  _movieListFuture;

  MyApp({super.key}) {
    _movieListFuture = ExampleConnector.instance
        .listMovies()
        .execute();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _movieListFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return ListView.builder(
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) => Card(
                child: Text(
                  snapshot.data?.data.movies[index].title ?? "",
                ),
              ),
              itemCount: snapshot.data?.data.movies.length ?? 0,
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

8. جرّب التطبيق

ابدأ خادم التطوير للاطّلاع على التطبيق النموذجي أثناء عمله.

 
flutter run

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

تجربة إضافة 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, ثم انتقِل إلى الصفحات التالية للتعرّف على كيفية كتابة العمليات.