用华为云码道 CLI/TUI 从零开发「幸运跑马灯抽奖」网页应用本文基于真实操作记录在 Windows 上安装并授权码道 CLI通过 TUI/codearts run输入自然语言需求自动生成跑马灯抽奖网页并完成浏览器预览与功能测试。参考文档什么是码道CLI、安装、授权、快速入门、下载页一、案例目标用码道CodeArts Agent终端交互界面TUI/命令行模式完成一个可直接在浏览器打开的「幸运跑马灯抽奖」网页应用覆盖安装码道 CLI使用 AK/SK 完成授权登录启动 TUI / 使用codearts run输入需求自动生成 HTML/CSS/JS 工程文件浏览器运行与抽奖功能测试最终产物目录marquee-lottery/index.html、style.css、script.js、README.md二、环境准备项目本案例实测操作系统Windows 10/11 (x64)终端PowerShell码道版本26.6.2使用模型huaweicloud-maas/deepseek-v3.2DeepSeek-V3.2预览方式浏览器打开 /python -m http.server官方支持系统还包括 macOS 11、常见 Linux 发行版详见前提条件。使用前需在华为云开通码道代码智能体套餐。三、步骤 1安装码道 CLI3.1 Windows 安装命令在PowerShell中执行安装脚本地址以产品下载页为准irmhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1|iexmacOS / Linuxsh-c$(curl-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)exportPATH~/.codeartsdoer/installers:$PATH3.2 验证安装codearts-v本案例回显26.6.2提示若提示无法识别codearts命令通常是环境变量未刷新。可新开一个「在终端中打开」窗口或重启终端/电脑后再试。四、步骤 2AK/SK 授权登录码道 CLI 支持浏览器授权也支持通过环境变量配置 AK/SK适合自动化与无图形场景。本案例使用 AK/SK。4.1 获取访问密钥登录华为云控制台进入「我的凭证」新建访问密钥下载并妥善保存credentials.csv关闭弹窗后无法再次查看 SK也可参考码道门户说明https://codearts.huaweicloud.com/portal/settings/cli-auth4.2 配置进程级环境变量临时授权PowerShell$env:CODEARTS_CLI_AK 你的AccessKeyId$env:CODEARTS_CLI_SK 你的SecretAccessKeyCMDset CODEARTS_CLI_AK你的AccessKeyId set CODEARTS_CLI_SK你的SecretAccessKey如需永久生效可在系统「环境变量」中新增同名用户变量或写入~/.zshrcmacOS/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-lottery5.2 两种使用方式方式命令适用场景TUI 交互界面codearts对话框持续对话、可视化确认权限CLI 一键执行codearts run 需求...脚本化、批量、无人值守本案例两种方式都验证过TUI 适合边看边改codearts run适合把完整需求一次交给智能体。启动 TUIcodearts首次写入文件时界面会询问目录访问权限建议选择Allow always并 Confirm避免每一步都打断。六、步骤 4输入需求跑马灯中奖应用在 TUI 对话框或使用 CLIcodearts run-mhuaweicloud-maas/deepseek-v3.2--titlemarquee-lottery 请在当前目录创建一个完整的「跑马灯中奖」网页应用 1. 纯 HTML CSS JavaScript可直接用浏览器打开 2. 页面标题幸运跑马灯抽奖 3. 至少 8 个奖品格子点击开始后跑马灯高亮循环逐渐减速停下 4. 弹出/展示中奖结果支持重置显示抽奖历史 5. 节日喜庆红金风格适配桌面与手机 6. 生成 index.html可拆 css/js和 README.md 6.1 码道实际执行过程本案例日志摘要智能体大致按以下工具链工作bash/dir查看当前目录todowrite拆解任务HTML / CSS / JS / 测试write index.html页面骨架开始/停止/重置、奖品区、历史区write style.css布局、跑马灯样式、响应式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 停止并查看结果点击「停止」后当前奖品区展示中奖名称历史记录写入一条。本案例一次实测结果检查项结果页面标题幸运跑马灯抽奖奖品列表一等奖 iPhone、二等奖 耳机、三等奖 优惠券、谢谢参与、再来一次、神秘礼盒、周边T恤、现金红包抽奖结果三等奖 优惠券抽奖次数1历史记录已显示「三等奖 优惠券」及时间戳重置按钮可用九、常见问题与实践经验未配置 AK/SKcodearts docs/codearts models会提示认证失败。先设置CODEARTS_CLI_AK/CODEARTS_CLI_SK。权限弹窗卡住自动化TUI/run若对bash、外部目录写入设为 ask非交互场景会长时间等待。可在权限配置中改为 allow或在 TUI 中选择 Allow always。Windows 下ls -la失败智能体有时发出 Linux 命令PowerShell 中ls -la会报错。码道通常会改用dir继续不影响最终写文件。安装后找不到命令新开终端或重启确保~\.codeartsdoer\installers已在 PATH。模型选择用-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-mhuaweicloud-maas/deepseek-v3.2请创建幸运跑马灯抽奖网页...# 预览python-m http.server 8765参考链接什么是码道CLI安装授权码道CLI 快速入门下载与安装脚本