Check out the latest news from Firebase at Cloud Next 2025. Learn more.

Halaman ini diterjemahkan oleh Cloud Translation API.

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 di konsol Firebase menggunakan Schema Assist, lalu deploy.
Sediakan instance Cloud SQL untuk aplikasi Anda.
Dengan Gemini Code Assist, isi database Anda dengan data contoh.

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.
Gunakan alat ekstensi untuk membantu Anda menerapkan kueri yang akan digunakan di aplikasi Anda.
Buat SDK dengan jenis yang kuat dan gunakan di aplikasi Anda.
Deploy skema, kueri, dan data akhir Anda ke cloud.

Alur konsol: Mendesain skema dan men-deploynya ke database

Jika Anda belum melakukannya, buat project Firebase.
1. Di Firebase console, klik Add project, lalu ikuti petunjuk di layar.
Buka bagian Data Connect di konsol Firebase.
Klik tombol Mulai gunakan Gemini.
Di panel alur kerja Schema Generator yang muncul, deskripsikan aplikasi agar Gemini dapat membantu membuat skema GraphQL bersama Anda.
Tinjau skema GraphQL, lalu klik Upgrade dan deploy.
Upgrade project Anda ke paket Blaze. Dengan demikian, Anda dapat membuat instance Cloud SQL untuk PostgreSQL.

Catatan: Meskipun Anda menyiapkan penagihan dalam upgrade Blaze, Anda tidak akan dikenai biaya untuk penggunaan Data Connect atau konfigurasi Cloud SQL untuk PostgreSQL default selama uji coba.
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.

Catatan: Jika Anda ingin menggunakan kunci enkripsi yang dikelola pelanggan (CMEK), pastikan Anda memilih Use existing Cloud SQL instance dan memilih database Cloud SQL yang ada dengan CMEK.
Catatan: Mungkin perlu waktu hingga 15 menit untuk menyelesaikan penyediaan instance Cloud SQL untuk PostgreSQL. Anda dapat mengonfirmasi bahwa alur penyiapan Data Connect, termasuk penyediaan database, telah selesai menggunakan konsol Google Cloud.

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

Dengan menyelesaikan langkah sebelumnya, Anda telah membuat skema Data Connect yang terdiri dari jenis entity 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 Anda.

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

Catatan: Pilih entitas dasar yang sederhana seperti Product atau Account untuk diisi dengan data.

Contoh:
```
Add data for three sample products to my app.
```
Klik Buat. Mutasi ditampilkan.
Tinjau output. Jika diperlukan, klik Edit untuk meningkatkan kualitas perintah, lalu klik Regenerate.
Selanjutnya, klik Sisipkan untuk menyisipkan mutasi ke editor data.
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:

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

Di kotak yang muncul, ketik input Anda.

Contoh:

Query data for all sample products in my app.

Klik Buat, lalu Jalankan.

Alur lokal: Memilih alat pengembangan

Setelah memiliki data di database yang di-deploy, 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

Buat direktori baru untuk project lokal Anda.
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.

Catatan: Jika Anda sudah menginstal VS Code versi desktop, skrip akan membukanya secara otomatis.
Catatan: Jika skrip gagal, gunakan langkah-langkah penginstalan manual.

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:

Klik tombol Sign in with Google.
Klik tombol Connect a Firebase project dan pilih project yang Anda buat sebelumnya di konsol.
Klik tombol Run firebase init dan selesaikan alur.

Catatan: firebase init akan menyinkronkan project lokal Anda dengan resource yang di-deploy di konsol Firebase. Yang terpenting, skema GraphQL Anda akan didownload ke project lokal sehingga Anda dapat melanjutkan pengembangan.
Klik tombol Start emulators.

Catatan: Di Terminal terintegrasi, pastikan emulator yang dikonfigurasi mulai berjalan. Setelah berjalan, Anda akan melihat update UI ekstensi dengan detail emulator.

Alur lokal: Menemukan skema Anda di lingkungan lokal

