開始使用 Firebase Data Connect

注意：Firebase Data Connect 為公開測試版。「Data Connect」將受到《正式發布前產品條款》的規範的 《Google Cloud Platform 服務條款》。正式發布前功能是依「原樣」提供，支援服務可能受限。詳情請參閱 推出階段說明。

本快速入門導覽課程會說明如何在Firebase Data Connect 應用程式

注意： 如要將 Data Connect 新增至 搭配 Blaze 方案使用其中一項 Firebase 專案，建立 Data Connect Service，並為 以及原型設計如果您想使用 Spark 方案，並在本機使用模擬器和本機資料庫建立原型，請嘗試本機開發入門。

• 將 Firebase Data Connect 新增至 Firebase 專案。
• 設定開發環境，包括 Visual Studio Code 擴充功能，以便與實際工作環境執行個體搭配使用。
• 接著將說明以下內容：
  • 為電影評論應用程式建立結構定義，並部署至正式環境。
  • 為您的結構定義定義查詢和異動。
  • 產生強型別 SDK，並在應用程式中使用
  • 將您的最終結構定義、查詢和資料部署至實際工作環境。

事前準備

如要在本機環境中使用本快速入門導覽課程，您需要下列項目。

• Linux、macOS 或 Windows
• Visual Studio Code

連線至 Firebase 專案

1. 如果尚未建立 Firebase 專案，請先建立。
   1. 在 Firebase 控制台中，按一下「新增專案」，然後按照畫面上的指示操作。
2. 前往 Firebase 控制台的 Data Connect 專區，然後按照產品設定工作流程操作。

3. 將您的專案升級至 Blaze 方案。建立 Cloud SQL 適用於 PostgreSQL 執行個體

   注意：雖然您在 Blaze 升級中設定了帳單設定，但在預覽期間，您不會因使用 Data Connect 或預設 PostgreSQL 適用的 Cloud SQL 設定而遭到收費。

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

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

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

   注意： Cloud SQL 最多可能需要 15 分鐘才能完成佈建 PostgreSQL 執行個體。您可以使用 Google Cloud 主控台確認 Data Connect 設定流程 (包括資料庫佈建) 是否已完成。

選擇並設定開發環境

Data Connect 支援兩種開發體驗：

• 如果您是 Kotlin Android、iOS、Flutter 或 網頁開發人員，可以使用 VS Code 開發工具，在連線至 Cloud SQL for PostgreSQL 執行個體的同時，在本機設計及測試結構定義和作業。
• 如果您是網頁開發人員，可以使用 IDX 開發來設計原型 透過 PostgreSQL 使用預先設定的 IDX 範本 具有 Data Connect 模擬器和快速入門導覽課程用戶端的 VS Code 擴充功能 由您設定程式碼想進一步瞭解 Project IDX 網站。

本快速入門導覽課程著重於 VS Code 擴充功能的開發流程，如要繼續，請按照下列步驟操作：

1. 為本機專案建立新目錄。
2. 在新目錄中開啟 VS Code。

3. 從 Visual Studio Code Marketplace 安裝 Firebase Data Connect 擴充功能。

   注意：這項擴充功能包含市集的 GraphQL 語法醒目顯示擴充功能。您安裝的其他 GraphQL 擴充功能可能會與 Firebase Data Connect 擴充功能內建的 GraphQL 支援功能發生衝突。

設定本機專案

注意：如果您不使用 IDX，請按照本節中的步驟操作。

按照一般操作說明安裝 CLI。如果您已安裝 npm，請執行下列指令：

npm install -g firebase-tools

注意： 如果您使用現有的 CLI 安裝項目，請確定 更新至最新版本。

設定專案目錄

如要設定本機專案，請初始化專案目錄。

在 VS Code 左側面板中，按一下 Firebase 圖示，開啟 Firebase VS Code 擴充功能 UI。

1. 點選「使用 Google 帳戶登入」按鈕。
2. 按一下「連結 Firebase 專案」按鈕，然後選取要連結的專案 先前建立在控制台中建立的相同
3. 按一下「Run firebase init」按鈕。
4. 如果專案使用 Blaze 方案，當系統顯示提示時 "Would you like to set yourBackend resources?", (您要現在設定後端資源？) 回答 "Yes" (是)。

5. 按一下「Start emulators」按鈕。

   注意： 在整合式終端機中，檢查設定的模擬器是否設定完成 啟動。執行後，您應該會看到擴充功能 UI 更新，並顯示模擬器詳細資料。

建立結構定義

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

電影

在 Data Connect 中，GraphQL 欄位會對應至資料欄。Movie 類型包含 id、title、imageUrl 和 genre。Data Connect 識別原始資料類型 String 和 UUID。

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

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

電影中繼資料

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

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

# 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 結構定義，請參閱說明文件

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

如果您採用 Firebase VS Code 擴充功能 ，請先部署結構定義再繼續操作。更新後 應該可以看到 設定 Deployment

注意： PostgreSQL 適用的 Cloud SQL 執行個體佈建作業最多可能需要 15 項才能完成 分鐘。在執行個體準備就緒前，您無法進行部署。使用前 部署結構定義，確認 Data Connect 設定流程，包括 資料庫佈建作業可透過 Google Cloud 控制台完成。

1. 您可以使用 Data Connect VS Code 擴充功能進行部署。
   • 在擴充功能 UI 的 Firebase Data Connect 面板下方，按一下「部署至生產環境」。
2. 您可能需要檢查結構定義變更，並核准可能會造成破壞性的修改。系統會提示你：
   • 使用 firebase dataconnect:sql:diff 查看結構定義變更
   • 如果對變更內容感到滿意，請透過 firebase dataconnect:sql:migrate。

在表格中新增資料

在 VS Code 編輯器面板中，可以看到 CodeLens 按鈕出現在 /dataconnect/schema/schema.gql 中的 GraphQL 類型。由於您已部署 將結構定義發布至實際工作環境，您可以使用「新增資料」和 「Run (Production)」按鈕可將資料新增至後端的資料庫。

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

1. 在 schema.gql 中，按一下 Movie 類型上方的「Add data」(新增資料) 按鈕 宣告。
   
2. 在產生的 Movie_insert.gql 檔案中，為四個欄位硬式編碼資料。
3. 按一下「Run (Production)」按鈕。
   

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

1. 返回 schema.gql，然後按一下「讀取資料」按鈕。
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 程式碼 儲存位置。

   注意： 如果還沒有應用程式目錄，可以建立 請暫時選取新的 SDK 程式碼目錄，稍後再連結至應用程式。

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

瞭解如何使用產生的 SDK，從用戶端呼叫查詢和異動 應用程式 (網頁、Android、 iOS、Flutter)。

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

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

如果您使用 Firebase VS Code 擴充功能部署，請按一下 「Deploy toProduction」按鈕。

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

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

後續步驟

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

• 在 Firebase 控制台中，您可以將資料新增至資料庫、檢查及修改結構定義，以及監控 Data Connect 服務。詳情請參閱說明文件。舉例來說，由於您已完成快速入門導覽課程，請按照下列步驟操作：

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

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