AI+云环境开发上线项目全流程(sealos)

发布于:2024-11-29 ⋅ 阅读:(32) ⋅ 点赞:(0)

AI+云环境开发上线项目全流程

现在是AI技术爆炸💥的时代,我们作为开发自然需要跟上时代的潮流,今天就跟大家介绍一款云开发环境,并且搭配AI实现一行代码不用写,直接上线一个完整的项目(包含前后端)。

  • 本次的技术栈,前端采用Vue,后端采用NodeJs
  • AI工具选择使用Cursor
  • 云开发环境选择使用Devbox,地址:https://hzh.sealos.run/

环境准备

1 cursor下载(AI编程工具)

官网地址:https://www.cursor.com/

进入官网,根据自己操作系统版本下载就好了,因为我这里是mac,所以直接下载mac版本。下载下来之后是一个zip包,解压后,直接双击installer即可安装成功。
在这里插入图片描述

2 注册sealos账号(云开发环境)

官方介绍:https://sealos.run/

如果之前没有接触过sealos的同学,可以直接把sealos理解为一个云托管平台,你可以把你的代码、项目都上传上去,他可以帮你部署、管理、发布。

sealos默认是收费的,但是新用户默认送5块钱额度,实名之后会再送10元,对于我们做体验整个流程来说已经足够。

Devbox创建项目+通过Cursor编写代码

创建后端项目

后端我们使用NodeJS

1. 点击devbox,进入项目面板

在这里插入图片描述

2. 点击新建NodeJS项目

在这里插入图片描述
对应服务的配置以及暴露的端口可以自选:
在这里插入图片描述

3. 项目创建好之后,直接使用Cursor打开

需要有Cursor环境:

  • 官网地址:https://www.cursor.com/
    进入官网,根据自己操作系统版本下载就好了,因为我这里是mac,所以直接下载mac版本。下载下来之后是一个zip包,解压后,直接双击installer即可安装成功。
    在这里插入图片描述
    效果:
    在这里插入图片描述
4. devbox上新建数据库

我们项目是前后端分离,需要使用数据库。

  • 回到devbox主页,点击数据库
    在这里插入图片描述
  • 点击新建数据库,选择我们需要的数据库版本及对应配置
    在这里插入图片描述
  • 点击部署,等待创建即可
    在这里插入图片描述

编写后端代码

Cursor支持很多大模型,我们可以直接选择其中一个,配合我们的提示词,完成项目的开发。

  • 通过command+i/ ctrl +i,打开对话框:
    在这里插入图片描述
  • 也可以直接点击右上角按钮,打开对话框:
    在这里插入图片描述
  • 点击对话框底部按钮,可切换大模型
    在这里插入图片描述
1 修改prompt提示词

提示词文档地址:https://square-raver-97d.notion.site/cursor-12f9f3b8b57980fbbb52f5106d3a6a00

注意:
1. 下面数据库的配置需要改成自己的devbox数据库的配置,或者自己后面手动修改配置文件也行。

  • 进入Sealos主页,点击数据库在这里插入图片描述
  • 复制数据库的连接信息
    在这里插入图片描述
    2. 下面服务运行的端口,改为你自己的NodeJS项目对外暴露的端口(我是暴露的3000)

提示词:

请为我开发一个基于 Node.js 和Express 框架的 Todo List 后端项目。项目需要实现以下四个 RESTful API 接口:

1. 查询所有待办事项
    - 接口名: GET /api/get-todo
    - 功能: 从数据库的'list'集合中查询并返回所有待办事项
    - 参数:- 返回: 包含所有待办事项的数组
2. 添加新的待办事项
    - 接口名: POST /api/add-todo
    - 功能:'list'集合中添加新的待办事项
    - 参数:
    {
    "value": string, // 待办事项的具体内容
    "isCompleted": boolean // 是否完成,默认为 false
    }
    - 返回: 新添加的待办事项对象,包含自动生成的唯一 id
3. 更新待办事项状态
    - 接口名: POST /api/update-todo/
    - 功能: 根据 id 更新指定待办事项的完成状态(将 isCompleted 值取反)
    - 参数: id
    - 返回: 更新后的待办事项对象
4. 删除待办事项
    - 接口名: POST /api/del-todo/
    - 功能: 根据 id 删除指定的待办事项
    - 参数: id
    - 返回: 删除操作的结果状态

技术要求:

1. 使用 Express 框架构建 API
2. 使用 MongoDB 作为数据库,通过 Mongoose 进行数据操作
3. 实现适当的错误处理和输入验证
4. 使用异步/等待(async/await)语法处理异步操作
5. 遵循 RESTful API 设计原则
6. 添加基本的日志记录功能

### 这里数据库连接方式要填写!!!(连接方式需要去sealos数据库模块获取,详情见上文)

以下是数据库连接方式:

1. 直接以当前目录作为项目根目。注意 此目录已经初始化完了nodejs项目 直接修改即可
2. 如果需要执行命令,请暂停创建文件,让我先执行命令

为这个项目中的所有代码写上详细注释
2 将提示词喂给ai

复制提示词到对话框:
在这里插入图片描述
查看效果:

  • 运行完之后,我们点击Accept,接受它的代码
    在这里插入图片描述
  • 可以看到已经创建出了对应目录及文件
    在这里插入图片描述
3 运行后端项目
// 初始化项目
npm init -y
//更改镜像源
npm config set registry https://registry.npmmirror.com
//安装依赖
npm install express mongoose morgan cors
// 启动项目
node app.js

成功运行项目:
在这里插入图片描述

4. 让AI编写用例,我们来调试后端接口

①点击详情,查看服务对外暴露网址
在这里插入图片描述
在这里插入图片描述
②编写对应prompt提示词

