Memulai Firebase Data Connect

Panduan memulai ini akan membantu Anda menyiapkan dan menjalankan Firebase Data Connect untuk menghubungkan aplikasi web dan seluler Anda ke database PostgreSQL. Anda akan:

  • Siapkan direktori project Firebase Data Connect lokal dengan VS Code dan Firebase CLI.
  • Buat skema, kueri, dan mutasi Data Connect berdasarkan ide aplikasi Anda dalam bahasa alami.
  • Gunakan SDK yang memiliki jenis yang kuat di aplikasi Anda untuk menjalankan kueri dan mutasi Data Connect.
  • Menyediakan instance Cloud SQL untuk PostgreSQL, skema, kueri, dan mutasi Data Connect (memerlukan paket Blaze).

Menyiapkan direktori project lokal

Anda dapat menginstal alat pengembangan lokal untuk Data Connect dengan dua cara.

  1. Di direktori project, jalankan perintah berikut.

    Skrip ini menginstal Firebase CLI dan ekstensi Data Connect VS Code, serta memandu Anda melalui firebase init dataconnect untuk menyiapkan project. Jika Anda belum menginstal VS Code desktop, skrip akan membukanya di browser.

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

  2. Buka layar ekstensi Data Connect VS Code dengan mengklik ikon Firebase di panel kiri Visual Studio Code.

  3. Klik Start emulators untuk menjalankan emulator dengan database PGlite lokal.

Meninjau skema

Firebase Data Connect menggunakan GraphQL untuk menentukan model data Anda. Direktif @table memetakan jenis GraphQL ke tabel PostgreSQL. Kolom dalam peta jenis dipetakan ke kolom PostgreSQL. Anda dapat menentukan hubungan antar-tabel menggunakan kolom yang mereferensikan jenis @table lainnya, termasuk hubungan banyak-ke-banyak menggunakan tabel gabungan dengan kunci utama komposit.

Dalam penyiapan default, Anda dapat menemukan file skema Data Connect di direktori dataconnect/schema/. Berikut dua contoh tabel dari skema template film. Skema Anda mungkin berbeda jika Anda menggunakan Gemini untuk membuatnya.

type Movie @table {
  # Every table has an implicit primary key field that looks something like:
  #  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

type Review @table(key: ["movie", "user"]) {
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Pelajari lebih lanjut skema Data Connect

Mengembangkan kueri dan mutasi

Firebase Data Connect menggunakan GraphQL untuk kueri dan mutasi. Anda menentukannya dalam file .gql dan memanggilnya berdasarkan nama dari aplikasi Anda. Sintaksis GraphQL menyediakan SDK yang sangat diketik dan API yang fleksibel untuk mengambil data persis yang dibutuhkan aplikasi Anda.

Menambahkan data di database Anda

Dengan emulator yang berjalan, Anda dapat mengisi emulator dengan data awal. Anda dapat menggunakan file dataconnect/seed_data.gql yang disediakan atau menulis mutasi Anda sendiri.

Gunakan tombol Code Lens Run (local) di VS Code untuk menjalankan mutasi dan mengisi database PGlite lokal Anda.

Tombol Run CodeLens untuk Firebase Data Connect

Meninjau kueri dan mutasi

Dalam penyiapan default, Anda dapat menemukan kueri dan mutasi Data Connect di direktori dataconnect/example/.

Anda dapat membuat kueri data relasional secara tepat dengan kueri bertingkat.

query ListMovies @auth(level: PUBLIC, insecureReason: "Anyone can list all movies and their reviews.") {
  movies {
    title imageUrl genre
    reviews_on_movie {
      rating reviewDate
      user { username }
    }
  }
}

Data Connect membantu Anda membuat kueri dan mutasi yang aman dengan Firebase Auth.

Untuk menjaga keamanan aplikasi Anda, aplikasi web dan seluler hanya dapat mengakses kueri dan mutasi Data Connect dengan direktif @auth. Kueri dan mutasi dapat mengakses UID Firebase Auth secara aman menggunakan ekspresi seperti {field}_expr: "auth.uid".

mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!) @auth(level: USER) {
  review_upsert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
    }
  )
}

Pelajari lebih lanjut kueri Data Connect Pelajari lebih lanjut mutasi Data Connect Pelajari lebih lanjut Data Connect Auth

Membuat kueri dan mutasi

Anda tidak perlu menjadi pakar GraphQL untuk menggunakan Data Connect secara efektif. Anda dapat membuat kueri dan mutasi Data Connect dari deskripsi bahasa alami.

Dalam file .gql apa pun, ketik # untuk memulai komentar dan mendeskripsikan kueri atau mutasi. Kemudian, gunakan tombol Code Lens Generate/Refine Operation untuk membuat operasi GraphQL.

Tombol Buat CodeLens untuk Firebase Data Connect

Menggunakan SDK yang dihasilkan di aplikasi Anda

firebase init dataconnect otomatis menyiapkan SDK yang aman untuk aplikasi di project Anda. Jika perlu, Anda dapat menambahkan SDK secara manual dengan tombol Tambahkan SDK ke aplikasi di ekstensi VS Code atau dengan menjalankan firebase init dataconnect:sdk.

Web

  1. Tambahkan Firebase ke aplikasi web Anda.

  2. Di file utama aplikasi React Anda:

    • Impor SDK yang dihasilkan:
    // Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@dataconnect/generated';
    • Lengkapi aplikasi Anda untuk terhubung ke emulator Data Connect:
    import { connectDataConnectEmulator } from 'firebase/data-connect';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);
    • Panggil metode Data Connect.
    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 panel 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:

    • Impor Data Connect SDK dan SDK yang Anda buat:

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

let connector = DataConnect.moviesConnector

    • Lengkapi aplikasi Anda untuk terhubung ke emulator Data Connect:

      // 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)

    • Panggil metode Data Connect:

      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()
    }
}

Android Kotlin

  1. Tambahkan Firebase ke aplikasi Android Anda.

  2. Untuk menggunakan SDK yang dihasilkan, konfigurasi 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:

    • Dapatkan instance konektor dari SDK yang dibuat:
    private val connector = com.myapplication.MoviesConnector.instance
    • Lengkapi aplikasi Anda untuk terhubung ke emulator Data Connect:
    private val connector = 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)
  }
    • Panggil metode Data Connect.
    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:

    • Impor SDK yang dihasilkan:
    // Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';
    • Lengkapi aplikasi Anda untuk terhubung ke emulator Data Connect:
    void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  runApp(const MyApp());
}
    • Panggil metode Data Connect.
    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();
            }),
      )
    ])));
  }
}

Men-deploy ke produksi

Untuk men-deploy skema, kueri, dan mutasi ke produksi:

  1. Upgrade Project Firebase untuk menggunakan paket Blaze.

  2. Klik tombol Deploy to production di ekstensi Data Connect VS Code atau jalankan di terminal:

    firebase deploy --only dataconnect

    Setelah men-deploy, buka Firebase console untuk melihat skema dan menjalankan kueri serta mutasi.

Pelajari lebih lanjut dataconnect.yaml Pelajari lebih lanjut cara kerja Data Connect dengan Cloud SQL

Langkah berikutnya

Setelah menyelesaikan panduan memulai, berikut beberapa langkah selanjutnya: