fireboomio / fireboom Goto Github PK

一开始底层用sqlite存储，后续发现不便于做代码管理，后来全部改成了json存储。

集成API预览功能，实现API的在线测试（类似POSTMAN），保证用户在一个工具内实现完整的API开发体验。

也踩了不少坑~~~

• 完善控制台交互
• 完善控制台视觉

对于中后台场景，逐个新建API太繁琐，新增了批量新建功能。

• 仅支持数据库类型的数据源
• 根据表和字段新建增删改查接口

和 模型预览#9 一样，也是为了让开发者在Fireboom中模型设计和API开发的全生命周期。

模型设计本质上是一个简化版的navicate。

• 可视化模型设计（beta）：封装了prisma语法，方便操作（但目前还达不到生产要求）

• prisma 源码视图：直接编写prisma语法，支持语法提醒和错误高亮（用到了摩纳哥编辑器和LSP技术）

将优化后的引擎fireboomio/fireboom-engine#1 集成到Fireboom服务中。

在这个过程中逐步支持了各种数据源：

• mysql数据库
• graphql 数据源
• restapi数据源
• pgsql数据库
• sqlite数据库
• mongodb数据库

通过快捷键快速实现API的开发

v1.0版本的很多配置都是写死的，从开发环境到生产环境过渡时很不方便。

参考：环境变量优化

API预览页从 swagger2.0 #10 升级到 swagger3.0

新增了一些特性：

• 登录支持
• 更好的结构体
• ...

在实际的项目中发现需要前置全局钩子来实现全局拦截。

• 引擎中增加beforeRequest钩子调用
• golang SDK支持
• nodejs SDK待支持

很多开发者迫切想要mongodb，优先支持了一波。

为了更好地展示表之间的关系，支持ER图模式

参考：

• DBML generator for Prisma
• 数据模型（Data model）

对于引擎未编写测试用例，更换引擎后，出现了很多无法预料的bug。

为了解决这些问题，用了很长时间测试并修复。

golang钩子中支持事务操作

可能的方案：

• 推荐：基于prisma 引擎实现；
  -- Transactions and batch queries
  

• 不推荐：引入第三方orm库实现；

其它信息：

关联 fireboomio/fireboom-engine#7

当前已经实现了@transaction 指令，详情。

mutation MyQuery @transaction {
  rb_createOneT(data: { name: "22211122"}) {
    id
    name
  }
  rb_createOneRole(data: {code: "a111111", name: "1111"}) {
    code
    name
  }
} 

之前的超图面板不好用，当数据源过多时，不容易定位所需要的operation。

参考 apollo 的面板重新实现一套。

基于OIDC协议实现身份认证

• 身份认证配置
• 身份认证测试
• 身份认证钩子
• 角色管理

支持S3规范的文件存储

• S3配置
• 文件管理

当前配置文件散落各地，不便于git管理，需要将所有配置归拢到一起。

之前的文件存储 #18 必须要登录用户才能上传。

后来wg底层支持了profile配置，可以自行决定上传文件的要求，如是否登录、文件格式、大小等。

同时还支持了文件上传钩子，在文件上传到oss前和后编写代码，改变上传的行为。

为方便定位问题，增加日志和问题面板

• 日志：将控制台所有日志推送到前端
• 问题：以结构化的方式展示展示编译的错误或警告

展示API接口的时序图，以便理清楚数据源之间的调用关系。

• 并行调用
• 串行调用

后来发现太复杂了，所以暂时放弃了...

为了降低用户学习GraphQL的成本，封装了友好的GraphQL编辑界面

• 超图面板
• GrapQL编辑区
• 参数输入区

这三块，哪个拿出来都是难啃的骨头~

为了让中后台系统能批量修改fireboom的接口，提供了开放api。

来源：06-权限控制：RBAC&开放API

之前的版本#35 ，未考虑模板升级的情形。导致开发时用了旧版本，部署时会默认用最新版本。

基于模板仓库的hash值比对，来维护sdk模板。

• 模板升级提醒
• 模板差异对比
• 模板升级

