在 AI 开发者空间里跑鸿蒙案例：从点按钮到看见 WebUI

引子

想试一下鸿蒙实践中心的「云端实践」——不装 DevEco、不配本地 SDK，直接用浏览器跑一个案例。目标是个人记账本那个：端侧 ArkTS 三 Tab，云侧靠 ECS 上自托管的 Appwrite。

把整个过程和几个卡住的地方记一下。

点云端实践之后先选版本

案例详情页上有「云端实践」按钮，点下去不是直接进环境，先跳到一个版本选择页：

我选体验版，因为这次只是想跑一遍看流程。选完点「立即进入」。

三个协议，勾选框点不动

进来先弹协议更新提醒，要同意三个文档：华为云开发者服务协议、生态隐私政策声明、开发者空间开发平台服务协议。

勾选框是一个 div 套一个 input。我第一次用脚本直接调元素的 click()，input.checked 始终是 false，「进入」按钮也一直是禁用态。改成用 Playwright 的 locator 做一次真实点击（产生完整的 mousedown / mouseup / click 序列）之后，checked 才变 true，按钮才放行。

这不是华为云的问题，自定义复选框只监听真实指针事件的情况很普遍。记下来是因为后面还会遇到同类东西。

环境配置：三步，约一分钟

进入后是进度页，三个阶段：

1. 验证参数
2. 启动鸿蒙实践中心 WebUI
3. 打开鸿蒙实践中心 WebUI

到 100% 显示「环境配置完成」。比预期快，没有排队。

它给了我什么

完成后页面顶部出现一个倒计时：体验版容器 3 小时后释放，并提示再次启动会创建全新容器、文档要自己保存。

真正的开发界面在一个内嵌 iframe 里，是容器专属的独立子域（端口前缀 18000），跟外层页面完全不同的 origin，所以外面拿不到它的 DOM，得先切 frame。里面就是「鸿蒙实践中心」WebUI，版本 v26.1.24，左上角显示当前登录的华为云账号。

侧边栏几样东西：项目管理、智能体、CodeArts CLI、CodeArts Web、Skills 管理、设备管理（鸿蒙云手机 / 本地真机与模拟器）、最佳实践。

新建项目的两个表单约束

点「新建项目」要填名称、本地工作目录、描述、技术模板、Git 仓库地址。有两个坑值得先说：

本地工作目录只允许英文、数字和 - _ . /，不能有中文、空格或 ..。填相对路径会存到 ~/.harmony-practice-center/projects/ 下面。我第一次随手写了中文目录名，直接被表单拒掉。

Git 仓库地址只接受 SSH 格式（git@hostname:org/repo.git），HTTPS 地址填不进去。也就是说想把案例仓拉下来，得先在「连接 GitCode」里配好 SSH key，不能直接粘仓库网页上那个地址。

技术模板给的是空项目、Hello World、鸿蒙小游戏、端云协同应用、办公工具、创新应用。记账本属于端云协同应用这一类，不过案例本身带仓库，走 Git 地址更直接。

小结

整条路径：案例详情页 → 云端实践 → 选体验版 → 签协议 → 等容器起 → 在内嵌 WebUI 里新建项目拉代码。

体验版适合「就想看一眼能不能跑」：免费、秒起，代价是 3 小时后连数据和容器一起没了。真要在里面写点能带走的东西，得换持久化版，按实际使用时长扣核时。

下一步准备把 account_book 拉下来跑一次，重点看它端侧怎么连 ECS 上那个 Appwrite 实例——这是这个案例里唯一涉及云侧配置的地方，也是我最没把握的部分。