从 0-1,用AiWork 30分钟搭建一个完整Web应用

简介: 我没有写代码,只是把想法告诉 AiWork。30 分钟后,一个能添加、勾选、删除、搜索任务的网页应用,就在浏览器里跑起来了。

我没有写代码,只是把想法告诉 AiWork。30 分钟后,一个能添加、勾选、删除、搜索任务的网页应用,就在浏览器里跑起来了。


先说结论

以前,想做一个网页应用,听起来像是“程序员专属任务”:

要会前端、要懂后端、要设计接口、要跑服务、还要会测试。

但这次我做了一个小实验:

我不写代码,只和 AiWork 对话,看看它能不能把一个想法做成真实可用的应用。

结果是:可以。

而且整个过程,只用了大约 30 分钟。


开始之前:先认识一下“怎么和AiWork协作”

  • AiWork是谁:蚂蚁数科旗下智能办公产品。
  • 安装入口:你可在AiWork官网,根据常用的工作形态,下载 终端(CLI)或 桌面端的产品(本案例以桌面端为工作端)。

1.png


我做的是什么?

一个很常见的小工具:任务清单 Todo 应用

它不复杂,但足够完整:

可以新增任务
可以勾选完成
可以删除任务
可以搜索任务
可以按“全部 / 未完成 / 已完成”筛选
最后能在浏览器里真正打开使用


也就是说,它不是一段“看起来很厉害的代码”,而是一个真的能点、能用、能演示的小应用。

不只是“更聪明的聊天框”,而是一个能干活的搭档:
你负责说清楚想要什么,AiWork 负责一步步把事情推进下去。


开始实践

01 先别急着写代码,让 AiWork 帮你想清楚

很多项目失败,不是因为代码写不出来,而是一开始就没想清楚:

  • 到底要做哪些功能?
  • 哪些是必须的?
  • 哪些可以以后再加?
  • 有没有我没想到的细节?

所以第一步,我没有让 AiWork 写代码。

我先对它说:

我想做一个轻量级的任务清单网页应用,用来做教学演示。我还没完全想好细节,你先别写代码。请你先帮我把需求拆成“模块 / 功能点 / 优先级”,如果你觉得我漏了什么常见功能,也帮我补上。

很快,AiWork 就把一句模糊想法,整理成了一张清晰的功能表。

2.png

这一步最有用的地方是:
我不用自己硬想,AiWork 会主动帮我补全思路。

比如我只说“任务清单”,它会想到新增、删除、完成状态、搜索、筛选、统计等功能。

这时候,我只需要判断:

这些功能是不是够了?有没有要删掉或补充的?


02 不懂技术也没关系,让 AiWork 给你一个简单方案

需求定下来后,下一步就是:怎么做?

如果是以前,这一步可能就开始劝退了:

“要不要用框架?”
“要不要装依赖?”
“需不需要数据库?”
“怎么启动?”

但我不需要自己研究这些。

我只给 AiWork 一个原则:

越简单越好,最好装个 Node.js 就能跑。

然后它会给出一个适合演示的方案。

3.png

这里不用被技术词吓到,你只需要看懂一句话:

AiWork 会把复杂选择翻译成你能判断的方案。

比如它会告诉你:

  • 为什么这样做更简单;
  • 为什么适合教学演示;
  • 运行起来需要什么;
  • 后面怎么继续开发。

你不需要成为技术专家,只需要拍板:

可以,就按这个来。


03 最神奇的一步:它真的开始创建文件了

接下来,我对 AiWork 说:

方案我确认了,开始开发。请你直接创建好完整项目文件,前端页面、后端服务、样式和交互都要有。

然后它就开始动手了。

不是只在聊天框里给我一大段代码。

而是真的把文件一个个建出来:

后端服务文件
网页页面文件
样式文件
交互逻辑文件
数据文件

4.png

这一刻会很有“成就感”。

因为你会发现,AiWork 不只是“给建议”,它是在真的往前推进任务。

它会一边创建文件,一边告诉你:

  • 这个文件负责什么;
  • 那个文件用来做什么;
  • 项目现在完成到了哪一步。

你不需要读懂每行代码,也能知道整个项目正在成型。


04 做完还不够,让它自己测一遍

一个应用“写完了”,不代表“能用了”。

所以我继续说:

请你为这个项目写测试,正常情况和异常情况都要测。写完之后直接运行,把结果给我看。

AiWork 会继续补测试,并把测试跑起来。

5.png

这一步非常关键。

因为它不是口头说“应该没问题”,而是用测试结果告诉你:

添加任务正常
空标题会报错
删除任务正常
搜索筛选正常
异常接口也能处理

这比“看起来能跑”靠谱得多。


05 最后,在浏览器里看到真正的结果

最后一步,我让 AiWork 启动应用。

它会告诉我打开哪个地址。

我在浏览器里打开后,就看到了这个任务清单应用。

6.png

可以体验生成的Web应用,自主体验,如:输入任务,点击完成,删除任务,也可以筛选和搜索。

这时你会很直观地感受到:

刚才还只是一个想法,现在已经变成了一个能打开、能点击、能演示的网页应用。


30 分钟,发生了什么?

简单复盘一下,通过简单的提问,AiWork清晰地理解了我的需求并进行了进一步的任务拆解、执行,最终输出了我想要的产品。

7.png

所以这次体验最打动我的,不是“AI 会写代码”。

而是:

AiWork 能把一个任务从想法阶段,一路推进到可运行、可验证、可演示。


真正降低的,不只是写代码的门槛

很多人以为,AI 开发工具的价值是“帮我写代码”。

但用完这一轮,我觉得更大的价值是:

它帮你把复杂流程拆开

你不用一上来就面对一整个项目。

AiWork 会先拆需求,再定方案,再开发,再测试,再启动。

它让你更容易做判断

你不需要懂所有技术细节。

你只需要判断:

  • 这个需求对不对?
  • 这个方案够不够简单?
  • 这个结果能不能接受?

它把“想法”变得更容易落地

以前一个想法可能停在脑子里。

现在,你可以先让 AiWork 做一个能跑的版本,再慢慢改、慢慢加功能。


如果你也想试,可以直接复制这句话

如果你也有一个想法,但不知道怎么开始,可以先把这句话发给 AiWork:

我想做一个轻量级 【Web 应用(填入你的idea)】,但还没想清楚细节。请你先别写代码,先帮我把需求拆成模块、功能点和优先级,并指出我可能遗漏的功能。

然后等它给你第一张需求表。

你会发现,事情已经开始往前走了。


最后

这不是一篇“教你成为程序员”的文章。

它更像是在展示一种新的工作方式:

你负责提出想法,AiWork 负责把想法一步步做出来。

产品同学可以用它做 Demo。
运营同学可以用它验证工具想法。
设计同学可以用它跑交互原型。
技术同学也可以用它快速搭脚手架、补测试、验证方案。

当一个想法可以在 30 分钟内变成一个能打开的应用,很多事情就不必再停留在“以后有空再做”。

现在,你可以直接打开 AiWork,试着把你的第一个想法做出来。

相关文章
人工智能 缓存 前端开发
9095 39
人工智能 JavaScript 开发工具
3742 9
开发工具 Swift git
1415 2
缓存 JavaScript Shell
1728 2
人工智能 JavaScript 测试技术
1292 0
Shell API 调度
945 3
人工智能 JavaScript 测试技术
500 4
人工智能 Java BI
557 0