Halaman ini diterjemahkan oleh Cloud Translation API.

Mulai menggunakan Firebase Data Connect secara lokal

Dalam panduan memulai ini, Anda akan mempelajari cara membuat Firebase Data Connect di aplikasi Anda secara lokal tanpa menyiapkan instance SQL produksi. Anda akan:

Tambahkan Firebase Data Connect ke project Firebase Anda.
Siapkan lingkungan pengembangan termasuk ekstensi Visual Studio Code untuk bekerja dengan instance lokal.
Kemudian kami akan menunjukkan cara:
- Gunakan alat ekstensi VS Code, dengan Gemini Code Assist, untuk:
  - Membuat skema untuk aplikasi
  - Buat kueri dan mutasi administratif untuk mengisi database lokal Anda
  - Membantu Anda menerapkan kueri dan mutasi untuk aplikasi Anda di konektor yang dapat di-deploy
- Uji kueri dan mutasi Anda dengan data sampel terhadap emulator lokal
- Buat SDK berjenis kuat dan gunakan di aplikasi Anda
- Deploy skema dan konektor akhir Anda ke cloud (opsional, dengan upgrade paket Blaze).

Memilih alur pengembangan lokal

Data Connect menawarkan dua cara untuk menginstal alat pengembangan dan bekerja secara lokal.

Prasyarat

Untuk menggunakan panduan memulai cepat ini, Anda memerlukan hal berikut.

Project Firebase. Jika Anda belum membuatnya, lakukan di Firebase console.

Menyiapkan lingkungan pengembangan

Buat direktori baru untuk project lokal Anda.
Untuk menyiapkan lingkungan pengembangan Data Connect dan IDE berbasis browser, jalankan perintah berikut di direktori baru yang Anda buat.
```
curl -sL https://firebase.tools/dataconnect | bash
```
Skrip ini mencoba penginstalan. IDE yang diinstal menyediakan alat, termasuk ekstensi VS Code yang telah di-bundle sebelumnya, untuk membantu Anda mengelola skema dan menentukan kueri dan mutasi yang akan digunakan dalam aplikasi Anda.

Menyiapkan direktori project

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

Klik tombol Login dengan Google.
Klik tombol Connect a Firebase project dan pilih project yang Anda buat sebelumnya di konsol.
Klik tombol Run firebase init.
Klik tombol Start emulators.

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

Membuat skema

Di direktori project Firebase Anda, dalam file /dataconnect/schema/schema.gql, mulailah menentukan skema GraphQL tentang, misalnya, ulasan film.

Menggunakan Gemini Code Assist untuk membuat skema

Untuk membuat skema aplikasi ulasan film menggunakan Gemini Code Assist:

Klik ikon ekstensi Data Connect VS Code untuk membuka sidebar-nya.
Klik Try Gemini with @FirebaseDataConnect. Jendela chat Gemini Code Assist akan terbuka.
Klik antarmuka chat, lalu mulai ketik @FirebaseDataConnect untuk memfilter perintah yang relevan.
Pilih perintah /generate_schema dan pada perintah, selesaikan perintah, dengan meminta Gemini membuat skema untuk aplikasi yang Anda kembangkan.

Contoh:
```
@FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users
```
Setelah beberapa saat, skema yang direkomendasikan akan muncul. Tinjau skema.

Catatan: Jika ingin mengubah skema awal, Anda dapat menjalankan perintah @FirebaseDataConnect /generate_schema baru dan meminta Gemini untuk, misalnya, menghapus jenis dari skema, atau menambahkan kolom tertentu ke jenis.
Untuk menambahkan kode ke schema.gql:
1. Klik tombol Sisipkan ke bagian bawah file
2. Atau, untuk menyisipkan kode di posisi kursor, klik tombol + di bagian atas respons chat.

Film

Di Data Connect, kolom GraphQL dipetakan ke kolom. Film memiliki id, title, imageUrl, dan genre. Data Connect mengenali jenis data primitif: String dan UUID.

Salin cuplikan berikut atau hapus komentar pada baris yang sesuai dalam file.

# 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") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

Salin cuplikan berikut atau hapus komentar pada baris yang sesuai dalam file.

# 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 lebih lanjut skema Data Connect dalam dokumentasi

Menambahkan data ke tabel

Di panel editor IDE, Anda akan melihat tombol CodeLens muncul di atas jenis GraphQL di /dataconnect/schema/schema.gql. Anda dapat menggunakan tombol Tambahkan data dan Jalankan (Lokal) untuk menambahkan data ke database lokal.

Untuk menambahkan data ke tabel Movie dan MovieMetadata:

Di schema.gql, klik tombol Tambahkan data di atas deklarasi jenis Movie.
Dalam file Movie_insert.gql yang dihasilkan, hard code data untuk tiga kolom.
Klik tombol Run (Local).
Ulangi langkah sebelumnya untuk menambahkan data ke tabel MovieMetadata, dengan memberikan id Film Anda di kolom movieId, seperti yang diminta dalam mutasi MovieMetadata_insert yang dihasilkan.

Untuk memverifikasi dengan cepat bahwa data telah ditambahkan:

Kembali di schema.gql, klik tombol Read data di atas deklarasi jenis Movie.
Di file Movie_read.gql yang dihasilkan, klik tombol Run (Local) untuk menjalankan kueri.

