במדריך למתחילים הזה נסביר איך ליצור Firebase Data Connect באפליקציה באופן מקומי בלי להגדיר מופע SQL של ייצור. תצטרכו:
מוסיפים את Firebase Data Connect לפרויקט Firebase.
הגדרת סביבת פיתוח שכוללת תוספים ל-Visual Studio Code כדי לעבוד עם מופע מקומי.
בהמשך נסביר איך:
אפשר להשתמש בכלי התוסף של VS Code, עם Gemini Code Assist, כדי:
יצירת סכימה לאפליקציה
יצירת שאילתות ומוטציות אדמיניסטרטיביות כדי לאכלס את מסד הנתונים המקומי
עזרה בהטמעה של שאילתות ומוטציות באפליקציה שלכם במחבר שאפשר לפרוס
בדיקת השאילתות והמוטציות באמצעות נתונים לדוגמה מול אמולטור מקומי
יצירה של ערכות SDK עם הקלדה חזקה ושימוש בהן באפליקציה
פריסת הסכימה והמחבר הסופיים בענן (אופציונלי, עם שדרוג לתוכנית Blaze).
בחירת תהליך פיתוח מקומי
Data Connect מציעה שתי דרכים להתקין כלי פיתוח ולעבוד באופן מקומי.
דרישות מוקדמות
כדי להשתמש במדריך למתחילים הזה, תצטרכו את הדברים הבאים.
פרויקט Firebase. אם עדיין לא יצרתם חשבון, אתם יכולים לעשות זאת במסוף Firebase.
הגדרת סביבת הפיתוח
יוצרים ספרייה חדשה לפרויקט המקומי.
כדי להגדיר סביבת פיתוח של Data Connect וסביבת פיתוח משולבת (IDE) מבוססת-דפדפן, מריצים את הפקודה הבאה בספרייה החדשה שיצרתם.
curl-sLhttps://firebase.tools/dataconnect|bash
הסקריפט הזה מנסה להתקין את האפליקציה. סביבת הפיתוח המשולבת (IDE) שמותקנת מספקת כלים, כולל תוספים של VS Code שצורפו מראש, שיעזרו לכם לנהל את הסכימה ולהגדיר שאילתות ומוטציות לשימוש באפליקציה.
הגדרת ספריית הפרויקט
כדי להגדיר את הפרויקט המקומי, מאתחלים את ספריית הפרויקט. בחלון IDE, בחלונית הימנית, לוחצים על סמל Firebase כדי לפתוח את ממשק המשתמש של התוסף Data Connect VS Code:
לוחצים על הלחצן כניסה באמצעות חשבון Google.
לוחצים על הלחצן Connect a Firebase project (קישור לפרויקט Firebase) ובוחרים את הפרויקט שיצרתם קודם במסוף.
לוחצים על הלחצן Run firebase init.
לוחצים על הלחצן הפעלת אמולטורים.
יצירת סכימה
בספריית הפרויקט של Firebase, בקובץ /dataconnect/schema/schema.gql, מתחילים להגדיר סכימת GraphQL, למשל לגבי ביקורות על סרטים.
שימוש ב-Gemini Code Assist כדי ליצור סכימה
כדי ליצור סכימה של אפליקציית ביקורות סרטים באמצעות Gemini Code Assist:
לוחצים על סמל התוסף Data Connect VS Code כדי לפתוח את סרגל הצד שלו.
לוחצים על יצירת סכימה ושאילתות באמצעות AI. Gemini Code Assistחלון הצ'אט ייפתח.
בתחתית חלון הצ'אט, מוודאים שמצב סוכן מופעל.
לוחצים על תיבת הצ'אט בתחתית חלון הצ'אט ומתחילים להקליד תיאור בשפה טבעית של סוג האפליקציה שאתם יוצרים.
מקישים על Enter ו-Gemini יציג את הפקודה של שרת ה-MCP שהוא יבצע כדי להתחיל לפתח את הסכימה.
לחץ על אשר. אחרי כמה רגעים יופיע סכימה מומלצת. בדיקת הסכימה.
כדי להוסיף את הקוד ל-schema.gql:
ממתינים עד שGemini Code Assist יבקש מכם לבחור את הקובץ לעדכון.
לוחצים על אישור כדי לשנות את הקובץ, או על הצגת השינויים לפני שמבצעים את השינויים.
סרט
ב-Data Connect, שדות GraphQL ממופים לעמודות. הסרט כולל את id, title, imageUrl ו-genre. Data Connect מזהה סוגי נתונים פרימיטיביים: String ו-UUID.
מעתיקים את קטע הקוד הבא או מבטלים את ההערה בשורות המתאימות בקובץ.
# By default, a UUID id key will be created by default as primary key.# If you want to specify a primary key, say title, which you can do through# the @table(key: "title") directivetypeMovie@table{id:UUID!@default(expr:"uuidV4()")title:String!imageUrl:String!genre:String}
MovieMetadata
יכול להיות שתוצג לכם הגדרת סוג כמו זו. אפשר גם להעתיק את הקטע הבא או לבטל את ההערה בשורות המתאימות בקובץ ברירת המחדל.
# Movie - MovieMetadata is a one-to-one relationshiptypeMovieMetadata@table{# This time, we omit adding a primary key because# you can rely on Data Connect to manage it.# @unique indicates a 1-1 relationshipmovie:Movie!@unique# movieId: UUID <- this is created by the above referencerating:FloatreleaseYear:Intdescription:String}
שימו לב שהשדה movie ממופה לסוג Movie.
Data Connect מבינה שמדובר בקשר בין Movie לבין MovieMetadata, והיא תנהל את הקשר הזה בשבילך.
בחלונית העריכה של IDE, יופיעו לחצני CodeLens מעל סוגי GraphQL ב-/dataconnect/schema/schema.gql. אפשר להשתמש בלחצנים הוספת נתונים והפעלה (מקומי) כדי להוסיף נתונים למסד הנתונים המקומי.
כדי להוסיף רשומות לטבלאות Movie ו-MovieMetadata:
ב-schema.gql, לוחצים על הלחצן הוספת נתונים מעל הצהרת הסוג Movie.
בקובץ Movie_insert.gql שנוצר, מקודדים את הנתונים בשלושת השדות.
לוחצים על הלחצן הפעלה (מקומית).
חוזרים על השלבים הקודמים כדי להוסיף רשומה לטבלה MovieMetadata, ומזינים את id של הסרט בשדה movieId, כמו שמופיע בהנחיה במוטציה MovieMetadata_insert שנוצרה.
כדי לוודא במהירות שהנתונים נוספו:
חוזרים אל schema.gql ולוחצים על הלחצן קריאת נתונים מעל להצהרת הסוג Movie.
בקובץ Movie_read.gql שנוצר, לוחצים על הלחצן Run (Local) כדי להריץ את השאילתה.
עכשיו מגיע החלק המעניין: מגדירים את השאילתות שצריך באפליקציה.
כמפתחים, אתם רגילים לכתוב שאילתות SQL ולא שאילתות GraphQL, ולכן יכול להיות שזה ייראה לכם קצת שונה בהתחלה.
עם זאת, GraphQL הוא תמציתי יותר וכולל בדיקת טיפוסים, בניגוד ל-SQL גולמי. בנוסף, התוסף שלנו ל-VS Code משפר את חוויית הפיתוח, גם בשאילתות וגם במוטציות.
כדי ליצור שאילתה באמצעות Gemini Code Assist:
לוחצים על סמל התוסף Data Connect VS Code כדי לפתוח את סרגל הצד שלו.
לוחצים על יצירת סכימה ושאילתות באמצעות AI. Gemini Code Assistחלון הצ'אט ייפתח.
בתחתית חלון הצ'אט, מוודאים שמצב סוכן מופעל.
לוחצים על תיבת הצ'אט בתחתית חלון הצ'אט ומתחילים להקליד תיאור בשפה טבעית של סוג הפעולה שרוצים לפתח.
מקישים על Enter ו-Gemini יציג את הפקודה של שרת ה-MCP שהוא יבצע כדי להתחיל לפתח את הפעולה.
לחץ על אשר. אחרי כמה רגעים תופיע שאילתה מומלצת. בודקים את השאילתה.
כדי להוסיף את הקוד ל-queries.gql:
ממתינים עד שGemini Code Assist יבקש מכם לבחור את הקובץ לעדכון.
לוחצים על אישור כדי לשנות את הקובץ, או על הצגת השינויים לפני שמבצעים את השינויים.
importReactfrom'react';importReactDOMfrom'react-dom/client';import{connectDataConnectEmulator}from'firebase/data-connect';// Generated queries.// Update as needed with the path to your generated SDK.import{listMovies,ListMoviesData}from'@movie-app/movies';constdataConnect=getDataConnect(connectorConfig);connectDataConnectEmulator(dataConnect,'localhost',9399);functionApp(){const[movies,setMovies]=useState<ListMoviesData['movies']>([]);useEffect(()=>{listMovies.then(res=>setMovies(res.data));},[]);return(movies.map(movie=><h1>{movie.title}</h1>););}constroot=ReactDOM.createRoot(document.getElementById('root'));root.render(<App/>);
כדי להשתמש ב-SDK שנוצר, צריך להגדיר אותו כתלות ב-Xcode.
בסרגל הניווט העליון של Xcode, בוחרים באפשרות File > Add Package Dependencies > Add Local (קובץ > הוספת תלות בחבילה > הוספה מקומית), ובוחרים את התיקייה שמכילה את הקובץ Package.swift שנוצר.
בנציג הראשי של האפליקציה:
ייבוא של ערכת ה-SDK שנוצרה
הגדרת האפליקציה לחיבור לאמולטור Data Connect
להפעיל את אמצעי התשלום Data Connect.
importSwiftUIimportFirebaseDataConnect// Generated queries.// Update as needed with the package name of your generated SDK.import<CONNECTOR-PACKAGE-NAME>
letconnector=DataConnect.moviesConnector// Connect to the emulator on "127.0.0.1:9399"connector.useEmulator()// (alternatively) if you're running your emulator on non-default port:// connector.useEmulator(port: 9999)structListMovieView:View{@StateObjectprivatevarqueryRef=connector.listMovies.ref()varbody:someView{VStack{Button{Task{do{tryawaitrefresh()}catch{print("Failed to refresh: \(error)")}}}label:{Text("Refresh")}// use the query results in a viewForEach(queryRef.data?.movies??[]){movieinText(movie.title)}}}@MainActorfuncrefresh()asyncthrows{_=tryawaitqueryRef.execute()}structContentView_Previews:PreviewProvider{staticvarpreviews:someView{ListMovieView()}}
כדי להשתמש ב-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"valkotlinVersion="2.1.10"kotlin("android")versionkotlinVersionkotlin("plugin.serialization")versionkotlinVersion}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")}
בפעילות הראשית של האפליקציה:
ייבוא של ערכת ה-SDK שנוצרה
הגדרת האפליקציה לחיבור לאמולטור Data Connect
להפעיל את אמצעי התשלום Data Connect.
importandroid.os.Bundleimportandroid.widget.TextViewimportandroidx.appcompat.app.AppCompatActivityimportandroidx.lifecycle.Lifecycleimportandroidx.lifecycle.lifecycleScopeimportandroidx.lifecycle.repeatOnLifecycleimportkotlinx.coroutines.launchprivatevalconnector=com.myapplication.MoviesConnector.instance.apply{// Connect to the emulator on "10.0.2.2:9399" (default port)dataConnect.useEmulator()// (alternatively) if you're running your emulator on non-default port:// dataConnect.useEmulator(port = 9999)}classMainActivity:AppCompatActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)valtextView:TextView=findViewById(R.id.text_view)lifecycleScope.launch{lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED){valresult=connector.listMovies.runCatching{execute{}}valnewTextViewText=result.fold(onSuccess={valtitles=it.data.movies.map{it.title}"${titles.size} movies: "+titles.joinToString(", ")},onFailure={"ERROR: ${it.message}"})textView.text=newTextViewText}}}}
מתקינים את flutterfire CLI dart pub global activate flutterfire_cli.
מריצים את flutterfire configure.
בפונקציה הראשית של האפליקציה:
ייבוא של ערכת ה-SDK שנוצרה
הגדרת האפליקציה לחיבור לאמולטור Data Connect
להפעיל את אמצעי התשלום 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 SDKimport'movies_connector/movies.dart';voidmain()async{WidgetsFlutterBinding.ensureInitialized();awaitFirebase.initializeApp(options:DefaultFirebaseOptions.currentPlatform,);MoviesConnector.instance.dataConnect.useDataConnectEmulator(Uri.base.host,443,isSecure:true);runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(body:Column(children:[ConstrainedBox(constraints:constBoxConstraints(maxHeight:200),child:FutureBuilder(future:MoviesConnector.instance.listMovies().execute(),builder:(context,snapshot){if(snapshot.connectionState==ConnectionState.done){returnListView.builder(scrollDirection:Axis.vertical,itemBuilder:(context,index)=>Card(child:Text(snapshot.data!.data.movies[index].title,)),itemCount:snapshot.data!.data.movies.length,);}returnconstCircularProgressIndicator();}),)])));}}
פריסת הסכימה והשאילתה בסביבת הייצור
אחרי שמגדירים את ההגדרה המקומית באפליקציה, אפשר לפרוס את הסכימה ואת המחבר בענן. כדי להגדיר מופע של Cloud SQL, צריך פרויקט עם תוכנית Blaze.
עוברים לקטע Data Connect במסוף Firebase ויוצרים מכונת Cloud SQL לניסיון בחינם.
בTerminal המשולב ב-IDE, מריצים את הפקודה firebase init dataconnect ובוחרים את מזהה האזור או השירות שיצרתם במסוף.
כשמופיעה ההודעה "File dataconnect/dataconnect.yaml already
exists, Overwrite?" (הקובץ dataconnect/dataconnect.yaml כבר קיים, להחליף אותו?), בוחרים באפשרות Y.
בחלון IDE, בממשק המשתמש של תוסף VS Code, לוחצים על הלחצן Deploy to production (פריסה בסביבת ייצור).
אחרי הפריסה, נכנסים אל מסוף Firebase כדי לוודא שהסכימה, הפעולות והנתונים הועלו לענן. אפשר לראות את הסכימה ולהריץ את הפעולות במסוף. מכונת Cloud SQL for PostgreSQL תעודכן עם הסכימה והנתונים הסופיים שנוצרו ופרסנו.
השלבים הבאים
בודקים את הפרויקט שהופעל ומגלים עוד כלים:
אפשר להוסיף נתונים למסד הנתונים, לבדוק ולשנות את הסכימות ולעקוב אחרי שירות Data Connect במסוף Firebase.
מידע נוסף זמין במסמכי התיעוד. לדוגמה, מאז שסיימתם את המדריך למתחילים: