一键开通华为云码道 CodeArts 代码智能体 https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwatomgit1sourceaddmzntgwatomgithd一、项目背景在前面的实践中我使用 AtomGit 智能体依次尝试开发了随机抽签工具、可视化决策系统和学习任务管理系统。这些项目分别围绕随机选择、方案比较和任务执行展开逐步探索了利用 AI 智能体完成小型 Web 应用开发的方法。不过任务管理系统主要关注任务是否完成对于学习过程本身的分析还不够充分。例如一周内完成了多少任务不同学习类别的任务占比如何每天的任务完成情况是否存在差异这些问题仅仅查看任务列表很难直观地回答。因此本次实践进一步尝试开发一个“学习效率分析系统”通过图表和统计卡片展示学习数据帮助用户了解自己的任务完成情况。与上一篇学习任务管理系统不同本项目重点放在数据汇总、分类统计和图形展示上而不是重复实现任务新增、编辑和删除等功能。为了降低开发难度本项目仍然采用原生 HTML、CSS 和 JavaScript 实现不需要数据库和后端接口适合通过 AtomGit 智能体进行快速开发与验证。二、项目需求分析2.1 项目目标本项目旨在开发一个轻量级的学习数据分析网页将用户录入的学习记录转化为直观的统计信息和图形展示。用户可以添加学习记录记录学习日期、学习类别、学习时长和完成状态。系统根据这些数据自动汇总并通过图表展示不同维度的学习情况。本项目不追求复杂的数据挖掘或人工智能预测而是优先完成基础统计与可视化让用户能够清楚了解数据来源和计算过程。2.2 核心功能设计功能模块具体说明学习记录录入添加日期、学习类别、学习时长和完成状态数据统计统计学习记录数量、累计时长和已完成记录数分类分析展示不同学习类别对应的时长分布每日分析展示不同日期的学习时长变化状态分析对比已完成和未完成的学习记录数据筛选支持按日期范围和学习类别筛选数据保存使用浏览器本地存储保存记录空数据提示没有学习记录时显示友好的提示界面2.3 技术方案本项目使用以下技术HTML构建数据录入区域、统计卡片和图表容器。CSS实现页面布局、卡片样式和图表展示效果。JavaScript完成数据汇总、分类统计、日期处理和图形更新。localStorage保存用户录入的学习记录。为了避免引入复杂依赖图表可以使用原生 SVG 或 CSS 实现。如果智能体选择其他图表方案应检查其运行方式及外部依赖是否符合项目要求。三、使用 AtomGit 智能体开发项目3.1 进入智能体交互界面首先打开 AtomGit 官方网站AtomGit - 全球开发者的开源社区,开源代码托管平台登录后根据当前页面实际提供的功能进入智能体交互入口。不同版本的页面可能存在差异因此具体入口名称以实际显示为准。3.2 提交开发提示词为了让智能体明确项目目标本次将开发需求拆分为数据录入、统计计算、图表展示和本地存储四个部分。可以直接向智能体发送以下提示词请帮我开发一个名为“学习效率分析系统”的网页应用。 一、技术要求 1. 使用原生 HTML、CSS 和 JavaScript。 2. 不需要后端、数据库或第三方 API。 3. 使用 localStorage 保存学习记录。 4. 页面简洁美观适配电脑浏览器。 5. 请尽可能独立创建项目文件、编写代码并检查问题。 二、功能要求 1. 用户可以新增学习记录。 2. 每条记录包含学习日期、学习类别、 学习时长和完成状态。 3. 学习类别包括课程学习、作业练习、 编程实践和其他。 4. 学习时长必须为大于 0 的有效数字。 5. 页面顶部显示记录数量、累计学习时长 和已完成记录数量。 6. 使用图表展示不同学习类别的时长分布。 7. 使用柱状图展示不同日期的学习时长。 8. 展示已完成和未完成记录的数量对比。 9. 支持按日期范围和学习类别筛选。 10. 筛选条件变化后统计数据和图表同步更新。 11. 页面刷新后可以恢复此前保存的记录。 12. 没有数据时显示友好的空状态提示。 13. 输入无效时显示清晰的错误提示。 三、实现要求 1. 使用原生 SVG、CSS 或其他无需复杂配置的方式 展示图表。 2. 图表必须根据真实录入的数据生成 不要使用固定的虚构统计结果。 3. 明确区分原始记录和计算得到的统计数据。 4. 检查日期筛选、时长计算和空数据处理逻辑。 四、交付要求 1. 尽可能独立完成项目文件创建和代码编写。 2. 说明每个文件的作用和运行方法。 3. 提供主要功能的测试步骤。 4. 如果不能实际运行项目请明确说明。 5. 不要将尚未执行的测试描述为已经通过。 请优先保证核心功能完整、操作简单、容易运行 不要增加登录、云端同步或复杂预测算法。这段提示词的重点是明确要求图表根据实际录入的数据生成而不是只创建一个外观类似数据分析平台的静态页面。3.3 检查智能体生成的文件项目可以采用如下文件结构learning-analytics/ ├── index.html ├── style.css └── script.js其中index.html负责数据录入、统计卡片和图表区域。style.css负责页面布局、颜色和视觉效果。script.js负责记录管理、数据统计、筛选和图表更新。如果智能体已经创建了相应文件就直接检查现有项目不必重复创建。在代码生成后应重点确认学习记录是否通过统一的数据结构保存。统计数据是否根据当前记录动态计算。筛选条件是否同时影响统计卡片和图表。页面刷新后是否能够恢复数据。删除或修改记录后统计结果是否同步更新。代码界面生成系统界面四、核心统计逻辑设计4.1 累计学习时长假设用户共有 (n) 条有效学习记录每条记录的学习时长为 (t_i)则累计学习时长可以表示为[T\sum_{i1}^{n}t_i]例如三条学习记录的时长分别为 1.5 小时、2 小时和 0.5 小时那么累计学习时长为 4 小时。实际统计时应先根据用户当前选择的日期范围和学习类别筛选记录再对筛选后的记录进行汇总。例如三条学习记录的时长分别为 1.5 小时、2 小时和 0.5 小时那么累计学习时长为 4 小时。实际统计时应先根据用户当前选择的日期范围和学习类别筛选记录再对筛选后的记录进行汇总。4.2 学习类别分析系统可以按照学习类别对记录进行分组分别计算每一类的累计学习时长。例如课程学习累计时长。作业练习累计时长。编程实践累计时长。其他累计时长。然后将各类别的统计结果转换为柱状图或其他图形。需要注意类别统计应以用户录入的记录为基础。如果某个类别没有记录可以显示为 0而不应凭空生成数据。可视化柱状图4.3 每日学习时长每日学习时长可以按照日期进行分组计算。对于某个日期 (d)其学习时长为[T_d\sum_{i:,date_id}t_i]其中(date_i) 表示第 (i) 条学习记录对应的日期。通过这种方式可以展示不同日期的学习时长变化。需要注意记录数量较少时图表只能反映已有数据不能据此直接判断长期学习规律。4.4 完成状态统计假设当前筛选后的记录总数为 (N)其中已完成记录数为 (C)则完成比例为[P\begin{cases}\frac{C}{N}\times100%, N0\0%, N0\end{cases}]该指标反映的是已完成学习记录占全部记录的比例并不等同于学习效果或知识掌握程度。五、网页运行与功能测试代码生成完成后根据智能体提供的运行说明启动项目。如果采用普通 HTML、CSS 和 JavaScript 文件通常可以通过浏览器打开index.html进行基本测试如果项目使用了其他结构应以实际运行说明为准。5.1 测试学习记录录入首先手动添加几条测试记录例如日期学习类别时长状态2026-10-12课程学习1.5 小时已完成2026-10-13作业练习2 小时已完成2026-10-14编程实践1 小时未完成以上数据仅作为测试示例实际文章中的截图应来自你自己录入的记录。添加完成后检查记录列表是否正确显示输入信息。该指标反映的是已完成学习记录占全部记录的比例并不等同于学习效果或知识掌握程度。5.2 测试统计结果根据上述示例数据累计学习时长应为 4.5 小时记录总数为 3 条已完成记录数为 2 条。完成比例应为[P\frac{2}{3}\times100%\approx66.67%]将网页显示结果与手动计算结果进行比较可以检查统计逻辑是否正确。5.3 测试图表更新新增一条学习记录后观察分类图表和每日学习时长图表是否发生变化。再修改其中一条记录的时长检查图表是否同步更新。如果图表仍然显示旧数据可以要求智能体检查数据修改后的重新计算和重新渲染逻辑。5.4 测试日期和类别筛选尝试选择不同日期范围观察系统是否只统计范围内的记录。随后选择某一个学习类别检查统计卡片和图表是否只反映符合条件的数据。尤其需要注意筛选条件应统一作用于各统计模块避免图表使用筛选后的数据而统计卡片仍然使用全部记录。5.5 测试数据保存和异常输入最后刷新网页检查之前录入的学习记录是否恢复。同时测试以下情况学习时长为空。学习时长为负数或非数字。当前没有任何学习记录。日期筛选范围内没有数据。修改记录后图表和统计是否同步更新。如果出现异常应向智能体提供具体操作步骤和页面表现要求它检查相关代码。测试结果5.6 测试结果记录测试项目检查内容实际结果新增记录是否正确保存并显示是时长统计累计时长是否正确是类别图表是否与录入数据一致是日期图表日期分组是否正确是条件筛选统计结果是否同步变化是数据恢复刷新后记录是否保留是异常输入是否正确提示是六、本次实践的几点体会6.1 数据可视化需要建立在正确的数据处理之上图表可以让信息更直观但图形是否准确取决于底层统计逻辑是否正确。如果日期分组错误、筛选条件没有统一应用或者统计数据没有及时更新即使页面设计得很漂亮也无法真实反映用户的学习情况。因此在开发这类项目时应该先验证数据计算再检查图表展示。6.2 自然语言需求需要转化为明确的计算规则本次项目涉及累计时长、类别汇总、日期分组和完成比例等统计逻辑。通过在提示词中明确计算方式和异常情况可以让智能体更清楚地理解功能要求也便于后续使用已知数据验证结果。6.3 小型应用也需要考虑数据边界对于没有记录、筛选结果为空、时长输入不合法等情况程序都应有明确处理方式。这些情况看似简单却是实际使用过程中容易出现的问题。提前将它们纳入需求和测试范围有助于提高应用的可靠性。七、总结本文在前几篇 AtomGit 智能体实践的基础上进一步尝试开发了一个学习效率分析系统围绕学习记录录入、累计时长统计、类别分析、每日数据展示和条件筛选展开。从随机选择到量化评估再到任务管理和数据分析这一系列项目逐步覆盖了小型 Web 应用中常见的交互、数据处理和可视化场景。本次实践的重点不在于使用复杂算法而在于将真实的使用需求拆分成清晰的功能并通过明确的计算规则和实际测试检查智能体生成的项目是否符合预期。后续还可以考虑增加学习记录导出、周报生成等功能。但在此之前应先确保数据来源清晰、统计逻辑正确、图表能够随着数据变化而更新。通过持续进行这类小型项目实践可以逐步熟悉 AI 智能体辅助开发的工作流程并积累需求分析、代码检查和功能验证方面的经验。项目地址LearninngAnalytics:本项目旨在开发一个轻量级的学习数据分析网页将用户录入的学习记录转化为直观的统计信息和图形展示。 - AtomGit