我最近对 HTML、CSS 和 JavaScript 以外的 Web 开发方法感兴趣。
随着无代码环境的发展,发现有多种替代标准方法来开发 Web 应用程序也就不足为奇了。
您必须熟悉一些比较知名的 CMS 平台,例如几乎没有代码的 WordPress。 但是,如果您想构建 Web 应用程序,这些平台可能会显得有些限制。
在这里,我向您介绍 Bubble.io,一个强大的 无代码工具 让您以前所未有的方式构建 Web 应用程序。
让我们深入探讨一下!
什么是 泡泡网?
Bubble 是一个结合了可视化编程语言和 网页开发框架.
用户可以使用这些编程工具来构建独特的在线应用程序、更改数据库和流程、添加页面组件(图像、文本、输入表单、地图)并设计其界面。
这是一个市场,您可以在其中发现理想的模板、插件和服务,以帮助您构建强大的产品。
无需设置典型的编程框架,您就可以使用 Bubble 创建从市场到社交网络再到 CRM(客户关系管理)的任何东西。
它使客户能够使用用户友好的界面和点击式编辑器来创建和个性化他们的应用程序。
您可以将它与提供 REST API 的服务结合使用,例如 Facebook、SQL、分析和支付应用程序。 它使用户能够花时间改进其应用程序的功能和外观,以便它们在平板电脑和移动设备上看起来很好。
它适用于从小型到中型到大型的所有企业规模; 并可用于 Windows、Mac 和 Web。
什么是可视化编程?
可视化编程本质上就是它听起来的样子。 您无需通过编写代码手动编程,而是通过单击组件并将其拖入页面以图形方式进行。
不要被那个简短的描述误导。
它不像您在网上遇到的任何其他千篇一律的应用程序或网站构建工具。 大多数应用程序构建器要求您依赖基本模板并且功能极其有限; 它们只允许您开发特定类型的应用程序并限制您的个性化。
虽然“可视化编程”和“拖放”的概念在 Bubble 中看起来很简单,但它非常强大。
它的可视化编程环境不仅允许您将文本、图形、输入等对象拖到页面上,还允许您配置这些元素的功能。
泡泡是做什么的?
Bubble 的主要目标是让任何人无需编写代码即可创建 Web 应用程序。
然而,虽然这提供了一个容易记住的目标陈述,但它遗漏了故事的重要部分。 从想法到市场的路径比仅仅创建代码行更复杂。
在传统开发中,需要一支训练有素的专业人员团队来处理应用程序的创建、增长和维护的某些部分。 考虑一下。
每个应用程序需要什么?
- 确保没有人未经授权访问数据的安全性。
- 用于存储和检索信息(例如项目、文章和社交媒体更新)的数据库。
- 可扩展性使用户群和数据量的发展不受阻碍。
- 令人愉悦的用户界面,使应用程序具有吸引力且易于使用。
- 与各种服务和系统集成。
Bubble 取代的不仅仅是编码器。 它以视觉上吸引人且高度自动化的方式提供所有这些服务,即使不简单,也可以想象由一个人来处理所有事情。
而以前的无代码平台已尝试以各种方式替换编码。 它的概念是尽可能多地消除应用程序进入市场的障碍,处理从响应式设计和动画到托管、版本部署、安全性和数据库操作的所有事情。
使用 API 连接器将 Bubble 连接到其他服务
它的 API 连接器可能是市场上最重要的插件。 顾名思义,这允许您连接到其他应用程序和服务以共享操作和数据。
与其深入研究其工作原理的技术细节,不如考虑这些 API 可能完成的示例:
- 获得访问权 机器学习 图像识别和翻译等方法。
- 从地球上的任何地方获取最新的天气信息。
- 在 Bubble 中触发事件时,系统会交换信息,例如在您的 CRM 中建立潜在客户或在 Google 日历中进行约会。
- 预订全球任何地方的航班或酒店住宿。
- 在 Google 地图上获取任何公司的电话号码、位置、照片、徽标和评论。
使用插件增强原生功能
从技术上讲,它将 JavaScript 代码模块、CSS 和 HTML 混合到一个功能节点中。 用 JS.JSON 编写的应用程序是其自身语言的基础。
虽然您不需要完全理解这些术语来构建应用程序,但它们确实表明了一个关键事实:它遵循已知和公认的 Web 标准,允许开发人员显着增强其原生功能。
这已经在插件站点上看到,那里有数百个基本功能的免费和付费扩展。 这也意味着,如果你的基础能力不足,那么有很多 JavaScript 专家愿意为你提供定制的解决方案。
您可以开发哪些类型的应用程序?
您可以创建范围广泛的应用程序,其中一些在下面给出。
- 适用于具有社区的专业市场的应用程序。
- 适用于各个行业的工作委员会的应用程序。
- 医院人员配备软件。
- 实体店的销售点软件。
- 带有白色标签的牙科办公室软件。
- 个人商业库存和客户服务软件。
- 经纪人和面向客户的房地产聚合应用程序。
- 市场上的活动和课程应用程序(甚至船只)。
- 专业证书需要内部测试申请。
- 第一响应者的应用程序。
- 内部使用的员工管理软件。
老实说,该平台并非旨在完成所有工作。 如果您正在设计具有复杂视觉效果和动作的游戏应用程序,它可能不是理想的选择。 此外,如果您正在创建一个原生应用程序(一个用于应用商店的应用程序),您需要将它与另一个第三方服务集成。
主要特点
Bubble 充满了各种功能。 我们将无法在这里涵盖所有内容,但我们将尝试涵盖最重要的内容。
1。 插件
它允许您将 Internet 上众多工具的功能包含在您的 Web应用程序. 例如,如果您希望您的用户使用他们的 Facebook 帐户登录,您可以使用 Facebook 插件来执行此操作。
2.发展
它允许您为桌面和移动网络浏览器构建动态的多用户应用程序,以及构建类似于 Instagram 或 Airbnb 的网站所需的所有工具。
3。 设计
您可以创建适合移动设备的布局和动态内容,为您乐于向他人展示的产品进行最后润色。
4。 主机
永远不必一次又一次地担心服务器维护、基础设施或操作。
它以安全可靠的方式为您处理部署和托管。 用户数量、流量、数据存储都不受限制。
使用 Bubble 构建应用程序(教程)
现在让我们开始行动,探索如何在 Bubble 上构建新闻应用程序。
1.入门
首先,您必须先 在 Bubble 上注册一个免费帐户.
我们将首先使用 Bubble 的视觉设计工具来塑造我们平台的 用户界面. 下面给出了一些要包括的关键页面:
- 上传页面——出版商将开发和分发文章的网站。
- 主页 – 显示最近发布的故事列表。
- 叙述页面——可以找到每个独特故事的页面。
- 出版商页面 - 显示某个出版商的故事列表的页面。
2.配置数据库
在您布置好产品的展示之后,您可以专注于构建将为您的应用程序提供动力的数据字段。 我们将使用这些字段来链接您产品的工作流程。
对于这个例子,我们将为每条新闻建立两种不同的数据类型。 一种数据类型将包含故事的基本事实(例如标题、特色图片和出版商),而另一种数据类型将包含更大的内容文件,例如整个叙述本身。
通过将它们定义为离散数据类型,我们只能在需要时加载所需的信息,从而限制气泡编辑器需要生成的材料数量。
将创建以下数据类型和字段:
数据类型: 用户
领域:
- 名称
- 以下发布者是发布者列表。 重要提示:根据不同的数据类型将字段创建为列表允许您轻松合并其所有基本数据字段,而无需创建额外的字段。
数据类型: 故事
领域:
- 标题
- 特色图片
- 作家
- 产品类别
- 出版商
- 故事内容
数据类型: 故事内容
领域:
- 故事内容
数据类型: 出版商
领域:
- 名称
- 商标
- 产品粉丝
3. 构建工作流程
现在您已经组织了应用程序的设计和数据库,是时候开始将所有内容放在一起并使其工作了。
工作流是在 Bubble 中完成此任务的主要方法。
每个工作流在事件发生时发生(例如,用户单击按钮),然后执行一系列“操作”作为响应(例如,“注册用户”、“更改数据库”等) .
4. 创建新闻故事
我们将提供的第一个功能是允许出版商撰写和发布新闻到网站的工具。
在上传页面上,我们将首先合并许多输入项,这些输入项将用于将数据输入到我们的数据库中。 文本输入、图片上传器和下拉选择是这些字段的示例。
我们还需要自定义发布者下拉菜单以显示动态选项列表。 由于每篇新文章都会添加到出版商的总文章列表中,因此我们需要从我们的数据库中选择一个现有的出版商。
设置此下拉菜单时,我们将选择作为发布者的选项类型。
之后,我们的数据源将扫描我们的数据库并返回所有当前出版物的列表。 最后,我们将更改源标题以包含发布者的名称。
一旦作者在每个页面条目中输入了必要的信息,他们将单击发布按钮以生成新故事。
然后,在您的数据库中,您将创建一个数据类型设置为叙述性的新事物。
然后我们需要开始用必要的字段填充我们的数据库。 将每个页面输入组件连接到它们各自的数据库列。
首先,我们将创建故事内容类型,最终将链接到故事本身。
接下来,我们将在此过程中添加另一个阶段,生成其他内容——这次是故事本身。
通过整合我们用这个故事开发的第一个叙述材料,可以轻松地将这些数据整合到整个平台中。
每次激活此程序时,都会产生一个新的故事。
5. 在提要中显示动态内容
一旦出版商开始将材料上传到您的移动应用程序,我们将需要开始在您的主页上创建将每篇文章显示为动态列表的逻辑。 这可以通过使用我们的重复组元素来实现。
重复组与您的数据库一起工作,以呈现和刷新动态材料列表。
应用重复组时,您必须首先将元素链接到数据库中的数据类型。
在这种情况下,您会将这类材料归类为故事。 您还需要将数据源作为数据库中所有表的列表提供。
我们还将按每个故事的开始日期排列此重复组,按时间倒序显示列表。 您现在可以开始组织将出现在每个网格中的动态材料。
只需使用您要显示的适当材料填写第一行,这个强大的元素将使用当前数据库中的数据填充剩余的列。
6. 页面间发送数据
也可以在重复组的每一行中构建事件。 在为您的平台开发导航功能时,此功能会派上用场。
我们的新闻应用程序的主页仅显示每个故事的预览,包括发布者、特色图片和故事标题。
但是,在用户单击故事页面之前,它不会显示文章的全部内容。 我们将使用我们的工作流编辑器在页面之间传输数据以显示此材料。
首先,创建一个在单击故事图片时将用户发送到故事页面的流程。
在开发此过程时,使用导航事件将用户转移到另一个页面。
从下拉菜单中选择目标页面类型作为叙述页面。 然后,您需要向此页面提供更多信息,以便 Bubble 编辑器了解要显示的独特故事。
您需要提供的信息来自当前的细胞故事。
7. 在故事页面上显示动态内容
当用户被发送到某个故事页面时,您可以轻松地检索此事件数据并显示叙述中的相关材料。
要创建此函数,您必须首先检查目标页面类型是否与您通过工作流提供的数据属性相匹配。 在这种情况下,您必须将故事页面与故事属性相关联。
通过对页面上的内容类型进行分类,它可以简单地从现有来源中提取和交付适当的数据。
您现在可以开始将动态材料插入到显示单个表中信息的字段中。
8. 显示发布者的文章
阅读新闻项目后,用户可以选择检查出版商的整个文章目录。 如果您已经开发了发布者数据类型,那么为发布者创建单独的页面就像创建我们的原始主页一样简单。
在此页面上,我们首先需要将页面类型设置为发布者。
然后,从主页复制重复组并编辑设置。
在这种情况下,我们的重复组的数据源将查找其发布者是当前页面发布者的所有现有文章。
9.关注发布者
我们将为 MVP 构建的第三个基本功能是能够在平台上关注发布者。 我们将在发布者页面上添加一个关注按钮。 当我们单击此图标时,我们将启动一个修改事物的新进程。
将当前页面发布者添加到他们的以下出版物列表中将更改当前用户。
之后,我们需要通过添加当前用户来更新当前页面发布者的关注者列表。
10.您可以添加的附加功能
现在您已经习惯了构建自定义数据字段并呈现动态信息,您可以通过为您的产品创建的体验获得创意。 您还可以包括:
- 创建一个功能,允许用户保存内容以供以后阅读。
- 在每篇文章的底部,提供建议文章的重复集合。
- 创建一个搜索工具来帮助人们在网站上找到新鲜的内容。
11. 结果
您的最终应用程序将如下所示。
优点
- 连接到许多 API 和插件的能力。
- 一个易于使用的无代码应用程序。
- 没有编程经验的人将从中受益。
- 多功能且功能强大的设计工具。
- 快速查询处理。
缺点
- 增加了可靠性。
- 数据处理速度慢。
- 性能受到限制。
定价
免费计划允许您了解该平台并开发您的应用程序。
付费订阅包括白标、自定义域、对 Bubble API 的访问和保留的服务器容量等额外内容,如下所列。
- 个人 – 每月 25 美元(每年支付)或每月 29 美元(每月支付)。
- 专业 - 115 美元/月(按年支付)或 129 美元/月(按月支付)。
- 生产 – 475 美元/月(按年支付)或 529 美元/月(按月支付)。
结论
Bubble 是构建只能显示信息或具有最小 UI 的 Web 应用程序的绝佳替代方案。
它使用起来非常简单,而且 Bubble 提供的教程非常有帮助。 它的在线可视化编辑器允许您根据自己的喜好设计 Web 应用程序。
最好的部分是您不需要任何编程经验或专业知识。 Bubble 适合所有人,无论您是否知道如何编码。
但是,对前端语言的事先了解可以为您提供优势,因为它可以让您快速弄清楚它在事件处理方面做了什么。
那么,您如何看待 Bubble 的能力?
请在评论区告诉我们!
阿尔贝希
可以使用 bubble.io 工具创建商店来销售产品吗?