使用產生的 Flutter SDK

Firebase Data Connect 用戶端 SDK 可讓您直接從 Firebase 應用程式呼叫伺服器端查詢和變異。您可以同時產生自訂用戶端 SDK,同時設計要部署至 Data Connect 服務的結構定義、查詢和變異。接著,您將這個 SDK 的方法整合至用戶端邏輯。

如同我們在其他地方提到的,請務必注意 Data Connect 查詢和變異不會由用戶端程式提交,而是在伺服器上執行。相反地,在部署時,Data Connect 作業會儲存在 Cloud Functions 等伺服器上。這表示您必須部署相應的用戶端端變更,以免影響現有使用者 (例如舊版應用程式)。

因此,Data Connect 提供開發人員環境和工具,讓您製作伺服器部署的結構定義、查詢和變異的模型。在您製作原型時,它也會自動產生用戶端 SDK。

服務和用戶端應用程式更新完成後,即可部署伺服器和用戶端更新。

產生 Flutter SDK

如同大多數 Firebase 專案,Firebase Data Connect 用戶端程式碼的相關工作會在本機專案目錄中進行。Data Connect VS Code 擴充功能和 Firebase CLI 都是用於產生及管理用戶端程式碼的重要本機工具。

SDK 產生選項會與您在初始化專案時產生的 dataconnect.yaml 檔案中的幾個項目相關聯。

初始化 SDK 產生作業

connector.yaml 中新增 outputDirpackage 和 (針對網路 SDK) packageJsonDir
connectorId: movies
generate:
  dartSdk:
    outputDir: ../../lib/generated # Feel free to change this to a different path
    package: movies

outputDir 會指定產生的 SDK 應輸出至何處。這個路徑相對於包含 connector.yaml 檔案本身的目錄。您也可以選擇提供 outputDir 的絕對路徑。

package 可指定套件名稱。

在原型設計期間更新 SDK

如果您使用 Data Connect VS Code 擴充功能及其 Data Connect 模擬器進行互動式原型設計,SDK 來源檔案會在您修改定義結構定義、查詢和突變的 .gql 檔案時自動產生及更新。這項功能在熱門 (重新) 載入工作流程中相當實用。

在其他情況下,如果您是透過 Firebase CLI 使用 Data Connect 模擬器,可以設定 .gql 更新的監控,並自動更新 SDK 來源。

或者,您也可以在 .gql 檔案變更時使用 CLI 重新產生 SDK:

firebase dataconnect:sdk:generate --watch

產生 SDK 以便整合及發布正式版本

在某些情況下,例如準備要提交 CI 測試的專案來源,您可以呼叫 Firebase CLI 來進行批次更新。

在這種情況下,請使用 firebase dataconnect:sdk:generate

設定用戶端程式碼

初始化 Data Connect 應用程式

首先,請按照標準 Firebase 設定操作說明初始化應用程式。

接著,安裝 Data Connect 外掛程式:

flutter pub add firebase_data_connect

初始化 Data Connect Flutter SDK

使用設定 Data Connect 時所用的資訊 (所有資訊皆可在 Firebase 控制台的「Data Connect」分頁中找到),初始化 Data Connect 執行個體。

匯入程式庫

初始化用戶端程式碼時,需要兩組匯入作業,分別是一般 Data Connect 匯入作業和特定的產生 SDK 匯入作業。

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

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

製作原型並測試 Flutter 應用程式

檢測要使用本機模擬器的用戶端

您可以使用 Data Connect 模擬器,無論是透過 Data Connect VS Code 擴充功能或 CLI 皆可。

在兩種情況下,檢測應用程式連線至模擬器的做法都相同。

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();

如要切換至正式版資源,請將用於連線至模擬器的程式碼行註解掉。

在用戶端使用查詢

產生的程式碼會隨附預先定義的查詢參照。您只需要匯入這些檔案,並呼叫 execute 即可。

import 'generated/movies.dart';

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

呼叫 SDK 查詢方法

以下是使用這些動作快捷鍵函式的範例:

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();
}

選填欄位

部分查詢可能包含選填欄位。在這些情況下,Flutter SDK 會公開建構工具方法,且必須個別設定。

舉例來說,呼叫 createMovie 時,rating 欄位為選用項目,因此您需要在建構函式中提供該欄位。

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

訂閱變更

您可以訂閱變更 (每次執行查詢時都會更新)。

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`

在用戶端使用變異

變異體的存取方式與查詢相同。

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

Dart SDK 中的資料類型

Data Connect 伺服器代表常見的 GraphQL 資料類型。這些元素在 SDK 中的表示方式如下所示。

資料連結類型 Dart
時間戳記 firebase_data_connect.Timestamp
Int (32 位元) int
日期 DateTime
UUID 字串
Int64 int
浮點值 雙精度值
布林值 bool
不限 firebase_data_connect.AnyValue