体验 差异 -> 前往

详情见：SDK升级策略优化

Prisma数据源是一种特殊的数据库类型数据源，能实现所有数据库数据源拥有的功能！

其主要用途如下：

• 虚拟外键：数据库无需建立外键，只在Pirsma model中建立，支持同数据库的关联查询
• 精简数据表：简化prisma model表或字段，只声明业务需要的表或字段，缩减超图大小，提高性能

参考：Prisma 数据源

与API相关的功能

• API详情：类似postman的API文档页

• API钩子：一个在线的IDE

• API列表：一个文件树

考虑到国际化，支持英语语言

提供不同语言和场景的SDK模板，在飞布配置变化时，实时生成对应的SDK.

为了直观的看出来Fireboom API的运行流程，根据operation展示编译成功后的流程图。

期间找了很多业内大牛请教，大家一致认为Fireboom当前的设计差点意思。

所以又花时间对UX&UI进行了重构，并一直沿用至今。

这是当时画的第一个草图

这是优化后的视觉稿

• 数据源列表
• GraphQL数据源
• 数据库数据源

之前状态栏采用SSE推送，后来为了全双工通讯，改成了websocket~

• 底部状态栏
• 日志+问题面板 #23

API的开发肯定离不开数据建模，受到Prisma Studio的启发，决定基于prisma实现数据建模功能。

有两块难点：

• 前端：模仿Prisma Studio实现数据预览能力（graphql的处理依然是难点）
• 后端：开始封装prisma引擎，实现graphql端点，详情见 #prisma-client-go

在立项阶段#1 就已经确认了整体产品架构，这个阶段重点是确定各部分的技术选型。

• 前端：采用react+nextjs （后来去除了nextjs）
• 后端：采用go语言，基于wundergraph二次开发改造

ps：之前也考虑采用hasura二次封装（例如nhost就是这个路线），但最终觉得haskell语言太冷门，放弃了该思路。

原型设计（第一版原型）

1.0版本任意一次OPERATION的编辑都会触发全量的OPERATION编译，造成巨大的性能浪费。新版本将全量编译改为了增量编译，极大提升了OPERATION的编译速度！

这取决于项目OPERATION的数量，OPEARTION越多，提升效果越显著！

参考：增量编译

基于新版的视觉稿#7 ，重构了前端。

难点是前端对graphql的解析，这块做了好久好久~

此时，后端golang的代码已经很乱了，花时间重新整理了一遍。

之前的ide基于摩纳哥编辑器改造而来，随着功能越来越多，维护起来越来越复杂。

因此，计划用vscode替代它。

之前

现在

web开发需要前端可视化界面以及后端接口。

当前fb已经可以实现API接口的快速生成，并支持自定义。后端接口开发的工作基本满足。

前端可视化界面从使用场景又可分为两大类：完全定制化的前端 和中后台前端

参考：https://code.fun/

对于完全定制化的前端，由于定制化程度高，暂时不考虑解决。而中后台前端重复性高，定制化程度低，所以可以通过抽象来快速生成。

第一阶段：
经过调研发现，REFINE简直是飞布的绝佳搭配伙伴，目前它的社区中已经有众多case，其中hasura，nohost，supase都是飞布对标的竞品。

第一阶段，考虑基于它实现一套带有权限管理的CRUD后台。

功能概览：

（参考：https://snowy.xiaonuo.vip/sys/menu）

‒ 用户管理：
‒ 超级管理员：内置超级管理员，可以进入后台新建其他管理员
‒ 用户角色：可以修改其所拥有的角色
‒ 用户组：用户所属分组（需要在授权钩子中，根据用户组所属的角色，给用户新增角色）
疑问：自建数据库还是用OIDC呢？前者是否可以用gql实现登录，注册功能呢？（可能要搭配钩子）
‒ 角色管理：复用飞布的角色接口
‒ 授权资源：某角色所能访问的菜单

‒ 授权权限：角色对应的接口（同RBAC指令）-》需要修改gql（还有四种关系 ）；接口的名称作为按钮的权限粒度，控制按钮是否禁用或隐藏

