Rowy 开源低代码后端平台实战指南：用 Airtable 式表格界面管理 Firestore 与构建云函数工作流-平芜编程栈

低代码

【免费下载链接】rowy

Low-code backend platform. Manage database on spreadsheet-like UI and build cloud functions workflows in JS/TS, all in your browser.

项目地址：https://gitcode.com/gh_mirrors/ro/rowy

点击查看免费下载

Rowy 是一个开源的低代码后端平台，让你在浏览器中直接以电子表格（Airtable-like）交互界面管理 Firebase/Firestore 数据库，并能在字段级数据变化上构建云函数工作流，无需离开浏览器即可完成从建表、增删改查、导入导出到自动化编排的全过程。本文以仓库根目录 README.md 为核心骨架，结合 src 目录下的源码实现，系统讲解 Rowy 的功能体系、字段类型、自动化能力与安装部署方式，帮助开发者快速评估并上手这一面向 Firebase 与 Google Cloud 的低代码方案。

项目定位：Low-code for Firebase and Google Cloud

Rowy 的核心定位是“面向 Firebase 与 Google Cloud 的低代码后端平台”：它连接你的数据库，并允许你用低代码方式创建 Cloud Functions，全程停留在浏览器内。项目描述强调 "Manage database on spreadsheet-like UI and build cloud functions workflows in JS/TS, all in your browser"，这与 README 开篇的标语一致——"Airtable-like UI for managing database"、"Build any automation, with or without code"。

在仓库中，这一定位体现在两个层面：

前端单页应用：package.json 显示项目是一个基于 React 18 + Vite 的 TypeScript 应用（"private": true），依赖了@tanstack/react-table（表格渲染）、firebase（Firestore/Auth/Storage/Functions 接入）、jotai（原子化状态管理）、monaco-editor（内置代码编辑器）等核心库；
数据与运行时解耦：应用只负责呈现与交互，实际数据读写由 src/sources/TableSourceFirestore/TableSourceFirestore.tsx 等“数据源”组件负责，它通过 Firestore SDK 读写集合、表结构文档（table schema）并订阅实时更新。

README 特别强调数据归属权：你的数据与云函数始终留在你自己的 Firestore/GCP 项目上，Rowy 只通过一个运行在你 GCP 项目里的 Cloud Run 实例来管理它们，"we do not access or store any of your data on Rowy"。

强大的电子表格界面：面向 Firestore 的 CMS 与 CRUD

README 将表格界面能力总结为六大项，仓库源码均能找到对应实现：

README 宣称能力	仓库实现佐证
Firestore CMS 与 CRUD 操作	行编辑、删除、批量写入等由 src/sources/TableSourceFirestore/useBulkWriteDb.ts、deleteRowAtom 等驱动；工具栏提供 AddRow 与批量删除
批量导入 / 导出数据（csv、json、tsv）	ImportCsvWizard、ImportExistingWizard、ExportModal 三个向导组件
按行值排序与过滤	Filters.tsx 与 Sort.tsx
锁定、冻结、调整宽度、隐藏与重命名列	ColumnMenu.tsx 的菜单项（Lock、Freeze、Unfreeze、Rename、Hide）
同一集合的多种视图	每个表可配置独立的 schema、过滤器与视图设置

按行值过滤与排序：支持表级与个人级双层过滤

过滤是表格界面的高频操作。Filters.tsx 实现了非常细化的过滤体系：

两级过滤器：ADMIN 可以设置“表级过滤器”（Table filter），普通用户可以维护“个人过滤器”（Your filter）；当表级过滤器被标记为filtersOverridable时，所有用户都可以覆盖它；
逻辑组合：过滤器支持 AND/OR 连接符（joinOperator），每个过滤器在应用时会通过updateTableSchema({ filters, filtersOverridable, joinOperator })写回表 schema 文档，或通过updateUserSettings({ tables: { [tableId]: { filters, joinOperator } } })写入用户设置文档；
URL 联动：应用内置 useFilterUrl.ts，当前生效的过滤器会同步到 URL 查询参数，方便分享带过滤条件的表链接。

排序则由 SortPopover.tsx 提供，支持升序（asc）/降序切换，当前排序字段与方向会显示在工具栏按钮上（Sorted: {key}），并配合 useSaveTableSorts.tsx 持久化到表 schema。

数据导入导出：CSV / JSON / TSV 与文件下载

导入导出是 README 强调的“开箱即用”能力，仓库提供了完整的向导式实现：

导入 CSV：ImportCsvWizard 分三步（Step1 列映射、Step2 新列创建、Step3 预览），其中 Step1 会把 CSV 表头与现有列一一对应，并对新列调用suggestType（见 ImportExistingWizard/utils.ts）自动推断字段类型；
导入 Airtable：ImportAirtableWizard 支持从 Airtable 导入，需要提供 Airtable API Key 与表 URL；
导出数据：ModalContentsExport.tsx 使用@json2csv/plainjs将当前查询结果（含过滤与排序）转成 CSV 并下载；ModalContentsDownload.tsx 则针对 Image/File 列把文档中的文件打包成 ZIP 下载，支持用其他列的值替换文件名（如column/field1_field2.jpeg）。

