在本快速入门中,您将学习如何完成以下操作:
- 将 Firebase Data Connect 添加到您的 Firebase 项目中。
- 设置包括 Visual Studio 的开发环境 用于生产实例的代码扩展程序。
- 然后,我们会介绍如何执行以下操作:
<ph type="x-smartling-placeholder">
- </ph>
- 为电子邮件应用创建架构并部署到生产环境。
- 为架构定义查询和变更。
- 将最终原型部署到生产环境中。
前提条件
如需使用本快速入门,您需要做好以下准备。
- Linux、macOS 或 Windows
- Visual Studio Code
关联到您的 Firebase 项目
- 如果您还没有 Firebase 项目,请先创建一个。
- 在 Firebase 控制台中,点击 添加项目,然后按照屏幕上的说明操作。
将您的项目升级为 Blaze 方案。这样你就可以创建一个 Cloud SQL PostgreSQL 实例。
前往 Firebase 控制台的 Data Connect 部分 然后按照产品设置工作流程操作
请为您的 CloudSQL for PostgreSQL 数据库选择一个位置。
请记下项目、服务和数据库的名称及 ID,以便稍后确认。
按照剩下的设置流程操作,然后点击完成。
选择并设置开发环境
Data Connect 支持两种原型设计开发体验:
- 如果您是 Kotlin Android、iOS 或网页开发者,则可以使用 VS Code 开发,在本地对架构和操作进行原型设计,同时 连接到 Cloud SQL for PostgreSQL 实例。
- 如果您是 Web 开发者,可以使用 IDX Development 进行原型设计 在 IDX 工作区中使用 PostgreSQL 预配置的 IDX 模板, 包含 Data Connect 模拟器和快速入门代码的 VS Code 扩展程序 进行了设置如需更多信息,请访问 Project IDX 网站。
本快速入门重点介绍 VS Code 扩展程序开发流程。请按以下步骤继续操作:
- 为本地项目创建一个新目录。
- 在新目录中打开 VS Code。
从 Firebase 存储下载以 VSIX 软件包形式捆绑的扩展程序。
在 VS Code 中,从 View 菜单中选择 Extensions。
在附加信息面板标题栏中,点击菜单图标 more_horiz, Install from VSIX...(从 VSIX 安装)。
(可选)您可以安装本地 PostgreSQL 数据库以进行本地开发 使用 Data Connect 模拟器。我们将在本课程的最后 本快速入门指南。
设置本地项目
按照常规说明安装 CLI。如果您使用 npm 请运行以下命令:
npm install -g firebase-tools
设置项目目录
如需设置本地项目,请初始化您的项目目录。
在 VS Code 左侧面板中,点击 Firebase 图标以打开 Firebase VS 代码扩展程序界面。
在 Firebase 扩展程序界面中:
- 确保您已登录。
- 点击 Run firebase init 按钮。
- 在 VS Code 下面板中查看 Terminal(终端)标签页以获取提示。
- 选择 Data Connect 作为在此目录中使用的功能。
- 出现提示时,请提供 您之前在控制台中创建的 Data Connect 项目。
创建架构
在 Firebase 项目目录的 /dataconnect/schema/schema.gql
文件中,开始定义一个包含用户和电子邮件地址的 GraphQL 架构。
用户
在 Data Connect 中,GraphQL 字段映射到列。用户拥有
uid
、name
和电子邮件地址:address
。Data Connect可识别多个
原始数据类型:String
和 Date
。
复制以下代码段或取消对文件中的相应行的注释。
# File `/dataconnect/schema/schema.gql`
type User @table(key: "uid") {
uid: String!
name: String!
address: String!
}
默认情况下,如果没有 UUID id
键,Firebase Data Connect 会添加一个
。不过,在本例中,您希望将 uid
作为主键,
也可以通过 @table(key: "uid")
指令完成。
电子邮件
现在您拥有了用户,可以对电子邮件进行建模了。在这里,您可以添加 电子邮件地址数据的字段(或列)。这一次,我们省略了添加主键的步骤 因为您可以依靠Data Connect来管理
# File `/dataconnect/schema/schema.gql`
type Email @table {
subject: String!
sent: Date!
text: String!
from: User!
}
请注意,from
字段会映射到 User
类型。
Data Connect了解这是Email
之间的关系
和User
,并将为您管理此关系。
将架构部署到生产环境
如果您使用 Firebase VS Code 扩展程序来处理 生产数据库,您需要先部署架构,然后才能继续操作。更新后 将架构部署到生产数据库后,应该能够查看 控制台上的架构
- 您可以使用 Firebase VS Code 扩展程序进行部署。
- 在扩展程序界面中的 Firebase Data Connect 面板下,点击 部署。
- 您可能需要审核架构更改并批准可能具有破坏性的架构
修改。系统会提示您执行以下操作:
<ph type="x-smartling-placeholder">
- </ph>
- 使用
firebase dataconnect:sql:diff
查看架构更改 - 如果您对更改感到满意,请按照
firebase dataconnect:sql:migrate
。
- 使用
将数据添加到表中
在 VS Code 编辑器面板中,您可以看到 CodeLens 按钮显示在
/dataconnect/schema/schema.gql
中的 GraphQL 类型。由于您已经部署了
您可以使用添加数据和运行(生产环境)选项,
按钮可将数据添加到后端的数据库。
如需将记录添加到 User
和 Email
表中,请执行以下操作:
- 在
schema.gql
中,点击User
类型上方的添加数据按钮 。
- 在生成的
User_insert.gql
文件中,为 三个字段。 - 点击 Run (Production) 按钮。
- 重复前面的步骤,向
Email
表添加一条记录, 用户的uid
,如生成的fromUid
Email_insert
变更。
定义查询
而最有趣的部分是查询。作为开发者,您习惯于编写 查询,而不是 GraphQL 查询,所以乍看起来可能有点不同。 然而,GraphQL 比原始 SQL 更为简洁和类型安全。还有我们的 VS Code 扩展程序可简化开发体验。
开始修改 /dataconnect/connector/queries.gql
文件。如果您想
要获取所有电子邮件,请使用这样的查询。
# File `/dataconnect/connector/queries.gql`
query ListEmails @auth(level: NO_ACCESS) {
emails {
id, subject, text, sent
from {
name
}
}
}
使用附近的 CodeLens 按钮执行查询。
这里有一个非常令人兴奋的功能,就是能够处理数据库的
就像图表一样。由于电子邮件的 from
字段引用
User,您可以嵌套该字段并获取用户的相关信息。
将架构和查询部署到生产环境
您已完成开发迭代。现在,您可以 通过 Firebase 向服务器架构、数据和查询 扩展程序界面或 Firebase CLI,就像您对架构所做的那样 (#deploy-schema)。
如果您使用 Firebase VS Code 扩展程序进行部署,请点击部署 按钮。
部署后,您应该能够在控制台上查看和运行您的操作 。您的“Data Connect”服务即可处理操作了 。Cloud SQL for PostgreSQL 实例将更新为 最终部署生成的架构和数据。
(可选)在本地安装 PostgreSQL
在本地安装 PostgreSQL 并将其与模拟器集成后, 进行原型设计。
您可以安装 PostgreSQL 的新实例,也可以使用现有实例。
安装 PostgreSQL
按照适用于您的平台的说明安装 PostgreSQL 15.x 版。
- macOS。下载并安装 Postgres.app。
- Windows:使用 PostgreSQL 下载页面中的 EDB 安装程序。
- Docker:拉取并运行
pgvector/pgvector:pg15
张图片, 它同时支持 PostgreSQL 15.x 和矢量。 - Linux:我们建议将 Docker 与上述映像搭配使用,但您也可以 按照常见发行版的备选说明进行操作。
记录主机名、端口、用户名、密码以及相关参数, 安装顺序。
如需连接到 PostgreSQL 实例,模拟器需要:
- 这些设置配置参数
dataconnect.yaml
中的数据库名称和相应名称 数据库实例。
使用本地 PostgreSQL 实例
您可以使用现有的本地 PostgreSQL 实例,只需更新 Data Connect 模拟器设置。
firebase setup:emulators:dataconnect
出现提示时,按以下格式输入 PostgreSQL 连接字符串:
postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable
。
有关连接字符串的详细信息,请参阅 PostgreSQL 文档。
连接到您的本地 PostgreSQL 实例
完成此配置后,如需连接到您的本地数据库,请执行以下操作:
- 在 VS Code 的左侧面板中,点击 Firebase 图标以打开 Firebase VS Code 扩展程序界面。
- 点击 Connect to Local PostgreSQL 按钮。