一键开通华为云码道 CodeArts 代码智能体Developer Events_Developer Alliance-Huawei Cloud摘要本文记录使用华为云码道 CodeArts GLM‑5.2 网站开发能力从零开发一款浏览器端智能日程管家实现课表截图 OCR 识别、docx/CSV/ICS 多格式导入导出完整记录需求拆解、Bug 调试、单元测试、开源工程交付的全人机协作开发过程。前言开学季新学期同学们拿到各类格式课表手动录入课程信息耗时又容易出错。很多日程工具只支持文件导入对截图课表识别能力薄弱。本次借助华为云码道 CodeArts 代码智能体我开发了一款 PC 浏览器网页版智能日程管家主打图片 OCR 识图解析课表上传课表截图就可以自动提取课程、上课时间、星期、授课教师、教室地点、周次信息同时兼容 docx、CSV、iCal (ICS) 多格式导入导出兼顾学生课表管理和个人通用日程管理。项目从需求拆解、代码生成、疑难 bug 调试、单元测试、开源文档全部由码道 AI 辅助完成。核心设计目标目标实现说明图片 OCR 课表识别支持 Excel 课表截图、手机 App 彩色色块课表截图兼容垂直合并跨行单元格自动提取课程名、时间、星期、教师、教室、周次信息多模式日历视图周课表网格视图、日视图、月视图支持鼠标拖拽调整日程事件完整日程管理能力支持重复课程配置、单 / 双周循环、自定义标签与卡片颜色、待办清单、浏览器日程通知提醒多格式导入导出docx Word 课表文档、CSV、iCal (ICS 文件导入CSV、ICS 导出用于备份、迁移到其他日历软件浏览器本地持久化全部日程、待办、配置存储浏览器本地无需注册登录不依赖外部数据库关闭网页数据不会丢失UI 交互布局三栏界面左侧功能导航栏、中间课表画布、右侧识图预览操作面板针对 PC 大屏做简约清爽适配一、开发环境与工具AI 开发工具华为云码道 CodeArts 代码智能体开通链接Developer Events_Developer Alliance-Huawei Cloud本项目依靠码道智能体完成业务需求拆解、前后端业务代码生成、故障定位与迭代修复、单元测试用例编写、开源 README 文档、MIT 协议全套工程文档输出。技术栈选型后端Node.js承担 OCR 解析、docx/CSV 文档解析接口能力前端原生 JavaScript实现三栏网页界面、日历渲染、识图预览面板测试Node 单元测试针对 OCR 解析模块编写多组模拟课表用例覆盖各类异常输入场景OCRTesseract.js v5 本地化离线 OCR 识别不调用第三方在线接口二、AI 辅助完整开发流程整体开发链路输出完整业务需求 → AI 自动拆解任务清单 → 生成项目代码 → 本地运行验证 → 复现 bug 反馈给 AI 迭代修复 → 补充单元测试防回归 → 完善开源文档 → 推送 AtomGit 公开仓库2.1 需求下达与任务拆解我先进入华为云码道 CodeArts 智能体对话会话选择华为云码道本次会话模型选项选用GLM‑5.2同时开启平台网站开发专项能力充分利用它网页项目生成、前端页面渲染、接口调试的专属能力。写需求的时候向码道提交完整业务需求开发 PC 网页智能日程管家重点实现课表截图 OCR 识别处理表格合并单元格支持多种文件导入导出、本地存储、多日历视图。要求交付完整可运行代码、单元测试用例、README 开源文档要求AI输出完整可运行项目代码包而不是零散代码片段禁止AI自动向Git仓库提交推送代码。图 1项目起始阶段在码道 CodeArts Agent 会话中选用对应模型并开启网站开发专项能力提交完整业务需求指令。码道智能体接收需求后自动拆解出完整任务清单搭建 Node 前后端项目基础骨架开发 layoutParser 布局解析模块处理课表表格、合并单元格、星期表头、左侧时间轴坐标匹配noiseFilter 噪声过滤模块过滤手机状态栏、UI 按钮、页面底部备注等干扰文本cellSplitter 字段拆分模块分离课程名称、授课教师、教室地点、上课周次实现解析容错降级逻辑布局解析失效自动切换文本解析低置信条目做标黄提示开发前端三栏交互页面导航栏、课表画布、识图预览面板实现 docx、CSV、ICS 文件导入导出接口日历多视图、日程拖拽编辑、重复课程、待办清单、浏览器提醒功能编写单元测试模拟多种课表输入场景输出 README 说明文档、MIT 开源协议2.2 首轮交付拿到基础项目骨架本地运行验证发送完整需求之后码道GLM‑5.2 网站开发能力一次性输出项目目录、前后端代码、前端页面、解析模块脚本。我复制代码到本地使用 Node 启动服务访问127.0.0.1:3000。首次运行就出现功能缺陷图片识图识别出时间教室但所有课程星期全部错误识别为周一。图 2第一轮 AI 输出完整前后端项目代码包含 OCR 解析模块、网页三栏 UI、文件导入接口。图 3本地复现第一个 Bug识别出课程名称、教室、时间但是全部课程被错误归类到周一。2.3 真实开发踩坑与迭代调优我把本地真实复现的现象、浏览器 / 控制台日志完整粘贴回 Agent 对话写清单元测试模拟数据可以跑通、真实图片出现什么现象、预期正确结果是什么让 AI 定位根因。依托网站开发能力它同时修改前端预览面板与后端解析脚本给出修复代码并且补充对应的单元测试脚本防止后续改动回归。开发过程并不是写好代码就直接跑通遇到多个棘手问题把现象、日志给到码道智能体完成排错修复。问题 1图片识图可以识别时间教室但全部课程星期统一错误识别为周一现象OCR 降级文本解析模式下没有利用图片坐标推导星期直接默认填充周一。解决修改降级分支逻辑即使进入降级模式依旧读取 OCR 文本 bbox 水平坐标匹配星期表头无法可靠判定星期的条目设置低置信标黄禁止静默强制赋值周一问题 2单元模拟测试全部通过真实上传课表截图仅输出 1 条无效记录绝大多数课程丢失现象模拟 OCR 数据单元测试全部通过真实图片 OCR 输出为像素坐标代码缺少坐标归一化逻辑大量课程文本被误判定在表格外部被噪声过滤直接丢弃。解决新增像素坐标归一化处理增加服务端日志埋点记录传入 OCR 块数量、表格边界、落入表格有效文本、聚类单元格数量、最终输出事件数量区分表格内课程文本与图片底部备注噪声。问题 3上传 docx 文档接口返回 500 内部服务器错误文档导入失败现象上传 word 课表文档后端直接抛出 500 错误无法读取表格课程内容。解决完善接口全局异常捕获解析失败返回用户可读业务提示修复 docx 表格单元格读取逻辑完整提取星期、时间、教师、教室全部字段。问题 4CSV 文件导入文件自带星期字段被程序强制覆盖改写为周一现象CSV 文件内部星期信息完整导入系统之后全部课程星期变成周一。解决修复 CSV 导入字段映射逻辑优先读取原始文件内星期字段禁止代码强制覆盖默认星期值迭代规范每修复一个 bug本地重启服务浏览器 F5 强制刷新页面复现验证同时补充对应的单元测试用例防止后续代码改动出现功能回归。每一类 Bug 都复现了 “模拟测试正常但真实业务输入异常” 的典型问题也体现出 AI 生成代码必须经过本地实测验证不能直接交付。图 4将本地真实复现的 bug 现象反馈给码道 GLM‑5.2AI 定位解析降级分支的逻辑漏洞并输出修复方案。注将完整项目源码下载到本机之后我切换使用了 IDE 内嵌入式的 CodeArts 智能体插件直接在代码编辑器内完成 Bug 复现、粘贴报错日志、获取修复代码省去复制粘贴跨窗口来回切换的操作。拿到修复代码替换本地项目对应 js 文件重启 Node 服务浏览器强制刷新页面重新测试。后续依次复现剩下问题真实课表截图只输出单条课程记录、docx 文档上传 500 报错、CSV 导入星期被覆盖每一个问题都遵循本地复现 → 反馈现象日志 → AI 迭代修改代码 → 本地重启验证 → 补充单元测试这套闭环流程。2.4 单元测试保障针对 OCR 解析模块编写单元测试模拟手机 App 彩色课表、Excel 合并单元格课表校验输出课程数量、星期、时间、字段拆分、噪声过滤、降级逻辑。执行单元测试命令node test/enhanced‑parser.test.mjs图 5每修复一处功能执行单元测试脚本新增测试用例保障后续迭代不会把旧功能破坏。通过单元测试防止后续修复其他功能时把OCR解析能力改坏保障迭代稳定性。三、项目目录架构说明smart-schedule/ ├── package.json # 依赖与脚本 ├── server/ # 后端服务 │ ├── index.js # Express 入口 │ ├── storage.js # JSON 文件持久化 │ └── routes/ # API 路由 │ ├── upload.js # 图片上传 │ ├── schedule.js # 日程 CRUD │ └── data.js # 导入导出 数据管理 ├── public/ # 前端静态资源 │ ├── index.html # 主入口 │ ├── css/ # 样式文件 │ └── js/ │ ├── app.js # 应用入口 │ ├── store.js # 数据层 │ ├── api.js # 后端 API 封装 │ ├── utils.js # 工具函数 │ ├── reminder.js # 提醒引擎 │ ├── views/ # 视图模块 │ │ ├── weekView.js # 周课表网格 │ │ ├── dayView.js # 日视图 │ │ ├── monthView.js # 月视图 │ │ ├── todoView.js # 待办清单 │ │ ├── settingsView.js # 提醒设置 │ │ ├── importPanel.js # 识图导入面板 │ │ ├── eventModal.js # 日程编辑弹窗 │ │ └── help.js # 使用帮助 │ ├── components/ # 通用组件 │ │ ├── modal.js # 弹窗系统 │ │ └── notify.js # 通知系统 │ └── ocr/ # OCR 模块 │ ├── engine.js # Tesseract.js 封装 │ └── parser.js # 语义解析器 │ └── vendor/ # Tesseract.js 本地化资源 │ ├── tesseract.min.js │ ├── worker.min.js │ ├── tesseract-core-*.wasm.js │ └── lang/ # 中英训练数据 ├── test/ # 单元测试脚本 ├── uploads/ # 上传图片目录 └── docs/ # 使用文档 ├── 功能使用文档.md └── 启动教程.md四、核心功能详解4.1 图片 OCR 识图导入核心特色支持 Excel 导出课表截图、手机 App 彩色色块课表截图可完美处理垂直合并单元格、跨多节课时课程。定位图片顶部星期表头依靠 OCR 文本块 X 坐标匹配对应星期识别图片左侧时间轴依靠文本块 Y 坐标计算课程完整起止上课时间。自动噪声过滤过滤手机状态栏、UI 控件按钮、图片底部备注说明不会生成无效日程。单元格多行文本自动拆分提取课程名称、授课教师、教室地点、上课周次。置信度提示机制识别不确定的条目预览面板黄色高亮支持用户手动编辑、增删条目。容错降级策略布局解析效果不佳时自动切换文本解析模式避免直接丢弃课程预览面板可查看全部原始 OCR 识别文本。4.2 多视图日历展示周课表网格视图默认主界面采用大学课表网格布局课程色块精准渲染到对应星期与时间段。日视图聚焦单日全部日程。月视图全局浏览整月全部事件。新增/编辑模态框表单支持分类、标签、重复日程、提醒设置。搜索全局搜索日程标题和地点。全部视图数据同源修改任意日程所有视图同步更新。4.3 日程事件编辑能力周画布支持鼠标拖拽直接调整课程的星期、开始结束时间。新建 / 编辑日程表单支持配置重复课程按周重复、单周 / 双周循环、指定周次生效适配高校课程使用场景。自定义标签、自定义事件卡片颜色区分文化课、实验课、会议、个人事务等不同类型日程。4.4 待办清单与日程提醒独立待办功能可新增待办事项标记完成 / 未完成状态设置截止时间。支持浏览器桌面通知提醒防止错过课程与个人事务。支持优先级高/中/低、截止日期、完成勾选进度条统计完成率。每个日程可设置提前提醒时间5分钟/15分钟/30分钟/1小时/1天。右下角悬浮浮窗通知 浏览器系统通知。顶部铃铛角标显示未读提醒数。提醒设置页全局开关、默认提醒预设。4.5 文件导入导出导入支持 docx Word 课表文档、CSV、iCal (ICS) 标准日程文件。导出支持 CSV、iCal (ICS) 格式用于本地备份或者迁移至其他日历软件。4.6 浏览器本地持久化所有日程、待办、标签配置全部保存在浏览器本地无需账号登录不依赖外部数据库关闭浏览器后再次打开网页数据不会丢失。4.7 三栏 UI 布局左侧导航栏视图切换、导入导出、待办清单、系统设置中间画布区域日历课表主画布支持拖拽交互右侧面板图片识图上传、解析预览、事件详情编辑。五、确认仓库整理工程文档全部功能经过多轮迭代图片识图、docx/CSV/ICS 导入导出、日历视图、本地持久化全部验证通过。借助华为云码道生成完整开源 README 文档、MIT 开源协议整理项目目录说明与部署运行步骤完成后将完整源码推送至 AtomGit 公开仓库。图 6项目全部调试完毕将完整源码、文档提交至 AtomGit 公开仓库。六、项目运行效果演示本项主要展示智能日程管家完整实际运行效果包含主界面、识图导入、多格式文件解析、多日历视图、待办清单、新建日程、系统设置全部功能演示。图 7首次访问智能日程管家网站自动弹出新手使用帮助弹窗。图 8系统设置‑数据与提醒管理页面支持 ICS/CSV 导入导出、数据备份恢复、浏览器提醒开关、主题外观切换。图 9识图导入功能面板支持图片、CSV、Word 文档三类源文件导入导入前可以预览、编辑解析结果。图 10上传手机 App 课表截图完成布局解析提取出课程名称、时间、地点等全部字段用户可在预览面板修改每条记录。图 11后端解析 docx 内部表格提取课表全部信息提示 Word 文档导入成功。图 12周课表视图效果全部课程正确渲染到对应星期与时间段课程卡片展示课程名称、上课地点信息。图 13月视图日历效果以整月维度浏览全部重复课程日程全局查看整月安排。图 14待办清单模块支持新增待办、标记完成状态、设置优先级与截止时间。图 15新建 / 编辑日程窗口支持设置星期、起止时间、地点、分类标签、周次重复规则适配高校循环课程场景。本地部署运行步骤本地电脑预先安装 Node.js 运行环境PowerShell 进入项目根目录执行启动命令node server/index.js浏览器访问地址http://127.0.0.1:3000打开识图导入面板即可上传课表截图或者课表文档进行测试。单元测试执行命令node test/enhanced‑parser.test.mjs七、AI 辅助开发实践思考AI 的优势可以快速完成大量业务代码编写遇到复现的 bug可根据现象、日志快速定位可疑代码并输出修复方案批量生成单元测试用例快速输出 README、开源协议等工程文档。AI 的局限AI编写的单元模拟用例全部跑通不代表真实图片、真实文档这类真实业务输入就一定能正常运行边界场景、真实物理输入噪声AI很难完全预判必须人工本地复现验证。人机协作经验向 AI 提供完整清晰的需求拿到代码后务必在本地完成实测遇到 bug 提供完整复现现象与日志信息交由 AI 迭代修复同步补充单元测试规避后续版本迭代产生功能回归。八、AtomGit 开源仓库地址smart_schedule 仓库仓库为公开仓库包含完整源码、README、LICENSE、使用文档、全部单元测试脚本可直接下载部署运行。