Langkah firebase init di bagian sebelumnya menyinkronkan skema yang Anda deploy dari konsol ke lingkungan pengembangan lokal.

Temukan skema Anda: skema ini terletak di direktori project Firebase, dalam file /dataconnect/schema/schema.gql.

Alur lokal: Menggunakan skema

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:

Di schema.gql, klik tombol Tambahkan data di atas deklarasi untuk salah satu jenis Anda (seperti Movie, Product, Account, bergantung pada sifat aplikasi Anda).
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.
Klik tombol Run (Production).
Ulangi langkah sebelumnya untuk menambahkan data ke tabel lain.

Untuk memverifikasi bahwa data telah ditambahkan dengan cepat:

Kembali ke schema.gql, klik tombol Read data di atas deklarasi type.
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: Menentukan kueri

Sekarang saatnya bagian yang menyenangkan, kueri. Sebagai developer, Anda terbiasa menulis kueri SQL, bukan kueri GraphQL, sehingga hal ini mungkin terasa sedikit berbeda pada awalnya. Namun, GraphQL jauh lebih ringkas dan aman dari jenis daripada SQL mentah. Selain itu, ekstensi VS Code kami memudahkan pengalaman pengembangan.

Untuk menerapkan kueri, Anda dapat menyesuaikan kueri yang dibuat dengan CodeLens kami:

Di /dataconnect/schema/schema.gql, di atas jenis (Movie, Product, Account, dll.), klik tombol CodeLens Baca data.
Dalam file <type>_read.gql yang dihasilkan, uji kueri dengan mengklik tombol Run (Production).
Salin kueri yang berfungsi ke /dataconnect/connector/queries.gql.
Agar kueri ini dapat di-deploy, deklarasikan nama unik untuk kueri tersebut.

Misalnya, dalam contoh umum berikut, query_name mungkin ListMovies, atau ListProducts, atau ListAccounts.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
query <query_name> @auth(level: PUBLIC) {
   <table_name> {
     <field_1>
     <field_2>
     <field_3>
  }
}

Jalankan kueri menggunakan tombol CodeLens di dekatnya.

Pelajari kueri Data Connect lebih lanjut dalam dokumentasi

Alur lokal: Membuat SDK

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

Catatan: Jika belum memiliki direktori aplikasi, Anda dapat membuat dan memilih direktori baru untuk kode SDK untuk saat ini dan menautkannya ke aplikasi Anda nanti.
Pilih platform aplikasi Anda, lalu perhatikan bahwa kode SDK langsung dibuat di direktori yang Anda pilih.

Alur lokal: Men-deploy skema dan kueri ke produksi

Anda telah mengerjakan iterasi pengembangan. Sekarang Anda dapat men-deploy skema dan kueri ke server dengan UI ekstensi Firebase atau CLI Firebase, seperti yang Anda lakukan dengan skema.

Di jendela IDE, di UI Ekstensi VS Code, klik tombol Deploy to production.

Setelah di-deploy, buka konsol Firebase untuk memverifikasi update skema (jika ada) dan operasi telah diupload ke cloud. Anda seharusnya dapat melihat skema, dan menjalankan operasi di konsol juga. Instance Cloud SQL untuk PostgreSQL akan diperbarui dengan skema dan data yang dihasilkan dan di-deploy terakhir.

Pelajari lebih lanjut cara menggunakan emulator Data Connect dalam dokumentasi

Alur lokal: Gunakan 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 Swift Kotlin Android Flutter

Tambahkan Firebase ke aplikasi web Anda.

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

Tambahkan Firebase ke aplikasi iOS Anda.
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.

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

Tambahkan Firebase ke aplikasi Android Anda.

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

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

Tambahkan Firebase ke aplikasi Flutter Anda.
Instal flutterfire CLI dart pub global activate flutterfire_cli.
Jalankan flutterfire configure.
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:

Pelajari lebih lanjut pengembangan skema, kueri, dan mutasi
Pelajari cara membuat SDK klien dan memanggil kueri serta mutasi dari kode klien untuk web, Android, iOS, dan Flutter.