在本機開始使用 Firebase Data Connect

在本快速入門課程中,您將瞭解如何在應用程式中建構 Firebase Data Connect,而不需要設定正式版 SQL 執行個體。

  • Firebase Data Connect 新增至您的 Firebase 專案。
  • 設定包括 Visual Studio 的開發環境 用於與本機執行個體的程式碼擴充功能。
  • 接著將說明以下內容:
    • 為電影應用程式建立結構定義
    • 定義要在應用程式中使用的查詢和異動
    • 使用本機模擬器的範例資料測試查詢和異動
    • 產生高強度的 SDK 並在應用程式中使用
    • 將您的最終結構定義、查詢和資料部署至雲端 (必須選用 Blaze 方案)。

事前準備

如要使用本快速入門導覽課程,您必須符合以下條件。

設定開發環境

您需要使用 Visual Studio Code 管理結構定義,並定義應用程式中要使用的查詢,系統會自動為您產生強型別 SDK:

  1. 為本機專案建立新目錄。
  2. 在新目錄中開啟 VS Code。
  3. 前往 Visual Studio Code Marketplace 安裝 Firebase Data Connect 擴充功能。

設定專案目錄

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

  1. 按一下「Sign in with Google」按鈕,
  2. 按一下「連結 Firebase 專案」按鈕,然後選取先前在控制台中建立的專案。
  3. 按一下「Run firebase init」按鈕。
  4. 按一下「Start emulators」按鈕。

建立結構定義

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

電影

Data Connect 中,GraphQL 欄位會對應至資料欄。電影有《id》, titleimageUrlgenreData Connect 可識別原始資料類型:StringUUID

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

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

電影中繼資料

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

# 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」瞭解這是Movie之間的關係 和MovieMetadata,並會為您管理這個關係。

如要進一步瞭解 Data Connect 結構定義,請參閱說明文件

在表格中新增資料

在 VS Code 編輯器面板中,您會看到 CodeLens 按鈕出現在 /dataconnect/schema/schema.gql 中的 GraphQL 類型。您可以使用「Add data」和「Run (Local)」按鈕,將資料新增至本機資料庫。

如要新增記錄至 MovieMovieMetadata 資料表:

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

如何快速驗證是否已新增資料:

  1. 返回 schema.gql,然後按一下「讀取資料」按鈕。
  2. 在產生的 Movie_read.gql 檔案中,按一下「Run (Local)」按鈕執行查詢。

想進一步瞭解 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 按鈕執行查詢。

這裡有個非常實用的功能,就是可以將資料庫的關係視為圖表。由於 MovieMetadata 中的 movie 欄位 就可以以巢狀形式置入欄位中,取得電影相關資訊 電影資訊嘗試將產生的類型 movieMetadata_on_movie 新增至 ListMovies 查詢。

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
    movieMetadata_on_movie {
        rating
    }
  }
}

參閱說明文件,進一步瞭解 Data Connect 查詢

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

在 VS Code 左側面板中,按一下 Firebase 圖示,開啟 Data Connect VS Code 擴充功能 UI:

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

  3. 選取應用程式平台,請注意,SDK 程式碼會立即顯示 產生的內容

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

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

在應用程式上完成本機設定後,您可以將結構定義、資料和查詢部署至雲端。您需要 Blaze 方案才能設定 Cloud SQL 執行個體

  1. 前往 Firebase 控制台的「資料連線」部分,然後建立 免費試用 Cloud SQL 執行個體

  2. 在 VS Code 整合的 Terminal 中,執行 firebase init dataconnect,然後選取您剛才在控制台中建立的 Region/Service ID

  3. 當系統顯示 File dataconnect/dataconnect.yaml 提示時,請選取「Y」 是否存在,要覆寫?」

  4. 在 Data Connect VS Code 擴充功能 UI 中,按一下「Deploy to production」按鈕。

  5. 部署完成後,請前往 Firebase 控制台,確認結構定義、作業和資料已上傳至雲端。個人中心 應該能查看結構定義,並在控制台中執行作業, PostgreSQL 適用的 Cloud SQL 執行個體將更新為最終版本 並部署產生的結構定義和資料

後續步驟

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

  • Firebase 控制台中,將資料新增至資料庫、檢查及修改結構定義,並監控 Data Connect 服務。

如需更多資訊,請參閱說明文件。舉例來說,您已完成快速入門導覽課程: