תחילת העבודה עם Firebase Data Connect

במדריך למתחילים הזה תלמדו איך לפתח את Firebase Data Connect באפליקציה באמצעות מכונה של SQL בסביבת הייצור.

במסוף Firebase תוכלו:

  • מוסיפים את Firebase Data Connect לפרויקט Firebase.
  • יוצרים סכימה לאפליקציה באמצעות יצירת סכימה בעזרת AI במסוף Firebase ופורסים אותה.
  • הקצאת מכונה של Cloud SQL לאפליקציה.
  • כשמשתמשים ב-Gemini ב-Firebase, אפשר לאכלס את מסד הנתונים בנתונים לדוגמה.
  • ליצור שאילתות ומוטציות באמצעות יצירת פעולות בעזרת AI, שאפשר לפרוס ולהשתמש בהן כדי לפתח קוד לקוח באופן מקומי.

לאחר מכן, בסביבת הפיתוח המקומית, מבצעים את הפעולות הבאות:

  • הגדרת כלי פיתוח, כולל תוסף של Visual Studio Code, לעבודה עם המכונה בסביבת הייצור.
  • סנכרון הסביבה המקומית עם הנכסים שיצרתם במסוף.
  • יצירת ערכות SDK עם סוגים מוגדרים ולהשתמש בהן באפליקציה.

תהליך במסוף: שימוש בעזרה של AI כדי לתכנן את הסכימה ולאחר מכן לפרוס אותה במסד הנתונים

  1. אם עדיין לא עשיתם זאת, יוצרים פרויקט ב-Firebase.
    1. במסוף Firebase, לוחצים על Add project ופועלים לפי ההוראות במסך.
  2. עוברים לקטע Data Connect במסוף Firebase.
  3. לוחצים על הלחצן מתחילים לעבוד עם Gemini.
  4. בחלונית תהליך העבודה של Schema Generator שמופיעה, מתארים אפליקציה כדי ש-Gemini יוכל לעזור לכם ליצור סכימה של GraphQL.
  5. בודקים את הסכימה של GraphQL ולוחצים על שדרוג ופריסה.

  6. שדרוג הפרויקט לתוכנית Blaze. כך תוכלו ליצור מכונה של Cloud SQL ל-PostgreSQL.

  7. בוחרים באפשרות Create a new Cloud SQL (יצירת מכונה חדשה של Cloud SQL). בתיבת הדו-שיח שמופיעה, בוחרים מיקום ושם למסד הנתונים של Cloud SQL for PostgreSQL.

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

תהליך במסוף: שימוש בעזרה של AI ליצירת פעולות ללקוחות

אחרי הפריסה של הסכימה, תוכלו לבצע את השלבים הראשונים כדי לאפשר גישה לנתונים האלה מאפליקציות הלקוח. לשם כך, עליכם ליצור מחבר של שאילתות ומוטציות כדי לפרוס אותם לקצה העורפי, ולאחר מכן לבצע קריאה מהלקוחות.

הכלים שלנו בסיוע AI כאן כדי לעזור.

  1. כשמופיעה בקשה, לוחצים על הלחצן Generate operations with Gemini.

  2. אחרי כמה רגעים, בחלונית תהליך העבודה Generate your operations שמופיעה, בודקים את רשימת השאילתות והמוטציות ש-Gemini מספק על סמך הסכימה.

  3. לוחצים על כל שורת פעולה כדי לבדוק את קוד ה-GraphQL שמגדיר את הפעולה הזו. אם צריך, אפשר להשתמש בלחצן האשפה כדי למחוק פעולות שלא נחוצות.

  4. כדי להוסיף פעולות, לוחצים על הלחצן + הוספה. לאחר מכן:

    1. מתארים את הפעולה בשפה טבעית.

      לדוגמה:

      List all products

    2. בודקים את ה-GraphQL שנוצר.

    3. אם הפעולה מקובלת, לוחצים על Insert כדי להוסיף אותה לרשימת הפעולות.

  5. ממשיכים להסיר ולהוסיף פעולות עד שמגיעים לקבוצת הפעולות הרצויה.

  6. כדי לפרוס את רשימת הפעולות הזו כקבוצת מחבר שניתן לקרוא לה מהלקוח, בוחרים את שם המחבר ולוחצים על פריסה.

