開始使用 Firebase Data Connect

在本快速入門課程中,您將瞭解如何使用正式版 SQL 執行個體,在應用程式中建構 Firebase Data Connect。您將學會以下內容:

  • Firebase Data Connect 新增至 Firebase 專案。
  • 為應用程式配置 Cloud SQL 執行個體。
  • 設定開發環境,包括 Visual Studio Code 擴充功能,以便與實際工作環境執行個體搭配使用。
  • 接著,我們會說明如何:
    • 為電影應用程式建立結構定義
    • 定義應用程式中要使用的查詢和變異
    • 使用範例資料測試查詢和 mutation
    • 產生強型別 SDK,並在應用程式中使用
    • 將最終結構定義、查詢和資料部署至雲端。

建立 Firebase 專案和 Cloud SQL 資料庫

  1. 如果您尚未建立 Firebase 專案,請先建立。
    1. Firebase 控制台中,按一下「新增專案」,然後按照畫面上的指示操作。
  2. 前往 Firebase 控制台的 Data Connect 專區,然後按照產品設定工作流程操作。
  3. 將專案升級至 Blaze 方案。這樣一來,您就能建立 PostgreSQL 適用的 Cloud SQL 執行個體。

  4. 選取 PostgreSQL 適用的 CloudSQL 資料庫位置。

  5. 請記下專案、服務和資料庫的名稱和 ID,以便稍後確認。

  6. 按照剩餘的設定流程操作,然後按一下「完成」

選擇開發流程

Data Connect 提供兩種安裝開發工具的方式。

設定開發環境

  1. 為本機專案建立新目錄。
  2. 在您建立的新目錄中執行下列指令。

      curl -sL https://firebase.tools/dataconnect | bash

    這個指令碼會嘗試為您設定開發環境,並啟動瀏覽器式 IDE。這個 IDE 提供工具,包括預先內含的 VS Code 擴充功能,可協助您管理結構定義,並定義應用程式要使用的查詢和變異,以及產生強型類型的 SDK。

alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

設定專案目錄

如要設定本機專案,請初始化專案目錄。在 IDE 視窗的左側面板中,按一下 Firebase 圖示,開啟 Data Connect VS Code 擴充功能 UI:

  1. 點選「使用 Google 帳戶登入」按鈕。
  2. 按一下「連結 Firebase 專案」按鈕,然後選取您先前在控制台中建立的專案。
  3. 按一下「Run firebase init」按鈕,完成流程。
  4. 按一下「Start emulators」按鈕。

建立結構定義

在 Firebase 專案目錄的 /dataconnect/schema/schema.gql 檔案中,開始定義包含電影的 GraphQL 結構定義。

電影

Data Connect 中,GraphQL 欄位會對應至資料欄。Movie 類型包含 idtitleimageUrlgenreData Connect 可辨識原始資料類型 StringUUID

複製下列程式碼片段,或取消註解檔案中的對應行。

# 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
}

MovieMetadata

有了電影後,您就可以模擬電影中繼資料。

複製下列程式碼片段,或取消註解檔案中的對應行。

# 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
}

請注意,movie 欄位會對應至 Movie 類型。Data Connect 瞭解這是 MovieMovieMetadata 之間的關係,並會為您管理這項關係。

進一步瞭解說明文件中的 Data Connect 結構定義

將結構定義部署至實際工作環境

您必須先部署結構定義,才能繼續操作。

在擴充功能 UI 的 Firebase Data Connect 面板下方,按一下「部署至生產環境」

將結構定義部署至實際資料庫後,您應該可以在 Firebase 主控台中查看結構定義。

在表格中新增資料

在 IDE 編輯器面板中,您會看到 CodeLens 按鈕會顯示在 /dataconnect/schema/schema.gql 中的 GraphQL 類型上。由於您已將結構定義部署至實際執行環境,因此可以使用「Add data」和「Run (Production)」按鈕,將資料新增至後端資料庫。

如要在 Movie 表格中新增記錄,請按照下列步驟操作:

  1. schema.gql 中,按一下 Movie 類型宣告上方的「Add data」按鈕。
    Firebase Data Connect 的 Code Lens「Add data」按鈕
  2. 在產生的 Movie_insert.gql 檔案中,為四個欄位硬式編碼資料。
  3. 按一下「Run (Production)」按鈕。
    Firebase Data Connect 的 Code Lens 執行按鈕
  4. 重複上述步驟,在 MovieMetadata 資料表中新增記錄,並在 movieId 欄位中提供電影的 id,如產生的 MovieMetadata_insert 變異顯示。

如要快速驗證資料是否已新增,請按照下列步驟操作:

  1. 回到 schema.gql,按一下 Movie 型別宣告上方的「Read data」按鈕。
  2. 在產生的 Movie_read.gql 檔案中,按一下「Run (Production)」按鈕執行查詢。

進一步瞭解說明文件中的 Data Connect 變異體

定義查詢

接下來是查詢的部分。開發人員通常會編寫 SQL 查詢,而非 GraphQL 查詢,因此一開始可能會覺得有點不同。不過,GraphQL 比原始 SQL 更精簡,且具有類型安全性。我們的 VS Code 擴充功能可讓開發體驗更輕鬆。

開始編輯 /dataconnect/connector/queries.gql 檔案。如要取得所有電影,請使用類似以下的查詢。

# 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
  }
}

使用附近的 CodeLens 按鈕執行查詢。

進一步瞭解說明文件中的 Data Connect 查詢

產生 SDK 並在應用程式中使用

  1. 按一下「Add SDK to app」按鈕。
  2. 在隨即顯示的對話方塊中,選取包含應用程式程式碼的目錄。系統會產生 Data Connect SDK 程式碼並儲存在該目錄中。

  3. 選取應用程式平台後,SDK 程式碼會立即在所選目錄中產生。

瞭解如何使用產生的 SDK,從用戶端應用程式 (網頁AndroidiOSFlutter) 呼叫查詢和突變。

將結構定義和查詢部署至實際工作環境

您已完成一個開發迭代。您現在可以使用 Firebase 擴充功能 UI 或 Firebase CLI,將結構定義、資料和查詢部署至伺服器,就像為結構定義執行這項操作一樣。

在 IDE 視窗的 VS Code 擴充功能 UI 中,按一下「Deploy to production」按鈕。

部署完成後,請前往 Firebase 控制台,確認結構定義、作業和資料已上傳至雲端。您應該可以查看結構定義,並在控制台中執行作業。Cloud SQL for PostgreSQL 執行個體會更新為最終部署產生的結構定義和資料。

進一步瞭解如何在說明文件中使用 Data Connect Emulator

後續步驟

查看已部署的專案,並探索更多工具:

  • Firebase 控制台中,您可以將資料新增至資料庫、檢查及修改結構定義,以及監控 Data Connect 服務。如需更多資訊,請參閱說明文件。舉例來說,您已完成快速入門導覽課程:

  • 進一步瞭解結構定義、查詢和變異式開發

  • 瞭解如何為 網頁AndroidiOSFlutter 產生用戶端 SDK,以及從用戶端程式碼呼叫查詢和變異。