大家好,我是双越,也是 wangEditor 作者。
今年我致力于开发一个 Node 全栈 AIGC 知识库 划水AI,包括 AI 写作、多人协同编辑。复杂业务,真实上线,大家可以去注册试用,围观项目研发过程。
开始
上周我写了一篇关于 v0.dev 的文章 程序员设计不出精美的 UI 界面?让 V0 来帮你 ,点赞和讨论非常多。今天继续分享一些关于 AI 写代码的话题。
AI 进化的非常快,最近这段时间,很多 AI 工具可以直接生成 web app 项目代码了,而不是单一的页面和组件。上个周末我闲来无事就体验了一把,整个过程并不是很顺利,但我依然看好这个方向的未来。
Bolt.new
Bolt.new 是 Stackbiltz 推出的 AI 代码生成工具,类似于 Vecel 推出的 v0.dev ,通过图片、描述、甚至一个链接 AI 生成代码。
Bolt.new 近期在国外的社区非常火爆,我看 X 上很多 AI 博主经常发这个,也许是因为 v0.dev 现在付费升级,而 Bolt.new 目前可免费使用。
无论 v0.dev 还是 Bolt.new 现在都可以生成一个 webapp 项目,而非单个文件,还可以部署到相应的平台,如 Vercel 或 Stackbiltz 。
甚至可以直接生成全栈项目,使用 Next 或 Nuxt 等 Node 框架,然后借助各种第三方服务,如数据库,存储,auth 等,就可以开发一个全栈项目。现在所有东西都在云端,都是服务,一个接口,一段配置,足矣。
创建项目
基于现在 AI 的积累和能力,开发一个简单的静态页面,或简单的前端项目(如 todo-list)应该是没问题的,不试了。直接来一个有点难度的。
访问 Bolt.new 主页,输入指令 Create a basic group chat webapp like Discord ,开发一个像 Discord 一样的群聊 webapp 。
它很快生成了一个代码库,从 package.json 中看是 React 技术栈,但是没用服务端框架,可能是前端直接连第三方服务。
再看它左侧给出的一些解释,如下图
- Google 登录
- 实时通讯
- 消息历史
- 使用 TailwindCSS 开发友好的 UI 界面
- 消息时间戳
- 自动滚动到最新消息 —— 考虑的还挺全面的!
最后,它使用了 firebase 处理数据库和登录,而且需要自己替换 firebase 的配置
配置 firebase
Firebase 是 Google 的一个开发平台,包含很多基础能力和服务,国内可能不常用。
注册,登录。然后创建一个 project ,如下图
进入这个 project ,创建一个 app ,如下图。点击 Add app 后让你选择类型,选择 web 类型
在创建过程中会生成 firebase 配置,自己拷贝记录下来。
初次运行,报错
把刚才 firebase 的配置粘贴到 bolt.new 项目中,然后执行 npm run dev 运行项目。
结果运行出来的是空白页,而且 node 控制台有报错,这很明显是 vite 打包错误。我对比了一下自己本地 vite 创建的 React 项目,它这里少文件,如 index.html main.tsx 等。
为了方便编辑,我在 Stackblitz 中打开项目,加了三个文件,如下图,才运行起来。
Google 登录,又报错
点击页面中的 “Sign in with Google”按钮, 又报错了,这应该是 Google firebase 配置的问题
查看浏览器控制台,有更加详细的报错信息 Firebase: Error (auth/unauthorized-domain) ,域名和权限的问题。
后来参考这里解决了 stackoverflow.com/questions/4…
继续 Google 登录,继续报错
再次运行重试 Google 登录,继续报错 FirebaseError: Firebase: Error (auth/operation-not-allowed)
查资料,发现需要在 Login method 加一个 provider, 如下图
再运行就可以登录成功了,半路走来不容易。还没完。
发送消息,再报错
试着发送一个消息,控制台直接报错 Invalid time value ,这是一个很常见的错误,数据类型错误。
都走到这儿了,也不能放弃,手动改一改这个 bug 吧 —— 之前是给老板干活,未来是给老板和 AI 干活
再运行,终于可以发送信息了,不过从目前 UI 界面来看,并不是很 user-friendly ,超级简陋!
不过它确实是实时通讯的,虽然我只有一个账号。因为它用的是 firebase 的实时数据库,而且我浏览器也有实时的网路请求。
体验总结
AI 开发全栈项目,最大的障碍可能还是在服务端各种第三方服务上,现在只是初级的模式,让自己去配置,和本地开发一样,所以会遇到各种报错和障碍。
有人可能会说:对呀,这种第三方服务是独立的,AI 开发和个人开发都一样,都需要各种配置和授权。
看似一样,但还是有区别的。个人开发,我自己知道我要选择什么服务、知道要配置和授权,报错也是可预期的。但 AI 生成代码,都人工智能了,再连续报错,从体验角度来说,这是不好的。
所以,我觉得未来 AI 工具可能会集成(或套壳)第三方服务,不用你再去自己配置,我一个平台集成所有,权限什么的自动生成。
就像 Vercel 集成 AWS 云服务。或者像新出的 iOS 18 集成 ChatGPT ,你不用去自己注册 ChatGPT 账号(除非你想付费升级),iOS 会帮你处理好,你只负责用。
最后
记得 2024 年初我和别人讨论 AI 写代码,我说:AI 只会写个函数、组件、页面,这是远远不够的,这样它只能提高效率,也就是现在 Copilot 这种形式。提高效率是好事儿,但这不是 game changer ,因为写代码只是软件开发的一小部分。
现在再看 v0 或者 bolt.new 这种形式,就有点 game changer 的雏形了。因为它不仅可以写代码,还可以包含项目、工程、服务、部署、甚至未来自动扩展和运行,它已经把软件开发的生命周期涵盖了一大部分了。
更有意思的是,这一套流程是很容易商业化的,AI、云服务、数据库、存储等,这些都是需要付费的。一旦它们进化完善了,并且探索出合理的商业化道路,这就是真的 game changer
做一件事儿,最重要的是方向。快点也行,慢点也行,精致点也行,粗粗点也行,只要方向对了,怎么都行。
所以,虽然现在问题重重,道阻且长,但未来可期。