Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Mulai menggunakan Firebase SQL Connect

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

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

Menyiapkan direktori project lokal

Anda dapat menginstal alat developer lokal untuk SQL Connect dengan dua cara.

Di direktori project, jalankan perintah berikut.

Skrip ini menginstal Firebase CLI dan ekstensi VS Code SQL Connect, 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
```
Buka layar ekstensi VS Code SQL Connect dengan mengklik ikon Firebase di panel kiri Visual Studio Code.
Klik Start emulators untuk menjalankan emulator dengan database PGlite lokal.

Meninjau skema

Firebase SQL Connect menggunakan GraphQL untuk menentukan model data Anda. Perintah @table memetakan jenis GraphQL ke tabel PostgreSQL. Kolom dalam jenis dipetakan ke kolom PostgreSQL. Anda dapat menentukan hubungan antartabel menggunakan kolom yang mereferensikan jenis @table lainnya, termasuk hubungan many-to-many menggunakan tabel gabungan dengan kunci utama gabungan.

Dalam penyiapan default, Anda dapat menemukan file skema SQL Connect di direktori dataconnect/schema/. Berikut adalah 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 skema SQL Connect lebih lanjut

Mengembangkan kueri dan mutasi

Firebase SQL Connect menggunakan GraphQL untuk kueri dan mutasi. Anda menentukan kueri ini dalam file .gql dan memanggilnya berdasarkan nama dari aplikasi Anda. Sintaksis GraphQL menyediakan SDK dengan jenis yang kuat dan API yang fleksibel untuk mengambil data yang tepat yang dibutuhkan aplikasi Anda.

Menambahkan data ke database Anda

Saat emulator berjalan, Anda dapat menyisipkan data awal ke dalamnya. 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 SQL Connect

Meninjau kueri dan mutasi

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

Anda dapat membuat kueri data relasional secara akurat 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 }
    }
  }
}

SQL Connect membantu Anda membangun kueri dan mutasi yang aman dengan Firebase Auth.

Untuk menjaga keamanan aplikasi Anda, aplikasi web dan seluler hanya dapat mengakses kueri dan mutasi SQL Connect dengan perintah @auth. Kueri dan mutasi dapat mengakses UID Firebase Auth dengan 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 SQL Connect Pelajari lebih lanjut mutasi SQL Connect Pelajari lebih lanjut Auth SQL Connect

Membuat kueri dan mutasi

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

Di 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 Generate CodeLens untuk Firebase SQL Connect

Menggunakan SDK yang dihasilkan di aplikasi Anda

firebase init dataconnect otomatis menyiapkan SDK yang aman dari jenis untuk aplikasi di project Anda. Jika perlu, Anda dapat menambahkan SDK secara manual dengan tombol Add SDK to app di ekstensi VS Code SQL Connect atau dengan menjalankan firebase init dataconnect:sdk.

Web

Tambahkan Firebase ke aplikasi web Anda.

Di file utama aplikasi React Anda:

Impor SDK yang Anda buat:

// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@dataconnect/generated';

Lengkapi aplikasi Anda untuk terhubung ke emulator SQL Connect:

import { connectDataConnectEmulator } from 'firebase/data-connect';

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

Memanggil metode SQL 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

Tambahkan Firebase ke aplikasi iOS Anda.
Untuk menggunakan SDK yang dihasilkan, konfigurasikan SDK tersebut 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:

Impor SQL 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 SQL 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)

Memanggil metode SQL 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()
    }
}

Kotlin Android

Tambahkan Firebase ke aplikasi Android Anda.

Untuk menggunakan SDK yang dihasilkan, konfigurasikan SQL 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")
}

Dalam aktivitas utama aplikasi Anda:

Dapatkan instance konektor dari SDK yang Anda buat:

private val connector = com.myapplication.MoviesConnector.instance

Lengkapi aplikasi Anda untuk terhubung ke emulator SQL 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)
  }

Memanggil metode SQL 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

Tambahkan Firebase ke aplikasi Flutter Anda.
Instal flutterfire CLI dart pub global activate flutterfire_cli.
Jalankan flutterfire configure.

Dalam fungsi utama aplikasi Anda:

Impor SDK yang Anda buat:

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

Lengkapi aplikasi Anda untuk terhubung ke emulator SQL 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());
}

Memanggil metode SQL 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();
            }),
      )
    ])));
  }
}

Melakukan deployment ke produksi

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

Tinjau informasi harga dan uji coba tanpa biaya di halaman Harga. Project Anda mungkin memenuhi syarat untuk salah satu opsi uji coba Firebase SQL Connect.
Klik tombol Deploy to production di ekstensi VS Code SQL Connect atau jalankan di terminal:
```
firebase deploy --only dataconnect
```
Setelah men-deploy, Anda dapat melihat skema serta menjalankan kueri dan mutasi di Firebase console (buka Databases & Storage > SQL Connect).

Tips: Anda dapat mengonfigurasi region Cloud SQL, nama instance, dan nama database PostgreSQL di dataconnect.yaml sebelum men-deploy.

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

Langkah berikutnya

Setelah Anda menyelesaikan panduan memulai, berikut beberapa langkah berikutnya:

Pelajari repositori aplikasi panduan memulai dan bangun aplikasi SQL Connect berfitur lengkap dengan mengikuti codelab untuk web, codelab untuk iOS, atau codelab untuk Android.
Tambahkan data ke database, periksa skema, dan pantau layanan SQL Connect di Firebase console.
Siapkan server MCP Firebase dengan alat developer yang didukung AI seperti Antigravity, Claude Code, atau Cursor.
Pelajari lebih lanjut pengembangan skema, kueri, dan mutasi.
Pelajari lebih lanjut cara SQL Connect mengelola skema PostgreSQL.
Pelajari lebih lanjut SDK klien untuk web, Android, iOS, dan Flutter serta Admin SDK untuk Node.js.