Memulai Firebase Data Connect

Dalam panduan memulai ini, Anda akan mempelajari cara mem-build Firebase Data Connect di aplikasi dengan instance SQL produksi.

Di konsol Firebase, Anda akan:

  • Tambahkan Firebase Data Connect ke project Firebase Anda.
  • Buat skema untuk aplikasi dengan pembuatan skema yang dibantu AI di konsol Firebase, lalu deploy.
  • Sediakan instance Cloud SQL untuk aplikasi Anda.
  • Dengan Gemini di Firebase, isi database Anda dengan data contoh.
  • Buat kueri dan mutasi, dengan pembuatan operasi yang dibantu AI, yang dapat Anda deploy dan gunakan untuk mengembangkan kode klien secara lokal.

Kemudian, di lingkungan pengembangan lokal, Anda akan:

  • Siapkan alat pengembangan, termasuk ekstensi Visual Studio Code, agar berfungsi dengan instance produksi Anda.
  • Sinkronkan lingkungan lokal Anda dengan aset yang Anda buat di konsol.
  • Buat SDK dengan jenis yang kuat dan gunakan di aplikasi Anda.

Alur konsol: Gunakan bantuan AI untuk mendesain skema, lalu men-deploy-nya ke database

  1. Jika belum melakukannya, buat project Firebase.
    1. Di Firebase console, klik Add project, lalu ikuti petunjuk di layar.
  2. Buka bagian Data Connect di konsol Firebase.
  3. Klik tombol Mulai gunakan Gemini.
  4. Di panel alur kerja Schema Generator yang muncul, deskripsikan aplikasi agar Gemini dapat membantu membuat skema GraphQL bersama Anda.
  5. Tinjau skema GraphQL, lalu klik Upgrade dan deploy.

  6. Upgrade project Anda ke paket Blaze. Dengan demikian, Anda dapat membuat instance Cloud SQL untuk PostgreSQL.

  7. Pilih instance Buat Cloud SQL baru. Pada dialog yang muncul, pilih lokasi dan penamaan untuk database Cloud SQL untuk PostgreSQL Anda.

    Skema aplikasi Anda di-deploy, bersama dengan database PostgreSQL yang sesuai dengan skema tersebut.

Alur konsol: Menggunakan bantuan AI untuk membuat operasi bagi klien Anda

Setelah skema di-deploy, Anda dapat melakukan langkah pertama untuk membuat data ini tersedia dan dapat diakses dari aplikasi klien dengan membuat konektor kueri dan mutasi untuk di-deploy ke backend, lalu memanggil dari klien.

Alat bantuan AI kami siap membantu.

  1. Saat diminta, klik tombol Buat operasi dengan Gemini.

  2. Setelah beberapa saat, di panel alur kerja Buat operasi yang muncul, tinjau daftar kueri dan mutasi yang disediakan oleh Gemini berdasarkan skema Anda.

  3. Klik setiap baris operasi untuk meninjau kode GraphQL yang menentukan operasi tersebut. Jika perlu, gunakan kontrol tempat sampah untuk menghapus operasi yang tidak Anda butuhkan.

  4. Untuk menambahkan operasi, klik tombol + Tambahkan. Kemudian:

    1. Jelaskan operasi Anda dalam bahasa alami.

      Contoh:

      List all products

    2. Tinjau GraphQL yang dihasilkan.

    3. Jika operasi dapat diterima, klik Sisipkan untuk menambahkannya ke daftar operasi.

  5. Lanjutkan menghapus dan menambahkan operasi hingga kumpulan operasi Anda dapat diterima.

  6. Untuk men-deploy daftar operasi ini sebagai kumpulan konektor yang dapat dipanggil klien, pilih nama konektor, lalu klik Deploy.

Alur konsol: Menggunakan Gemini di Firebase untuk membuat mutasi dan mengisi database

Dengan menyelesaikan langkah-langkah sebelumnya, Anda telah membuat skema Data Connect yang terdiri dari jenis entitas yang relevan, dan men-deploy-nya ke produksi, yang berarti database PostgreSQL dengan tabel yang sesuai juga dibuat dan di-deploy.

