Memulai Firebase Data Connect

Dalam panduan memulai ini, Anda akan mempelajari cara mem-build Firebase Data Connect di aplikasi dengan instance SQL produksi. Anda akan:

  • Tambahkan Firebase Data Connect ke project Firebase Anda.
  • Sediakan instance Cloud SQL untuk aplikasi Anda.
  • Siapkan lingkungan pengembangan termasuk ekstensi Visual Studio Code agar berfungsi dengan instance produksi.
  • Kemudian, kami akan menunjukkan cara:
    • Membuat skema untuk aplikasi film
    • Menentukan kueri dan mutasi yang akan digunakan di aplikasi Anda
    • Menguji kueri dan mutasi dengan data sampel
    • Membuat SDK dengan jenis yang kuat dan menggunakannya di aplikasi
    • Deploy skema, kueri, dan data akhir Anda ke cloud.

Membuat project Firebase dan database Cloud SQL

  1. Jika Anda belum melakukannya, buat project Firebase.
    1. Di Firebase console, klik Add project, lalu ikuti petunjuk di layar.
  2. Buka bagian Data Connect di konsol Firebase dan ikuti alur kerja penyiapan produk.

  3. Upgrade project Anda ke paket Blaze. Dengan demikian, Anda dapat membuat instance Cloud SQL untuk PostgreSQL.

  4. Pilih lokasi untuk database Cloud SQL untuk PostgreSQL Anda.

  5. Catat nama dan ID project, layanan, dan database untuk konfirmasi nanti.

  6. Ikuti alur penyiapan yang tersisa, lalu klik Selesai.

Memilih alur pengembangan

Data Connect menawarkan dua cara untuk menginstal alat pengembangan.

Menyiapkan lingkungan pengembangan

  1. Buat direktori baru untuk project lokal Anda.

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

alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

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 VS Code Data Connect:

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

  4. Klik tombol Start emulators.

Membuat skema

Di direktori project Firebase, dalam file /dataconnect/schema/schema.gql, mulai tentukan skema GraphQL yang menyertakan film.

Film

Di Data Connect, kolom GraphQL dipetakan ke kolom. Jenis Movie 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.

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

MovieMetadata

Setelah memiliki film, Anda dapat membuat model metadata film.

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

Men-deploy skema ke produksi

Anda harus men-deploy skema sebelum melanjutkan.

Di UI ekstensi, pada panel Firebase Data Connect, klik Deploy to production.

Setelah men-deploy skema ke database produksi, Anda akan dapat melihat skema di Firebase console.

Menambahkan data ke tabel

Di panel editor IDE, Anda dapat melihat tombol CodeLens muncul di atas jenis GraphQL di /dataconnect/schema/schema.gql. Setelah men-deploy skema ke produksi, Anda dapat menggunakan tombol Tambahkan data dan Jalankan (Produksi) untuk menambahkan data ke database di backend.

Untuk menambahkan data ke tabel Movie:

  1. Di schema.gql, klik tombol Tambahkan data di atas deklarasi jenis Movie.
    Tombol Tambahkan data Lensa Kode untuk Firebase Data Connect
  2. Dalam file Movie_insert.gql yang dihasilkan, hard code data untuk empat kolom.
  3. Klik tombol Run (Production).
    Tombol Run Lensa Kode untuk Firebase Data Connect
  4. Ulangi langkah sebelumnya untuk menambahkan data ke tabel MovieMetadata, dengan menyediakan id Film Anda di kolom movieId, seperti yang diminta dalam mutasi MovieMetadata_insert yang dihasilkan.

Untuk memverifikasi dengan cepat bahwa data telah ditambahkan:

  1. Kembali ke schema.gql, klik tombol Baca data di atas deklarasi jenis Movie.
  2. Pada file Movie_read.gql yang dihasilkan, klik tombol Run (Production) untuk menjalankan kueri.

Pelajari mutasi Data Connect lebih lanjut dalam dokumentasi

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.

Mulai edit file /dataconnect/connector/queries.gql. Jika Anda ingin mendapatkan semua film, gunakan kueri seperti ini.

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

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Jalankan kueri menggunakan tombol CodeLens di dekatnya.

Pelajari kueri Data Connect lebih lanjut dalam dokumentasi

Membuat SDK

  1. Klik tombol Tambahkan SDK ke aplikasi.

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

  3. Pilih platform aplikasi Anda, lalu perhatikan bahwa kode SDK langsung dibuat di direktori yang Anda pilih.

Men-deploy skema dan kueri ke produksi

Anda telah mengerjakan iterasi pengembangan. Sekarang Anda dapat men-deploy skema, data, 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 bahwa skema, operasi, dan data telah diupload ke cloud. Anda akan dapat melihat skema, dan menjalankan operasi di konsol juga. Instance Cloud SQL untuk PostgreSQL akan diperbarui dengan skema dan data akhir yang dihasilkan dan di-deploy.

Pelajari lebih lanjut cara menggunakan emulator Data Connect dalam dokumentasi

Menggunakan SDK untuk memanggil kueri dari aplikasi

Setelah skema 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
  1. Tambahkan Firebase ke aplikasi web Anda.

  2. Di file utama aplikasi React Anda:

    • mengimpor SDK yang dihasilkan
    • memanggil metode Data Connect.

    Anda dapat menyalin cuplikan berikut dan menjalankannya sebagai aplikasi mandiri.

    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 />);
  1. Tambahkan Firebase ke aplikasi iOS Anda.

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

  3. Di delegasi utama aplikasi Anda:

    • mengimpor SDK yang dihasilkan
    • memanggil metode Data Connect.

    Anda dapat menyalin cuplikan berikut dan menjalankannya sebagai aplikasi mandiri.

    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 ?? [], id: \.self.id) { movie in
                    Text(movie.title)
                }
            }
    }
    @MainActor
    func refresh() async throws {
        _ = try await queryRef.execute()
    }

    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListMovieView()
    }
}
  1. Tambahkan Firebase ke aplikasi Android Anda.

  2. 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 December 03, 2024.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.7.3"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.0"
  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 December 03, 2024.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta03")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.9.0")
  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.9.3")
  implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
  implementation("com.google.android.material:material:1.12.0")
}

  3. Di aktivitas utama aplikasi Anda:

    • mengimpor SDK yang dihasilkan
    • memanggil metode Data Connect.

    Anda dapat menyalin cuplikan berikut dan menjalankannya sebagai aplikasi mandiri.

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

    • mengimpor SDK yang dihasilkan
    • memanggil metode Data Connect.

    Anda dapat menyalin cuplikan berikut dan menjalankannya sebagai aplikasi mandiri.

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, setelah Anda 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.