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

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

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

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

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

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

תהליך העבודה ב-Console: שימוש בעזרה מ-AI כדי לעצב את הסכימה, ואז פריסה שלה במסד הנתונים

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

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

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

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

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

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

  1. כשמופיעה בקשה, לוחצים על הלחצן יצירת פעולות באמצעות Gemini.

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

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

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

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

      לדוגמה:

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

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

  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. לאחר מכן לוחצים על הוספה כדי להוסיף את השינוי לכלי לעריכת נתונים.

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

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

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

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

    לדוגמה:

    Query data for all sample products in my app.
    
  3. לוחצים על יצירה ואז על הפעלה.

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

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

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

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

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

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

      curl -sL https://firebase.tools/init/dataconnect | editor=true bash

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

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

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

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

  1. לוחצים על הלחצן הפעלת אמולטורים.

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

לאפשרות ההתקנה האוטומטית ב-macOS או ב-Linux שבה השתמשתם כדי לסנכרן נכסים לפרויקט קיים יש את ההשפעות הבאות:
  • הוא מסנכרן את הסכימה שפרסתם
    • מחפשים את הסכימה: היא נמצאת בספריית הפרויקט ב-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 זמין במסמכי התיעוד

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

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

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

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

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

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

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

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

הסכימה והפעולות של המחבר מסונכרנות באופן מקומי.

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

  1. בממשק המשתמש של התוסף, לוחצים על הלחצן Add SDK to app (הוספת SDK לאפליקציה).
  2. בתיבת הדו-שיח שמופיעה, בוחרים ספרייה שמכילה קוד של האפליקציה. Data Connect קוד ה-SDK ייווצר ויישמר שם.

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

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

קודם לכן, פרסתם את הסכימה והפעולות שלכם במסוף Firebase. כדי להפעיל פעולות מהאפליקציה, אפשר להשתמש ב-SDK שנוצר כדי להטמיע קריאה לשאילתה ListMoviesData Connect.

אינטרנט

  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. מתקינים את flutterfire CLI 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.

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