Untuk mengisi database, Anda dapat menggunakan Gemini di Firebase untuk membantu Anda mengambil input bahasa alami untuk menentukan mutasi GraphQL guna memperbarui salah satu tabel dan kueri untuk mengonfirmasi pembaruan.

  1. Buka tab Data.

  2. Klik ikon Help me write GraphQL pen_spark, lalu di kotak yang muncul, ketik input Anda.

    Contoh:

    Add data for three sample products to my app.

  3. Klik Generate. Mutasi ditampilkan.

  4. Tinjau output. Jika diperlukan, klik Edit untuk meningkatkan kualitas perintah, lalu klik Regenerate.

  5. Selanjutnya, klik Sisipkan untuk menyisipkan mutasi ke editor data.

  6. Klik Run.

Saat Anda menjalankan mutasi, data akan ditulis ke tabel yang berlaku di database PostgreSQL Anda. Anda dapat membuat kueri di konsol untuk melihat data yang disimpan:

  1. Ulangi langkah-langkah sebelumnya, menggunakan Help me write GraphQL pen_spark untuk membuat kueri.

  2. Di kotak yang muncul, ketik input Anda.

    Contoh:

    Query data for all sample products in my app.

  3. Klik Buat, lalu Jalankan.

Alur lokal: Memilih alat pengembangan

Setelah memiliki data di database yang di-deploy, dan telah men-deploy konektor, Anda dapat melanjutkan pengembangan skema dan konektor di lingkungan pengembangan lokal.

Pertama, Anda perlu menyiapkan lingkungan lokal. Data Connect menawarkan dua cara untuk menginstal alat pengembangan.

Alur lokal: Menyiapkan lingkungan pengembangan

  1. Buat direktori baru untuk project lokal Anda.

  2. Jalankan perintah berikut di direktori baru yang Anda buat.

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

    Skrip ini mencoba menyiapkan lingkungan pengembangan untuk Anda dan meluncurkan IDE berbasis browser. IDE ini menyediakan alat, termasuk ekstensi VS Code yang dipaketkan sebelumnya, untuk membantu Anda mengelola skema dan menentukan kueri serta mutasi yang akan digunakan dalam aplikasi, dan membuat SDK dengan jenis yang kuat.

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

Alur lokal: Menyiapkan direktori project

Untuk menyiapkan project lokal, lakukan inisialisasi direktori project. Di jendela IDE, di panel sebelah kiri, klik ikon Firebase untuk membuka UI ekstensi VS Code Data Connect:

  1. Klik tombol Sign in with Google.
  2. Klik tombol Connect a Firebase project dan pilih project yang Anda buat sebelumnya di konsol.

  3. Klik tombol Run firebase init dan selesaikan alur.

  4. Klik tombol Start emulators.

Alur lokal: Menemukan skema dan konektor di lingkungan lokal

Langkah firebase init di bagian sebelumnya menyinkronkan aset ke lingkungan pengembangan Lokal Anda:

  • Tindakan ini akan menyinkronkan skema yang Anda deploy
    • Temukan skema Anda: skema ini terletak di direktori project Firebase, dalam file /dataconnect/schema/schema.gql.
  • Tindakan ini akan menyinkronkan kueri dan mutasi di konektor yang Anda deploy
    • Temukan konektor Anda: operasi berada di direktori project Firebase, di direktori /dataconnect/connector/.

Alur lokal: Memahami skema Anda

Contoh skema: Film

Di Data Connect, kolom GraphQL dipetakan ke kolom. Jenis Movie kemungkinan akan memiliki id, title, imageUrl, dan genre. Data Connect mengenali jenis data primitif String dan 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
}

Contoh skema tabel 1:1: MovieMetadata

Dengan film, Anda dapat membuat model metadata film.

Misalnya, di schema.gql, Anda dapat menambahkan cuplikan atau kode peninjauan berikut yang dihasilkan oleh 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
}

Perhatikan bahwa kolom movie dipetakan ke jenis Movie. Data Connect memahami bahwa ini adalah hubungan antara Movie dan MovieMetadata dan akan mengelola hubungan ini untuk Anda.

Pelajari skema Data Connect lebih lanjut dalam dokumentasi

Alur lokal: Menambahkan lebih banyak data ke tabel

