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

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

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

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

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

    npm i -g firebase-tools@latest

  • أداة سطر الأوامر Flutter tool.
  • ‫FlutterFire CLI

    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

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

تجربة إضافة Data Connect إلى VS Code

عند التطوير باستخدام Data Connect، ننصحك بشدة باستخدام إضافة Data Connect إلى VS 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 مخططات وانتقِل إلى الصفحات اللاحقة للتعرّف على كيفية كتابة العمليات.