同时也是博客地址(访问需要保证网络通畅)
很久没更新教程了,因为最近用 AI 开发了一个博客,直到昨天才把 Bug 都给改的差不多了。所以现在就分享一下如何用 AI 搭建一个自己的网站。
现在有非常多好用的 AI 代码工具,包括 Cursor,windsurf,V0,Bolt。我这里简单介绍一下这些工具 Cursor 和 Windsurf :都是属于 AI 代码编辑器,在 Vscode 的基础上开发的,所以界面都和 Vscode 差不多。两者的区别就是 Cursor 可以上传图片和读网络链接,Windsurf 有更好的文件管理能力。但是介于 Cursor 免费额度太少,一次写不了太多代码,所以我还是选择了 Windsurf。
(听说Windsurf也支持图片上传了,不过在我用的时候还没发现)
cursor 下载:https://www.cursor.com/
windsurf 下载:https://codeium.com/windsurf/download
V0 :是一个专门写前端代码的 AI,你可以上传一张参考图让它直接复刻 地址:https://v0.dev/
Bolt :是一个直接可以创建项目的工具,只要一句话就很快帮你创建一个基础的项目
地址:https://bolt.new/~/bolt-astro-blog
但是我主要用的还是 Windsurf ,开发一个简单的博客系统还是问题不大的
虽然说 AI 非常的智能,你可以告诉 AI 你需要创建什么项目,它可以自动的帮你很快创建一个基础项目,但是有时候很难符合我们的预期,所以我们在创建项目前需要学习一些常规的开发的流程。
需求分析:你需要明确的知道自己要做什么,需要什么功能,有了需求我们才能更好的确定数据,接口等等
规划设计:这个阶段我们可以选择项目的技术栈,如果你不知道怎么选择可以让 AI 帮你分析,我的项目就是AI推荐用前端React+后端Nodejs+数据库Mongodb。此外我们还需要设计数据库,接口,UI 等等,但是当你需求明确时,这些也可以让 AI 帮你设计
开发阶段:我建议是用敏捷开发的模式,也就是先做出一个基础的框架,在框架上不断迭代实现自己想要的功能
测试阶段:其实在开发阶段的时候我就一直有做测试,因为博客项目比较简单,所以都是一些接口测试
部署上线:部署上线有很多种方案,我选择了成本最低的方案,就是前端部署在vercel,后端部署在 Render,数据库使用 MongoDB 的 Atlas 云端数据库(有免费 512M 的容量),阿里云 OSS(试用 3 个月)。这些都是有免费额度的
敏捷开发流程图
虽然博客项目是一个很简单的项目,但我还是踩了不少坑,因为刚开始我没有用常规的设计流程。
一开始我是先设计前端,因为用 AI 开发个前端网页效果非常快,可能一两个小时你就可以得到满意的效果。但是刚开始我对数据的需求不明确所以在前后端交互上是来来回回改,后面改的面目全非我就放弃了。
其实在你需求明确,数据明确的情况下,先设计前端也没问题,但是如果你不知道你需要什么数据,你最好先从数据库设计开始:
比如我的博客系统很简单,需要用户表,文章表,轮播图表,收藏文章表,标签表等,然后文章又有浏览量,标签,内容,封面图等等。我有个大概的数据需求,然后我再把这些需求告诉 AI,AI 会帮你生成更完善的数据模型。
有了数据库你就可以开始设计后端了,实现个博客系统的增删改查Windsurf 还是处理的非常好的,所以 API 这块很快就完成了,然后你需要测试一遍,你可以用专业的 apifox 测试工具测试,也可以让 AI 帮你用 curl命令 测试,接口测试成功后很重要的一点是让 AI 帮你生成 API 文档,这一步非常的重要,因为 AI 有个很大的缺点是过度修改,如果你不让它按 API 文档在前端请求数据,它就很有可能根据你前端的需求去修改后端的代码,这样前后端来来回回改几次就会越来越乱,所以让它按 API 文档请求是最好的方式
还有一点非常重要的是,你需要用 Git 仓库来备份你的代码,当你觉得你当前的代码满意时,你最好提交到 Github 留个历史版本,以防后面 AI 乱改代码但是你没有备份就很倒霉了
用 AI 写代码真的非常有意思,因为你一点代码都不会但是可以做出自己的项目还是比较有成就感的。如果你是会写代码的程序员,你对 AI 的掌控肯定更得心应手。在如今的 AI 时代,我们可以把更多的精力花费在创意,想法,需求上,而不是传统的把前后端的技术栈学习一遍,当然如果你是打算把写代码作为职业,我还是非常建议有个夯实的技术基础。不过在开发过程中虽然大家基本不用亲自修改代码,但是你还是可以学到非常完善的前后端开发到部署的过程,这点我觉得对于一个软件工程的初学者是非常受益的,因为在学校老师教的可能都非常的零零散散,你很难把所有的课程整合在一个项目里,但是通过 AI 开发你可以看到这些课程的联系。
在这篇文章中能讲述的非常有限,希望大家可以自己动手去体验去探索Windsurf的用法。
1
© CopyRight 2002-2024 ,CHINAZ.COM , Inc.All Rights Reserved.