תחילת העבודה עם 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. כשאתם מאתחלים את הפרויקט, ה-CLI של Firebase יוצר כמה הגדרות לדוגמה כדי לעזור לכם להתחיל.

 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. הוספת נתונים לדוגמה למסד הנתונים

נתוני ה-seed האלה יאפשרו לכם לראות משהו כשבודקים את האפליקציה לדוגמה. שימו לב: בשלב הזה אתם מריצים GraphQL שרירותי, וזה מותר למשימות ניהול.

 
firebase dataconnect:execute dataconnect/seed_data.gql

5. יצירה של SDK לקוח ב-Dart

הפקודה הזו משתמשת בהגדרות GraphQL כדי ליצור ספריית Dart במיוחד עבור מסד הנתונים שלכם. משתמשים בספרייה הזו באפליקציית הלקוח כדי לבצע את כל פעולות מסד הנתונים.

אפשר ליצור ספריות לכמה פלטפורמות, כולל Kotlin ל-Android,‏ Swift ל-iOS ו-JavaScript לאינטרנט, על ידי הוספת הגדרות ל-connector.yaml.

 
firebase dataconnect:sdk:generate
 ‫Dart SDK שנוצר אוטומטית (קטע) 
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 הוא כלי מבוסס-AI שיכול ליצור סכימות SQL Connect מתיאור של האפליקציה בשפה טבעית. הכלי הזה יכול לעזור לכם להתחיל לעבוד במהירות, במיוחד אם מעולם לא עבדתם עם מסדי נתונים רלציוניים.
  • לחלופין, אפשר לכתוב סכימות של מסדי נתונים, שאילתות ומוטציות ישירות באמצעות GraphQL. כדאי להתחיל עם ההנחיות במאמר בנושא תכנון סכימות של SQL Connect, ואז להמשיך לדפים הבאים כדי ללמוד איך לכתוב פעולות.