列操作：锁定、冻结、调整宽度、隐藏与重命名

列的锁/冻结/改宽/隐藏/重命名都集中在列头右键菜单 MenuContents.tsx 中，每个菜单项以column-menu-item-{key}的 DOM id 标识。列头组件 ColumnHeader.tsx 的注释列出了完整渲染结构：拖拽手柄、字段类型图标（点击可复制字段 key）、字段名、排序按钮与调宽手柄。工具栏 TableToolbar.tsx 还提供 RowHeight（行高）、HiddenFields（隐藏字段）等视图级控制，对应 README 的“为同一集合提供多种视图”能力。

丰富灵活的字段体系：30+ 内置字段类型

README 宣称支持 30+ 种字段类型，并将其划分为基础文本、自定义选择器、上传器、富编辑器四类。仓库中 src/constants/fields.ts 的FieldType枚举给出了完整的类型清单，可按 README 的分类整理如下：

分类	字段类型（枚举值）
基础文本	shortText、longText、richText、email、phone、url
选择类	singleSelect、multiSelect
数值类	checkbox、number、percentage、rating、slider、color、geoPoint
日期时间	date、dateTime、duration
文件上传	image、file
连接类	connector、subTable、arraySubTable、reference、connectTable、connectService
代码类	json、code、markdown、array
云函数类	action、derivative、aggregate、status
客户端函数	formula
审计类	createdBy、updatedBy、createdAt、updatedAt
元数据	user、id、last

每个字段类型的 UI 行为由 src/components/fields/index.tsx 中的FIELDS数组统一注册：数组内每个条目都实现 types.ts 定义的IFieldConfig接口，包含type、name、group、dataType、initialValue、TableCell（单元格渲染）、SideDrawerField（侧边抽屉表单）、settings（字段配置面板）等成员。getFieldProp、isFieldType、hasDataTypes等工具函数供全站按需检索字段能力。

字段数据校验、默认值与必填

README 提到的“数据校验（validation）、默认值（default values）、必填字段（required fields）”能力，由字段配置面板与默认值输入组件落实：新建列时可配置默认值表达式（DefaultValueInput.tsx），并通过settingsValidator钩子（例如 Derivative/index.tsx 引入的settingsValidator）在保存前校验配置合法性。

特殊字段：Action、Derivative、Connector 与 Connect Service

除基础字段外，README 单独点名了四个“高阶”字段，它们正是 Rowy 自动化与跨数据源能力的载体：

Action 字段：表格中的一个可点击按钮，触发任意 Cloud Function。Action/index.tsx 的配置标明requireCloudFunction: true、requireConfiguration: true，即必须配合 Rowy Run（后端运行时）使用，支持 Undo/Redo。其设置面板预置了 Run/Undo 两套代码模板 templates.ts，模板中的Action类型签名展示了运行时注入的上下文参数：{ row, ref, db, storage, auth, actionParams, user, logging }，并支持通过rowy.secrets.get("service")读取密钥后调用任意 HTTP API；
Derivative 字段：值由行内其余字段派生而来，并用任意其他字段类型展示。Derivative/index.tsx 描述为 "Value derived from the rest of the row's values. Displayed using any other field type"，同样需要 Rowy Run；其实际展示类型通过config.renderFieldType指定（见 src/components/fields/index.tsx 的getFieldType逻辑）；
Connector 字段：连接任意表或 API，基于文本查询或行数据拉取结果列表，requireCloudFunction: true（见 Connector/index.tsx）；
Connect Service 字段：从任意 HTTP 端点获取数据列表（当前标注为 Alpha），dataType为{ docPath: string; snapshot: Record<string, any>; }[]，即同时保留文档路径与快照（见 ConnectService/index.tsx）。

用云函数与现成扩展实现自动化

README 的自动化能力承诺分为两层：一是基于字段级数据变化构建云函数工作流（可用任意 NPM 模块或 API），二是用预置代码块连接常用工具（SendGrid、Algolia、Twilio、Bigquery 等）。

仓库虽为前端仓库，但通过多处设计佐证了这一能力链路：

字段配置中的“云函数依赖”标记：IFieldConfig接口中的requireCloudFunction、requireCollectionTable字段（见 src/components/fields/types.ts），Action、Derivative、Connector 等字段均置为true，从源码结构看，这意味着这些字段的启用会引导用户先完成 Rowy Run 后端部署；
扩展与 Webhook 管理界面：ExtensionsModal 提供扩展的创建、列表、迁移与运行时选项（RuntimeOptions），WebhooksModal 提供 Webhook 的认证（Step1Auth）、条件（Step2Conditions）、解析器（Step3Parser）配置；这些表级自动化对象随表 schema 持久化，可在表设置导入导出中迁移（见 ImportSettings.tsx 中对_schema.extensionObjects与_schema.webhooks的检测）；
云日志查看：CloudLogsModal 可查看构建日志与运行时日志，并支持按时间范围（TimeRangeSelect）与严重级别（CloudLogSeverityIcon）筛选，对应云函数调试闭环；
公式字段（客户端函数）：Formula 字段在浏览器端 worker 中计算（见 src/components/fields/Formula/worker.ts），属于"with or without code"中纯客户端的一类。

