如何在不编写代码的情况下构建应用程序 “产品人员-产品经理,产品设计师,UX设计人员,UX研究人员,业务分析师,开发人员,制造商和企业家 July 07 2019 真正 应用程序,产品开发,产品管理,产品管理技能, 注意产品 介意产品有限公司 1415 产品管理 5.66

如何在不编写代码的情况下构建应用程序

通过 ON

曾几何时,如果您想创建一个新的应用程序或网站而又不知道如何编码,则几乎没有选择:雇用一家昂贵的代理商,在网上寻找像样的自由职业者或学习编码。这意味着要花很多时间或金钱,而常常不知道这一切是否值得。

但是如今,情况并非如此。

如果我告诉过您,您可以自己构建几乎任何类型的应用程序或网站,而又不会花费很多钱,也无需编写任何代码,该怎么办?

因为那正是我所做的。

为了证明这一点,我将向您展示如何创建 素食餐计划应用 使用“无代码”应用程序构建器和一些可免费在线免费使用的漂亮工具。

(几乎)素食餐计划应用程序

想法

当我繁忙的工作日程驱使我每天晚上都吃即食时,我知道我必须为此做些事情。我尝试了很多选择,从HelloFresh到在印度聘用虚拟助手,都发现这些选择既费时又昂贵。

因此,我决定尝试为自己构建一些东西(一个应用程序)。

决定如何建造

乍一看,创建应用程序的选项似乎非常有限:请付费的人来做它或学习编码。

问题是-我不想花大量的现金购买可能无效的东西。同样,我不想冒险付钱给低成本的开发人员,让他们退还劣质产品。自己动手做更具吸引力,但我又一次认为学习编码不是我时间的最佳选择(但现在仍然不是)。

您可以看到困境。

所以,当我遇到 这个工具 名为Bubble,我显然可以用它几乎什么都没花(只是我的时间)来构建应用程序,而无需学习编码,我对此很感兴趣。抓住?

我需要学习如何使用它。因此,我前往Udemy,并支付了£10.99 在线课程 and got cracking.

决定要建造什么

在尝试了101种替代品之后,我对自己的每周饮食计划有了一个很好的了解:健康美味的食谱,一个简单且价格合理的每周饮食计划,以及一种简便的方法将食材送到我家。

我还希望能够选择每周的用餐次数和每餐的份量,交换食谱,查看食谱详细信息,并通过笔记本电脑和移动设备使用它。后者意味着创建一个可通过互联网浏览器(而不是移动应用程序)访问的网络应用程序。

要求已完成。

在Bubble中构建任何内容之前,我花了几个小时使用 免费的原型制作工具 以及我能在房子周围找到豚鼠的任何人。

主屏幕原型
膳食计划器原型

决定从哪里开始

我最不自信每周都会将食材送到我家,所以这就是我的起点。

我研究了英国的主要超市,希望能找到一种方法将我的应用程序与他们的购物网站集成。但是,在撰写本文时,仅Amazon Fresh提供 公开可用的API 却没有寄到我的地址。

回到原点。

然后我遇到了一个 购物小工具 由Whisk.com提供,这正是我所需要的。通过将少量JavaScript粘贴到应用程序中并配置一个简单的工作流程(稍后再介绍),我能够将配料直接添加到五个英国超市网站。最好的部分是……免费使用!

与五家英国超市进行集成就像在我的应用程序中粘贴一些JavaScript一样简单
打蛋器购物清单

添加食谱

我对这些食谱了解的一件事是,我不想创建它们。这意味着他们在线采购。

我发现了一些公开可用的配方API,包括 好吃, 毛豆, 烤箱 and Food2Fork,并得出结论,Yummly和Edamam是满足我要求的最佳搭配。因此,我同时注册了免费的开发人员帐户,并在Bubble中创建了小的测试页。

Bubble使连接API变得容易-花费了不到10分钟的时间
好吃 API测试页,显示真实配方数据

不幸的是,没有一个API证明对我来说是正确的。 毛豆的食谱屡试不爽,Yummly虽然返回了更好的质量结果,但对我来说却缺少一个关键功能–按份数进行搜索的能力。 (此后宣布,Yummly的食谱API将在2019年9月关闭。)

为了避免陷入僵局,我决定手动将配方数据添加到应用程序中。这涉及将配方复制到Excel工作表中,然后使用Bubble的文件上传器将其上传(无需创建单独的数据库)。当然,这不是一个长期的解决方案,但至少可以让我继续。

配方数据,显示在气泡中

创建用户界面

对于UI设计,Bubble有一个简单的Wysiwyg编辑器,我从复制原型中的设计开始。

Bubble的直观页面编辑器
在Safari中测试膳食计划页面的第一个版本

但是我很快注意到了一个问题。

该应用程序是为台式机设计的,这意味着它在我的笔记本电脑上看起来不错,但在移动设备上几乎无法读取,尽管在Bubble的自适应编辑器中进行了数小时的修改。

Bubble的自适应编辑器–尝试使桌面页面适合移动屏幕

因此,我使用320px的页面宽度(相当于iPhone SE)从头开始对其进行了重建,并使用了响应式设置来使其在较大的设备上看起来也不错。

赋予生命

为用户界面提供动力的是工作流。这些构成了如下逻辑: 这个 happens then do ,例如,单击按钮时会显示一个弹出窗口。同样,没有代码。

我的应用程序的一些工作流程包括食谱搜索,交换食谱,通过电子邮件发送膳食计划并将食材添加到购物清单中,以及一些简单的工作流程。一点耐心都可以轻松完成所有操作。

Bubble的工作流程编辑器-此示例在单击按钮时触发弹出窗口

最后,该测试一下了……

我使用膳食计划应用程序添加的食材在Ocado上完成了我的第一个在线超市购物订单。我花了大约25分钟的时间,包括其他费用(如牙膏)的总费用仅为40.12英镑。繁荣。

在接下来的几个月中,我继续使用它并进行了更新。这包括新食谱和新功能,例如能够将膳食计划发送到多个电子邮件地址。

使它看起来很漂亮

最后但并非最不重要的一点是,我在最前面拍了一个登陆页面,并添加了新的名称和配色方案。

(几乎)素食主义者登陆页面

“(几乎)素食主义者”这个名字的灵感来自植物性食品的日益普及以及我减少食用肉类的目标。对于着陆页副本,我研究了流行的在线论坛,以了解人们对饮食,膳食计划和食谱框的看法。

(几乎)素食餐计划

所以你有它。

具有零编码能力的人可以构建功能全面的Web应用程序的证明。

我的费用约为440英镑-其中大部分都花在了Bubble专家的指导上-花费了几个月的时间。借助免费的SDK和插件,持续费用每月也约为10英镑。

而且,我可以在几分钟内免费更改应用程序,而外包工作却无济于事。

所以,下次您说可以 ’不能建立新的网站或应用程序-更糟糕的是,通过粗略的业务案例将数千个想法付诸实践-什么’你的借口会是?