Menggunakan Flutter SDK yang dihasilkan

Dengan SDK klien Firebase Data Connect, Anda dapat memanggil kueri dan mutasi sisi server secara langsung dari aplikasi Firebase. Anda membuat SDK klien kustom secara paralel saat mendesain skema, kueri, dan mutasi yang di-deploy ke layanan Data Connect. Kemudian, Anda akan mengintegrasikan metode dari SDK ini ke dalam logika klien.

Seperti yang telah kami sebutkan di tempat lain, penting untuk diperhatikan bahwa kueri dan mutasi Data Connect tidak dikirimkan oleh kode klien dan dijalankan di server. Sebagai gantinya, saat di-deploy, operasi Data Connect disimpan di server seperti Cloud Functions. Ini berarti Anda harus men-deploy perubahan sisi klien yang sesuai agar tidak mengganggu pengguna yang sudah ada (misalnya, pada versi aplikasi lama).

Itulah sebabnya Data Connect menyediakan lingkungan developer dan alat yang memungkinkan Anda membuat prototipe skema, kueri, dan mutasi yang di-deploy server. Alat ini juga membuat SDK sisi klien secara otomatis, saat Anda membuat prototipe.

Setelah Anda melakukan iterasi update pada aplikasi layanan dan klien, update sisi server dan sisi klien siap di-deploy.

Membuat Flutter SDK

Seperti sebagian besar project Firebase, pekerjaan pada kode klien Firebase Data Connect Anda dilakukan di direktori project lokal. Ekstensi VS Code Data Connect dan CLI Firebase adalah alat lokal penting untuk membuat dan mengelola kode klien.

Opsi pembuatan SDK diberi kunci ke beberapa entri dalam file dataconnect.yaml yang dihasilkan saat Anda melakukan inisialisasi project.

Melakukan inisialisasi pembuatan SDK

connectorId: movies
generate:
  dartSdk:
    outputDir: ../../lib/generated # Feel free to change this to a different path
    package: movies

outputDir menentukan tujuan output SDK yang dihasilkan. Jalur ini relatif terhadap direktori yang berisi file connector.yaml itu sendiri. Secara opsional, Anda dapat memberikan jalur absolut ke outputDir.

package menentukan nama paket.

Memperbarui SDK saat membuat prototipe

Jika Anda membuat prototipe secara interaktif dengan ekstensi VS Code Data Connect dan emulator Data Connect-nya, file sumber SDK akan otomatis dibuat dan diperbarui saat Anda mengubah file .gql yang menentukan skema, kueri, dan mutasi. Hal ini dapat menjadi fitur yang berguna dalam alur kerja pemuatan ulang (hot reload).

Atau, Anda dapat menggunakan CLI untuk membuat ulang SDK setiap kali file .gql diubah:

firebase dataconnect:sdk:generate --watch

Membuat SDK untuk integrasi dan untuk rilis produksi

Dalam beberapa skenario, seperti menyiapkan sumber project untuk dikirimkan ke pengujian CI, Anda dapat memanggil Firebase CLI untuk update batch.

Dalam kasus ini, gunakan firebase dataconnect:sdk:generate.

Menyiapkan kode klien

Melakukan inisialisasi aplikasi Data Connect

Pertama, lakukan inisialisasi aplikasi menggunakan petunjuk penyiapan Firebase standar.

Kemudian, instal plugin Data Connect:

flutter pub add firebase_data_connect

Melakukan inisialisasi Data Connect Flutter SDK

Lakukan inisialisasi instance Data Connect menggunakan informasi yang Anda gunakan untuk menyiapkan Data Connect (semua tersedia di tab Data Connect konsol Firebase).

Mengimpor library

Ada dua kumpulan impor yang diperlukan untuk menginisialisasi kode klien Anda, impor Data Connect umum, dan impor SDK khusus yang dihasilkan.

// general imports
import 'package:firebase_data_connect/firebase_data_connect.dart';

// generated queries and mutations from SDK
import 'generated/movies.dart';

Membuat prototipe dan menguji aplikasi Flutter

Menginstrumentasikan klien untuk menggunakan emulator lokal

Anda dapat menggunakan emulator Data Connect, baik dari ekstensi Data Connect VS Code atau dari CLI.

Instrumentasi aplikasi untuk terhubung ke emulator sama untuk kedua skenario.

import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'generated/movies.dart';

MoviesConnector.instance.dataConnect
          .useDataConnectEmulator('127.0.0.1', 9399);

// Make calls from your app
QueryRef<ListMoviesData, void> ref = MoviesConnector.instance.listMovies.ref();

Untuk beralih ke resource produksi, komentari baris untuk terhubung ke emulator.

Menggunakan kueri di sisi klien

Kode yang dihasilkan akan sudah dilengkapi dengan Referensi Kueri yang telah ditentukan. Yang perlu Anda lakukan adalah mengimpor dan memanggil execute pada model tersebut.

import 'generated/movies.dart';

await MoviesConnector.instance.listMovies().execute();

Memanggil metode kueri SDK

Berikut adalah contoh penggunaan fungsi pintasan tindakan ini:

import 'generated/movies.dart';

function onBtnClick() {
  // This will call the generated Dart from the CLI and then make an HTTP request to the server.
  MoviesConnector.instance.listMovies().execute().then(data => showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

Kolom Opsional

Beberapa kueri mungkin memiliki kolom opsional. Dalam hal ini, Flutter SDK mengekspos metode builder, dan harus ditetapkan secara terpisah.

Misalnya, kolom rating bersifat opsional saat memanggil createMovie, sehingga Anda harus memberikannya dalam fungsi builder.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi"}).rating(5).execute();

Berlangganan perubahan

Anda dapat berlangganan perubahan (yang akan diperbarui setiap kali Anda mengeksekusi kueri).

QueryRef<ListMoviesData, void> listRef = MoviesConnector.instance.listMovies().ref();

// subscribe will immediately invoke the query if no execute was called on it previously.
listRef.subscribe().listen((data) {
  updateUIWithMovies(data.movies);
});

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();
await listRef.execute(); // will update the subscription above`

Menggunakan mutasi di sisi klien

Mutasi dapat diakses dengan cara yang sama seperti kueri.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();

Jenis data di Dart SDK

Server Data Connect mewakili jenis data GraphQL umum. Hal ini ditampilkan dalam SDK sebagai berikut.