搭建内部系统的好帮手 - Superblocks 深度评测

简介: 码匠通过使用 Superblocks 搭建一个内部数据看板为例,带您探究 Superblocks 使用体验如何。

首发于码匠官方博客

全文 3149 字 阅读时间约 12 分钟

在内部系统(比如 CRM、ERP、数据看板等)需要定制化开发的情况下,大多数团队会使用基于 Web 框架从头开始开发,如 React、Vue,然而这些框架上手存在一定困难,打包、部署、库的选择等方面对代码新手来说也可能具有挑战性,更不用说还得从头开始设计访问控制 (RBAC) 和数据的管理。本篇文章将主要讨论 Superblocks,这是一款最新的低代码开发工具,它正在迅速改变内部系统开发的格局。
Superblocks 于 2021 年成立,是一款搭建内部应用的强大的低代码平台,其特点是低代码、易于部署、细粒度的访问控制以及提供了工作流的集成。就在上周(8月16日),低代码平台 Superblocks 宣布获得 3700 万美元A轮融资。

接下来,码匠以 Superblocks 搭建一个内部数据看板为例,带您一探究竟,看看 Superblocks 使用体验究竟如何吧~
1.png

在深入了解 Superblocks 的功能之前,可以先了解下数据看板搭建的常用的工具,例如 Tableau、Looker、Google Data Studio,其特点是:

  • 交互式:显示内容根据用户交互而变化
  • 实时:数据自动实时刷新
  • 只读访问:对数据库执行SELECT查询。
  • 与软件发布流程分离:数据看板基本不会经历软件发布流程中的严格测试和自动化质量检查,这种解耦能够更灵活地搭建和使用看板,但同时伴随着出现业务逻辑问题的风险。

这些数据看板解决方案的功能不一定面面俱到,例如 Tableau 不支持多页 excel 导出,Streamlit 中的用户密码身份验证等,这些必须由开发人员搭建。
除了这些工具以外,还有一些专为程序员设计的数据看板工具,例如 StreamlitPlotly、Bokeh,这类工具在某些场景中运行的很好,但一旦需要访问数据库、增加内网身份验证或 RBAC 权限控制,就会变得与常规 Web 开发一样具有挑战性。

Superblocks 能够解决上节中提出的所有问题。码匠将通过搭建一个数据应用程序的过程来具体展示:
2.gif

1. 应用背景

Artists Who Code (一个帮助艺术家转行到科技领域的社区)动态用户目录人们可以在其中添加他们的姓名和一些关键信息,例如他们的艺术背景和他们现在在科技领域所做的事情,同时还希望能够搜索特定用户并对所有用户进行分析。

2. 技术需求

  • 提供可以添加用户信息的表单
  • 多选下拉元素,其选项由数据库确定
  • 用户能够修改上述下拉元素中的选项
  • 搜索功能
  • 分析功能,基于可视化自定义筛选

3. 搭建步骤

Superblocks 有 18 个预构建的组件,您可以在他们的 GUI 中单击并拖动它们。此外,Superblocks 还允许您编写自己的 react 组件。

A. 新增用户的表单

  • 表格
  • 输入
  • 多选下拉菜单(从 mongoDB 集合中获取值)
  • 复选框(用于布尔值)
  • 图像地址(用于捕获图像的文本输入,以及向用户显示图像预览)
  • 按钮

B. 新增用户的查询

Superblocks 把数据源查询的逻辑编排统称为工作流 (Workflow),为了新增用户,我们需要编写以下 API 工作流:

  • 用于动态创建文档的 Python 函数
  • MongoDB 操作将insertOne记录到people集合中

3.png
4.png

C. 展示用户列表

Superblocks 提供了一个 Grid 组件,能够支持列举和展示数据库中的用户。
5.gif

该应用还创建了 Table 组件 来提供表格能力,这个组件内置了过滤、排序和表格内容搜索功能。
6.gif

D. 查看用户详情

当单击单元格时网格组件允许「API 调用」,Yaakov Bressler 根据单元格创建了一个新的 Slideout 并填充了信息。
7.gif

