前面讲了两期AI开发网页软件的基础篇,今天开始进入课程的深水区,讲讲用AI开发真正意义上的软件“在线记账系统” tools.gushiio.com/jizhang/ 。这个记账软件是多用户版的,支持用户注册和登录,不但你自己使用,你也可以分享给其他用户一起使用。并且我还用AI给这个记账系统做了一个管理后台,所以这是一个十分完整的软件系统。本期视频会分享如何使用AI来开发这种完整小系统的技巧。
好,现在开始分享我是如何用AI开发这个在线记账系统的。
如何用AI同时写多个界面代码
虽然上一个视频教大家如何写网站界面描述的提示词来开发界面,但现在是开发整个软件系统,系统里有多个不同的界面,那应该如何用AI来做呢?如果是以前我,会先用原型设计软件或Photoshop做好了所有界面的效果图,再发给前端工程师让他们来写界面,现在,我是用原型设计软件把界面画好,再生成图片,然后发给AI来写界面代码。但是我发现AI在读取我上传的第二张图片开始,识别能力就大幅下降,所以AI对上传的第一张图片识别能力是最强的,那如何利用好第一张图片才是关键。
那如何解决这问题呢?经过我多次的测试,我最后是把所有系统用到的页面都放在同一张图片上面,大家可以看看我这张图片,这个页面只有一个头部和底部,但是中间包括了所有记账软件需要的软件界面,包括记账软件的主界面,注册和登录页面,我连点击“记一笔”按钮弹出来的记账页面都放在上面(就是这个)。看到这张图片可能有不少网友以为,这是我用原型软件或photoshop来做的,其实这个界面都是我通过用文字描述界面布局,用AI生成的,然后我在把所有界面都一一截图,用Photoshop把它们都拼到一张图片上的。但是这个界面还不够美观,我再把这个拼合好的界面图发给AI帮我美化,就有了这个美化后的界面,是不是界面更加精美,我还增加了这个成功失败信息提示框样式,而且还增加了编辑账单的样式(就是系统这个效果),不过这张界面图片也是我把AI生成的界面图一一截图,再拼合在一起的,并不是用AI图生图生成出来的。
为什么要这样做呢?因为AI图生图会生成出很多错误的内容在上面,所以软件界面图生图是不可行的,目前的AI只能图生代码。现在你可以尝试一下,全用文字描述让AI来生成界面,不过这个对你在软件布局的文字描述能力要求会比较高。所以你也可以直接用原型设计软件画个简单的界面效果图,然后点这里生成图片发给AI来做,这样能降低不少难度,而且界面不需要做得很精美,只要画清楚界面有哪些内容就可以了,AI可以帮你去美化。当然还有一个更省事的方法,就是直接看那个软件的界面跟你需要的差不多,直接截图再拼合成一张图片发给AI来做。
还有我这个后台,我也是把后台所用到的界面都拼合成一张图片让AI来开发。你看我连弹出框效果都发给AI,这样可能省略不少文字描述和提示词。当然你也可以用原型设计软件来画好这个后台的所有栏目,然后发给AI也可以。
如何让AI开发软件和后台
因为这个在线记账系统是用mysql数据库开发的,我把这个记账软件有哪些功能都发给AI,并告诉它用php7.4+mysql5.7版本的数据库开发,这里php是开发语言,后面mysql是数据库,这是根据你配置服务器时安装了那个版本的开发语言和数据库版本来定的。如果你不清楚如何配置服务器和如何看这个软件版本,可以先看看这个视频。为什么要告诉AI开发语言和数据库版本呢?因为不同版本的开发语言和不同版本的数据库,它们所用的代码会略有不同,如果不告诉AI,AI会按照最新的开发语言和数据库版本来提供代码,这样很容易导致你使用AI提供的代码后出现报错的情况。当你告诉了AI用对应版本的数据库来开发后,AI会提供数据库表的创建代码给你,这个你可以看看这个视频,会教你如何使用AI提供的数据库表代码,还有AI提供的其他页面代码如何复制粘贴到服务器上。
经过几轮修bug后,现在AI已经做好了记账软件,里面的所有功能都能正常使用。这时我们需要给记账软件开发一个后台,这个后台应该如何开发呢?
首先我们刚刚开发的记账软件属于前端,后台管理属于后端,它们两个是没有直接联系的,它们都是通过数据库来实现关联的,所以前端和后台是可以分开来独立开发的。我们在开发后台时,不需要再提供前端的代码给AI,只需要提供AI生成的数据表代码给AI,然后写上后台的功能需求即可,AI会通过数据表代码知道你这个记账软件后台需要显示的内容或管理的内容在数据表哪里可以获取,最后开发出能管理记账系统的后台出来。后台的界面你可以用原型设计软件画出来,然后导出成图片,把图片发给AI来写界面就可以了。
又经过几轮修bug后,这个记账软件的前端和后台大致已经做出来了,后续你可以根据你的需求让AI修改和升级功能,这样一个属于你的记账系统就完成了。这个在线记账软件我全程都是用复制粘贴代码来完成的,我自己并没有敲过一行代码,如果页面有bug我都是直接一整版代码发给AI去修改,然后让AI把修改后完整的代码给我。AI让我第一次感受到软件开发的快乐,希望你也可以通过AI开发软件来感受这份快乐。如果你需要这个记账软件的界面图片和提示词,可以在视频下方留言领取,你也可以通过鼓狮工具箱首页,这里免费资料下载,这个页面进行下载。
下期视频是分享我如何只用复制粘贴来开发原型设计软件这种复杂的软件系统,敬请期待。