Di panel editor IDE, Anda dapat melihat tombol CodeLens muncul di atas jenis GraphQL di /dataconnect/schema/schema.gql. Sama seperti yang Anda lakukan di konsol, Anda dapat membuat mutasi untuk menambahkan data ke database produksi.

Bekerja secara lokal, untuk menambahkan data ke tabel:

  1. Di schema.gql, klik tombol Tambahkan data di atas deklarasi untuk salah satu jenis Anda (seperti Movie, Product, Account, bergantung pada sifat aplikasi Anda).
    Tombol Tambahkan data Lensa Kode untuk Firebase Data Connect
  2. File baru, <type>_insert.qgl, ditambahkan ke direktori kerja Anda, seperti Movie_insert.gql atau Product_insert.gql. Hard code data di kolom untuk jenis tersebut.
  3. Klik tombol Run (Production).
    Tombol Run Lensa Kode untuk Firebase Data Connect
  4. Ulangi langkah sebelumnya untuk menambahkan data ke tabel lain.

Untuk memverifikasi dengan cepat bahwa data telah ditambahkan:

  1. Kembali ke schema.gql, klik tombol Read data di atas deklarasi type.
  2. Dalam file <type>_read.gql yang dihasilkan, seperti Product_read.gql, klik tombol Run (Production) untuk menjalankan kueri.

Pelajari mutasi Data Connect lebih lanjut dalam dokumentasi

Alur lokal: Membuat SDK

Operasi skema dan konektor Anda disinkronkan secara lokal. Sekarang Anda dapat menggunakan alat lokal untuk membuat SDK klien guna mulai menerapkan panggilan ke kueri dan mutasi di aplikasi iOS, Android, web, dan Flutter.

  1. Klik tombol Tambahkan SDK ke aplikasi.

  2. Pada dialog yang muncul, pilih direktori yang berisi kode untuk aplikasi Anda. Kode SDK Data Connect akan dibuat dan disimpan di sana.

  3. Pilih platform aplikasi Anda, lalu perhatikan bahwa kode SDK langsung dibuat di direktori yang Anda pilih.

Alur lokal: Menggunakan SDK untuk memanggil kueri dari aplikasi

Setelah skema yang diperbarui (jika ada) dan kueri di-deploy ke produksi, Anda dapat menggunakan SDK yang dihasilkan Data Connect untuk menerapkan panggilan ke kueri ListMovies.

Web

  1. Tambahkan Firebase ke aplikasi web Anda.

  2. Di file utama aplikasi React Anda:

    • mengimpor SDK yang dihasilkan
    • memanggil metode 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. Tambahkan Firebase ke aplikasi iOS Anda.

  2. Untuk menggunakan SDK yang dihasilkan, konfigurasikan sebagai dependensi di Xcode.

    Di menu navigasi atas Xcode, pilih File > Add Package Dependencies > Add Local, lalu pilih folder yang berisi Package.swift yang dihasilkan.

  3. Di delegasi utama aplikasi Anda:

    • mengimpor SDK yang dihasilkan
    • memanggil metode 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. Tambahkan Firebase ke aplikasi Android Anda.

  2. Untuk menggunakan SDK yang dihasilkan, konfigurasikan Data Connect sebagai dependensi di Gradle.

    Perbarui plugins dan dependencies di app/build.gradle.kts Anda.

    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. Di aktivitas utama aplikasi Anda:

    • mengimpor SDK yang dihasilkan
    • memanggil metode 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. Tambahkan Firebase ke aplikasi Flutter Anda.
  2. Instal flutterfire CLI dart pub global activate flutterfire_cli.
  3. Jalankan flutterfire configure.
  4. Dalam fungsi utama aplikasi Anda:
    • mengimpor SDK yang dihasilkan
    • memanggil metode 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();
            }),
      )
    ])));
  }
}

Langkah berikutnya

Tinjau project yang di-deploy dan temukan alat lainnya:

  • Tambahkan data ke database, periksa dan ubah skema, serta pantau layanan Data Connect di Firebase console.

Akses informasi selengkapnya dalam dokumentasi. Misalnya, karena Anda telah menyelesaikan panduan memulai: