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

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

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

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

• بيئة مثبَّت عليها الأدوات التالية:
  • Node.js مع مدير حِزم من اختيارك يفترض هذا البرنامج التعليمي npm.
  • واجهة سطر الأوامر (CLI) في Firebase:

    npm i -g firebase-tools@latest

  • أداة سطر الأوامر في Flutter
  • واجهة سطر الأوامر FlutterFire

    dart pub global activate flutterfire_cli

• حساب Google

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

mkdir myproj ; cd myproj
firebase login --reauth
firebase 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
  }
}

firebase deploy --only dataconnect

firebase dataconnect:execute dataconnect/seed_data.gql

firebase dataconnect:sdk:generate

class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

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());
}

flutter run

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

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