Memulai Firebase Data Connect

Dalam panduan memulai ini, Anda akan mempelajari cara:

• 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 email dan deploy ke produksi.
  • Tentukan kueri dan mutasi untuk skema Anda.
  • Terapkan prototipe akhir Anda ke produksi.

Prasyarat

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

• Linux, macOS, atau Windows
• Kode Visual Studio

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. Upgrade project Anda ke paket Blaze. Dengan ini, Anda dapat membuat Cloud SQL untuk instance PostgreSQL.

3. Buka bagian Data Connect konsol Firebase dan ikuti alur kerja penyiapan produk.

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 selanjutnya, lalu klik Selesai.

Memilih dan menyiapkan lingkungan pengembangan

Data Connect mendukung dua pengalaman pengembangan untuk pembuatan prototipe:

• Jika Anda developer Kotlin Android, iOS, atau web, Anda dapat menggunakan Pengembangan VS Code untuk membuat prototipe skema dan operasi secara lokal sekaligus 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 kode panduan memulai disiapkan untuk Anda. Anda dapat 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. Download ekstensi yang dipaketkan sebagai paket VSIX, dari Firebase Storage.

4. Di VS Code, dari menu View, pilih Extensions.

5. Di panel judul panel Ekstensi, klik ikon menu more_horiz, lalu ikuti Instal dari VSIX....

Anda juga dapat menginstal database PostgreSQL lokal untuk pengembangan lokal dengan emulator Data Connect. Pengaturan ini dibahas di akhir panduan memulai ini.

Menyiapkan project lokal Anda

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

npm install -g firebase-tools

Menyiapkan direktori project

Untuk menyiapkan project lokal, lakukan inisialisasi direktori project Anda.

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

Di UI ekstensi Firebase:

1. Pastikan Anda sudah login.
2. Klik tombol Run firebase init.
3. Periksa tab Terminal di Panel bawah VS Code untuk mendapatkan perintah.
4. Pilih Data Connect sebagai fitur yang akan digunakan di direktori ini.
5. Saat diminta, berikan ID project, layanan, dan database dari Data Connect project yang Anda buat sebelumnya di konsol.

Membuat skema

Di direktori project Firebase Anda, dalam file /dataconnect/schema/schema.gql, mulai tentukan skema GraphQL yang menyertakan pengguna dan email.

Pengguna

Di Data Connect, kolom GraphQL dipetakan ke kolom. Pengguna memiliki uid, name, dan email address. Data Connect mengenali beberapa jenis data primitif: String dan Date.

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

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

Secara default, Firebase Data Connect akan menambahkan kunci id UUID jika tidak ada yang yang Anda berikan. Namun, dalam hal ini Anda ingin uid saya menjadi kunci utama, yang yang dapat Anda lakukan melalui perintah @table(key: "uid").

Email

Setelah memiliki pengguna, Anda dapat membuat model email. Di sini Anda dapat menambahkan untuk data email. Kali ini, kita menghilangkan penambahan kunci utama karena Anda dapat mengandalkan Data Connect untuk mengelolanya.

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   sent: Date!
   text: String!
   from: User!
}

Perhatikan bahwa kolom from dipetakan ke jenis User. Data Connect memahami bahwa ini adalah hubungan antara Email dan User, serta akan mengelola hubungan ini untuk Anda.

Men-deploy skema ke produksi

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

1. Anda dapat menggunakan ekstensi Firebase VS Code untuk melakukan deployment.
   • Di UI ekstensi, pada panel Firebase Data Connect, klik Deploy.
2. Anda mungkin perlu meninjau perubahan skema dan menyetujui perubahan skema yang berpotensi destruktif yang telah dimodifikasi. Anda akan diminta untuk:
   • Tinjau 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 Jenis GraphQL dalam /dataconnect/schema/schema.gql. Karena Anda telah men-deploy skema Anda ke produksi, Anda dapat menggunakan opsi Tambahkan data dan Jalankan (Produksi) akan menambahkan data ke database di backend.

Untuk menambahkan data ke tabel User dan Email:

1. Di schema.gql, klik tombol Add data di atas jenis User pernyataan.
   
2. Dalam file User_insert.gql yang dihasilkan, lakukan hard code data untuk tiga bidang.
3. Klik tombol Run (Production).
   
4. Ulangi langkah sebelumnya untuk menambahkan data ke tabel Email, dengan memberikan uid pengguna Anda di kolom fromUid, seperti yang diminta di kolom Mutasi Email_insert.

Menentukan kueri

Sekarang bagian yang menyenangkan, kueri. Sebagai pengembang, Anda sudah terbiasa menulis SQL daripada kueri GraphQL, jadi ini bisa 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 mengedit file /dataconnect/connector/queries.gql. Jika Anda ingin untuk mendapatkan semua email, gunakan kueri seperti ini.

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

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

Menjalankan kueri menggunakan tombol CodeLens di sekitar.

Fitur yang sangat menarik di sini adalah kemampuan untuk menangani relasional seperti grafik. Karena Email memiliki kolom from yang merujuk ke Pengguna, Anda bisa masuk ke bidang isian dan mendapatkan kembali informasi tentang pengguna.

Men-deploy skema dan kueri Anda 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 (#skema-deploy).

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

Setelah di-deploy, Anda akan dapat melihat dan menjalankan operasi di konsol juga. Layanan Data Connect Anda akan siap untuk memproses operasi dari klien. Instance Cloud SQL untuk PostgreSQL akan diperbarui dengan skema dan data akhir yang di-deploy.

(Opsional) Instal PostgreSQL secara lokal

Menginstal PostgreSQL secara lokal dan mengintegrasikannya dengan emulator memungkinkan Anda prototipe di lingkungan pengembangan yang sepenuhnya lokal.

Anda dapat menginstal instance PostgreSQL baru atau menggunakan instance yang ada.

Menginstal PostgreSQL

Instal PostgreSQL versi 15.x dengan mengikuti petunjuk untuk platform Anda.

• macOS. Download dan instal Postgres.app.
• Windows: Gunakan penginstal EDB dari halaman download PostgreSQL.
• Docker: Tarik dan jalankan Gambar pgvector/pgvector:pg15, yang dilengkapi dengan dukungan PostgreSQL 15.x dan vektor.
• Linux: Sebaiknya gunakan Docker dengan image sebelumnya, tetapi Anda juga dapat ikuti petunjuk alternatif untuk distribusi populer.

Catat nama host, porta, nama pengguna, dan sandi, serta output parameter terkait selama urutan penginstalannya.

Agar dapat terhubung ke instance PostgreSQL, emulator membutuhkan:

• Parameter konfigurasi penyiapan ini
• Nama database dari dataconnect.yaml Anda dan nama yang sesuai yang diinisialisasi dalam instance lokal Anda.

Menggunakan instance PostgreSQL lokal

Anda dapat menggunakan instance PostgreSQL lokal yang ada dengan mengupdate Setelan emulator Data Connect.

firebase setup:emulators:dataconnect

Saat diminta, masukkan string koneksi PostgreSQL dalam format ini: postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable.

Untuk informasi selengkapnya tentang string koneksi, lihat Dokumentasi PostgreSQL.

Menghubungkan ke instance PostgreSQL lokal

Setelah konfigurasi ini selesai, untuk terhubung ke database lokal Anda:

1. Di VS Code, di panel sebelah kiri, klik ikon Firebase untuk membuka UI ekstensi Firebase VS Code.
2. Klik tombol Connect to Local PostgreSQL.

Langkah berikutnya