用 SOLO 模式 30 分钟搞定 智能点名系统 | 围巾哥萧尘🧣

用 SOLO 模式 30 分钟搞定 智能点名系统 | 围巾哥萧尘🧣

摘要: 本文将详细介绍如何从零开始,利用TRAE AI辅助开发一个功能丰富的智能点名系统。该系统支持名单导入、正序与乱序点名、名单高亮切换、滚动速度调节等功能,并已成功部署上线。我们将分享整个开发流程,包括初始构想、提示词工程、功能迭代、问题调试及最终部署。

关键词: 智能点名系统;TRAE AI开发;提示词工程;功能迭代;在线部署

1、系统概述与功能展示

大家好,我是围巾哥萧尘,今天(2025年9月2日上午10点半)我们将演示并讲解一个智能点名系统的开发过程。该系统旨在提供一个便捷、高效的点名解决方案,其主要界面分为功能区和赞赏区。

核心功能包括:

  • 名单导入: 支持CSV模板下载后修改导入,后期还增加了Excel导入功能。

  • 点名模式:

    • 正序点名: 快速按顺序显示名字,无需等待。
    • 乱序点名: 带有名字晃动和礼花效果,模拟随机抽选,增加趣味性。
  • 界面效果: 点名时名字字体高亮,有切换效果,风格有趣,支持滚动调节速度,字体大小可调。

  • 在线部署: 系统已部署上线,用户可通过名为**call-name-web.vercel.app/**的网站进行使用。

2. 开发流程:从构想到实现**

整个开发流程涵盖了从构思、功能增加、Bug修改到最终上传和部署的完整链条。

2.1 初始需求与提示词工程

在开发初期,我们通过精确的提示词(Prompt)向TRAE AI描述了我们想要构建的系统。

对应的提示词: ""帮我制作一个点名交互html网页,点名的名字字体高亮,要有切换效果,风格有趣,不要太简洁,有滚轮调节速度,字体要大。还要支持导入学生名单""

AI基于此提示词,快速生成了需求文档和技术开发文档,并完成了初步的页面开发。

2.2 功能迭代与优化

尽管AI快速生成了初始版本,但为了更好地满足用户需求和提升体验,我们进行了一系列的功能调整和增强。

  • 优化名字显示: 初始点名时只显示序号,无法显示名字,经过调试后成功显示出学生名字。
  • 调整页面布局: 将原先的上下布局调整为两端居中布局,使界面更美观。
  • 新增快速正序点名: 增加了无需等待即可快速显示名字的正序点名功能。
  • 提供Excel等导入模板: 为了方便老师修改学生名单,系统提供了可下载的导入模板,初版未包含此功能,后续通过手动添加完成了Excel导入功能。
  • 增加二维码赞赏功能: 为了支持开发者,系统增加了赞赏功能,在相应位置增加了二维码,方便用户支持。

2.3 问题调试

在开发过程中,我们对多个地方进行了调试。例如,点名名字的显示问题(从序号到名字)和页面布局的调整(从上下布局到两端居中布局)都是通过多次调试完成的。

2.4 部署与上线

开发完成后,我们将代码上传并进行了在线部署,主要分为三个阶段:

2.4.1. 本地开发完成: http://localhost:8001/,确保所有功能在本地运行正常。

2.4.2. 代码推送到仓库:

使用Git智能体大佬(我用 TRAE 做了一个有意思的Agent 「Git 智能体大佬」。 点击 s.trae.ai/a/439728 )将代码推送到云端代码仓库。

初期没有提供远端地址,我们手动指定了一个远端地址,从而完成了代码的上传,构建了远程仓库。

GitHub地址:<github.com/xiaoweiruby...

已公开,用于云端代码仓库管理。

2.4.3. 云端部署: 完成了云端部署,使得其他同学也能使用。部署的网站名为call-name-web.vercel.app,

大家可以使用该网站进行点名。

3. 总结

这个智能点名系统的开发过程展示了TRAE AI辅助开发的高效性,同时也强调了人工迭代和优化的重要性。通过精确的提示词工程、持续的功能增强、Bug修复以及规范的部署流程,我们成功构建了一个实用且用户友好的点名系统。

如果您觉得这个系统好用,请务必支持开发者,这将鼓励更多开发者创造出更多优秀的作品。大家可以尝试使用,也可以参考本教程自行开发点名系统。

相关推荐
用户4099322502124 天前
PostgreSQL 17安装总翻车?Windows/macOS/Linux避坑指南帮你搞定?
后端·ai编程·trae
用户4099322502125 天前
能当关系型数据库还能玩对象特性,能拆复杂查询还能自动管库存,PostgreSQL 凭什么这么香?
后端·ai编程·trae
豆包MarsCode6 天前
基于 TRAE 的自动化测试用例智能生成方案
trae
岛风风6 天前
你还在让ai这样解决编程问题?
程序员·trae
用户4099322502126 天前
给接口加新字段又不搞崩老客户端?FastAPI的多版本API靠哪三招实现?
后端·ai编程·trae
程序员爱钓鱼7 天前
Go语言100个实战案例-项目实战篇:股票行情数据爬虫
后端·go·trae
用户4099322502128 天前
FastAPI秒杀库存总变负数?Redis分布式锁能帮你守住底线吗
后端·ai编程·trae
豆包MarsCode8 天前
AI 工具站开发:3 小时 SOLO,全栈开发+自动部署
trae
用户4099322502129 天前
FastAPI的CI流水线怎么自动测端点,还能让Allure报告美到犯规?
后端·ai编程·trae
豆包MarsCode9 天前
效率提升 45%!TRAE 辅助下的 uni-app 跨端小程序工程化开发实践
trae