开始使用Bubble，一个用于构建严肃应用程序的无代码工具
你有没有想过不需要写一行代码就能构建web应用程序是什么样子的?进入Bubble，这是一种无需代码的可视化编程语言，可以让你使用拖放编辑器构建web应用程序。
在本文中，我将向您介绍Bubble。你将了解它是什么，它提供了什么功能，以及你可以用它构建什么样的web应用程序。然后，我们将比较它的无代码编程方法与传统的web应用程序开发，并研究使用Bubble的利弊。最后，我们将使用Bubble构建一个应用程序，这样你就可以感受一下如何用它来构建东西。
什么是泡沫?
Bubble既是一个无代码可视化编程工具，也是一个平台。在浏览器中使用拖放界面构建应用程序，然后Bubble充当为应用程序提供服务的平台。这意味着构建web应用程序所需的一切都在您的web浏览器中。Bubble负责运行web应用程序所需的所有设置和配置。
Bubble面向编码员和非编码员。但它主要吸引那些想要构建无代码web应用程序而不了解传统交易工具的非编程人员。
泡沫特性
气泡中充满了很多特性．我们不能在这里涵盖所有的内容，但我们将尽量涵盖最重要的内容。
UI生成器．使用Bubble的UI构建器，您可以将文本、图像、图标、地图、视频和其他常见的UI元素拖放到它的画布中。使用Bubble创建的Web应用程序结合了响应式设计，可以轻松地本地化到任何语言。
承载平台．在您使用拖放式UI构建器构建应用程序后，Bubble会为您部署和托管应用程序。它还有一个版本控制系统，允许您将应用程序恢复到任何时间点。Bubble还允许您根据需要轻松扩展应用程序。您将知道何时升级，因为Bubble有关于服务器指标(如页面视图和服务器容量使用情况)的图表。作为一个平台，Bubble的唯一缺点是你不能在你自己的服务器上托管你用Bubble构建的应用。
插件．与插件，你可以将各种工具的功能集成到你的Web应用程序中。例如，如果您希望用户使用他们的Facebook帐户登录，则可以使用Facebook插件．
实时协作．Bubble是团队友好型的。它最多允许40个合作者。
在本文中，我们将只讨论UI构建器。
你可以用Bubble构建什么
由于其灵活性，您可以使用Bubble构建任何类型的web应用程序。
CRUD应用程序．这些应用程序允许用户创建、读取、更新和删除数据。今天的大多数应用程序实际上只是添加了不同功能的CRUD应用程序。有了构建CRUD应用程序的能力，你就可以构建各种各样的功能。想想亚马逊(Amazon)或YouTube。它们的核心其实就是CRUD应用。
实时应用程序．这些应用程序可以让用户通过聊天、音频、视频通话或共享界面进行实时交流或协作。这些应用的例子包括Messenger、Discord和Slack。必威体育手机版登录
API-connected应用．“没有人是一座孤岛”的观点同样适用于应用程序。有了Bubble，你可以在互联网上构建利用第三方api的应用程序。认为条纹处理付款，或者Algolia用于处理搜索。API访问的可能性是无限的。通过API，您可以提供Bubble尚未提供的任何类型的功能。它也可以反过来:使用Bubble创建的应用程序也可以公开可供其他人使用的API。
响应应用程序．这些应用无论你在什么设备上看都很好看。使用Bubble，你可以免费得到这个功能，因为你用它构建的应用程序已经响应迅速了。
渐进式web应用．这些web应用程序可以添加到你的主屏幕上，方便访问。它们无法访问原生安卓或iOS应用程序的原生功能，但可以从主屏幕访问，并且可以离线工作。所以这是最接近原生应用的东西。
如果你想看到可以用Bubble构建的应用程序的实例，请查看Bubble的展示页面．你也可以看看它的如何构建页面查看如何构建Instagram、Dropbox或TripAdvisor等应用程序的教程。请注意，这些并不是非常详细的教程;它们只是让你了解构建这类应用程序的一般步骤。你仍然需要在一定程度上熟练使用Bubble来构建这些应用程序。
什么不能用泡沫来构建
本地应用．在撰写本文时，Bubble还不支持构建运行在Android或iOS上的原生应用。泡沫说它的文档他们计划将这一功能添加到核心功能中，但还没有列入Bubble的时间表。所以我们真的不知道它什么时候能上市。目前，唯一可行的选择是创建一个渐进式的web应用程序，或者使用React Native、Flutter或Cordova等工具将web应用程序包装在web视图中。
游戏．如果你打算用Bubble制作具有复杂图像要求的游戏或其他应用，那你就不走运了。Bubble是专门为创建web应用程序而设计的。你也许可以创造简单的益智游戏，但仅此而已。
Bubble的无代码编程vs传统的Web应用程序开发
在本节中，我们将根据以下指标来比较Bubble与传统的web应用开发方式:
- 对代码和数据的控制
- 发展速度
- 开发成本
- 运营成本
对代码和数据的控制
Bubble有一个数据导出功能，允许您通过CSV文件导出用户创建的数据。唯一的缺点是所有东西都运行在Bubble的平台上，所以你不能导出你的应用并在其他地方运行。Bubble保证会发布你的应用程序的源代码在开源许可下，以防它倒闭。
在传统的web开发中，你可以控制一切，因为源代码是从头开始编写的，并且托管在你选择的服务器上。
发展速度
Bubble提供了通过拖放界面构建web应用程序所需的所有工具。这使得开发过程比传统的web开发更快。也就是说，它还伴随着一个学习曲线，这取决于你想要构建的东西。如果这是一个简单的单页应用，只做一两件事，你可能需要几个小时才能学会。但如果是一款相当复杂的应用，你需要投入一到三个月的时间，才能快速创造出足够的效率去创造应用。
使用传统的web开发，至少需要三个月的时间来学习技术和工具。但根据各种因素，这很容易需要6个月到一年的时间。然而，一旦完成了这些工作，你就可以期望高效地构建大多数应用程序。
总的来说，开发速度主要取决于你的经验水平。如果你是一个完全的新手，Bubble会更快。如果你已经有了一些开发经验，那么通过传统的方式构建应用程序通常会更快。是的，你的开发经验可能会对使用Bubble构建应用程序的许多概念有所帮助。但构建相当复杂的应用程序的学习曲线仍然很好。
开发成本
使用Bubble，你几乎可以自己构建应用程序，即使你之前没有任何经验。Bubble为学习如何构建不同类型的应用程序提供了大量免费资源。当然，你可以雇佣其他人来为你做这件事。但Bubble(以及其他无代码平台)的主要前提是通过自己进行开发来降低开发成本。
使用传统的网页开发，你很可能需要雇佣一个网页开发人员来为你开发应用，因为这涉及到陡峭的学习曲线。
总的来说，与传统开发相比，使用Bubble开发应用的相关开发成本显著降低。
运营成本
Bubble从一个免费计划开始。这可以让你了解这个平台，并用它来开发应用程序。Bubble的个人计划将主要用于登台和测试目的。一旦你准备好发布应用，你就必须切换到专业计划或生产计划。你可以在Bubble 's结帐定价页了解更多关于每个计划的信息。
Bubble有一个叫做“单元”的概念，它基本上是为扩大规模预留的服务器容量。一旦你的应用获得一定数量的活跃用户，你就需要额外的单位。除此之外，另一个限制因素是文件存储。每个计划都有分配给它的总文件存储分配。所以如果你的应用存储了大量用户上传的媒体，你很可能很快就会遇到上限。有一些插件可以处理文件存储，但这些插件每个月都需要额外的费用。
另一方面，通过传统方式运行你的应用程序每月只需要花费服务器5美元。唯一的缺点是你必须从头开始设置所有东西——比如web服务器、数据库和队列服务器。从现实的角度来说，您不仅需要每月支付5美元，因为您还必须引入文件存储、错误报告和部署服务。这些很容易增加你的总运营成本。
总的来说，与运行应用程序相关的成本将高度依赖于你需要引入的服务和你需要的服务器容量。
使用Bubble构建应用
为了让你感受一下用Bubble构建应用程序的感觉，我们将用它创建一个简单的CRUD应用程序。在继续之前，首先需要创建一个泡沫帐户．
一旦你有了一个帐户，创建一个新的应用程序。
一旦创建了应用程序，新的应用程序助手将提示您开始使用。单击从空白页开始按钮并关闭助手。我不知道你怎么想，但我总是喜欢从头开始。
现在我们有了一个应用程序，让我们快速回顾一下我们要构建什么。
- 身份验证功能．这将允许用户登录到系统。
- 产品CRUD．CRUD是一个首字母缩写，它描述了一个能够处理最重要的数据库交互功能的应用程序，代表“创建、读取、更新和删除”——基本上允许用户在数据库中维护产品数据。
我们选择了这两个功能来展示Bubble如何有效地处理应用程序逻辑，并确保本指南教会你所有可能需要的概念，让你的想法在Bubble中实现。
UI基础知识
在我们开始实际构建应用程序之前，首先熟悉UI是很重要的。
的设计通常从TAB开始。由于Bubble是一种可视化编程语言，它总是从UI开始。的设计选项卡包含一个可视元素列表，您可以拖动或单击这些元素并将其绘制到画布上(单击元素以选择它，释放，然后绘制该元素)。
接下来是工作流选项卡。在这里可以找到特定页面的所有工作流。在Bubble中，您使用工作流指定当某个事件发生时应用程序做什么。例如，当登录按钮被单击，我们希望用户登录到应用程序，清除表单，然后重定向用户到管理页面(如果凭证是正确的)。
工作流只显示在每个页面上，而不是整个应用程序，所以你必须单击左上方的下拉菜单来选择你想要添加工作流的页面。
的数据TAB是你将看到应用程序的数据库，其中的表，以及每个表中的数据。它还带有一个数据管理器，允许您对每一行执行CRUD操作。
如果要编辑每个表的列，可以在数据类型选项卡。
最后，我们有风格选项卡。在这里你可以自定义应用的整体主题。
还有三个选项卡我们还没有讲到:插件、设置和日志。我们不会真正讨论这些，因为我们不会在这里构建的应用程序中使用它们。
身份验证
现在我们已经完成了Bubble的UI，让我们开始实现身份验证功能。
我们之前使用新的应用程序助手清除的默认应用程序实际上已经内置了用户身份验证。但既然已经清理干净了，我们就得从头再建一遍。这样，您就会知道使用Bubble构建应用程序的身份验证功能是多么容易。
默认情况下，索引页已经为我们创建，所以我们所要做的就是绘制我们需要的所有元素。
登录页面
首先，在容器章节。设计Tab，点击集团，然后在画布上画一个正方形。这将作为登录容器。
下一步，单击文本元素，释放，然后将其绘制到刚刚创建的容器中。这样做时，您将看到容器周围有一个红色边框。
一旦元素被绘制，就会出现一个浮动框。这允许您相应地自定义元素。在这种情况下，我们所需要做的就是更改标签。
接下来，对密码执行同样的操作。您可以简单地复制并粘贴您刚刚绘制的电子邮件标签，而不是执行确切的步骤。
如果您不知何故丢失了当前元素(容器元素非常常见，因为它们对最终用户是不可见的)，您可以单击页面选择下拉菜单旁边的下拉菜单，然后单击想要选择的元素。
一旦绘制了标签，就可以继续绘制相应的输入元素。向下滚动到输入表单部分，单击输入．然后像往常一样绘制元素。还要更改占位符，因为我们稍后将使用它来标识元素。之后，内容格式也应该更改为我们期望的相应数据类型。有了这些，Bubble将为您处理数据类型验证。
到现在为止，你应该知道该怎么做了。在容器内绘制一个按钮元素，然后更改其标签。
我们已经完成了登录页面的所有元素的绘制。下一步是添加登录功能。点击启动/编辑工作流程按钮上的登录按钮的自定义框。这将引导你到工作流选项卡，用于单击登录按钮。点击下面的动作框，悬停在上面账户，然后按登录用户．
这将弹出一个自定义框。Bubble已经假设所有用户都将使用电子邮件和密码组合登录。所以你所要做的就是选择相应的输入元素并选择它的值。
对密码执行同样的操作。完成后，您的屏幕应该如下所示。
接下来，我们希望通过清除表单来自行清理。点击上面的方框单击此处添加操作，悬停在元素的行为，然后按重置数据．
由于我们已经花时间对与登录表单相关的所有元素进行了分组，因此现在允许我们选择要重置的容器，而不是重置每个单独的元素。
接下来，添加另一个操作重定向到管理页面。
在目的地下拉,选择创建一个新页面…．然后将页面的名称设置为管理．然后，Bubble将为您创建此页面。创建完成后，它将显示在目标下拉列表中，这样您就可以选择它了。
这就是登录工作流。接下来，我们需要创建注册页面，以便用户可以注册。
注册页面
要创建一个新页面，请单击下面的下拉菜单页面:指数．然后单击添加一个新页面…．
这将显示您在前面创建管理页面时看到的相同的模式窗口。输入“注册”，点击创建．
在新创建的页面中，拖动前面在登录页面中使用的相同元素。只将注册按钮的标签更改为报名．作为一种快捷方式，您甚至可以从登录页面复制粘贴到注册页面。只要复制组容器，它就会把所有的元素都带进去。从那里，你所要做的就是改变按钮的标签。
下一步，单击报名按钮，并编辑其工作流，就像我们之前对登录按钮所做的那样。选择账户,然后为用户注册．
设置用于用户电子邮件和密码的值。
你现在应该知道规矩了。我们应该自行清理，然后重定向到登录页面，以便用户能够实际登录。实际上，我们可以为用户注册，然后从这里自动登录，但现在让我们尽量保持简单。
接下来，在注册页面中，添加到登录页面的链接。对登录页面进行同样的操作，以便用户可以轻松注册。
现在，您可以测试注册过程了。点击预览链接在屏幕的右上角。确保你没有启用弹出窗口阻止扩展，因为这将干扰打开新标签，其中预览将被显示。
Admin页面
现在让我们继续管理页面。选择管理从屏幕左上方的页面选择器下拉菜单中。在那里，点击工作流选项卡。我们不希望任何人在未登录的情况下访问此页面，因此必须检查用户是否已注销。
如果用户注销了，我们将他们导航到索引页，以便他们可以登录。
现在我们已经准备好为管理端实现功能了。
首先，拖动屏幕右上角的文本元素。这将向用户显示问候。要做到这一点，只需输入单词“Hello”，然后点击插入动态数据．从那里选择当前用户的,然后电子邮件．
接下来，我们创建产品表单，其中包括以下内容:
- 图片上传
- 标题(文本)
- 价格(文字，数字)
- 数量(整数)
- 保存按钮
你现在应该知道规矩了。确保在做其他事情之前先将组容器拖到画布上。然后，一旦你绘制了元素，容器应该变成红色，表示它被拖到了里面。
到最后，你应该得到如下图所示的东西。
对象中添加工作流保存按钮。选择数据(东西),然后创造一个新事物…．
从类型下拉菜单中选择创建一个新类型…并将其设置为product。
点击设置另一个字段按钮，依次添加每个字段。这些字段应该与前面拖到产品表单中的字段相对应。
我将以第一个字段为例，然后让您完成其余的工作。第一个字段是图像上传器。的字段名是数据库中的列名，而字段类型它的数据类型。
完成其余字段的操作吗设置另一个字段按钮:
- 标题(文本)
- 价格(数量)
- 数量(数量)
到最后，您应该看到如下所示的内容。
下一步是将其值设置为表单中的相应字段。
但是现在我们陷入了困境，因为价格似乎有一个错误。在Bubble中，问题会显示在屏幕的右上角(就在礼物图标的右边)。点击它，看看这个问题是关于什么的。
上图显示了一个数据不匹配错误。它期望值是一个数字，但我们输入了一些文本。
为了解决这个问题，我们需要将价格的数据类型改为文本。去数据选项卡，并选择产品表(在添加新类型时创建)。在Bubble中更新数据类型实际上是不可能的，因此我们必须删除现有的数据类型，并创建一个具有正确数据类型的新数据类型。
一旦删除，创建一个新的价格字段。
接下来，返回工作流并删除现有的price字段。然后创建一个新的，并分配正确的字段。现在应该可以解决这个问题了。
接下来，重置产品表单。
此时，您可以测试产品表单是否将数据保存到数据库。您应该会看到如下所示的内容。
注意:如果您预览管理页面，Bubble足够智能，可以使用数据库中的现有用户将您登录。所以，一定要先注册一个账户，这样Bubble就可以使用一些数据。
填写完所有字段并保存所有内容后，回到Bubble编辑器。下数据选项卡上,单击应用程序数据然后单击所有产品．这将显示您刚刚保存的产品。
太酷了!现在我们有进展了!下一步是显示存储在数据库中的所有产品。要做到这一点，我们需要使用aRepeatingGroup容器。拖到画布上。当你在那里，也拖一个文本字段。完成之后，它应该如下图所示。它就在乘积形式的下面。
接下来，单击重复组并设置其内容类型来产品．的数据源应该设置为搜索……→产品．
还可以根据创建日期对数据进行排序。
如果现在预览，什么都不会显示。这是因为它还不知道您想要显示哪些字段。
首先拖动表标题，这样我们就有了一个显示每个字段的指南。这些只是文本元素。
接下来，在重复组中拖动一个图像元素。如果你看到红色边框，你就知道它被拖进去了。在图像自定义框中，单击动态图像标签。然后选择当前单元格的→产品的→img．现在应该在这个特定的列上显示产品图像。
同样的想法也适用于标题、价格和数量-只是这次您需要使用文本元素。我教你怎么写标题，剩下的由你来做。
基本上，您只需在重复组中拖动或绘制一个文本元素，拖动它的容器，以便它有空间用于具有特别长的标题的产品。然后点击查看内容插入动态数据→当前单元格的→产品的→标题．
对价格和数量做同样的处理。我将等待。
一旦你完成了，你就会得到像这样的东西。
现在，您可以预览和添加一些产品，以查看列表的实际运行情况。
搜索功能
您可能在前面尝试过在搜索字段中输入，但这不起作用，因为重复组还没有响应搜索字段事件。
为此，需要向重复组中添加一个条件。条件允许您在满足特定条件时向搜索结果添加筛选器。在这种情况下，我们只需要两个条件:
- 当搜索字段为空时，我们不希望对重复组的数据源应用任何过滤器。
- 当搜索字段不为空时，我们对数据源应用筛选器。
在重复组的自定义框上，单击有条件的选项卡。然后点击定义另一个条件按钮。
要添加条件，请单击当字段并设置为输入搜索产品→价值→是空的．然后单击选择当为true时要更改的属性下拉。从选项中选择数据源．
单击数据源字段并选择搜索．
将类型设置为产品然后按顺序排序创建日期按降序排列。
合上它，就能解决第一个条件。
接下来,单击定义另一个条件．这一次，我们想要将条件设置为与之前所做的相反:输入搜索productÆs→价值→是空的．要更改的属性仍然是数据源与产品作为类型和创建日期排序。但这一次，点击添加一个新的约束按钮。在出现的新字段中，选择标题→包含→输入搜索产品→价值．这有效地为标题字段创建了一个过滤器。
此时，您现在可以预览应用程序，并看到搜索字段现在按预期工作。
更新功能
现在我们已经准备好实现更新功能了。对重复组内元素的定位做一些调整，以便为编辑按钮:
为了显示当前正在编辑的产品，我们将使用一个弹出元素。拖拽一个，使它处于创建产品表单当前所在的位置。
在弹出窗口中，添加与产品表单相同的字段，使其看起来像这样。
接下来，需要指定想要显示的初始值。的值指定为图像上传器动态图像字段。对于文本字段，它是最初的内容．只需点击插入动态数据中,选择母公司的产品→img．，应该显示所单击的产品图像编辑按钮。对标题、价格和数量做同样的事情-这一次通过提供for最初的内容．
您可能会问，Bubble是如何知道母公司的产品的。答案是因为我们设置了弹出框内容类型来产品．请记住，弹出窗口被归类为容器，容器负责对其中的所有内容进行分组。这给了我们母公司选择。这仍然没有回答Bubble如何能够加载用户点击的确切产品。如果你继续照着做，你就会知道答案的。
现在我们需要添加一个打开弹出窗口的方法。但与此同时，我们还需要加载产品的数据编辑按钮被点击。为此，我们将工作流添加到编辑按钮。单击容器以添加新操作，然后选择元素的行为→显示数据．
设置元素作为弹出产品而要显示的数据是当前电池的产品．这是之前缺失的部分。这就是Bubble如何知道在弹出窗口中加载哪个确切的产品。虽然有很多悬念，但还是挺反高潮的。但仅此而已。
接下来，要显示弹出窗口，添加另一个动作，选择元素,然后显示．然后选择弹出的值元素字段。
的时候，您现在应该能够测试弹出窗口是否正在加载产品数据编辑按钮。
接下来，我们需要添加实际的更新功能。这样做——你猜对了!—添加工作流到更新按钮。添加一个操作并选择数据(东西)→做些改变…．
设置需要改变的事情来母公司产品．如果您还记得，这与我们用于显示当前产品数据的东西是一样的。点击改变另一个领域添加要修改的字段。应该选择哪些字段可能有点令人困惑，但您可以使用母公司的作为关键字。任何在开头有该关键字的字段都是被拖到弹出窗口的字段。其他的是产品创造形式。到最后，你的应该是这样的。
之后，我们需要添加另外两个操作:重置表单，并关闭弹出窗口。我把下面的截图留给你，这样你就可以自己弄清楚了。
此时，您可以再次运行预览，并且应该能够更新产品。一旦产品更新，弹出窗口应该自动关闭，更新的数据应该反映在重复组中。
删除功能
现在来看最后一个功能在我们开始美化之前。
删除功能最简单的方法就是使用弹出窗口。这样，我们已经可以访问选定的产品。拖动a删除按钮下方的更新按钮。
你现在应该知道规矩了。这次选择数据(东西)→删除的东西……
在删除字段中,选择母公司产品再一次。就是这样!只需添加另一个关闭弹出窗口的操作，就可以开始了。
此时，您可以测试预览。当您删除一个产品时，它应该关闭弹出窗口，重复组中相应的产品也应该消失。
样式化应用程序
让我们把样式做得更好一点——因为到目前为止，我们还没有真正考虑过不同的元素将如何对齐。这里有一个简单的例子来说明我的意思。
正如你所看到的，它并没有正确对齐，即使它在设计页面上看起来还不错。
要修复这个对齐问题，首先要确保元素周围的容器应该与实际内容具有相同的尺寸。下面您可以看到，注册链接的容器与其中内容的尺寸并不匹配。
要解决这个问题，你所要做的就是使用手柄进行相应的调整。您还可以在自定义框中调整元素的宽度和高度。这对于确保文本字段和按钮具有相同的宽度和高度非常有用。继续在所有表单中进行这些调整。
另一件可以修复对齐的事情是右键单击元素并选择居中选项。你可以把东西垂直居中，也可以水平居中。这将元素置于其直接容器的中心。
如果仍然没有固定对齐，请确保直接容器的宽度是固定的。
您还可以选择多个元素并垂直对齐它们。
这是另一个使用重复组的例子。
还可以垂直分布元素。这样可以确保所选元素之间有相同的间距。请注意，如果您对输入执行此操作，则必须再次对齐垂直中心，因为垂直分布元素将导致重置。
对齐元素，并确保所有元素都具有相同的宽度和高度，这对于使设计看起来足够体面有很长的路要走。
我们可以做的最后一件事是改变按钮的样式，这样它们看起来就不一样了。首先为二次按钮样式设置为编辑按钮。
对于delete按钮，我们可以创建一个新样式。
命名样式危险．
创建完成后，单击编辑风格你想怎么定制就怎么定制。
编辑完样式后，返回到设计TAB，你会看到删除按钮现在应用了新的样式。
结论
就是这样!在本文中，您已经了解了所有关于Bubble的知识，这是一个无代码平台，允许非开发人员和开发人员开发应用程序，而不需要编写代码、设置自己的服务器以及传统开发附带的其他一切。
Bubble更适合构建web应用程序，而不是设计重磅的网站。你当然可以用它来构建更复杂的应用程序，因为它带有一个插件系统——尽管你必须花更多的时间来学习，而且你还必须支付更多的钱才能通过插件系统访问某些功能。
总的来说，Bubble是一个构建mvp的好工具，从相当简单的应用程序到稍微复杂一点的应用程序。对于更复杂的应用程序，如社交网络，你最好通过传统的方法来开发它们。