Pelajari lebih lanjut mutasi Data Connect dalam dokumentasi

Menentukan kueri

Sekarang untuk hal yang lebih menarik: tentukan kueri yang akan Anda perlukan di aplikasi Anda. 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 untuk jenis data daripada SQL mentah. Selain itu, ekstensi VS Code kami mempermudah pengalaman pengembangan, baik untuk kueri maupun mutasi.

Untuk membuat kueri menggunakan Gemini Code Assist:

Klik ikon ekstensi Data Connect VS Code untuk membuka sidebar-nya.
Klik Try Gemini with @FirebaseDataConnect. Jendela chat Gemini Code Assist akan terbuka.
Klik antarmuka chat, lalu mulai ketik @FirebaseDataConnect untuk memfilter perintah yang relevan.
Pilih perintah /generate_operation dan pada perintah, selesaikan perintah, dengan meminta Gemini membuat kueri.

Contoh:
```
@FirebaseDataConnect /generate_operation List all movies with titles start with "A".
```
Setelah beberapa saat, kueri yang direkomendasikan akan muncul. Tinjau kueri.

Catatan: Jika ingin mengubah kueri awal, Anda dapat menjalankan perintah @FirebaseDataConnect /generate_operation baru dan meminta Gemini untuk, misalnya, memfilter judul yang diawali dengan angka. Atau, minta untuk membuat beberapa mutasi dengan perintah seperti "Buat mutasi untuk semua jenis skema saya".
Untuk menambahkan kode ke queries.gql:
1. Klik tombol Sisipkan ke bagian bawah file
2. Atau, untuk menyisipkan kode di posisi kursor, klik tombol + di bagian atas respons chat.

Jalankan kueri menggunakan tombol CodeLens di dekatnya.

Pelajari lebih lanjut kueri Data Connect dalam dokumentasi

Membuat SDK dan menggunakannya di aplikasi Anda

Di panel kiri IDE, klik ikon Firebase untuk membuka UI ekstensi Data Connect VS Code:

Klik tombol Tambahkan SDK ke aplikasi.
Dalam 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 akan langsung dibuat di direktori yang Anda pilih.

Menggunakan SDK untuk memanggil kueri dari aplikasi

Anda dapat menggunakan SDK yang dibuat Data Connect untuk menerapkan panggilan ke kueri ListMovies. Kemudian, Anda dapat menjalankan kueri ini secara lokal menggunakan emulator Data Connect.

Web

Tambahkan Firebase ke aplikasi web Anda.

Di file utama aplikasi React Anda:

mengimpor SDK yang dihasilkan
melengkapi aplikasi Anda untuk terhubung ke emulator Data Connect
memanggil metode Data Connect.

import React from 'react';
import ReactDOM from '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';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

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

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

Di delegasi utama aplikasi Anda:

mengimpor SDK yang dihasilkan
melengkapi aplikasi Anda untuk terhubung ke emulator Data Connect
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

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

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

Tambahkan Firebase ke aplikasi Android Anda.

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

Di aktivitas utama aplikasi Anda:

mengimpor SDK yang dihasilkan
melengkapi aplikasi Anda untuk terhubung ke emulator Data Connect
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
  .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)
  }


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

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
- melengkapi aplikasi Anda untuk terhubung ke emulator Data Connect
- 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,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  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();
            }),
      )
    ])));
  }
}

Men-deploy skema dan kueri Anda ke produksi

Setelah menyiapkan lokal di aplikasi, Anda kini dapat men-deploy skema dan konektor ke cloud. Anda memerlukan project paket Blaze untuk menyiapkan instance Cloud SQL.

Buka bagian Data Connect di konsol Firebase dan buat instance Cloud SQL uji coba gratis.

Catatan: Penyediaan instance Cloud SQL untuk PostgreSQL dapat memerlukan waktu hingga 15 menit. Anda tidak akan dapat men-deploy hingga instance Anda siap.
Catatan: Jika Anda ingin menggunakan kunci enkripsi yang dikelola pelanggan (CMEK), pastikan Anda memilih Gunakan instance Cloud SQL yang ada dan pilih database Cloud SQL yang ada dengan CMEK.
Di Terminal yang terintegrasi dengan IDE, jalankan firebase init dataconnect dan pilih Region/Service ID yang baru saja Anda buat di konsol.
Pilih "Y" saat diminta dengan "File dataconnect/dataconnect.yaml sudah ada, Timpa?".
Di jendela IDE, di UI Ekstensi VS Code, klik tombol Deploy to production.
Setelah di-deploy, buka konsol Firebase untuk memverifikasi bahwa skema, operasi, dan data telah diupload ke cloud. Anda akan dapat melihat skema, dan menjalankan operasi di konsol. Instance Cloud SQL untuk PostgreSQL akan diupdate dengan skema dan data yang dihasilkan dan di-deploy terakhir.

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:

Temukan alat dan panduan bantuan AI lainnya untuk membantu Anda membuat skema, kueri, dan mutasi. Panduan bantuan AI mencakup cara menyiapkan dan menggunakan server MCP kami dengan IDE Anda dan praktik terbaik untuk menulis perintah.
Pelajari lebih lanjut pengembangan skema, kueri, dan mutasi
Pelajari cara membuat SDK klien dan memanggil kueri dan mutasi dari kode klien untuk web, Android, dan iOS, serta Flutter.