从零到发布：用 AI Agent 构建 BTC 价格监控应用的全流程实战

本文记录了使用华为云 CodeArts Agent 编写代码、启动预览、推送 GitCode 仓库、发布到开发者作品展览馆的完整流程，分享在沙箱环境下的网络处理、端口管理、隧道穿透等实战经验。

一、项目背景

比特币价格波动剧烈，手动刷新行情页面效率低下。我需要一个工具：

• 实时刷新 BTC 价格，无需手动操作
• 价格预警 — 波动超过阈值时主动通知我
• 可视化趋势 — 直观看到价格走势
• 简洁好用 — 打开浏览器即用，无需安装

技术选型很直接：Node.js + Express 后端 + 原生 HTML/CSS/JS 前端。不引入 React/Vue 等框架，保持轻量。数据源选用 CoinGecko 免费 API，每 30 秒轮询一次。

二、架构设计

┌─────────────────────┐     WebSocket      ┌──────────────────────┐
│   浏览器前端         │  ←──────────────→  │   Node.js 服务端      │
│                      │                    │                      │
│  · 价格展示卡片      │                    │  · Express HTTP      │
│  · Canvas 折线图     │                    │  · WebSocket Server  │
│  · Notification API  │                    │  · 30s 定时轮询      │
│  · 阈值设置面板      │                    │  · 模拟数据后备      │
└─────────────────────┘                    └──────────┬───────────┘
                                                      │ HTTP
                                                      ▼
                                           ┌──────────────────────┐
                                           │   CoinGecko API      │
                                           │   BTC 实时价格        │
                                           └──────────────────────┘

核心设计决策：

1. WebSocket 而非轮询

前端不需要定时请求后端，后端有新数据时主动推送。延迟更低，资源消耗更小。ws 库在 Express 服务器上挂载 WebSocket 升级端点，几行代码搞定。

2. 模拟数据后备

这是我踩的第一个坑。沙箱环境网络受限，无法直连 CoinGecko API。与其让应用直接报错，不如设计一个优雅降级方案：

async function fetchBtcPrice() {
  try {
    const res = await fetch('https://api.coingecko.com/...');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (e) {
    // 网络不可达 → 模拟数据随机游走
    return generateMockPrice();
  }
}

模拟数据基于上一次价格做 ±0.5% 随机游走，走势逼真。部署到有外网的环境时自动切换真实数据，零配置改动。

3. Canvas 手绘图表

不引入 Chart.js 等图表库。价格折线图用 Canvas 2D API 直接绘制，120 个数据点，代码不到 60 行。好处是零依赖、加载快、完全可控。

4. 浏览器原生通知

if (Notification.permission === 'granted') {
  new Notification('BTC 价格预警', {
    body: `当前价格 $${price}，波动 ${change}%`
  });
}

不需要推送服务（PWA Push），不需要后端存储用户设备信息。浏览器 Notification API 足够。首次使用请求权限，之后每次价格波动超阈值自动弹通知。

三、AI Agent 编码实战

这次没有手写一行代码，全程通过 CodeArts Agent 完成。几个关键经验：

1. 指令要具体

给 Agent 的 prompt 不是"帮我写个 BTC 监控"，而是：

创建 BTC 价格监控网页应用。技术栈 Node.js + Express + WebSocket。功能：实时获取 BTC 价格（CoinGecko API，每 30 秒轮询）、WebSocket 推送、浏览器通知（波动超 2% 时触发）、Canvas 折线图、深色主题卡片式布局。服务监听 8080 端口。

技术栈、功能点、API 来源、更新频率、界面风格、端口号——全部明确。Agent 一次就生成了可运行的代码。

2. Agent 会自主解决问题

CoinGecko API 在沙箱中不可达，Agent 没有卡住等我问，而是自动判断网络不通，主动添加了模拟数据后备方案。这种自主排障能力省了很多来回。

3. 端口冲突处理

8080 端口被环境中已有进程占用，Agent 自动检测空闲端口改用 3000。这个细节很重要——盲目占用已占端口会导致启动失败。

四、发布到作品展览馆

代码写完只是第一步，发布到华为云开发者作品展览馆才是完整闭环。整个流程涉及 8 个步骤，这里分享几个关键环节：

1. GitCode OAuth 授权

发布需要代码托管在 GitCode。流程是：

1. Agent 检测到本地无 GitCode 凭证
2. 启动 OAuth 回调服务器，生成登录链接和二维码
3. 用户在浏览器中扫码授权
4. Token 自动落盘，后续操作无需再次登录

整个过程对用户来说就是"扫个码"，Agent 处理了所有后台逻辑。

2. DevBridge 隧道穿透

作品需要在线可预览。本地服务跑在 3000 端口，但外部无法直接访问。DevBridge 隧道解决了这个问题：

本地 localhost:3000  →  DevBridge 中继  →  公网 URL

创建隧道 → 配置端口 → 启动托管，三步拿到公网地址。面试官、同事、朋友打开链接就能看到你的应用，不用装任何东西。

3. 封面自动生成

作品需要封面图。Agent 的处理方式让我印象深刻：

1. preflight — 安装 Playwright + Chromium + CJK 字体（首次约 3 分钟）
2. 截图 — 用无头浏览器访问运行中的应用，截取实际页面
3. 合成 — 将截图 + 标题 + 简介合成 16:9 封面
4. 字形校验 — 像素级检查中文是否正常渲染（防止豆腐块）

最关键的是第四步。沙箱环境字体不全，中文很容易渲染成方块。Agent 有一套字形校验机制，确保封面上的中文清晰可读。

4. STS 临时凭证

发布需要华为云 IAM 凭证，但直接用永久 AK/SK 上传不安全。流程使用 STS 临时凭证：

• 创建 IAM 自委托，生成 900 秒有效期的临时 AK/SK
• 永久凭证留本地，只上传临时凭证
• 过期自动刷新，全程无感知

五、踩坑记录

坑 1：沙箱文件系统隔离

CodeArts 运行在 bwrap 沙箱中，文件系统与宿主机隔离。Agent 在沙箱内创建的文件，宿主机直接 ls 看不到。

解法：沙箱的 /workspace 目录通过 --bind 挂载到宿主机。把文件复制到 /workspace/ 下，宿主机就能访问。关键是要理解 bwrap 的挂载映射关系。

坑 2：CoinGecko API 不可达

沙箱网络策略限制外网访问，fetch 直接失败。

解法：模拟数据后备。不是 hack，是正经的优雅降级——很多生产系统也会在 API 不可用时使用缓存或模拟数据。

坑 3：Git 仓库无远程

git init + git commit 只创建了本地仓库，没有 origin 远程。发布流程需要远端 URL。

解法：先通过 GitCode API 创建仓库，再 git remote add origin + git push。注意 remote URL 中不要包含 token（发布前清理）。

坑 4：端口被占用

环境中 8080 端口已有进程。直接启动会报 EADDRINUSE。

解法：用 ss -tlnp | grep :8080 检测端口占用，自动选择空闲端口。永远不要假设端口是空闲的。

六、项目数据

七、总结

这次实践有几个感悟：

1. AI Agent 改变了编码方式。 从"写代码"变成"描述需求 + 审查结果"。指令越具体，产出质量越高。Agent 还能自主排障，减少人工干预。

2. 发布流程比写代码更复杂。 OAuth 授权、隧道穿透、封面生成、凭证管理——每一步都有坑。把这些流程固化成 Skill，一次配置反复使用，是正确的做法。

3. 优雅降级是基本素养。 网络不通就用模拟数据，端口占用就换端口，字体缺失就补装。不要让用户看到报错，要让他们看到"虽然有限制，但功能正常"。

4. 安全意识贯穿始终。 STS 临时凭证替代永久 AK/SK，GitCode OAuth 替代明文密码，remote URL 清理 token。安全不是事后补丁，是设计时就考虑的。