10分钟开发一款图片九宫格切割网站,不需要任何编程基础,有手就会写(保姆级教程)

开发者掘金 2024-12-24 15:00:16 浏览数 (299)
反馈

大家好,我是松鼠!

相信大家都有在自己的朋友圈里看到过或者是发过九宫格的美美的照片。

那么往常大家可能会使用PS工具或者其它软件进行切割,偶尔还有遇到一些切割网站还要看广告才能帮你生成,恼火。

640

为了干掉这样糟糕的体验,松鼠今天大家带来一款利用AI工具做一款九宫格图片切割工具网站,只要你有手,你也能10分钟做出来!

先给大家看看成品网站和效果

640 (1)


大家觉得效果如何?

好了,开始我们今天的教程。

首先先介绍下这次采用的主角“bolt

Bolt․new 是一个AI全栈Web 编程工具,自动编写代码、运行、编辑和部署应用程序。

Bolt․new依托于WebContainers 技术,支持在浏览器中直接运行完整的Node.js 环境,无需任何本地安装或配置。 

用户只需通过简单的提示命令,快速生成代码,并且立即在浏览器中运行和测试代码。

图片
01


注册账号

注册账号的流程非常简单,在这里就不做详细的介绍了,你可以使用邮箱或者咕歌进行登录。

640 (2)

图片
02


描述需求

在页面的输入框中,你可以用自然语言描述清楚自己的需求,比如今天要开发的需求是做一个九宫格切割生成工具,我们需要思考到,工具所需要的功能和使用场景。

例如你可以这样说“请帮我开发一款图片九宫格切割工具,具体的使用场景说用户可以在网站上传一张照片,你需要均等的切割为九宫格图片,并提供预览和一键下载功能

640 (3)


发送后,AI开始努力的为你写代码,左边是AI在干活,右边能看到AI 写的代码

640 (4)

没一会儿,你就能预览到你开发的网站了。

640 (5)

我们来测试下网站的功能是否可以用,先上传一张图片试试看。

效果非常的完美

640 (6)

点击一键下载,网站会把9张图压缩为一个压缩包,解压后就能获取九宫格的图片啦。

640 (7)

当然,如果你对页面不够满意,你还可以继续要求继续加功能。

在这边我就不再详细加功能了,做好后,如何让别人也能用上这个功能呢,那就要说到部署上线了。

图片
03


部署上线

部署上线有2种方式,一种方式是直接部署托管到云端,一种是下载源码部署在自己的服务器上。

因为为了更友好的照顾到我们的新手小白,就只简单演示部署托管在云端的方式

点击页面右上角的小火箭图标,如下图,点击后,AI会开始干活部署网站。

640 (8)

部署完成后,会给你一个URL网址。

640 (9)

通过这个网址,你就能在其它设备和浏览器访问刚刚做的这个网站啦,

是不是很简单也很酷,快去试试吧!

现在AI工具是越来越发达了,现在AI能做的事情还很多,你还可以举一反三,看看还能做出哪些有趣的产品?


0 人点赞