Bubble.io 是市场上最受欢迎的无代码应用程序构建器之一。当您将功能丰富的无代码 Backendless 后端与您的 Bubble 应用程序集成时,您将获得可视关系数据库、用户管理、防弹安全、[高度可扩展的无服务器托管]10 和,更多的。

构建移动或 Web 应用程序曾经是一项艰巨的任务。创建应用程序或有时被称为数字产品,需要大量的技术知识和数月甚至数年的专门开发时间。

无代码运动改变了这一点。现在,借助 Backendless 和 Bubble.io 等无代码工具,非技术构建者可以在数月甚至数周内学习和构建应用程序。具有技术知识的人可以将六个月的项目变成六周的项目。

在本文中,我们将向您简要介绍 Bubble.io,这是一个领先的无代码开发平台,为可视化构建应用程序提供了强大的工具包。然后,我们将描述如何添加强大且可扩展的 Backendless 后端来补充 Bubble 前端。

内容

1.什么是泡泡网?

2.前端与后端开发——以及为什么它很重要

3.添加 Backendless 后端和数据库的好处

4.如何将 Bubble 应用程序与 Backendless 后端集成

4.1 通过 Backendless 进行 Bubble 应用用户注册和身份验证

4.2 用户通过 Backendless 登录 Bubble

4.3 将 Bubble 中的数据保存到后端数据库中

4.4 从Bubble中查询Backendless数据库

5.结论

什么是 Bubble.io?

Bubble.io以前称为bubble.is,是一个使用拖放界面和工作流构建器以可视方式构建Web 应用程序的平台。 Bubble 提供广泛的用户界面设计功能,无需代码,并配有自己的数据库。

Bubble 为构建相对简单的应用程序提供了一个出色的工具包,因此极大地吸引了几乎没有或没有编码经验的新开发人员。借助该平台,用户可以非常快速地构建功能性应用程序,并且随着时间的推移轻松地迭代新功能。

由于这些功能,Bubble 是所谓的“公民开发者”的热门选择。许多此类用户包括具有基于应用程序的商业理念的非技术企业家和寻求快速构建最小可行产品 (MVP) 的技术初创公司创始人。

Bubble 的简单性可以很容易地与它的各种集成相辅相成。用户可以使用 Bubble 开发他们的早期项目,然后添加其他工具来增加他们的应用程序的功能。

前端与后端开发——以及为什么重要

从高级的角度来看,应用程序的前端是最终用户或客户将与之交互的内容。这可能是他们移动设备上的应用程序、交互式网站或软件。应用程序的后端是存储长期数据的地方,大部分“繁重的工作”都会发生。

应用程序的速度和可用性以及用户体验取决于进行计算的设备的处理能力。如果应用程序非常缓慢,则使用漂亮的前端构建的应用程序将几乎没有吸引力。

这就是为什么建议将尽可能多的逻辑存储在后端。典型的服务器(包括云服务器)包含的处理能力远远超过典型的手机、平板电脑或笔记本电脑。

同样,后端的能力对于增长和规模至关重要。开发人员应该小心忽视后端开发,因为这是大部分用户体验失败的地方。

一个可靠的后端不仅应该包括一个数据库,还应该提供创建后端逻辑、构建和访问 API、为文件、图像和视频提供充足存储空间以及支持消息传递和通知系统的能力。

添加 Backendless 后端和数据库的好处

我们现在已经确定,成功的应用程序需要的不仅仅是令人印象深刻的用户界面。大多数应用程序都将受到其后端的支持,包括服务器(托管)、数据存储、用户管理,在许多情况下还包括逻辑。

应用程序的后端功能越强大,应用程序就越有效,用户体验就越好。

Bubble.io已经席卷了无代码开发世界,但是对于该平台在前端提供的所有优势,它缺乏后端功能。

Bubble 应用程序带有一个内置数据库,该数据库足以满足早期业务的需求,但如果您打算扩展,将会非常困难。该数据库是为了简单而不是可扩展性而构建的,并且通常会随着正在处理的记录数量的增加而变慢。

当涉及到服务器端逻辑时,Bubble 后端也可能会让您感到失望。

为了弥补这些缺点,Bubble 提供了一个 API 连接器插件,以方便与第三方后端和数据库一起工作。

这就是 Backendless 的用武之地

凭借强大的可视化数据库、种类繁多的预构建 API以及构建您自己的无代码 API的能力,Backendless 轻松填补了 Bubble 应用程序中的所有后端空白。

对于希望构建长期产品的开发人员来说,Backendless 至关重要。 Backendless 开箱即用无限扩展,这意味着您无需担心服务器基础架构在高流量下会阻塞。此外,您可以在 Backendless 的云服务器上托管您的应用程序在美国或欧盟(非常适合 GDPR 合规性)或在您自己的本地服务器上。

从功能的角度来看,Backendless 提供了市场上最完整的无代码后端功能。在本文中,我们将讨论一些基础知识——用户身份验证(注册和登录)和数据库操作。然而,这仅仅触及了 Backendless 所提供的表面。

您的 Bubble 应用将受益的其他功能包括:

• 大型预建 API 集合,

• 无服务器托管,

• 无代码逻辑生成器,

• 云代码、计时器和事件处理程序,

• 电子邮件支持,

• 推送通知支持,

• 发布/订阅消息支持,

• 团队驱动开发,

• 和更多。

如何将 Bubble 应用程序与 Backendless 后端集成

从现在开始,我们将演示如何将 Bubble 与 Backendless 集成。在本文中,我们将引导您完成将几个基本后端功能集成到您的 Bubble 应用程序的过程(单击以跳转到每个部分):

• 用户注册

• 用户登录

• 保存数据

• 查询你的数据库

首先,您需要一个Bubble 帐户以及一个Backendless 帐户(在此处免费注册)。

注意: 访问 Backendless 强大的后端功能的最简单方法是使用 Backendless 构建您的前端。请务必查看我们的无代码 UI Builder以了解它如何叠加到 Bubble.

通过 Backendless 进行 Bubble 应用用户注册和身份验证

用户注册、身份验证和登录是任何寻求个性化用户体验的应用程序的关键组成部分。除了注册 API,Backendless 还提供了广泛的第三方登录选项,例如 Google、Facebook、Twitter 等。您可以在此处阅读有关我们的 OAuth 2.0 登录支持的更多信息。

用户登录开启了Backendless中用户管理一整套功能。这些包括会话管理、密码管理、用户角色以及将用户与其他数据对象相关联。

用户注册还打开了用户参与机会,例如电子邮件消息、推送通知和应用程序内消息。

让我们开始吧。首先,我们将把 Bubble 应用程序中的用户注册与我们的后端数据库连接起来。通过 API 注册的用户将出现在Users表中。

首先,让我们创建一个注册页面。我们将需要两个标识符为Input Email(内容格式:电子邮件)和Input Password(内容格式:密码)的输入组件,一个 ID 为Button Register User的按钮和一个 ID 为Registration Result Alert的警报:

对于平台之间的集成,我们将使用 REST 请求,我们将使用 API 连接器插件创建该请求。

您可以在创建新应用程序后立即安装此插件,也可以稍后通过助手安装此插件。要添加连接器,请转到 Plugins -> Add plugins 选项卡并添加 API Connector:

让我们创建一个名为 Backendless 的 API,并添加RegisterUser方法和注册所需的 url (https://api.backendless.com/APP_ID/REST_API_KEY/users/register)。 注意: 请务必添加您自己的 APP_ID 和 REST_API_KEY。两者都可以在您的 Backendless 仪表板上找到。

我们还需要电子邮件和密码参数(在这里阅读用户注册 API 文档)。

我们指定参数email:test@test.com和password:111作为测试数据。按 Initialize / Reinitialize 调用来验证请求:

如果一切正确,我们将收到来自 Backendless 的带有注册用户对象的响应:

点击Save保存RegisterUser方法,然后从对应输入中清除email和password参数的值:

让我们回到寄存器页面来添加更多逻辑。选择按钮 Register User -> Start / Edit Workflow:

我们的工作流程包括 4 个步骤:

1\。验证用户在电子邮件和密码字段中输入的值

否则,我们将显示必须填写这些字段的消息。

为此,请选择 Click here to add an action,选择 Element Actions -> Show Message:

接下来,选择 Registration Result Alert 作为显示元素,输入错误消息并放置一个过滤器,仅当一个或两个输入字段未填写时才会触发此操作:

2\。直接调用Backendless用户注册方法

单击单击此处添加操作 -> 插件 -> Backendless – RegisterUser:

我们指出,RegisterUser方法的参数数据必须取自Input Email和Input Password字段。只有当这些字段的值不为空时才应该触发调用:

3\。显示有关注册成功的消息

一旦请求在步骤 2 中成功返回,我们将转到显示消息。为此,与第一步类似,添加一个 Registration Result Alert 调用并进行如下配置:

选择 Registration Result Alert 作为显示元素并输入有关成功注册的消息。然后,使用插入动态数据按钮发送在步骤 2 中收到的注册用户的电子邮件。

仅当我们在步骤 2 中的响应中为用户提供字段objectId时,我们才会显示此消息。

4\。清除输入登录名和输入密码值

为此,请单击 Click here to add action,选择 Element Actions -> Reset inputs:

逻辑准备好了。在右上角,点击预览按钮,输入新用户的邮箱和密码,点击注册用户:

如果注册成功,我们会收到注册成功的消息:

如果在注册过程中发生错误(例如,用户尝试注册一个已经注册的电子邮件地址),那么我们将收到以下通知:

您可以使用响应错误代码列表为您的用户设置特定的错误消息,或者只是显示从后端收到的错误消息。

用户通过 Backendless 在 Bubble 中登录

现在我们已经设置了注册,让我们构建我们的登录页面。

在页面上,我们需要两个 Input 组件,标识符为Input Login(内容格式:Text)和Input Password(内容格式:Password),一个按钮Button Login和 AlertLogin Result Alert:

在对 Backendless 的 API 调用中,使用登录所需的 url 添加 Login 方法https://api.backendless.com/APP_ID/REST_API_KEY/users/login(替换为您自己的APP_ID和REST_API_KEY)。

根据文档,我们将需要登录名和密码参数。作为测试数据,我们指定了参数login:test@test.com和password:111。按 Initialize / Reinitialize call 来验证请求:

如果一切正确,我们将收到来自 Backendless 的带有登录用户对象的响应:

点击Save保存Login方法,之后我们从对应的输入中清除login和password参数的值:

让我们回到主页,以便编写一些额外的逻辑。选择 Login -> Start / Edit Workflow 按钮。

同样,我们的工作流程包括 4 个步骤:

1\。验证用户是否在 Bubble 应用的登录名和密码字段中输入了值

否则,我们将显示必须填写这些字段的消息。

为此,请单击 Click here to add an action,选择 Element Actions -> Show Message:

接下来,选择 Login Result Alert 作为显示元素并输入错误消息。放置一个过滤器,仅当一个或两个输入字段未填写时才会触发此操作:

2\。 Backendless中直接调用用户的登录方法

单击单击此处添加操作 -> 插件 -> Backendless – 登录:

我们指出,Login方法的参数的数据必须取自Input Login和Input Password这两个字段,只有当这些字段的值不为空时才触发调用:

3\。显示有关成功登录的消息

一旦我们在步骤 2 中获得了成功的结果,我们就可以继续执行此步骤。要显示消息,与第一步类似,添加一个 Login Result Alert 调用并配置如下:

选择 Login Result Alert 作为显示元素并输入有关成功登录的消息。然后,使用 Insert Dynamic Data 按钮发送在步骤 2 中收到的登录用户的电子邮件。

只有当我们在步骤 2 的响应中收到登录用户的objectId字段时,我们才会显示此消息。

4\。清除登录输入和密码输入值

为此,请单击 Click here to add an action,选择 Element Actions -> Reset inputs:

现在逻辑已经准备好了。在右上角,点击Preview按钮,输入用户登录名和密码,点击Login:

如果登录成功,我们将收到一条关于登录成功的消息:

如果在注册过程中发生错误(例如,用户不存在),那么我们将收到以下通知:

将Bubble中的数据保存到后端数据库

Bubble 提供了一个内置数据库,足以满足简单的项目或 MVP 级别的应用程序。当需要扩展时,您有数以万计的记录要存储和检索,Bubble 数据库可能会成为一种负担。

Backendless 数据库是 Backendless 与其他所有无代码平台的区别所在。您的数据库可以存储多种数据类型(包括空间/地理数据和JSON 对象),并且可以轻松创建对象之间的关系。此外,Backendless 数据库可以开箱即用地无限扩展。

后端数据库使用基于 SQL 的查询系统。 (我们将在下一节中对此进行更多讨论。)这种方法允许您轻松查询数据并准确显示您希望用户看到的内容。

要开始处理我们的数据,让我们先看看如何将数据从我们的 Bubble 应用程序保存到我们的后端数据库中。让我们构建一个简单的新页面来尝试一下。

在页面上,我们需要两个 Input 组件,标识符为Input Name(内容格式:文本)和Input Age(内容格式:文本(仅限数字)),一个按钮Button Save和一个警报Save Result Alert:

我们将一个新对象保存到一个名为Person的表中。

在对 Backendless 的 API 调用中,添加SaveObject方法以及保存对象https://api.backendless.com/APP_ID/REST_API_KEY/data/Person所需的 url(替换为您自己的APP_ID和REST_API_KEY)。

根据文档,我们还需要name和age参数。让我们指定参数name:Bob和age:30作为测试数据。按 Initialize / Reinitialize 调用以验证请求:

如果一切正确,我们将收到来自 Backendless 的带有已保存对象的响应:

点击Save保存SaveObject方法,之后我们从对应的输入中清除name和age参数的值:

让我们回到主页面添加更多逻辑。选择 Save object -> Start / Edit Workflow 按钮。

同样,我们的工作流程包括 4 个步骤:

1\。 Backendless 中调用保存新对象的方法

单击单击此处添加操作 -> 插件 -> Backendless – SaveObject:

我们指出SaveObject方法的参数数据必须取自Input Name和Input Age字段:

一旦我们确认这已正确执行,我们就可以继续下一步。

2\。显示有关成功保存的消息

为此,请添加 Save Result Alert 调用并将其配置如下:

选择Save Result Alert作为显示项,并输入一条关于成功保存的消息。使用插入动态数据按钮将步骤1中获得的已保存对象的objectId传输到消息中。

只有在请求响应中收到存储对象的objectId时,我们才会显示此消息。

3\。清除输入名称和输入年龄值

为此,请单击 Click here to add an action,选择 Element Actions -> Reset inputs:

最后,逻辑准备好了。在右上角,点击Preview按钮,输入姓名和年龄,然后点击Save object:

如果保存成功,我们会收到消息:

从Bubble查询Backendless数据库

最后,让我们来看看如何通过运行查询从数据库中检索数据。我们将再次创建一个简单的页面进行演示。

对于这个例子,在主页面上,我们只需要一个标识符为Input Where Clause(内容格式:Text)的 Input 组件、一个Button Find按钮和一个 ID 为Find Result Repeating Group的名为 Repeating Group 的组件来显示搜索结果:

我们将查询我们之前创建的Person表。

在对 Backendless 的 API 调用中,添加Find方法以及获取https://api.backendless.com/APP_ID/REST_API_KEY/data/Person所需的 url(替换为您自己的APP_ID和REST_API_KEY)和可选的where参数(阅读文档)。

按 Initialize / Reinitialize call 验证请求:

如果一切正确,我们将收到来自 Backendless 的响应,其中包含一组选定对象:

点击 Save 保存Find方法并返回主页,我们将在其中添加更多逻辑。

让我们选择按钮 Find -> Start / Edit Workflow。

在这种情况下,我们的工作流程包括 3 个步骤:

1\。调用 Backendless 获取对象的方法

单击单击此处添加操作 -> 插件 -> Backendless – 查找:

Find 方法的 where 参数的数据应取自Input Where Clause字段:

请求成功完成后,我们可以继续进行第 2 步。

2\。使查找结果重复组元素可见

选择单击此处添加操作 -> 显示元素。

接下来,选择元素Find Result Repeating Group:

3\。将步骤 1 中获得的数据传输到 Find Result Repeating Group

让我们返回主屏幕完成设置。让我们配置查找结果重复组如下:

将 Type of content 设置为Find- 此组件将显示作为 Find 请求的结果接收到的数据。 Layout style 将是Full list- 组件中的单元格数量将根据响应中接收到的对象数量动态变化。

此元素在页面加载时可见 应保留 未选中 - 加载页面时,我们不会显示可重复组组件;我们只会在从服务器加载数据时显示它。

接下来,让我们在Find Result Repeating Group单元格中添加一个 Text 组件:

由于我们已将Find Result Repeating Group类型指定为Find查询的结果,因此我们现在可以将其配置为显示从Person表中检索到的对象的名称和年龄字段。为此,请使用 插入动态数据 按钮:

现在逻辑已经准备好了。单击 Preview 按钮,然后可选择输入where 子句并单击 Find:

作为对whereClause的age> 25的查询的结果,我们收到Person个表对象的列表,其中age大于 25。如果我们执行Find查询而不指定whereClause,我们将获得所有对象的列表:

---

结论

您现在应该对如何通过 Bubble 应用程序与 Backendless 后端交互有了基本的了解,但这只是冰山一角。将 Backendless 后端和数据库添加到 Bubble 应用程序可为您的应用程序提供令人难以置信的灵活性和无限的可扩展性。

借助 Bubble 简单的前端界面和 Backendless 功能丰富的后端以及许多预构建的 API,您的可能性将变得无穷无尽。

除了管理用户和数据之外,Backendless 还允许您访问计时器、事件处理程序以及您在后端可以想到的任何无代码逻辑。

您的应用程序几乎是无限的。

感谢阅读和快乐的无代码编码!

---

*本文于2021年12月2日首发于backendless.com。