E. 使用图表

Superblocks 的图表组件是同类型工具中最好用的,您可以通过他们的 UI 配置数据可视化,或提供 Plotly Dash 配置 json。该应用程序使用 Multi-select Dropdowns 组件提供可视化筛选功能。
8.png

当筛选条件更改时会执行以下 API 流程:

  • 在 MongoDB 中查询任何符合筛选条件的文档
  • 将此数据转换为可以绘制图形的形式

9.png
10.png

4. 部署

这是一个轻松的步骤,具体操作如下图所示:
11.gif

5. 数据源连接与配置

这同样也是一个轻松的步骤,具体演示操作如下图所示:
12.gif

6. 应用访问控制

13.gif

Superblocks 的访问控制非常好用,这对于搭建敏感数据应用程序非常重要。上图所显示的是 RBAC 的简单实现,可以使用更高级的方法。Superblocks 支持 SSO 和用户组,这对于企业用户来说尤其重要。

7. 自动化测试

Superblocks 支持对工作流进行一些自动化测试,这些操作确保您的查询可以按照预期进行端到端的运行。

8. 版本控制

Superblocks 能够提供预览和回滚功能,允许您恢复应用程序的状态

搭建这个应用程序,我们学习如何使用组件总共花了 2 个小时,相比之下使用其它工具搭建一个类似的自定义 Web 应用程序需要 40 到 70 个小时,总的来说,Superblocks 通过「搭建程序界面」「创建工作流」「构建组件与数据的绑定」为基本框架来快速搭建应用程序,能够帮助开发人员节省大量时间。此外,Superblocks 还充分考虑到了应用搭建之外的常见问题并提供了解决方案,例如权限、版本控制等。不过,码匠在深度体验了 Superblocks 之后,也发现了一些问题:

  1. 组件较少(只有十几个),无法搭建无法应用。
  2. 工作流只适合链式调用逻辑,无法实现分支、循环逻辑。
  3. 收费:免费项目过少,付费功能性价比不高,对初创公司十分不友好。
  4. 协同工作时刷新慢:当多个开发者进行协同开发时容易出现卡顿,刷新不及时的情况。
  5. 不适应中国市场:无汉化版应用界面,且 Superblocks 不支持国内常见的云服务数据源。

码匠与 Superblocks 的比较

码匠是一款对开发者友好的低代码平台。我们主要面向国内用户,相较于国外开发的 Admin/CRM/CMS 等后台工具,我们的 UI 界面设计更加适合国内业务场景。同时我们还整合了多款国内常见数据源,包括飞书、企业微信、钉钉、阿里云 OSS 等。不仅如此,我们还一站式提供了企业内部系统常用的租户管理、细粒度的权限控制、审计日志等功能,让您快速搭建后台应用的同时,也为您的企业信息安全保驾护航。
我们的创始团队来自谷歌、快手、百度等公司,深刻理解快速迭代的软件系统对业务的重要性和当下软件开发的复杂性,我们认为在未来软件不会是从零开发的,于是我们重新思考,创造新的工具,帮助公司更好更快地开发软件。
14.png

使用码匠,快速搭建账户管理后台 https://majiang.co/templates/account-admin-panel


码匠提供了云端在线版本和私有化部署方案,欢迎您去 官网亲自体验,如果希望进一步与我们讨论码匠的方方面面,欢迎与我们联系~

