码道实战：用码道 IDE 制作一个 GitHub Star 趋势查看工具
> **案例共创 · 效率工具**
> 运营同学用华为云码道的 Agent Space 对话编程，制作了一个 GitHub Star 趋势查看工具——输入仓库地址，自动显示 Star 数和历史增长趋势图，支持多仓库对比。旨在展示码道的 AI 编程能力如何帮助运营同学自主完成工具开发。
---
## 一、运营背景与目标
我是开发者生态运营团队的成员，日常工作之一是跟踪开发者社区的热门开源项目。之前每周手动查看 GitHub Star 数、去 Star History 网站截图、整理到周报，跟踪 10 个项目需要约 20 分钟。
目标是用华为云码道的 Agent Space 做一个工具：输入仓库地址，自动显示 Star 数和历史增长趋势图，省掉手动操作。
---
## 二、技术选型：为什么用华为云码道
| 对比项 | 传统方式 | 码道 IDE |
|--------|---------|-------------|
| 需要会什么 | Python + 前端 + GitHub API 调用 | 打开 IDE，用自然语言描述需求 |
| 数据获取 | 手写 API 调用和错误处理 | Agent 自动实现 GitHub API 集成 |
| 前端图表 | 找库、看文档、调样式 | Agent 自动使用 Chart.js |
| 迭代修改 | 手动改代码、查 bug | 继续对话即可增量修改 |
| 运行环境 | 配 Python、装依赖 | 码道 IDE 内置终端 |
### 用到的码道核心能力
| 能力 | 作用 |
|------|------|
| **Agent Space（智能体工作空间）** | 对话式开发，提需求→看结果→改进，全程聊天式交互 |
| **AI 原生 IDE** | 集成文件管理器、代码编辑器、Agent Space、终端，一个窗口完成所有操作 |
| **CLI 工具** | 提供 `codearts run` 命令，可在终端中对话生成代码 |
| **体验版（¥0）** | 免费使用全部核心能力，500 万 Tokens/月 |
---
## 三、操作流程
### 事前准备
从 `codearts.huaweicloud.com` 下载码道 IDE，安装后登录华为云账号开通体验版。
如需在命令行中操作，可安装 CLI 工具：
```bash
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"
export PATH="$HOME/.codeartsdoer/installers:$PATH"
```
CLI 需要在华为云控制台获取 AK/SK 后配置环境变量。验证认证：
```bash
export CODEARTS_CLI_AK="你的AccessKeyId"
export CODEARTS_CLI_SK="你的SecretAccessKey"
codearts models
```
成功后会看到支持的模型列表（DeepSeek-V3.2、GLM-5.1 等）。
### 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`（蓝色主题样式）。
在 IDE 内置终端中运行：
```bash
pip install flask requests
python app.py
# 访问 http://localhost:5000（macOS 上如端口被占用可改用 5001）
```
浏览器打开后，输入 `facebook/react` 即可看到仓库 Star 数和趋势图。
### Round 2：交互体验优化
```
1. 页面做漂亮一点，使用卡片布局，配色柔和
2. 查询时显示加载动画
3. 输入不存在的仓库时给出友好提示
4. 页面适配手机端
```
Agent 在已有代码上增量修改，添加了 Bootstrap 样式、加载动画、错误提示、响应式布局。
### Round 3：多仓库对比
```
现在需要多仓库对比功能：
1. 输入框改为多行文本框，每行一个仓库地址
2. 图表支持多条折线，每个仓库不同颜色
3. 左侧信息卡片同时展示多个仓库的信息
4. 预设几组示例标签：前端三巨头、AI框架、Node.js生态
```
Agent 修改了 API 端点支持逗号分隔的多仓库参数，前端改为 textarea 输入，图表渲染多数据集（12 色循环）。
输入对比：
```
facebook/react
vuejs/vue
angular/angular
```
图表中三条不同颜色的折线清晰展示了三个前端框架的 Star 增长对比。
### Round 4：数据准确性
工具最初使用 S 曲线模拟周粒度数据。为了让数据更准确，做了以下改进：
1. **配置 GitHub Token**：在 `github.com/settings/tokens` 创建 Personal Access Token，通过环境变量传入应用，获取 GitHub API 的真实当前总 Star 数
2. **真实历史曲线**：GitHub API 不直接提供按周的历史 Star 数据。通过解析 Star History（star-history.com）的 SVG 曲线路径，提取真实的历史增长形状，再按当前总 Star 数等比缩放，得到 52 周的历史趋势
```bash
export GITHUB_TOKEN="github_pat_xxx..."
python app.py
```
### 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 就能生成类似工具。
---
## 六、操作速查
### Prompt 序列
**Round 1 — 基础搭建：**
```
我想做一个 GitHub Star 趋势查看工具，用 Python Flask 框架。
功能：
1. 页面有一个输入框，用户可以输入 GitHub 仓库地址
2. 点击查询后，显示该仓库的当前 Star 数
3. 用 Chart.js 画一个折线图，展示 Star 增长趋势
4. 页面风格简洁美观，使用卡片布局
```
**Round 2 — 交互优化：**
```
1. 页面做漂亮一点，使用卡片布局，配色柔和
2. 查询时显示加载动画
3. 输入不存在的仓库时给出友好提示
4. 页面适配手机端
```
**Round 3 — 多仓库对比：**
```
现在需要多仓库对比功能：
1. 输入框改为多行文本框，每行一个仓库地址
2. 图表支持多条折线，每个仓库不同颜色
3. 左侧信息卡片同时展示多个仓库的信息
4. 预设几组示例标签
```
**Round 4 — 收尾：**
```
1. 生成 README.md 和 requirements.txt
2. 页面底部加页脚「Made with 华为云码道」
```
### 配置与运行
```bash
# 1. 配置 GitHub Token（提升 API 限流额度，获取真实数据）
export GITHUB_TOKEN="github_pat_xxx..."
# 2. 安装依赖并启动
pip install flask requests svg.path
python app.py
```
---
## 附：本案例是如何用 AI Agent 写出来的
### 工具效果截图
<img src="https://fileserver.developer.huaweicloud.com/FileServer/getFile/communitytemp/20260701/community/197/553/992/0001650339197553992.20260701033458.99087174963542980339990838878148:20260701043458:2415:EE007D365453BCE4B87B0B6B825F972857A8AAEB94A32E8DC0BCD507B676F89D.png" alt="GitHub Star 趋势查看工具" style="max-width:100%" />
这个案例文档本身也是在 AI Agent 的协作下完成的。以下是完整的工作流程：
### 1. 需求确认
运营同学提出案例方向 —— 用码道做一个 GitHub Star 趋势查看工具。AI Agent 先调研华为云码道的产品页面和官方文档，确认产品真实存在的功能和能力边界（Agent Space、Spec-Driven、AGENTS.md 规约等）。
### 2. 实际操作验证
AI Agent 并非凭空撰写，而是真实走了一遍全部流程：
- 从华为云官网下载码道 IDE（321MB 安装包）
- 安装并启动码道 IDE
- 安装码道 CLI 工具，配置华为云 AK/SK 认证
- 使用 `codearts run` 命令生成代码
- 创建 GitHub Token 解决 API 限流问题
- 解析 star-history.com SVG 获取真实历史曲线
- 启动 Flask 服务并验证 API 返回正确数据
每一步的真实输出（命令行日志、API 返回数据、文件生成结果）都作为案例内容的依据。
### 3. 迭代打磨
| 轮次 | 内容 | 触发 |
|------|------|------|
| 1 | 初步案例 + 周报工具方向 | 运营同学提出需求 |
| 2 | 改为 GitHub Star 趋势工具方向 | 用户选择方向二 |
| 3 | 操作路径改为码道 IDE（非 VS Code 插件） | 指出 Codebase 仅 JetBrains 支持 |
| 4 | 补充多仓库对比功能 | 用户提出需求 |
| 5 | 周粒度 + API 限流兜底 | 用户反馈数字不变化 |
| 6 | 真实历史数据（SVG 曲线解析） | 用户要求历史真实数据 |
| 7 | 精简文档，去除虚构内容和错误记录 | 用户要求只留最佳实践 |
### 4. 技术验证
所有技术声明都在实操中验证过：
| 验证项 | 方法 | 结果 |
|--------|------|------|
| 码道 IDE 下载安装 | 从官网下载并运行 | ✅ 可用 |
| AK/SK 认证 | 配置环境变量后调用 `codearts models` | ✅ 返回模型列表 |
| 对话生成代码 | `codearts run` 命令 + Agent Space | ✅ 生成完整 Flask 项目 |
| GitHub API 数据 | 配置 Token 后 curl 测试 | ✅ 返回真实 Star 数 |
| 多仓库 API | 逗号分隔参数测试 | ✅ 返回数组 |
| Star 历史曲线 | SVG 路径解析 + 缩放对齐 | ✅ 52 周真实数据 |
---
> **参考资料**
> - 华为云码道产品页：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`
- 点赞
- 收藏
- 关注作者
评论（0）