campus-study-helper-agent:基于 AtomGit 智能体开发的校园学习计划助手 - AtomGit

一键开通华为云码道 CodeArts 代码智能体：

Developer Events_Developer Alliance-Huawei Cloud

对于刚开始接触编程的大学生来说，真正动手开发一个网页项目时，除了编写代码本身，还经常需要面对开发环境配置、项目文件创建、代码调试等问题。

如果只是想完成一个简单的网页，这些准备工作有时反而会成为开始项目的第一道门槛。

最近我尝试使用 AtomGit 智能体 完成一个简单的前端项目——校园学习计划助手。

这次实践没有从一开始就逐行编写代码，而是先使用自然语言描述项目需求，再让智能体根据需求完成项目文件和功能实现，最后通过实际运行和功能测试检查项目效果。

AtomGit 官方文档显示，平台提供代码托管、项目管理、在线编辑等能力；同时，AtomGit 的 WebIDE 可以直接在浏览器环境中进行开发，不必提前配置完整的本地开发环境。

这篇文章就记录一下这次从“提出需求”到“完成一个可以

一、项目介绍

这次准备开发的项目叫做：

校园学习计划助手

这是一个面向大学生的轻量化学习任务管理网页。

在日常学习过程中，我们经常需要同时处理课程作业、英语学习、考试复习、实验报告等任务。如果只是依靠纸笔或者聊天软件记录，后续查看和管理并不是特别方便。

因此，这次尝试做一个简单的网页，让用户可以直接在页面上记录当天的学习任务。

项目主要实现以下功能：

• 添加学习任务
• 使用 Enter 键快速添加任务
• 勾选任务表示完成
• 取消勾选任务
• 删除学习任务
• 自动统计任务总数
• 自动统计已完成任务数量

项目使用的技术比较基础：

HTML5
CSS3
JavaScript

不使用 Vue、React 等前端框架，也不需要数据库和后端服务。

─ index.html ├── style.css ├── script.js └── README.md

二、为什么选择使用 AtomGit 智能体？

以前做网页项目时，通常是先创建 HTML 文件，然后再编写 CSS，最后使用 JavaScript 实现交互。

这种方式当然可以完成项目，但对于刚开始学习编程的学生来说，需要同时考虑页面结构、样式和程序逻辑。

这次我想尝试一种不同的方式：

先描述需求，再让 AI 辅助完成代码。

AtomGit 是一个集代码托管、协同研发和项目管理等功能于一体的平台，官方文档也提供了项目创建、代码管理、在线编辑和提交等相关功能说明。

因此，这次项目的开发思路变成：

明确项目需求
      ↓
创建 AtomGit 项目
      ↓
向智能体描述需求
      ↓
智能体生成项目代码
      ↓
检查项目文件
      ↓
运行网页
      ↓
测试功能
      ↓
修改和完善
      ↓
提交项目

这种方式也让我更关注一个问题：

如果不先写代码，而是直接把需求告诉 AI，它能不能帮助我完成一个真正可以运行的小项目？

三、创建项目

首先进入 AtomGit 平台，登录自己的账号。

在平台中创建新的项目，并建立代码仓库。

本次项目名称设置为：

campus-study-helper-agent

项目简介设置为：

基于 AtomGit 智能体开发的校园学习计划助手

AtomGit 官方快速入门文档显示，创建项目时可以选择不同类型的仓库，其中代码仓主要用于存储和管理项目源代码、脚本文件以及相关开发资源。公开项目则可以供其他用户访问，因此如果项目设置为公开，需要注意不要提交账号密码、API Key 等敏感信息。

项目创建完成后，就可以进入后续的智能体开发环节。

四、直接用自然语言描述项目需求

创建项目之后，我没有马上开始逐个编写代码，而是打开 AtomGit 的智能体对话界面。

这一步是整个项目比较有意思的地方。

我的想法是，不直接告诉智能体“帮我写一个 HTML 文件”，而是把项目的目标、功能、技术要求和最终文件结构一次性描述清楚。

例如，我给智能体提出了这样的需求：

请帮我开发一个完整的校园学习计划助手网页项目。

这是一个面向大学生的轻量化学习任务管理网页，
主要用于记录每天需要完成的学习任务。

请使用：
1. HTML5
2. CSS3
3. 原生 JavaScript

实现以下功能：

1. 添加学习任务
2. Enter 键快速添加任务
3. 勾选任务表示完成
4. 取消勾选任务
5. 删除任务
6. 自动统计任务总数量
7. 自动统计已完成数量

页面需要包括：

📚 校园学习计划助手

制定学习计划，记录每天的学习任务

以及任务输入框、添加按钮、任务列表和统计信息。

最终创建：

index.html
style.css
script.js
README.md

除了功能要求，我还对页面的视觉效果进行了简单描述，例如使用白色卡片、圆角、阴影以及蓝色按钮，让最终页面看起来更加清晰。