相关文章
|
Kubernetes Cloud Native 开发工具
Argo与Flux在云原生GitOps实践上的能力对比与分析
随着云原生技术的普及和落地,越来越多的云原生应用被部署到生产环境中,由于云原生应用通常都是基于云的分布式部署模式,且每个应用可能是由多个功能组件互相调用来一起提供完整的服务的,每个组件都有自己独立的迭代流程和计划。在这种情况下,功能组件越多,意味着应用的发布管理越复杂,如果没有一个好的方案或者系统来管理复杂应用的发布上线的话,业务面临的风险也是非常大的。开源社区在复杂应用发布管理方面逐渐开始发力,
4992 1
Argo与Flux在云原生GitOps实践上的能力对比与分析
|
移动开发 JavaScript 小程序
uView ActionSheet 操作菜单
uView ActionSheet 操作菜单
311 1
|
C++
C++ 条件与 If 语句:掌握逻辑判断与流程控制精髓
C++ 中的条件语句用于根据布尔表达式的真假执行不同代码。`if` 用于当条件为真时执行一段代码,`else` 配合 `if` 在条件不成立时执行另一段代码。`else if` 允许测试额外的条件。`switch` 语句提供多分支选择。还有三元运算符 `(condition) ? expressionTrue : expressionFalse`,它是一种简写的 if...else 形式,常用于一行内作出决定。
247 0
|
前端开发 JavaScript 安全
【前端面试字节ts的手写题】建议收藏!!!
【前端面试字节ts的手写题】建议收藏!!!
197 0
|
Python
matplotlib 按指定的时间间隔生成坐标轴
matplotlib 提供了自定义生成时间轴的库,而当我们需要按照自己定义的时间间隔去生成时间轴时,时间轴并没有正常显示,只是按照一个时间跨度更大的方式显示,本文强制 matplotlib 严格按照要求自定义的时间间隔来坐标轴,并对每一行代码做了详细的说明。
7280 0
matplotlib 按指定的时间间隔生成坐标轴
|
8月前
|
人工智能 JavaScript 前端开发
白嫖 DeepSeek ,低代码竟然会一键作诗?
宜搭低代码平台接入 DeepSeek AI 大模型能力竟然这么方便!本教程将揭秘宜搭如何快速接入 DeepSeek API,3 步打造专属作诗机器人,也许你还能开发出更多有意思的智能玩法,让创意在代码间自由生长。
2427 14
|
7月前
|
人工智能 自然语言处理 数据可视化
Cursor 为低代码加速,AI 生成应用新体验!
通过连接 Cursor,打破了传统低代码开发的局限,我们无需编写一行代码,甚至连拖拉拽这种操作都可以抛诸脑后。只需通过与 Cursor 进行自然语言对话,用清晰的文字描述自己的应用需求,就能轻松创建出一个完整的低代码应用。
1368 8
|
9月前
|
SQL 关系型数据库 分布式数据库
基于PolarDB的图分析:银行金融领域图分析实践
本文介绍了如何使用阿里云PolarDB PostgreSQL版及其图数据库引擎(兼容Apache AGE,A Graph Extension)进行图数据分析,特别针对金融交易欺诈检测场景。PolarDB PostgreSQL版支持图数据的高效处理和查询,包括Cypher查询语言的使用。文章详细描述了从数据准备、图结构创建到具体查询示例的过程,展示了如何通过图查询发现欺诈交易的关联关系,计算交易间的Jaccard相似度,从而进行欺诈预警。
基于PolarDB的图分析:银行金融领域图分析实践
|
编解码 计算机视觉
如何用ffmpeg截取视频片段&截取时间不准确的坑
之前在工作中,有遇到需要程序化截取视频片段的场景,这里使用ffmpeg命令行就可以很容易实现,这里也记录下我们使用过程中遇到的坑,希望对大家也有所帮助。 举个例子,当我们要截取视频文件中input.mp4的第15秒到第98秒时,ffmpeg命令行可以这么写:
956 0
|
前端开发 JavaScript 测试技术
React 与前端自动化测试也太重要啦!各种测试框架助力确保应用质量,快来开启优质开发之旅!
【8月更文挑战第31天】随着前端技术的发展,React 成为了构建用户界面的热门选择。然而,随着应用复杂性的增加,确保应用质量变得至关重要。本文介绍了前端自动化测试的重要性,并详细综述了常用的测试框架如 Jest、Enzyme 和 Cypress,以及如何通过它们进行高效的 React 组件测试。通过遵循最佳实践,如编写可维护的测试用例、覆盖关键场景、集成 CI/CD 流程和进行性能测试,可以显著提高应用的稳定性和可靠性。
235 0

热门文章

最新文章