从零到上架：用 AI 开发一款现代化番茄工作法应用

2026-10-20 · 开发实录

前言

番茄工作法（Pomodoro Technique）由 Francesco Cirillo 在 1980 年代提出，核心理念很简单：用 25 分钟专注 + 5 分钟休息的循环，对抗拖延、保持高效。方法本身不复杂，但一款好的工具能让坚持变得更容易。

这篇文章记录了我在华为云开发环境中，借助 AI Agent 从零构建一款现代化番茄工作法 Web 应用，并最终发布到华为云开发者作品展览馆的完整过程。

一、需求定义

在动手之前，我先明确了几个关键方向：

核心功能清单：

• 三种计时模式：专注（25min）、短休息（5min）、长休息（15min）
• 圆形进度动画 + 大号数字显示
• 智能模式切换：每 4 个番茄钟后自动进入长休息
• 任务清单：添加、完成、删除，可设预估番茄钟数
• 今日统计：完成数量、专注时长
• 自定义设置 + 提示音 + 数据持久化

二、开发过程

2.1 环境准备

开发在华为云 CodeArts 沙箱中进行。整个环境通过 AI Agent 编排：

1. ACP 服务健康检查 — 确认 CodeArts Agent 服务可用（端口 19300）
2. 沙箱路径获取 — 从 registry.json 读取 CodeArts 沙箱工作目录
3. 创建项目目录 — 在沙箱内建立 pomodoro-app 子目录
4. 建立 ACP 会话 — 通过 acpx 客户端与 CodeArts 建立 WebSocket 连接

2.2 代码生成

向 CodeArts 发送了详细的构建指令，包含功能需求和 UI 设计规范：

配色方案：
  - 专注模式 → 暖红色系 (#e74c3c)
  - 短休息   → 绿色系 (#27ae60)
  - 长休息   → 蓝色系 (#3498db)
  - 背景     → 深色渐变

视觉要求：
  - SVG 圆环进度动画
  - 毛玻璃效果 (backdrop-filter: blur)
  - 平滑过渡 + 微交互
  - 响应式设计

CodeArts 一次性生成了三个文件：

2.3 核心实现解析

计时引擎

计时器采用 setInterval 每秒更新，通过剩余时间比例驱动 SVG 圆环的 stroke-dashoffset：

// 圆环进度 = 周长 × (1 - 已用时间 / 总时间)
const circumference = 2 * Math.PI * radius;
const offset = circumference * (1 - elapsed / total);
circle.style.strokeDashoffset = offset;

番茄钟状态机

三种模式之间的切换遵循状态机逻辑：

专注 ──完成──→ 短休息（第 1~3 个番茄钟后）
专注 ──完成──→ 长休息（第 4 个番茄钟后）
短休息 ──结束──→ 专注
长休息 ──结束──→ 专注（计数器归零）

每完成一个专注时段，番茄钟计数器 +1。当计数器达到 4 的倍数时，下一个休息为长休息。

Web Audio API 提示音

无需任何音频文件，用 Web Audio API 合成三音阶提示音：

const audioCtx = new AudioContext();
[523.25, 659.25, 783.99].forEach((freq, i) => {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.frequency.value = freq;
  osc.connect(gain);
  gain.connect(audioCtx.destination);
  // 包络控制音量和持续时间
  osc.start(audioCtx.currentTime + i * 0.15);
  osc.stop(audioCtx.currentTime + i * 0.15 + 0.3);
});

数据持久化

设置和今日统计通过 localStorage 保存，按日期键值分隔，跨天自动重置统计：

const today = new Date().toISOString().split('T')[0];
localStorage.setItem(`pomodoro:stats:${today}`, JSON.stringify(stats));

三、预览与验证

3.1 本地预览

项目通过 python3 -m http.server 在端口 8080 启动，HTTP 200 验证通过。

3.2 DevBridge 隧道

为了从外部访问预览，创建了 DevBridge 开发隧道：

隧道 ID: yp2yoj4v
公网 URL: https://yp2yoj4v-8080.devbridge-s2.hwtunnel.com
协议: auto（自动检测 HTTP/HTTPS）
匿名访问: 开启
有效期: 72 小时

隧道通过华为云中继基础设施转发，无需开放公网入站端口。

四、代码托管

4.1 GitCode OAuth 授权

通过 GitCode OAuth 两阶段流程获取访问令牌：

1. 阶段一：启动本地回调服务器，生成登录链接和二维码
2. 阶段二：用户在浏览器授权后，轮询收尾，token 写入 ~/.gitcode/auth.toml

4.2 创建仓库并推送

# 创建仓库
curl -X POST "https://gitcode.com/api/v5/user/repos" \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"name":"pomodoro-app","private":false}'

# 推送代码
git remote add origin https://gitcode.com/gcw_nfhkuMAb/pomodoro-app.git
git push -u origin master

仓库地址：https://gitcode.com/gcw_nfhkuMAb/pomodoro-app

五、发布到作品展览馆

发布流程遵循华为云高校运营平台的 8 步管线：

5.1 IAM 域名解析与 STS 凭证

Domain ID: fdd7452098ca4fb1aa8b652fbfd14187
STS 凭证: 临时 AK/SK + Security Token（900s 有效期）

通过 IAM 自委托 SELF_VERIFY 生成临时凭证，永久 AK/SK 不离开本地。

5.2 封面图生成

最终封面：1280×720 PNG，521KB，字形校验通过。

5.3 架构图与详情文章

用 HTML + CSS 手写系统架构图，通过 Playwright 渲染为 PNG：

表现层 (UI)          逻辑层 (Core)         持久层 (Storage)
┌──────────┐       ┌──────────┐        ┌──────────┐
│ 计时器模块 │       │ 计时引擎  │        │ localStorage│
│ 模式切换  │       │ 状态机    │        │ 设置存储   │
│ 任务清单  │       │ 任务管理器│        │ 统计存储   │
│ 设置面板  │       │ 统计聚合  │        │ 任务存储   │
│ 统计仪表盘│       │ 提示音    │        └──────────┘
└──────────┘       └──────────┘

详情文章 3500+ 字，涵盖项目简介、核心功能、技术架构、设计理念和使用方式，与架构图一起打包为 zip。

5.4 门禁复核与发布

发布前通过全部门禁复核：

• ✅ preflight 门禁
• ✅ UTF-8 编码门禁
• ✅ 截图保护门禁
• ✅ 封面比例 16:9
• ✅ 详情包结构校验
• ✅ 隧道可达性检查

最终发布请求返回 201 Created：

{
  "workId": "00669a2996800000",
  "workName": "番茄工作法 · Pomodoro",
  "workUrl": "https://gallery.developer.huaweicloud.com/gallery/00669a2996800000",
  "reward": { "is_success": true, "value": 200, "msg": "成功" }
}

六、项目结构

pomodoro-app/
├── index.html       # 页面结构（212 行）
├── style.css        # 现代化样式（889 行）
├── script.js        # 交互逻辑（539 行）
├── README.md        # 项目说明
└── resources/
    └── architecture.png  # 系统架构图

七、功能一览

八、总结与反思

做得好的地方

1. 技术选型克制 — 纯三件套，零依赖零构建，任何人打开浏览器就能用
2. UI 设计投入 — 深色渐变 + 毛玻璃 + SVG 动画，视觉质感不输框架方案
3. 功能完整度高 — 从计时到任务管理到统计到设置，形成完整闭环
4. 发布流程自动化 — 从截图到门禁到上传，全流程脚本化

可以改进的方向

1. 历史统计 — 目前只统计今日数据，可以增加周/月维度
2. 数据同步 — localStorage 限于单设备，可考虑接入云同步
3. PWA 支持 — 加 manifest + service worker，支持离线使用和安装到桌面
4. 主题切换 — 目前固定深色，可增加浅色主题选项
5. 国际化 — 目前中文硬编码，可抽离 i18n

开发效率

整个流程从需求定义到作品上架，在 AI Agent 辅助下高效完成：

• 代码生成：CodeArts 一次性产出 1640 行代码
• 环境配置：DevBridge 隧道 + GitCode OAuth 全自动化
• 发布上架：8 步管线串行执行，门禁全通过

传统流程中，截图、封面合成、仓库创建、OAuth 授权、门禁校验这些步骤每一步都需要手动操作和等待。脚本化之后，从代码完成到作品上架的「最后一公里」变得可复现、可自动化。

相关链接

• 作品页面：https://gallery.developer.huaweicloud.com/gallery/00669a2996800000
• 代码仓库：https://gitcode.com/gcw_nfhkuMAb/pomodoro-app
• 华为云开发者成长中心：https://developer.huaweicloud.com/grow

本文记录于 2026-10-20，开发环境为华为云 CodeArts 沙箱 + DevBridge 隧道。