团队协作与权限控制

README 的协作能力包括：表级与字段级的细粒度权限控制（RBAC）、内置用户管理、以及面向不同角色的可定制视图。

源码证据如下：

角色体系贯穿全局：过滤逻辑中大量出现userRoles.includes("ADMIN")判断（见 Filters.tsx），只有 ADMIN 能编辑表级过滤器，非 ADMIN 在表过滤器不可覆盖时只能只读查看（disabled的 FilterInputsCollection）；
内置用户管理：仓库提供 InviteUser.tsx、UserItem.tsx、UserSkeleton.tsx 等组件，并依托 Firebase Auth 与 useAuthUser.ts 实现登录与会话管理，src/config/firebaseui.ts 配置了 Google 等第三方登录；
字段级锁定：列头中的LockOutlined图标与canEditColumns标志（见 ColumnHeader.tsx）说明字段可被锁定为只读，配合角色实现字段级权限。

安装与部署：快速引导安装与手动安装

README 给出了两条安装路径，并明确建议普通用户使用快速引导安装。

方案一：快速引导安装（推荐）

一键部署按钮会把 Rowy 部署到你的 Google Cloud Platform 项目上：你的数据与云函数保留在自己的 Firestore/GCP 中，由一个只运行于你 GCP 项目内的 Cloud Run 实例管理，Rowy 不会访问或存储你的数据。该路径面向的是将 Rowy 作为 SaaS 后端使用、无需本地开发环境的用户。

方案二：手动安装（适合开发与贡献）

README 说明手动安装仅推荐给希望开发与贡献项目的人。结合仓库配置，手动跑通前端开发环境的关键信息如下：

环境要求：package.json 声明"engines": { "node": ">=16" }，包管理器为yarn@1.22.19；
环境变量：createDotEnv.js 会生成.env，其中包含四个必填变量：

VITE_APP_FIREBASE_PROJECT_ID = <你的 Firebase 项目 ID> VITE_APP_FIREBASE_PROJECT_WEB_API_KEY = <Firebase Web API Key> VITE_APP_ALGOLIA_APP_ID = <Algolia App ID> VITE_APP_ALGOLIA_SEARCH_API_KEY = <Algolia Search API Key>

启动脚本：yarn start（Vite 开发服务器，端口 7699）、yarn build（先tsc类型检查再 Vite 构建）、yarn preview（预览构建产物）；
本地模拟器：firebase.json配置了 auth（9099）、firestore（9299）、storage（9199）三个模拟器端口；运行yarn startWithEmulators会在VITE_APP_FIREBASE_EMULATORS=true下启动前端，此时 init.ts 会自动把 Auth/Firestore/Storage 指向本地模拟器地址（connectAuthEmulator、connectFirestoreEmulator、connectStorageEmulator），仓库根目录 emulators 目录还带有可导入的初始数据（auth_export、firestore_export），可通过yarn emulators以--import ./emulators/方式恢复现场。

从源码结构看，前端初始化时通过环境变量动态构建 Firebase 配置（authDomain、databaseURL、storageBucket均由项目 ID 推导，见 init.ts），并把配置放入 jotai 原子firebaseConfigAtom以便运行时切换 Firebase 项目；Firestore 启用多标签页持久化缓存（persistentLocalCache+persistentMultipleTabManager）以提升体验（init.ts）。

数据与表结构存放约定

值得注意的实现细节：表结构（schema）并非存在 Rowy 私有服务中，而是作为 Firestore 文档存放在你的项目里。TableSourceFirestore.tsx 通过getTableSchemaPath(tableSettings)定位 schema 文档，不存在时以{ columns: {} }初始化，所有表设置（列配置、过滤器、排序、视图）都通过setDoc(tableSchemaDocRef, updateToDb, { merge: true })合并写回，嵌套列字段则用 Firestore 的deleteField()哨兵值精确删除（见 TableSourceFirestore.tsx），确保列级配置的增删改都直接落在你自有的数据库里。

总结

Rowy 用一份 README 勾勒出了完整的低代码后端愿景，而仓库源码印证了它的落地方式：一个以 Firestore 为数据中枢、以表格为交互范式、以云函数为自动化引擎的浏览器端工作台。对开发者而言，评估 Rowy 时可以抓住三条主线——电子表格界面是否满足你团队的 CMS/CRUD 诉求、30+ 字段与 Action/Derivative/Connector 等特殊字段是否覆盖你的业务建模需要、以及“数据留在自己 GCP 项目”的部署模型是否符合你的合规与运维要求。若需深度定制或贡献代码，可参考 CONTRIBUTING.md 与 firebase.json、createDotEnv.js 在本地搭建开发环境，借助 emulators 目录提供的模拟器数据快速起步。