"泡泡"—一个用于构建严肃的应用程序的无代码工具

2,011 阅读12分钟

你有没有想过,在不需要写一行代码的情况下建立网络应用是什么样子的?进入Bubble,一种可视化的编程语言,让你用拖放编辑器来构建网络应用。

在这篇文章中,我将向你介绍Bubble。你将了解它是什么,它提供了哪些功能,以及你可以用它来构建什么样的网络应用。然后,我们将把它与传统的网络应用程序开发进行比较,研究使用Bubble的利弊。最后,我们将使用Bubble构建一个应用程序,这样你就能感受到如何用它来构建东西。

什么是Bubble?

Bubble既是一个可视化编程工具,也是一个平台。你在浏览器中使用拖放界面来构建应用程序,然后Bubble作为平台为你的应用程序提供服务。这意味着,你构建一个网络应用程序所需要的一切都在你的网络浏览器中。Bubble负责运行一个网络应用程序所需的所有设置和配置工作。

Bubble既面向编码人员,也面向非编码人员。但它最吸引人的是那些想在不了解传统贸易工具的情况下建立网络应用的非编码者。

特点

Bubble有很多的功能。我们不可能在这里介绍所有的功能,但我们会尝试介绍最重要的功能:

  • UI生成器:通过Bubble的UI生成器,你可以将文字、图片、图标、地图、视频和其他常见的UI元素等视觉元素拖入其画布。用Bubble创建的Web应用包含了响应式设计,并且可以很容易地被本地化为任何语言。

  • 托管平台:在你使用拖放式UI构建器构建应用程序后,Bubble会负责为你部署和托管应用程序。它还有一个版本控制系统,允许你将你的应用程序恢复到任何时间点。Bubble还允许你在需要时轻松扩展应用程序。你会知道什么时候该升级了,因为Bubble有关于服务器指标的图表,比如页面浏览量和服务器容量使用情况。Bubble作为一个平台,唯一的缺点是,你不能在自己的服务器上托管你用Bubble构建的应用程序。

  • 插件:通过插件,你可以将网络上各种工具的功能整合到你的网络应用中。例如,如果你想让你的用户用他们的Facebook账户登录,你可以用Facebook插件来实现。

  • 实时协作:Bubble是团队友好型的。它最多允许40个合作者。

在这篇文章中,我们将只介绍UI构建器。

你可以用Bubble构建什么

由于它的灵活性,你可以用Bubble构建任何类型的网络应用:

  • CRUD应用:这些应用可以让用户创建、读取、更新和删除数据。今天的大多数应用程序实际上只是添加了不同功能的CRUD应用程序。因此,有了构建CRUD应用的能力,你已经可以构建各种功能。想想亚马逊或YouTube。在他们的核心,他们实际上只是CRUD应用程序。

  • 实时应用程序:这些应用程序让用户通过聊天、音频、视频通话或共享界面进行实时交流或合作。这些应用的例子包括Messenger、Discord和Slack。

  • 与API连接的应用程序:没有人是一座孤岛 "的想法也适用于应用程序。有了Bubble,你可以建立利用互联网上的第三方API的应用程序。想想处理付款的Stripe,或处理搜索的Algolia。使用API的可能性是无穷的。通过API,你可以提供Bubble尚未提供的任何类型的功能。这也可以反过来说:你用Bubble创建的应用程序也可以暴露出一个API,供其他人使用。

  • 响应式应用:无论你在什么设备上观看,这些应用都会看起来很好。有了Bubble,你就可以免费获得这些,因为你用它创建的应用已经是响应式的了。

  • 渐进式网络应用程序:这些是网络应用,可以添加到你的主屏幕上,以便于访问。它们无法使用原生安卓或iOS应用所具有的原生功能,但它们可以从主屏幕上访问,而且可以离线工作。因此,这是你能得到的最接近原生应用程序的东西。

如果你想看看你可以用Bubble构建的应用程序的实时例子,请查看他们的展示页面。你也可以查看他们的构建页面,看看如何构建Instagram、Dropbox或TripAdvisor等应用的教程。请注意,这些并不是超级详细的教程;它们只是一般的教程,让你了解建立这些类型的应用程序的一般步骤。你仍然需要对Bubble的使用有一定程度的熟练度,才能构建这些应用。

什么不能用Bubble构建

  • 本地应用程序:在写这篇文章的时候,Bubble并不支持构建在Android或iOS上运行的本地应用。Bubble在其文档中说,有计划将这一功能添加到核心功能中,但这还不在Bubble的时间表内。因此,我们并不清楚它什么时候会成为可用功能。目前,唯一可行的选择是创建一个渐进式网络应用程序,或者使用React Native、Flutter或Cordova等工具将网络应用程序包裹在一个网络视图中。

  • 游戏:如果你打算用Bubble构建游戏和其他有复杂图形要求的应用,那你就没戏了。Bubble是专门为创建网络应用而设的。你也许可以创建简单的益智游戏,但仅此而已。

泡泡与传统的网络应用程序开发

在这一节中,我们将根据这些指标来看看Bubble与传统的Web应用开发方式的比较:

  • 对代码和数据的控制
  • 开发速度
  • 开发成本
  • 运行成本

对代码和数据的控制

Bubble有一个数据导出功能,允许你通过CSV文件导出用户创建的数据。唯一的缺点是,一切都在Bubble的平台上运行,所以你无法真正导出你的应用并在其他地方运行。Bubble保证在开源许可下发布你的应用程序的源代码,以防它倒闭。