תהליך במסוף: שימוש ב-Gemini ב-Firebase כדי ליצור מוטציה ולאכלס את מסד הנתונים

אחרי השלמת השלבים הקודמים, יצרתם סכימה של Data Connect שמכילה סוגי ישויות רלוונטיים, ופרסמתם אותה בסביבת הייצור. כלומר, נוצרה ופורסמה גם מסד נתונים של PostgreSQL עם טבלאות תואמות.

כדי לאכלס את מסד הנתונים, אפשר להשתמש ב-Gemini ב-Firebase כדי לעזור לכם להשתמש בקלט בשפה טבעית כדי להגדיר מוטציה של GraphQL לעדכון של אחת מהטבלאות ושאילתה כדי לאשר את העדכונים.

  1. פותחים את הכרטיסייה נתונים.

  2. לוחצים על הסמל עזרה בכתיבה של GraphQL pen_spark ובתיבה שמופיעה מקלידים את הקלט.

    לדוגמה:

    Add data for three sample products to my app.

  3. לוחצים על יצירה. המוטציה מוחזרת.

  4. בודקים את הפלט. אם צריך, לוחצים על עריכה כדי לשפר את ההנחיה ולוחצים על יצירה מחדש.

  5. לאחר מכן, לוחצים על Insert (הוספה) כדי להוסיף את המוטציה לעורך הנתונים.

  6. לוחצים על Run.

כשמריצים את המוטציה, הנתונים נכתבים בטבלה הרלוונטית במסד הנתונים של PostgreSQL. אפשר ליצור שאילתות במסוף כדי להציג את הנתונים השמורים:

  1. חוזרים על השלבים הקודמים, ומשתמשים ב-עזרה בכתיבה של GraphQL pen_spark כדי ליצור שאילתה.

  2. בתיבה שמופיעה, מקלידים את הקלט.

    לדוגמה:

    Query data for all sample products in my app.

  3. לוחצים על Generate ואז על Run.

תהליך מקומי: בחירת כלי הפיתוח

עכשיו שיש לכם נתונים במסד הנתונים שנפרס, ופרסמתם מחבר, תוכלו להמשיך בפיתוח הסכימה והמחברים בסביבת הפיתוח המקומית.

קודם צריך להגדיר סביבה מקומית. ב-Data Connect יש שתי דרכים להתקין כלי פיתוח.

תהליך מקומי: הגדרת סביבת הפיתוח

  1. יוצרים ספרייה חדשה לפרויקט המקומי.

  2. מריצים את הפקודה הבאה בספרייה החדשה שיצרתם.

      curl -sL https://firebase.tools/dataconnect | bash

    הסקריפט הזה מנסה להגדיר את סביבת הפיתוח ולהפעיל סביבת פיתוח משולבת (IDE) מבוססת-דפדפן. סביבת הפיתוח המשולבת הזו מספקת כלים, כולל תוספי VS Code שכלולים בחבילה מראש, שיעזרו לכם לנהל את הסכימה ולהגדיר שאילתות ומוטציות לשימוש באפליקציה, וגם ליצור ערכות SDK עם סוגים מוגדרים.

  alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

תהליך מקומי: הגדרת ספריית הפרויקט

כדי להגדיר את הפרויקט המקומי, צריך לאתחל את ספריית הפרויקט. בחלון ה-IDE, לוחצים על סמל Firebase בחלונית הימנית כדי לפתוח את ממשק המשתמש של התוסף Data Connect ל-VS Code:

  1. לוחצים על הלחצן כניסה באמצעות חשבון Google.
  2. לוחצים על הלחצן Connect a Firebase project ובוחרים את הפרויקט שיצרתם קודם במסוף.

  3. לוחצים על הלחצן Run firebase init ומשלימים את התהליך.

  4. לוחצים על הלחצן Start emulators.

תהליך מקומי: חיפוש הסכימה והמחבר בסביבה המקומית

