从零到一：用华为云CodeArts构建个人记账本并发布到作品展览馆

今天体验了华为云开发者平台的完整开发流程，从创建项目、编写代码到发布作品，全程在云端完成，无需本地搭建任何开发环境。下面分享这次实战经验。

一、项目背景

个人记账本是日常生活中非常实用的工具。我决定构建一个纯前端的Web应用，帮助用户记录日常收支并进行可视化分析。技术选型上，采用单文件架构（index.html），内嵌CSS和JavaScript，使用Chart.js绘制图表，数据通过localStorage持久化存储，无需后端服务器。

二、核心功能设计

1. 记账录入：支持收入和支出两种类型，包含金额、分类、备注、日期等字段，表单验证防止空值提交。

2. 记录列表：展示所有记录，按时间倒序排列，支持按类型筛选（全部、收入、支出），每条记录可单独删除。

3. 分类管理：预设8个常见分类——餐饮、交通、购物、工资、娱乐、医疗、教育、其他，每个分类配有图标和颜色标识，直观易用。

4. 月度统计：顶部三张摘要卡片展示本月总收入、总支出和结余；饼图展示支出分类占比；柱状图展示近6个月收支趋势对比。

5. 数据持久化：所有记录存储在浏览器localStorage中，页面刷新后数据不丢失，真正实现零后端依赖。

三、界面设计

界面采用浅色主题，主色调为柔和的蓝绿色（#2DBE8C），背景使用浅灰色（#f5f7fa），卡片为白色背景配轻微阴影和圆角设计。整体风格简洁现代，响应式布局确保移动端友好。中文字体让阅读体验更加舒适。

四、开发流程

1. 项目创建：通过华为云CodeArts沙箱环境创建项目，ACP协议连接开发代理，自动生成代码框架。

2. 代码编写：开发代理根据需求描述，一次性生成完整的index.html文件（约17KB），包含所有HTML结构、CSS样式和JavaScript逻辑。

3. 本地预览：通过python3内置HTTP服务器启动项目，在沙箱环境中直接预览运行效果，实时验证功能。

4. 代码托管：将代码推送到GitCode仓库，通过OAuth授权关联GitCode账号，创建公开仓库并推送代码。

五、发布到作品展览馆

华为云开发者作品展览馆提供了完善的发布流程：

1. IAM域名解析：通过hcloud CLI获取华为云账号的Domain ID。

2. STS临时凭证：生成临时安全凭证（900秒有效期），无需暴露永久AK/SK。

3. GitCode OAuth授权：扫码完成GitCode账号关联，获取代码仓库访问权限。

4. 封面自动生成：通过Playwright无头浏览器对运行中的应用截图，自动合成16:9封面图片，经过像素级字形校验确保中文显示正常。

5. 详情包打包：生成包含项目架构说明、功能详解、技术栈文档的详情压缩包。

6. 活动关联：选择对应的开发者大赛或布道活动进行投稿。

7. 一键发布：门禁复核通过后，上传封面和详情包，完成作品发布。

整个发布流程自动化程度很高，从封面生成到最终发布，只需要几分钟即可完成。

六、技术心得

1. 单文件架构的优势：对于小型工具类应用，单文件架构部署简单，直接用浏览器打开即可使用，无需构建工具和依赖管理。配合CDN引入Chart.js，既保持了功能丰富性，又简化了项目结构。

2. localStorage的妙用：对于个人记账这种数据量不大的场景，localStorage完全够用。相比IndexedDB更简单，相比Cookie容量更大（通常5-10MB），且API同步调用，代码更易读。

3. 华为云开发体验：CodeArts沙箱环境提供了完整的开发能力，ACP协议让AI代理可以直接在沙箱中编写代码、启动服务。整个流程无需本地安装任何工具，真正实现了云端开发。

4. 发布流程的工程化：作品展览馆的发布流程体现了良好的工程实践——门禁检查（字体、编码、截图校验）、STS临时凭证、幂等键防重复提交，每一步都有自动化的质量保障。

七、总结

这次实战完整体验了华为云开发者平台从编码到发布的全流程。个人记账本虽然是一个小项目，但涵盖了前端开发的典型场景——表单处理、数据持久化、图表可视化、响应式设计。华为云的CodeArts和作品展览馆让整个开发和分享过程变得流畅高效，特别适合快速验证想法和分享技术成果。

作品已发布到华为云开发者作品展览馆，欢迎大家体验交流。