在传统的网络开发中,你可以控制一切,因为源代码是从头开始写的,而且是托管在你选择的服务器上。

开发速度

Bubble自带了所有你需要的工具,通过拖放界面来构建一个网络应用。这使得开发过程比传统的网络开发更快。也就是说,它也有一个学习曲线,这取决于你想建立的东西。如果它是一个简单的单页应用程序,只做一两件事,它可能需要几个小时来学习。但如果是一个相当复杂的应用程序,预计要投入一到三个月的时间,才能有足够的生产力来快速构建应用程序。

对于传统的网络开发,至少需要三个月的时间来学习技术和工具。但根据各种因素,很容易需要六个月到一年的时间。然而,一旦完成了这些,你就可以期望在构建大多数应用程序方面取得成效。

总的来说,开发速度将主要取决于你的经验水平。如果你是一个完全的新手,Bubble会更快。如果你已经有一些开发经验,通常通过传统途径建立你的应用程序会更快。是的,你的开发经验可能会对使用Bubble构建应用程序的很多概念有所帮助。但对于构建相当复杂的应用程序来说,学习曲线仍将是巨大的。

开发成本

有了Bubble,即使你没有任何经验,你也几乎可以自己构建应用程序。Bubble提供了很多免费资源,供你学习如何构建不同种类的应用程序。当然,你也可以雇佣其他人来为你做。但Bubble(以及其他一般的无代码平台)的主要前提是通过自己动手开发来降低开发成本。

在传统的网络开发中,由于涉及到陡峭的学习曲线,你很可能不得不雇用一个网络开发人员来为你建立应用程序。

总的来说,与传统的开发方式相比,使用Bubble开发应用程序的相关开发成本会大大降低。

运行成本

Bubble从一个免费计划开始。这可以让你学习这个平台,并利用它建立一个应用程序。Bubble的个人计划将主要用于暂存和测试目的。一旦你准备好推出你的应用程序,你就必须切换到专业或生产计划。你可以查看Bubble的定价页面,了解每个计划的更多信息。

Bubble有一个概念,叫做 "单位",基本上是为扩大规模而保留的服务器容量。一旦你的应用程序获得了一定数量的活跃用户,就需要额外的单元。除此以外,另一个限制因素是文件存储。每个计划都有一个分配给它的总文件存储量。因此,如果你的应用程序存储了大量的用户上传的媒体,你很可能会更快地达到上限。有一些插件可用于处理文件存储,但这些插件每月都会有额外的费用。

另一方面,通过传统方式运行你的应用程序,每月只需花费5美元的服务器费用。唯一的缺点是,你必须从头开始设置一切--如网络服务器、数据库和队列服务器。现实地说,你将不仅仅是每月支付5美元,因为你还必须引入文件存储、错误报告和部署服务。这些可以很容易地增加你的总运行成本。

总的来说,与运行你的应用程序有关的成本将高度依赖于你需要引入的服务和你需要的服务器容量。

使用Bubble构建一个应用程序

为了让你感受到用Bubble构建应用程序的感觉,我们将用它来创建一个简单的CRUD应用程序。在继续进行之前,你首先需要创建一个Bubble账户

一旦你有了账户,就创建一个新的应用:

Create a new app

一旦应用程序被创建,新的应用程序助手会提示你开始使用。点击 "从空白页开始"按钮,关闭助手。我不知道你怎么样,但我总是喜欢从头开始:

New application assistant

现在我们有了一个应用程序,让我们快速浏览一下我们要建立的内容:

  • 认证功能:这将允许用户登录到系统中。
  • 产品CRUD:CRUD是一个缩写,描述了一个能够处理最重要的数据库功能的互动性的应用程序,代表 "创建、读取、更新和删除" - 基本上允许用户在数据库中维护产品数据。

我们选择这两个功能是为了展示Bubble能够多么有效地处理应用程序的逻辑,并确保本指南教给你所有可能需要的概念,让你在Bubble中把自己的想法变成现实。

UI基础知识

在我们开始实际构建应用程序之前,首先要熟悉一下用户界面。
Blank app screen

设计"选项卡通常是你开始的地方。由于Bubble是一种可视化编程语言,它总是从用户界面开始。设计"选项卡包含一个视觉元素列表,你可以把这些元素拖到画布上,或者点击并绘制(点击元素选择它,释放,然后绘制元素)。

Design tab

接下来是工作流标签。在这里你可以找到一个特定页面的所有工作流程。在Bubble中,你使用工作流程来指定当某个事件发生时应用程序会做什么。例如,当点击 "登录"按钮时,我们想让用户登录到应用程序,清空表格,然后如果证书正确的话,把用户重定向到管理页面。

Workflow tab

工作流只在每个页面显示,而不是整个应用程序,所以你必须点击左上方的下拉菜单,选择你想添加工作流的页面。

Workflow page dropdown

数据选项卡是你可以看到应用程序的数据库,其中的表,以及每个表中的数据。它还带有一个数据管理器,允许你对每一行进行CRUD操作。

Data tab

如果你想编辑每个表的列,你可以在数据类型选项卡中这样做。

Data types tab

最后,我们有风格选项卡。这是你可以定制应用程序的整体主题的地方。

Styles tab

还有三个标签我们还没有看完:插件、设置和日志。我们不会真的去看这些,因为我们不会在这里建立的应用程序中使用它们。