השלב firebase init בקטע הקודם מסנכרן את הנכסים עם סביבת הפיתוח המקומית:

  • הוא מסנכרן את הסכימה שפרסמתם
    • מחפשים את הסכימה: היא נמצאת בתיקייה של הפרויקט ב-Firebase, בקובץ /dataconnect/schema/schema.gql.
  • הוא מסנכרן את השאילתות והמוטציות במחבר שפרסמתם
    • מוצאים את המחבר: הפעולות נמצאות בספרייה של פרויקט Firebase, בספרייה /dataconnect/connector/.

תהליך מקומי: הסבר על הסכימה

דוגמה לסכימה: סרט

ב-Data Connect, שדות GraphQL ממופים לעמודות. סוג Movie יכלול כנראה את הערכים id, title, imageUrl ו-genre. Data Connect מזהה את סוגי הנתונים הפרימיטיביים String ו-UUID.

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

דוגמה לסכימה של טבלה 1:1: MovieMetadata

בקטגוריית 'סרטים' אפשר ליצור מודלים של מטא-נתונים של סרטים.

לדוגמה, בקובץ schema.gql אפשר להוסיף את קטע הקוד הבא או לבדוק את הקוד שנוצר על ידי Gemini.

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

שימו לב שהשדה movie ממופה לסוג Movie. Data Connect מבינה שמדובר בקשר בין Movie לבין MovieMetadata, ותנהל את הקשר הזה בשבילך.

מידע נוסף על סכימות של Data Connect זמין במסמכי התיעוד

תהליך מקומי: הוספת נתונים לטבלאות

בחלונית העריכה של סביבת הפיתוח המשולבת, תוכלו לראות את הלחצנים של CodeLens מופיעים מעל סוגי GraphQL ב-/dataconnect/schema/schema.gql. בדיוק כמו במסוף, אפשר ליצור מוטציה כדי להוסיף נתונים למסד הנתונים בסביבת הייצור.

כדי להוסיף נתונים לטבלה באופן מקומי:

  1. בקובץ schema.gql, לוחצים על הלחצן Add data מעל ההצהרה של אחד מהסוגים (כמו Movie, ‏ Product, ‏ Account, בהתאם לאופי האפליקציה).
    לחצן הוספת נתונים ב-Code Lens ל-Firebase Data Connect
  2. קובץ חדש, <type>_insert.qgl, נוסף לספרייה הפעילה, למשל Movie_insert.gql או Product_insert.gql. להטמיע נתונים בשדות של הסוג הזה.
  3. לוחצים על הלחצן Run (Production).
    לחצן ההפעלה של Code Lens עבור Firebase Data Connect
  4. חוזרים על השלבים הקודמים כדי להוסיף רשומה לטבלאות אחרות.

כדי לוודא במהירות שהנתונים נוספו:

  1. חזרה ב-schema.gql, לוחצים על הלחצן Read data מעל להצהרת הטיפוס.
  2. בקובץ <type>_read.gql שנוצר, כמו Product_read.gql, לוחצים על הלחצן Run (Production) כדי להריץ את השאילתה.

מידע נוסף על מוטציות של Data Connect זמין במסמכי התיעוד

תהליך מקומי: יצירת ערכות SDK

פעולות הסכימה והמחבר מסונכרנות באופן מקומי. עכשיו תוכלו להשתמש בכלים מקומיים כדי ליצור ערכות SDK ללקוח, ולהתחיל להטמיע קריאות לשאילתות ולמוטציות באפליקציות ל-iOS, ל-Android, לאינטרנט ול-Flutter.

  1. לוחצים על הלחצן Add SDK to app (הוספת ה-SDK לאפליקציה).

  2. בתיבת הדו-שיח שתופיע, בוחרים ספרייה שמכילה את הקוד של האפליקציה. קוד ה-SDK של Data Connect ייווצר ויישמר שם.

  3. בוחרים את פלטפורמת האפליקציה, שימו לב שקוד ה-SDK נוצר באופן מיידי בתיקייה שנבחרה.

תהליך מקומי: שימוש ב-SDK כדי להפעיל את השאילתה מאפליקציה

עכשיו, אחרי שהסכימה המעודכנת (אם רלוונטי) והשאילתה נפרסות בסביבת הייצור, אפשר להשתמש ב-SDK שנוצר על ידי Data Connect כדי להטמיע קריאה לשאילתה ListMovies.