‒ 菜单管理：菜单列表，菜单绑定的角色

‒ CRUD示例：提供一套CRUD示例

参考资料：

‒ REFINE文档：https://refine.dev/docs/tutorials/ant-design-tutorial/
‒ b端登录鉴权整体介绍：https://www.bilibili.com/video/BV1qK411S7JP/
‒ 权限管理怎么做？用户、角色、权限是什么？ :https://www.bilibili.com/video/BV17a4y1x7Hk/

下面是之前的思考

目前，有三大类解决方案
1，基于vue3 构建前端框架，包含RBAC以及用户管理，例如 https://www.gin-vue-admin.com/

2，基于表单定制生成可视化界面，代表产品：积木

3，基于可视化拖拽定制界面，并可视化对接接口，代表产品：https://app.appsmith.com/

https://developer.aliyun.com/article/878957
官网：https://lowcode-engine.cn/
低代码引擎技术白皮书：https://developer.aliyun.com/ebook/7507?spm=a2c6h.12873639.article-detail.119.39377dac5z4FEI

https://gitee.com/dromara/go-view

需要讨论并选定合适的技术方案，提升中后台开发效率。

第二次完整的后端代码重构，采用了很高维度的抽象~

• 后端代码的抽象
• 前端代码适配
• 引擎的抽象
• 文件目录的破坏性变更

参考：

• 第一次后端重构 #30
• 第一次前端重构 #8

rest api数据源报错：build datasource failed: pet:22: Expected Name, found BlockString

swagger-pet (1).json

Fireboom服务和钩子服务是两个独立服务。

• 钩子服务的启动依赖于Fireboom先生成代码。
• FIreboom服务又依赖钩子服务的正常启动。

因此，两个服务间经常会出现循环依赖的情况，导致开发体验极差。

本次优化，采用钩子主动上报心跳的方式来解决循环依赖，即钩子服务上线后主动通知Fireboom服务。

该机制极大的提升了Fireboom服务的稳定性！！！

为了支持NODEJS的语法提醒，优化了钩子的编辑器。

现存问题：
当前钩子仅能实现简单的编写，无法进行在线调试，对使用者造成不遍；
此外，由于钩子依赖node实现，要求开发者必须安装node环境才能使用，提升了入门难度。

解决方案：

基于stackblitz的webcontainer技术，实现浏览器端调试NODE

中间又是一通折腾，中间解决了webcontainer和本机服务的双向通讯问题，还申请了专利..

参考

• stackblitz介绍：https://mp.weixin.qq.com/s/HdpFBK-wIl5Ex-lOSFSDvw
• 视频介绍：https://www.bilibili.com/video/BV1ra411f7Lu/
• stackblitz文档：https://developer.stackblitz.com/platform/api/javascript-sdk

1，项目初始化

#根据模板初始化项目
fbcli init projectname -tpl tplname?

2，项目启动

#生产模式
fbcli start -c config.yaml

#开发模式（项目启动时，打印版本号）
fbcli dev -c config.yaml
（项目启动时，打印版本号）

3，数据库操作(暂未实现)
提供数据库迁移的命令行，参考prisma实现
https://www.prisma.io/blog/database-access-on-the-edge-8F0t1s1BqOJE

#数据库迁移？
fbcli  migrate dev name # 

#数据库设计
fbcli db push # 同界面上的push功能

#数据库内省
fbcli db pull # 内省并异步生成客户端sdk? 

#数据库种子
fbcli db seed

• 调研国内外竞品，确定功能范围

对于schema特别大的数据源，如果每次编译时都内省，会影响开发体验，因此新增数据缓存功能。

• 缓存数据源：开启后仅内省一次，后续无需内省
• 缓存刷新：可主动刷新缓存

对于graphql operation 无法实现的功能，可以用 graphql脚本实现。

但 graphql脚本 的学习有一定成本，为了简化功能，特推出“自定义函数”功能。

它包括：

• function：用于实现出入参都是JSON格式的场景
• proxy：用于实现出入参不是JSON格式的场景，如XML返回