在本快速入門課程中,您將瞭解如何在應用程式中建構 Firebase Data Connect,而不需要設定正式版 SQL 執行個體。
- 將 Firebase Data Connect 新增至您的 Firebase 專案。
- 設定包括 Visual Studio 的開發環境 用於與本機執行個體的程式碼擴充功能。
- 接著將說明以下內容:
- 為電影應用程式建立結構定義
- 定義要在應用程式中使用的查詢和異動
- 使用本機模擬器的範例資料測試查詢和異動
- 產生高強度的 SDK 並在應用程式中使用
- 將您的最終結構定義、查詢和資料部署至雲端 (必須選用 Blaze 方案)。
事前準備
如要使用本快速入門導覽課程,您必須符合以下條件。
- Linux、macOS 或 Windows
- Visual Studio 程式碼
- 使用以下程式碼安裝 Node.js: 開啟 nvm-windows Windows 或 nvm macOS 或 Linux 系統
- 如果您尚未建立 Firebase 專案,請前往 Firebase 控制台建立專案。
設定開發環境
您需要使用 Visual Studio Code 管理結構定義,並定義應用程式中要使用的查詢,系統會自動為您產生強型別 SDK:
- 為本機專案建立新目錄。
- 在新目錄中開啟 VS Code。
- 前往 Visual Studio Code Marketplace 安裝 Firebase Data Connect 擴充功能。
設定專案目錄
如要設定本機專案,請初始化專案目錄。在 VS Code 左側面板中,按一下 Firebase 圖示,開啟 Data Connect VS Code 擴充功能 UI:
- 按一下「Sign in with Google」按鈕,
- 按一下「連結 Firebase 專案」按鈕,然後選取先前在控制台中建立的專案。
- 按一下「Run firebase init」按鈕。
按一下「Start emulators」按鈕。
建立結構定義
在 Firebase 專案目錄的 /dataconnect/schema/schema.gql
檔案中,開始定義關於電影的 GraphQL 結構定義。
電影
在 Data Connect 中,GraphQL 欄位會對應至資料欄。電影有《id
》,
title
、imageUrl
和genre
。Data Connect 可識別原始資料類型:String
和 UUID
。
複製下列程式碼片段,或是取消註解檔案中對應的行。
# 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)」按鈕,將資料新增至本機資料庫。
如要新增記錄至 Movie
和 MovieMetadata
資料表:
- 在
schema.gql
中,按一下Movie
類型上方的「Add data」(新增資料) 按鈕 宣告。
- 在產生的
Movie_insert.gql
檔案中,為三個欄位硬式編碼資料。 - 按一下「Run (Local)」按鈕。
- 重複上述步驟,在
MovieMetadata
資料表中新增記錄,並在movie
欄位中提供電影的uid
,如產生的MovieMetadata_insert
變異顯示。
如何快速驗證是否已新增資料:
- 返回
schema.gql
,然後按一下「讀取資料」按鈕。 - 在產生的
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:
- 按一下「Add SDK to app」按鈕。
在隨即顯示的對話方塊中,選取包含應用程式程式碼的目錄。Data Connect。系統會在該處產生並儲存 SDK 程式碼。
選取應用程式平台,請注意,SDK 程式碼會立即顯示 產生的內容
瞭解如何使用產生的 SDK,從用戶端應用程式 (網頁、Android、iOS、Flutter) 呼叫查詢和突變。
將結構定義和查詢部署至實際工作環境
在應用程式上完成本機設定後,您可以將結構定義、資料和查詢部署至雲端。您需要 Blaze 方案才能設定 Cloud SQL 執行個體
前往 Firebase 控制台的「資料連線」部分,然後建立 免費試用 Cloud SQL 執行個體
在 VS Code 整合的 Terminal 中,執行 firebase init dataconnect,然後選取您剛才在控制台中建立的 Region/Service ID。
當系統顯示 File dataconnect/dataconnect.yaml 提示時,請選取「Y」 是否存在,要覆寫?」。
在 Data Connect VS Code 擴充功能 UI 中,按一下「Deploy to production」按鈕。
部署完成後,請前往 Firebase 控制台,確認結構定義、作業和資料已上傳至雲端。個人中心 應該能查看結構定義,並在控制台中執行作業, PostgreSQL 適用的 Cloud SQL 執行個體將更新為最終版本 並部署產生的結構定義和資料
後續步驟
查看已部署的專案,並探索更多工具:
- 在 Firebase 控制台中,將資料新增至資料庫、檢查及修改結構定義,並監控 Data Connect 服務。
如需更多資訊,請參閱說明文件。舉例來說,您已完成快速入門導覽課程:
- 進一步瞭解結構定義、查詢和異動開發。
- 瞭解如何針對網頁、Android、iOS 和 Flutter 產生用戶端 SDK,以及從用戶端程式碼呼叫查詢和突變。