这里我比较明显的一个感受是：需求描述的完整程度会直接影响后续生成结果。

如果只说：

“帮我做一个学习计划网页。”

智能体能够理解大致方向，但具体功能和页面结构仍然比较模糊。

而把功能、技术栈、文件结构和界面要求一起说清楚之后，得到的结果会更加接近自己的预期。

五、智能体开始生成项目

提交需求之后，智能体开始根据描述进行项目开发。

这时候我没有立即去修改代码，而是先让它完成第一轮工作。

项目最终主要包含四个文件：

index.html
style.css
script.js
README.md

不同文件承担不同的任务。

1. index.html

负责网页的基本结构。

主要包括：

• 页面标题
• 学习任务输入框
• 添加任务按钮
• 任务数量统计
• 任务列表

2. style.css

负责页面的视觉效果。

例如：

• 页面整体布局
• 白色卡片
• 圆角
• 阴影
• 输入框
• 按钮
• 任务列表
• 完成状态

3. script.js

负责网页的交互逻辑。

主要实现：

• 添加任务
• Enter 添加任务
• 删除任务
• 完成任务
• 取消完成
• 任务数量统计

4. README.md

用于介绍项目。

包括：

• 项目简介
• 主要功能
• 技术栈
• 项目结构
• 文件说明
• 使用方法

从这一步开始，一个原本只有需求描述的项目就逐渐变成了一个具有完整文件结构的前端项目。

六、检查智能体生成的代码

代码生成完成之后，我没有直接认为项目一定没有问题，而是进一步让智能体检查刚才生成的内容。

我让它重点检查：

1. index.html 是否正确引用 style.css
2. index.html 是否正确引用 script.js
3. 添加任务是否正常
4. Enter 键添加是否正常
5. 勾选任务是否能够更新数量
6. 取消勾选是否能够更新数量
7. 删除任务是否能够更新数量
8. JavaScript 是否存在明显错误
9. 页面布局是否存在明显问题

这一步的目的并不是完全依赖 AI 判断项目是否正确，而是先利用智能体进行一次代码检查，然后再通过实际运行进行验证。

在这次实际对话中，智能体最终反馈项目文件保持最终交付状态，并表示相关功能已经完成复验。

七、查看最终项目结构

检查完成后，可以回到项目中查看最终的文件结构。

最终项目结构如下：

campus-study-helper-agent
├── index.html
├── style.css
├── script.js
└── README.md

这种结构比较简单。

其中：

index.html

负责页面结构；

style.css

负责页面样式；

script.js

负责交互逻辑；

README.md

负责项目说明。

AtomGit 支持直接在浏览器中查看和编辑项目文件，并通过提交记录保存代码修改历史。

八、打开网页查看实际效果

代码生成完成之后，下一步就是实际运行。

这一步非常重要。

因为 AI 生成代码并不意味着代码一定符合自己的要求，最终还是需要通过实际页面进行验证。

这次项目属于比较简单的静态网页，因此主要检查：

• 页面是否能够正常打开；
• CSS 是否正常加载；
• JavaScript 是否正常执行；
• 页面布局是否正常；
• 各个按钮是否能够使用。

打开 index.html 后，可以看到校园学习计划助手的页面。

页面顶部显示：

📚 校园学习计划助手

下面显示：

制定学习计划，记录每天的学习任务

中间是学习任务输入框和“添加任务”按钮。

下面则是任务数量统计以及任务列表。

整体采用白色卡片式布局，页面背景使用浅灰色，界面比较简洁。

九、实际测试添加任务功能

为了验证网页不是只有一个静态界面，我进行了实际操作。

首先在输入框中输入：

完成高数作业

点击“添加任务”。

任务成功出现在下方列表中。

然后继续添加：

完成计算机作业

以及：

进行一小时运动

此时页面上的任务统计会更新为：

今日任务：3
已完成：0

这说明添加任务和任务总数量统计能够正常工作。

十、测试任务完成功能

接下来测试任务完成功能。

在任务前面的复选框中进行勾选。

例如勾选：

完成高数作业

页面中的任务文字会显示完成状态，同时：

已完成：1

继续勾选：

完成计算机作业

此时：

今日任务：3
已完成：2

已经完成的任务会增加删除线，从视觉上区分已经完成和还没有完成的任务。

如果取消复选框，已完成数量也会相应减少。

十一、测试删除任务功能

除了添加和完成任务之外，还需要测试删除功能。

每个任务右侧都有一个：

删除

按钮。

点击对应任务的删除按钮之后，该任务会从列表中消失。

同时任务总数量也会自动更新。

例如原本：

今日任务：3
已完成：2

删除一个任务之后：

今日任务：2

如果删除的是已经完成的任务，已完成数量也会同步变化。

这样，添加、完成、取消完成和删除这几个基本操作就形成了一个完整的任务管理流程。

十二、测试 Enter 快速添加

除了点击“添加任务”按钮之外，这次项目还加入了 Enter 快速添加功能。

