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.
  • Deploy skema, kueri, dan data akhir ke produksi.

Prasyarat

Untuk menggunakan quickstart ini, Anda memerlukan hal berikut.

• Linux, macOS, atau Windows
• Kode Visual Studio

Menghubungkan 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 di 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 mendesain serta menguji skema dan operasi secara lokal sekaligus terhubung ke instance Cloud SQL untuk PostgreSQL.
• Jika Anda adalah developer web, Anda dapat menggunakan Pengembangan IDX untuk mengembangkan di ruang kerja IDX menggunakan template IDX yang telah dikonfigurasi sebelumnya dengan PostgreSQL, ekstensi VS Code dengan emulator Data Connect, dan kode memulai cepat yang 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....

Atau, Anda 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, 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. Setelah men-deploy skema ke database produksi, Anda akan dapat melihat skema di konsol.

1. Anda dapat menggunakan ekstensi Firebase VS Code untuk men-deploy.
   • Di UI ekstensi, pada panel Firebase Data Connect, klik Deploy.
2. Anda mungkin perlu meninjau perubahan skema dan menyetujui perubahan yang berpotensi merusak. 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 telah 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 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-langkah sebelumnya untuk menambahkan data ke tabel Email, dengan memasukkan uid pengguna Anda di kolom fromUid, seperti yang diminta dalam mutasi Email_insert yang dihasilkan.

Menentukan kueri

Sekarang saatnya 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. Selain itu, ekstensi VS Code kami 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
    }
  }
}

Jalankan kueri menggunakan tombol CodeLens di dekatnya.

Fitur yang sangat menarik di sini adalah kemampuan untuk memperlakukan hubungan database 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 ke produksi

Anda telah menyelesaikan 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 (#deploy-schema).

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 yang dihasilkan dan di-deploy akhir.

(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: Ambil dan jalankan image pgvector/pgvector:pg15, yang dilengkapi dengan dukungan PostgreSQL 15.x dan vektor.
• Linux: Sebaiknya gunakan Docker dengan image sebelumnya, tetapi Anda juga dapat mengikuti petunjuk alternatif untuk distribusi populer.

Perhatikan nama host, port, nama pengguna dan sandi, serta output parameter terkait selama urutan penginstalan.

Untuk terhubung ke instance PostgreSQL, emulator memerlukan:

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

Menggunakan instance PostgreSQL lokal

Anda dapat menggunakan instance PostgreSQL lokal yang ada dengan memperbarui 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 mengetahui 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