Memulai Firebase Data Connect

Dalam panduan memulai ini, Anda akan mempelajari cara membuat Firebase Data Connect di aplikasi Anda.

  • Tambahkan Firebase Data Connect ke project Firebase Anda.
  • Menyiapkan lingkungan pengembangan yang mencakup Visual Studio Ekstensi kode agar berfungsi dengan instance produksi.
  • Kemudian, kami akan menunjukkan cara:
    • Buat skema untuk aplikasi ulasan film dan deploy ke produksi.
    • Tentukan kueri dan mutasi untuk skema Anda.
    • Membuat SDK yang diketik dengan kuat dan menggunakannya di aplikasi Anda
    • Deploy skema, kueri, dan data akhir Anda ke produksi.

Prasyarat

Untuk menggunakan panduan memulai ini di lingkungan lokal, Anda akan memerlukan hal berikut.

Hubungkan ke project Firebase Anda

  1. Jika Anda belum melakukannya, buat project Firebase.
    1. Di konsol Firebase, klik Tambahkan 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 CloudSQL 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 dan menyiapkan lingkungan pengembangan

Data Connect mendukung dua pengalaman pengembangan untuk pengembangan:

  • Jika Anda adalah developer Kotlin Android, iOS, Flutter, atau web, Anda dapat menggunakan pengembangan VS Code untuk mendesain dan menguji skema dan operasi secara lokal saat terhubung ke instance Cloud SQL untuk PostgreSQL.
  • Jika Anda developer web, Anda dapat menggunakan Pengembangan IDX untuk membuat prototipe di ruang kerja IDX menggunakan template IDX yang telah dikonfigurasi sebelumnya dengan PostgreSQL, Ekstensi VS Code dengan emulator Data Connect, dan klien panduan memulai penyiapan kode untuk Anda. Anda akan menemukan informasi selengkapnya di situs Project IDX.

Panduan memulai ini berfokus pada alur pengembangan ekstensi VS Code. Untuk melanjutkan:

  1. Buat direktori baru untuk project lokal Anda.
  2. Buka VS Code di direktori baru.
  3. Instal ekstensi Firebase Data Connect dari Visual Studio Code Marketplace.

Menyiapkan project lokal Anda

Instal CLI, dengan mengikuti petunjuk normal. Jika Anda sudah menginstal npm, jalankan perintah berikut:

npm install -g firebase-tools

Menyiapkan direktori project

Untuk menyiapkan project lokal, lakukan inisialisasi direktori project.

Di panel sebelah kiri VS Code, klik ikon Firebase untuk membuka UI ekstensi Firebase VS Code.

  1. Klik tombol Login dengan Google.
  2. Klik tombol Connect a Firebase project dan pilih project yang Anda buat sebelumnya di konsol.
  3. Klik tombol Run firebase init.
  4. Jika project Anda menggunakan paket Blaze, saat diminta "Apakah Anda ingin mengonfigurasi resource backend Anda sekarang?", jawab "Ya".
  5. Klik tombol Start emulators.

Membuat skema

Di direktori project Firebase Anda, di /dataconnect/schema/schema.gql mulai tentukan skema GraphQL yang mencakup 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 tanda 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
}

MetadataFilm

Setelah memiliki film, Anda dapat membuat model metadata film.

Salin cuplikan berikut atau hapus tanda 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, serta akan mengelola hubungan ini untuk Anda.

Pelajari skema Data Connect lebih lanjut dalam dokumentasi

Men-deploy skema ke produksi

Jika menggunakan ekstensi Firebase VS Code untuk menggunakan database produksi, Anda harus men-deploy skema sebelum melanjutkan. Sesudah men-deploy skema ke database produksi, Anda seharusnya dapat melihat skema pada konsol.

  1. Anda dapat menggunakan ekstensi VS Code Data Connect untuk men-deploy.
    • Di UI ekstensi, pada panel Firebase Data Connect, klik Deploy to production.
  2. Anda mungkin perlu meninjau perubahan skema dan menyetujui perubahan skema yang berpotensi destruktif yang telah dimodifikasi. Anda akan diminta untuk:
    • Meninjau perubahan skema menggunakan firebase dataconnect:sql:diff
    • Jika Anda sudah puas dengan perubahan tersebut, terapkan perubahan tersebut menggunakan alur yang dimulai dengan firebase dataconnect:sql:migrate.

Menambahkan data ke tabel

Di panel editor VS Code, Anda dapat melihat tombol CodeLens muncul di atas jenis GraphQL di /dataconnect/schema/schema.gql. Karena Anda telah men-deploy skema Anda ke produksi, Anda dapat menggunakan cara Tambahkan data dan Tombol Run (Production) menambahkan data ke database Anda di backend.

Untuk menambahkan kumpulan data ke tabel Movie:

  1. Di schema.gql, klik tombol Add data di atas jenis Movie pernyataan.
    Tombol Tambahkan data Lensa Kode untuk Firebase Data Connect
  2. Dalam file Movie_insert.gql yang dihasilkan, lakukan hard code data untuk empat bidang.
  3. Klik tombol Run (Production).
    Tombol Code Lens Run untuk Firebase Data Connect

Untuk dengan cepat memverifikasi bahwa data telah ditambahkan:

  1. Kembali ke schema.gql, klik tombol Baca data.
  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 singkat dan aman dari jenis SQL daripada SQL mentah. Dan VS Code kita ekstensi akan 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 dan menggunakannya di aplikasi

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

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

Pelajari cara menggunakan SDK yang dihasilkan untuk memanggil kueri dan mutasi dari klien aplikasi (web, Android, iOS, Flutter).

Men-deploy skema dan kueri ke produksi

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

Jika Anda menggunakan ekstensi Firebase VS Code untuk men-deploy, klik tombol Deploy to production.

Setelah di-deploy, buka konsol Firebase untuk memverifikasi bahwa skema, operasi, dan data telah diupload ke cloud. Anda harus 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

Langkah berikutnya

Tinjau project yang telah Anda 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.