码道实战：用码道 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 曲线模拟周粒度数据。为了让数据更准确，做了以下改进：

配置 GitHub Token ：在 github.com/settings/tokens 创建 Personal Access Token，通过环境变量传入应用，获取 GitHub API 的真实当前总 Star 数
真实历史曲线：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 写出来的

工具效果截图

这个案例文档本身也是在 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