下面地址改为自己的服务对外暴露地址即可

提示词:

这是我项目的根地址@https://xxxx.xxx.site/ ,请帮我用curl生成这四个接口的测试用例以及接口成功和不成功的返回值,

在这里插入图片描述

接口设计的测试用例及返回值,我们可以新建一个文本保留起来,用于后面前后端联调。
在这里插入图片描述

AI生成的对应curl命令:

# 1 添加代办
curl -X POST 'https://dlfjkrgwvokp.sealoshzh.site/api/add-todo' \
-H 'Content-Type: application/json' \
-d '{
  "value": "学习编程",
  "isCompleted": false
}'

# 2 获取所有代办
curl -X GET 'https://dlfjkrgwvokp.sealoshzh.site/api/get-todo'

# 3 更新代办(接口后面跟的id需要换成开始添加代办接口时返回的id)
curl -X POST 'https://dlfjkrgwvokp.sealoshzh.site/api/update-todo/67431e1bdedb455f439133f6'

# 4 删除代办
curl -X POST 'https://dlfjkrgwvokp.sealoshzh.site/api/del-todo/67431e1bdedb455f439133f6'

在这里插入图片描述

5 修改启动脚本

在这里插入图片描述

创建前端项目

前端我们使用Vue

1. 点击devbox,进入项目面板

Sealos面板 - devbox - 进入项目面板

2. 新建Vue项目

点击新建Vue项目

  • 暴露端口与后端端口一致即可,我这里填写3000。
    在这里插入图片描述
3. Cursor打开创建好的项目

用Cursor打开创建好的前端项目

  • 注意:之前用Cursor打开的后端项目不要关闭(后续需要联调)。
    在这里插入图片描述

编写前端代码

1 复制prompt提示词给AI

提示词:

提示词文档地址:https://square-raver-97d.notion.site/cursor-12f9f3b8b57980fbbb52f5106d3a6a00

请为我开发一个基于 Vue 3 的Todo List 应用。要求如下:

1. 功能需求:
    - 添加新的待办事项
    - 标记待办事项为完成/未完成
    - 删除待办事项
    - 统计待办事项完成度
    - 过滤显示(全部/已完成/未完成)
2. UI/UX 设计要求:
    - 全屏响应式设计,适配不同设备
    - 拥有亮色模式和夜间模式
    - 现代化、简洁的界面风格
    - 丰富的色彩运用,但保持整体和谐
    - 流畅的交互动画,提升用户体验
    - 在按钮和需要的地方添加上图标
    - 参考灵感:结合苹果官网的设计美学

要求:

1. 直接以当前目录作为项目根目。注意 此目录已经初始化完了vue3项目结构 直接修改即可
2. 如果需要执行命令,请暂停创建文件,让我先执行命令
3. 请你根据我的需要,一步一步思考,给我开发这个项目。特别是UI部分 一定要足够美观和现代化
2 command+i打开对话框,将提示词喂给AI

执行过程中,可能需要我们手动安装依赖
在这里插入图片描述

# 修改镜像源
npm config set registry https://registry.npmmirror.com
# 安装依赖
npm install @vueuse/core @heroicons/vue tailwindcss postcss autoprefixer
3 运行前端项目
  • 鼠标右键 - 打开终端:
    在这里插入图片描述
  • 执行npm run dev 运行前端项目
    在这里插入图片描述

效果:
在这里插入图片描述

4. 修改启动脚本
  1. 修改entrypoint
    在这里插入图片描述
  2. 修改package.json
    在这里插入图片描述

前后端对接

1. 修改前端JS代码,向后端发请求

现在我们已经写好了前后端代码,剩下的就是调整前端代码进行联调了。复制我们开始让Cursor给我们写好的测试用例到对话框。

# 提示词+开始我们复制好的后端接口测试用例
下面是关于这个todolist的四个接口,我已经写清楚接口信息,请你完成接口的对接工作:

在这里插入图片描述
点击Accept All接受所有。

2. 查看效果

查看前端公网地址,在浏览器中输入地址进行访问:
在这里插入图片描述
在这里插入图片描述

部署项目

发布后端

  1. 进入后端项目,点击详情
    在这里插入图片描述
  2. 点击发版
    在这里插入图片描述
  3. 填写发版内容,点击发布
    在这里插入图片描述

上线后端

  1. 发版成功后,会有对应后端版本,点击上线
    在这里插入图片描述
  2. 修改上线配置,点击部署应用
    在这里插入图片描述
  3. 状态为running,代表上线成功
    在这里插入图片描述

发布前端

  1. 获取后端接口URL并更新

在这里插入图片描述

  • 更新URL
    在这里插入图片描述
  1. 重新运行前端,执行npm run dev运行项目,观察能否调通
    在这里插入图片描述
    在这里插入图片描述

  2. 点击发布版本
    在这里插入图片描述

  3. 编写版本信息
    在这里插入图片描述

  4. 点击发版

  • 出现提示,我们直接确认
    在这里插入图片描述
  • 发版过程中,机器会重启,cursor会与远程服务断开连接,我们这里直接点击cancel
    在这里插入图片描述

上线前端

  • 发布成功后,会出现对应版本的镜像,我们点击上线即可
    在这里插入图片描述
  • 修改上线配置
    在这里插入图片描述
  • 点击部署应用,等待上线
  • 状态为running,代表上线成功在这里插入图片描述

最终效果

  1. 查看应用管理
    在这里插入图片描述
    在这里插入图片描述

  2. 获取前端上线后的链接
    在这里插入图片描述

  3. 查看效果,进行测试
    在这里插入图片描述

参考文档:

  • https://square-raver-97d.notion.site/cursor-12f9f3b8b57980fbbb52f5106d3a6a00
  • https://segmentfault.com/a/1190000045349478