אינטרנט

  1. מוסיפים את Firebase לאפליקציית האינטרנט.

  2. בקובץ הראשי של אפליקציית React:

    • מייבאים את ה-SDK שנוצר
    • קריאה לשיטות Data Connect.
    import React from 'react';
import ReactDOM from 'react-dom/client';

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

function App() {
  const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
  useEffect(() => {
    listMovies.then(res => setMovies(res.data));
  }, []);
  return (
    movies.map(movie => <h1>{movie.title}</h1>);
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Swift

  1. מוסיפים את Firebase לאפליקציה ל-iOS.

  2. כדי להשתמש ב-SDK שנוצר, צריך להגדיר אותו כיחס תלות ב-Xcode.

    בסרגל הניווט העליון של Xcode, בוחרים באפשרות File > Add Package Dependencies > Add Local ובוחרים את התיקייה שמכילה את הקובץ Package.swift שנוצר.

  3. במתווך הראשי של האפליקציה:

    • מייבאים את ה-SDK שנוצר
    • קריאה לשיטות Data Connect.
    import SwiftUI

import FirebaseDataConnect
// Generated queries.
// Update as needed with the package name of your generated SDK.
import <CONNECTOR-PACKAGE-NAME>

let connector = DataConnect.moviesConnector

struct ListMovieView: View {
@StateObject private var queryRef = connector.listMovies.ref()

    var body: some View {
        VStack {
            Button {
                Task {
                    do {
                        try await refresh()
                    } catch {
                        print("Failed to refresh: \(error)")
                    }
                }
            } label: {
                Text("Refresh")
            }

            // use the query results in a view
            ForEach(queryRef.data?.movies ?? []) { movie in
                    Text(movie.title)
                }
            }
    }
    @MainActor
    func refresh() async throws {
        _ = try await queryRef.execute()
    }

    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListMovieView()
    }
}

Kotlin Android

  1. מוסיפים את Firebase לאפליקציה ל-Android.

  2. כדי להשתמש ב-SDK שנוצר, צריך להגדיר את Data Connect כיחס תלות ב-Gradle.

    מעדכנים את plugins ואת dependencies ב-app/build.gradle.kts.

    plugins {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest as of March 14, 2025.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.9.0"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.10"
  kotlin("android") version kotlinVersion
  kotlin("plugin.serialization") version kotlinVersion
}

dependencies {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest versions as of March 14, 2025.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")

  // These dependencies are not strictly required, but will very likely be used
  // when writing modern Android applications.
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
  implementation("androidx.appcompat:appcompat:1.7.0")
  implementation("androidx.activity:activity-ktx:1.10.1")
  implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
  implementation("com.google.android.material:material:1.12.0")
}

  3. בפעילות הראשית של האפליקציה:

    • מייבאים את ה-SDK שנוצר
    • קריאה לשיטות Data Connect.
    import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import kotlinx.coroutines.launch


private val connector = com.myapplication.MoviesConnector.instance

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val textView: TextView = findViewById(R.id.text_view)

    lifecycleScope.launch {
      lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        
        val result = connector.listMovies.runCatching { execute { } }
        
        val newTextViewText = result.fold(
          onSuccess = {
            val titles = it.data.movies.map { it.title }
            "${titles.size} movies: " + titles.joinToString(", ")
          },
          onFailure = { "ERROR: ${it.message}" }
        )
        textView.text = newTextViewText
      }
    }
  }
}

Flutter

  1. מוסיפים את Firebase לאפליקציה ב-Flutter.
  2. מתקינים את ה-CLI של flutterfire dart pub global activate flutterfire_cli.
  3. מריצים את flutterfire configure.
  4. בפונקציה הראשית של האפליקציה:
    • מייבאים את ה-SDK שנוצר
    • קריאה לשיטות Data Connect.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            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,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

השלבים הבאים

בודקים את הפרויקט שנפרס ומכירים כלים נוספים:

  • הוספת נתונים למסד הנתונים, בדיקה ושינוי של הסכימות ומעקב אחרי שירות Data Connect במסוף Firebase.

מידע נוסף זמין במסמכי התיעוד. לדוגמה, אחרי שמשלימים את המדריך למתחילים: