用华为云码道 CLI/TUI 从零开发「幸运跑马灯抽奖」网页应用

用华为云码道 CLI/TUI 从零开发「幸运跑马灯抽奖」网页应用

本文基于真实操作记录：在 Windows 上安装并授权码道 CLI，通过 TUI/codearts run输入自然语言需求，自动生成跑马灯抽奖网页，并完成浏览器预览与功能测试。
参考文档：什么是码道CLI、安装、授权、快速入门、下载页

一、案例目标

用码道（CodeArts Agent）终端交互界面（TUI）/命令行模式，完成一个可直接在浏览器打开的「幸运跑马灯抽奖」网页应用，覆盖：

1. 安装码道 CLI
2. 使用 AK/SK 完成授权登录
3. 启动 TUI / 使用codearts run输入需求
4. 自动生成 HTML/CSS/JS 工程文件
5. 浏览器运行与抽奖功能测试

最终产物目录：marquee-lottery/（index.html、style.css、script.js、README.md）

二、环境准备

官方支持系统还包括 macOS 11+、常见 Linux 发行版，详见前提条件。使用前需在华为云开通码道代码智能体套餐。

三、步骤 1：安装码道 CLI

3.1 Windows 安装命令

在PowerShell中执行（安装脚本地址以产品下载页为准）：

irmhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1|iex

macOS / Linux：

sh-c"$(curl-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"&&exportPATH=~/.codeartsdoer/installers:$PATH

3.2 验证安装

codearts-v

本案例回显：

26.6.2

提示：若提示无法识别codearts命令，通常是环境变量未刷新。可新开一个「在终端中打开」窗口，或重启终端/电脑后再试。

四、步骤 2：AK/SK 授权登录

码道 CLI 支持浏览器授权，也支持通过环境变量配置 AK/SK（适合自动化与无图形场景）。本案例使用 AK/SK。

4.1 获取访问密钥

1. 登录华为云控制台，进入「我的凭证」
2. 新建访问密钥，下载并妥善保存credentials.csv（关闭弹窗后无法再次查看 SK）
3. 也可参考码道门户说明：https://codearts.huaweicloud.com/portal/settings/cli-auth

4.2 配置进程级环境变量（临时授权）

PowerShell：

$env:CODEARTS_CLI_AK ="你的AccessKeyId"$env:CODEARTS_CLI_SK ="你的SecretAccessKey"

CMD：

set CODEARTS_CLI_AK=你的AccessKeyId set CODEARTS_CLI_SK=你的SecretAccessKey

如需永久生效，可在系统「环境变量」中新增同名用户变量，或写入~/.zshrc（macOS/Linux）。

4.3 验证授权是否成功

codearts models

授权成功后可看到可用模型列表，例如：

model_id model_name ------------------------------------------------------------- huaweicloud-maas/deepseek-v3.2 DeepSeek-V3.2 huaweicloud-maas/GLM-5.1 GLM-5.1 huaweicloud-maas/Glm-5-internal GLM-5

若出现「认证失败，没有设置环境变量 CODEARTS_CLI_AK/CODEARTS_CLI_SK」，说明当前终端会话尚未配置密钥。

安全提醒：AK/SK 等同账号凭证，请勿提交到公开仓库或粘贴到公开文章正文。本文截图中已脱敏。

五、步骤 3：创建项目目录并启动码道

5.1 创建工作目录

mkdir D:\demo\demo\marquee-lottery cd D:\demo\demo\marquee-lottery

5.2 两种使用方式

本案例两种方式都验证过：TUI 适合边看边改；codearts run适合把完整需求一次交给智能体。

启动 TUI：

codearts

首次写入文件时，界面会询问目录访问权限，建议选择Allow always并 Confirm，避免每一步都打断。

六、步骤 4：输入需求（跑马灯中奖应用）

在 TUI 对话框，或使用 CLI：

codearts run-m"huaweicloud-maas/deepseek-v3.2"--title"marquee-lottery"@" 请在当前目录创建一个完整的「跑马灯中奖」网页应用： 1. 纯 HTML + CSS + JavaScript，可直接用浏览器打开 2. 页面标题：幸运跑马灯抽奖 3. 至少 8 个奖品格子；点击开始后跑马灯高亮循环，逐渐减速停下 4. 弹出/展示中奖结果，支持重置，显示抽奖历史 5. 节日喜庆红金风格，适配桌面与手机 6. 生成 index.html（可拆 css/js）和 README.md "@

6.1 码道实际执行过程（本案例日志摘要）

智能体大致按以下工具链工作：

1. bash/dir：查看当前目录
2. todowrite：拆解任务（HTML / CSS / JS / 测试）
3. write index.html：页面骨架（开始/停止/重置、奖品区、历史区）
4. write style.css：布局、跑马灯样式、响应式
5. write script.js：奖品数据、滚动动画、抽奖与历史统计

会话结束时回显类似：

已创建完整的「跑马灯中奖」网页应用 文件结构： - index.html - style.css - script.js

本案例生成耗时约6 分钟（含模型推理与多次写文件）。

七、步骤 5：查看生成结果

目录内容：

marquee-lottery/ ├── index.html ├── style.css ├── script.js └── README.md

核心能力包括：

• 8 个奖品跑马灯滚动与高亮
• 开始 / 停止 / 重置
• 抽奖次数、中奖记录
• 中奖彩屑动画
• 空格键开始/停止，Esc 重置

八、步骤 6：运行与测试结果

8.1 启动本地预览

cd D:\demo\demo\marquee-lottery python-m http.server 8765

浏览器访问：http://127.0.0.1:8765/index.html

（也可直接双击打开index.html。）

8.2 初始页面

页面标题为「幸运跑马灯抽奖」，可见奖品条、开始抽奖按钮、奖品列表与概率。

8.3 抽奖进行中

点击「开始抽奖」后，跑马灯高亮快速循环。

8.4 停止并查看结果

点击「停止」后，当前奖品区展示中奖名称，历史记录写入一条。

本案例一次实测结果：

九、常见问题与实践经验

1. 未配置 AK/SK
   codearts docs/codearts models会提示认证失败。先设置CODEARTS_CLI_AK/CODEARTS_CLI_SK。

2. 权限弹窗卡住自动化
   TUI/run若对bash、外部目录写入设为 ask，非交互场景会长时间等待。可在权限配置中改为 allow，或在 TUI 中选择 Allow always。

3. Windows 下ls -la失败
   智能体有时发出 Linux 命令；PowerShell 中ls -la会报错。码道通常会改用dir继续，不影响最终写文件。

4. 安装后找不到命令
   新开终端或重启，确保~\.codeartsdoer\installers已在 PATH。

5. 模型选择
   用-m huaweicloud-maas/deepseek-v3.2可指定模型；也可用codearts models查看当前账号可用列表。

十、总结

本案例完整走通了码道 CLI/TUI 的主路径：

安装 → AK/SK 授权 → 输入自然语言需求 → 自动生成前端工程 → 浏览器验证抽奖效果

对「活动页、小游戏、演示 Demo」这类中小前端任务，码道可以把需求直接落成可运行代码，显著缩短从想法到可演示页面的时间。后续若要改奖品、概率或皮肤，继续在同一会话里对话即可迭代。

附录：本案例关键命令速查

# 安装irmhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1|iex# 授权（当前窗口）$env:CODEARTS_CLI_AK ="你的AK"$env:CODEARTS_CLI_SK ="你的SK"# 验证codearts-v codearts models# 进入项目并开发cd D:\demo\demo\marquee-lottery codearts# 或codearts run-m"huaweicloud-maas/deepseek-v3.2""请创建幸运跑马灯抽奖网页..."# 预览python-m http.server 8765

参考链接

• 什么是码道CLI
• 安装
• 授权
• 码道CLI 快速入门
• 下载与安装脚本