Mulai menggunakan Firebase SQL Connect

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

  • Menyiapkan direktori project Firebase SQL Connect lokal dengan VS Code dan Firebase CLI.
  • Membuat skema, kueri, dan mutasi SQL Connect berdasarkan ide aplikasi Anda dalam bahasa alami.
  • Menggunakan SDK yang sangat berjenis di aplikasi Anda untuk menjalankan SQL Connect kueri dan mutasi.
  • Menyediakan instance Cloud SQL untuk PostgreSQL, skema SQL Connect, kueri, dan mutasi.

Menyiapkan direktori project lokal

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

  1. Di direktori project, jalankan perintah berikut.

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

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

  2. Buka layar ekstensi SQL 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 SQL Connect menggunakan GraphQL untuk menentukan model data Anda. Direktif @table memetakan jenis GraphQL ke tabel PostgreSQL. Kolom dalam jenis peta 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 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 lebih lanjut skemaSQL Connect

Mengembangkan kueri dan mutasi

Firebase SQL 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 berjenis dan API fleksibel untuk mengambil data persis yang dibutuhkan aplikasi Anda.

Menambahkan data ke database

Dengan emulator yang berjalan, Anda dapat menambahkan 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 SQL Connect

Meninjau kueri dan mutasi

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

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 membuat kueri dan mutasi yang aman dengan Firebase Auth.

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

Membuat kueri dan mutasi

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

Di file .gql mana 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 SQL Connect

Menggunakan SDK yang dibuat di aplikasi Anda

firebase init dataconnect otomatis menyiapkan SDK yang aman jenisnya untuk aplikasi di project Anda. Jika diperlukan, Anda dapat menambahkan SDK secara manual dengan tombol Add SDK to app di ekstensi SQL Connect 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 dibuat:
    // 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);
    • Panggil 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

  1. Tambahkan Firebase ke aplikasi iOS Anda.

  2. Untuk menggunakan SDK yang dibuat, 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 dibuat.

  3. Di delegasi utama aplikasi Anda:

    • Impor SQL Connect SDK dan SDK yang dibuat:

      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)

    • Panggil SQL Connect metode:

      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 dibuat, konfigurasikan SQL Connect sebagai dependensi di Gradle.

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

    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 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)
  }
    • Panggil 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

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

  4. Di fungsi utama aplikasi Anda:

    • Impor SDK yang dibuat:
    // 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());
}
    • Panggil 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();
            }),
      )
    ])));
  }
}

Men-deploy ke produksi

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

  1. 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.

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

    firebase deploy --only dataconnect

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

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

Langkah berikutnya

Setelah menyelesaikan panduan memulai, berikut beberapa langkah berikutnya yang dapat Anda lakukan: