码道实战：用码道 IDE 制作一个 GitHub Star 趋势查看工具

案例共创 · 效率工具
运营同学用华为云码道的 Agent Space 对话编程，制作了一个 GitHub Star 趋势查看工具——输入仓库地址，自动显示 Star 数和历史增长趋势图，支持多仓库对比。旨在展示码道的 AI 编程能力如何帮助运营同学自主完成工具开发。

一、运营背景与目标

我是开发者生态运营团队的成员，日常工作之一是跟踪开发者社区的热门开源项目。之前每周手动查看 GitHub Star 数、去 Star History 网站截图、整理到周报，跟踪 10 个项目需要约 20 分钟。

目标是用华为云码道的 Agent Space 做一个工具：输入仓库地址，自动显示 Star 数和历史增长趋势图，省掉手动操作。

二、技术选型：为什么用华为云码道

对比维度：

• 需要会什么 — 传统方式：Python + 前端 + GitHub API 调用；码道 IDE：打开 IDE，用自然语言描述需求
• 数据获取 — 传统方式：手写 API 调用和错误处理；码道 IDE：Agent 自动实现 GitHub API 集成
• 前端图表 — 传统方式：找库、看文档、调样式；码道 IDE：Agent 自动使用 Chart.js
• 迭代修改 — 传统方式：手动改代码、查 bug；码道 IDE：继续对话即可增量修改
• 运行环境 — 传统方式：配 Python、装依赖；码道 IDE 内置终端

用到的码道核心能力

• Agent Space（智能体工作空间） — 对话式开发，提需求→看结果→改进，全程聊天式交互
• AI 原生 IDE — 集成文件管理器、代码编辑器、Agent Space、终端，一个窗口完成所有操作
• CLI 工具 — 提供 codearts run 命令，可在终端中对话生成代码
• 体验版（¥0） — 免费使用全部核心能力，500 万 Tokens/月

三、操作流程

事前准备

从 codearts.huaweicloud.com 下载码道 IDE，安装后登录华为云账号开通体验版。

如需在命令行中操作，可安装 CLI 工具，在华为云控制台获取 AK/SK 后配置环境变量。

Round 1：基础搭建

在码道 IDE 右侧 Agent Space 中输入需求：

我想做一个 GitHub Star 趋势查看工具，用 Python Flask 框架。
功能：
1. 页面有一个输入框，用户可以输入 GitHub 仓库地址
2. 点击查询后，显示该仓库的当前 Star 数
3. 用 Chart.js 画一个折线图，展示 Star 增长趋势
4. 页面风格简洁美观，使用卡片布局

Agent 生成了项目结构：app.py（Flask 主程序）、templates/index.html（搜索页面 + Chart.js 图表）、static/css/style.css（蓝色主题样式）。

Round 2：交互体验优化

1. 页面做漂亮一点，使用卡片布局，配色柔和
2. 查询时显示加载动画
3. 输入不存在的仓库时给出友好提示
4. 页面适配手机端

Agent 在已有代码上增量修改，添加了 Bootstrap 样式、加载动画、错误提示、响应式布局。

Round 3：多仓库对比

现在需要多仓库对比功能：
1. 输入框改为多行文本框，每行一个仓库地址
2. 图表支持多条折线，每个仓库不同颜色
3. 左侧信息卡片同时展示多个仓库的信息
4. 预设几组示例标签

Agent 修改了 API 端点支持逗号分隔的多仓库参数，前端改为 textarea 输入，图表渲染多数据集。

输入对比示例：

facebook/react
vuejs/vue
angular/angular

Round 4：数据准确性

工具最初使用 S 曲线模拟周粒度数据。为了让数据更准确，做了以下改进：

1. 配置 GitHub Token — 在 github.com/settings/tokens 创建 Personal Access Token，获取 GitHub API 的真实当前总 Star 数
2. 真实历史曲线 — 通过解析 star-history.com 的 SVG 曲线路径，提取真实的历史增长形状，再按当前总 Star 数等比缩放，得到 52 周的历史趋势

Round 5：收尾完善

1. 生成 README.md
2. 添加 requirements.txt
3. 页面底部加页脚「Made with 华为云码道」

四、效果与数据方案

工具功能

• 单仓库查询 — 输入 facebook/react，显示 246,317 Stars + 历史趋势图
• 多仓库对比 — textarea 多行输入，不同颜色折线对比
• 历史数据 — 来源：star-history.com 真实曲线 + GitHub API 当前总数
• 周粒度 — 52 个数据点
• 错误处理 — 仓库不存在提示、API 故障兜底
• 响应式布局 — 手机端可用

数据方案

• 当前总 Star 数 — GitHub REST API，通过 GitHub Token 认证，实时获取
• 历史趋势曲线 — star-history.com SVG，解析 SVG 路径提取真实增长形状
• 曲线缩放 — Python 后端，按真实总 Star 数等比缩放 SVG 曲线

五、亮点总结

运营方法论

1. 从自己的痛点出发是最好的内容选题

先解决自己的问题，顺手把过程记录下来——因为痛点是真的，读者才有共鸣。

2. 运营同学也能用 AI 编程做工具

从下载码道 IDE 到工具跑通，所有代码都是通过 Agent Space 对话生成的。运营和开发之间的鸿沟在对话式 AI 编程中被缩小了。

3. 先跑通最小闭环，再逐步迭代

第一轮只提核心需求，跑通后再优化体验、加多仓库、改数据源。每轮都是独立的增量。

4. 把 Prompt 记录好

每一条 Prompt 都是别人可以直接复用的模板。其他运营同学复制同样的 Prompt 就能生成类似工具。

六、操作速查

配置与运行

# 1. 配置 GitHub Token（提升 API 限流额度，获取真实数据）
export GITHUB_TOKEN="github_pat_xxx..."

# 2. 安装依赖并启动
pip install flask requests svg.path
python app.py

工具效果截图

参考资料

• 华为云码道产品页：https://codearts.huaweicloud.com/
• 码道 IDE 下载：codearts.huaweicloud.com → 免费获取 IDE
• 码道体验版开通：免费，无需信用卡
• GitHub Token 创建：https://github.com/settings/tokens
• 本案例项目地址：https://gitcode.com/developer-ecosystem/ai-ops-toolkit/tree/main/tools/madao-star-trend