也就是说，在输入框中输入任务后，可以直接按下：

Enter

任务就会自动加入列表。

对于这种需要频繁输入任务的小工具来说，这个功能虽然比较简单，但实际使用时会更加方便。

---

十三、提交项目代码

完成测试之后，将最终代码提交到 AtomGit 项目中。

本次项目的提交信息可以设置为：

基于AtomGit智能体完成校园学习计划助手开发

AtomGit 官方文档将 Commit 作为记录代码修改和管理版本历史的基本方式，项目中可以查看提交历史，从而了解代码的修改过程。

十四、整个开发过程回顾

把这次项目从头到尾整理一下，可以得到下面的流程：

提出项目想法
      ↓
明确功能需求
      ↓
创建 AtomGit 项目
      ↓
进入 AtomGit 智能体
      ↓
使用自然语言描述需求
      ↓
智能体生成项目代码
      ↓
智能体检查项目
      ↓
查看项目文件结构
      ↓
运行网页
      ↓
人工测试功能
      ↓
提交最终代码

相比于传统的逐个创建文件、逐行编写代码，这种方式最大的变化是：

开发者首先需要解决的是“我想做什么”，然后再解决“具体怎么实现”。

---

十五、这次使用 AtomGit 智能体的一些体会

这次项目本身并不复杂，所以它并不能代表 AI 能够独立完成所有类型的软件开发。

但对于这种规模较小的前端实践项目，智能体确实能够在代码编写过程中提供比较直接的帮助。

1. 对初学者比较友好

如果刚开始学习前端，对 HTML、CSS 和 JavaScript 的语法还不熟悉，那么直接从零创建完整项目会有一定难度。

通过自然语言描述需求，可以先让 AI 帮助搭建一个基本版本，再通过查看和修改代码逐渐理解项目结构。

---

2. 需求描述仍然很重要

使用 AI 并不意味着只需要说一句：

“帮我做一个网页。”

就可以得到完全符合要求的结果。

实际上，项目需求描述得越清楚，最终结果越容易接近自己的预期。

例如：

项目做什么？
有哪些功能？
需要哪些文件？
使用什么技术？
页面是什么风格？
哪些功能必须实现？

这些内容最好提前考虑清楚。

所以我认为：

AI 编程并没有让需求分析变得不重要，反而让需求表达变得更加重要。

---

3. AI 生成代码之后仍然需要人工验证

这是这次实践中比较重要的一点。

不能因为智能体说：

“代码已经完成。”

就直接认为项目没有问题。

实际开发过程中仍然需要自己打开网页，然后测试：

添加是否正常？
删除是否正常？
完成是否正常？
统计是否正常？
页面显示是否正常？

只有实际运行之后，才能知道最终效果是否符合自己的需求。

因此比较合理的方式应该是：

人提出需求
     ↓
AI辅助开发
     ↓
人检查结果
     ↓
实际运行测试
     ↓
发现问题
     ↓
AI辅助修改
     ↓
再次测试

十六、项目最终效果

经过需求描述、智能体开发和实际测试之后，校园学习计划助手最终实现了以下功能：

功能	实现情况
添加学习任务	✅
Enter 快速添加	✅
勾选完成任务	✅
取消完成	✅
删除任务	✅
统计任务总数	✅
统计已完成数量	✅
简洁网页界面	✅

最终项目结构为：

campus-study-helper-agent
├── index.html
├── style.css
├── script.js
└── README.md

整个项目没有使用复杂的前端框架，而是基于 HTML、CSS 和 JavaScript 实现。

---

十七、总结

这次使用 AtomGit 智能体完成校园学习计划助手，让我比较直观地体验了一次 AI 辅助开发的完整流程。

从最开始的一个想法：

“我想做一个可以管理学习任务的网页。”

到最后真正得到：

一个完整的项目结构
        ↓
HTML 页面
        ↓
CSS 样式
        ↓
JavaScript 交互
        ↓
功能测试
        ↓
AtomGit 代码仓库

整个过程让我感受到，AI 编程工具真正改变的并不只是“写代码的速度”。

更明显的变化是：

开发者可以先把自己的想法和需求用自然语言表达出来，再借助 AI 完成具体的代码实现。

但与此同时，AI 并不能代替开发者完成所有工作。

需求是否合理、代码是否符合预期、页面能否正常运行，都仍然需要开发者自己判断和验证。

所以对于学生开发者而言，我认为比较合适的方式不是：

完全依赖 AI 写代码。

而是：

让 AI 成为开发过程中的辅助工具，自己负责需求、判断、测试和最终结果。

这次的“校园学习计划助手”只是一个很小的实践项目，但也让我对 AtomGit 智能体辅助开发有了一次比较完整的体验。

如果后续继续完善这个项目，还可以考虑加入本地数据保存、任务分类、截止日期、优先级以及学习进度统计等功能，让它从一个简单的练习项目逐渐变成更加完整的学习管理工具。