尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

HarmonyOS应用<奇妙科学乐园>开发第2篇:Vibe Coding开发流程——从需求描述到应用上线

HarmonyOS应用<奇妙科学乐园>开发第2篇:Vibe Coding开发流程——从需求描述到应用上线 1. 为什么“奇妙科学乐园”需要一条统一的 AI 通道做 HarmonyOS 应用最容易被忽略的一环不是 ArkTS 语法也不是 UI 布局而是开发过程中 AI 工具链的接入方式。我在做“奇妙科学乐园”这个儿童科普应用时前期最大的时间黑洞不是写页面而是DevEco Code 要配一个模型、命令行脚本要配一个模型、写 SKILL.md 时想让 AI 帮忙润色又要配一个模型。每个工具一套 Key、一套 Base URL改一次配置要翻三四个文档调试到一半 Key 额度用完还得切来切去。Vibe Coding 的核心是“用自然语言描述需求AI 帮你把意图变成可运行代码”。但这句话有个隐含前提你的 AI 通道得是通的、统一的、可复用的。否则你会在“配置模型”这件事上消耗掉本该用来打磨科学问答体验的精力。TaoToken 在这里扮演的角色就是把模型对话、Coding Plan、API Key 管理收敛到一个入口让 DevEco Code、命令行脚本、Skill 生成辅助工具共用同一套 Key 和 API 通道。这篇是“奇妙科学乐园”开发系列第 2 篇聚焦从需求描述到应用上线的完整 Vibe Coding 链路。我会给出可直接复制的config.toml与settings.json配置骨架演示 DevEco Code 中 Skill 调用与 ArkTS 页面生成的验证动作并把我踩过的配置坑一次性讲清楚。适合已经装好 DevEco Studio、想用 AI 加速 HarmonyOS 应用开发但被多工具配置卡住的开发者。2. TaoToken 前置把 Key 和 API 通道先理顺在动手写代码之前先把“AI 通道”这件事解决掉。TaoToken 提供的是统一的 API 接入层官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 注意 API 地址不带 UTM 参数配置里填这个。你需要先拿到一个 API Key。进入控制台创建 Key 的路径是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 在 API Keys 页面生成一个 Key形如sk-xxxxxxxx。这个 Key 后面会同时被 DevEco Code、命令行脚本、以及你自己写的 Skill 辅助工具复用。注意Key 只显示一次生成后立刻复制到本地安全位置。不要提交到 Git 仓库建议放在环境变量或本地未跟踪的配置文件里。如果你只是想先验证模型能不能通可以直接用模型对话页面 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一条消息试试确认 Key 有效、额度正常再去配开发工具。这一步能帮你排除掉“到底是 Key 问题还是工具配置问题”的干扰。对于长期做 HarmonyOS 编码、要跑 Agent 类任务的场景Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 里有针对编码场景的套餐说明适合把 DevEco Code 的日常调用量固定下来避免按次计费时心里没底。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 配置字段有疑问时以文档为准。3. 可复制配置config.toml 与 settings.json 骨架Vibe Coding 工具链通常有两类配置文件一类是命令行 Agent 用的config.toml一类是编辑器/IDE 插件用的settings.json。下面给出的是骨架字段名以你实际使用的工具版本为准但结构可以直接套。3.1 config.toml命令行 Agent 的模型通道# ~/.config/deveco-code/config.toml # DevEco Code / 命令行 Agent 的模型接入配置 [provider] # 统一走 TaoToken 的 API 端点不要带 UTM 参数 base_url https://taotoken.net/api api_key sk-你的Key # 模型名按 TaoToken 文档里支持的名称填写 model glm-5.1 timeout_seconds 120 [agent] # Build 模式适合日常代码生成Plan 适合需求拆解 default_mode build # 开启 ArkTS 语法规范 Skill 自动加载 auto_load_skills true [skills] # 内置 Skill 目录DevEco Code 会自动扫描 builtin_dir ~/.deveco-code/skills # 项目级 Skill 目录指向你的 HarmonyOS 工程 project_dir ./entry/skills [logging] level info # 把请求日志落到本地排障时非常有用 log_file ~/.deveco-code/logs/agent.log这里的关键点是base_url填https://taotoken.net/apiapi_key填你在控制台生成的 Key。model字段填你套餐里可用的模型名不确定就先去模型对话页面确认。3.2 settings.jsonIDE 插件侧配置{ devecoCode.provider: { baseUrl: https://taotoken.net/api, apiKey: sk-你的Key, model: glm-5.1, timeout: 120000 }, devecoCode.agent: { defaultMode: build, autoLoadSkills: true, skillDirs: [ ${workspaceFolder}/entry/skills ] }, devecoCode.arkts: { strictMode: true, rejectAnyType: true, rejectTemplateString: true }, devecoCode.logging: { level: info, outputChannel: DevEco Code } }arkts.strictMode这几个开关建议全开。ArkTS 严格模式会拒绝any、as断言、模板字符串等语法提前打开能让 AI 生成的代码在编译前就暴露问题而不是等到构建阶段才发现一堆报错。3.3 环境变量兜底方案有些工具不读配置文件只认环境变量。可以在 shell 里加一层兜底# ~/.zshrc 或 ~/.bashrc export TAOTOKEN_BASE_URLhttps://taotoken.net/api export TAOTOKEN_API_KEYsk-你的Key export DEVECO_HOME/Applications/DevEco-Studio.app/ContentsWindows PowerShell 对应写法[System.Environment]::SetEnvironmentVariable(TAOTOKEN_BASE_URL, https://taotoken.net/api, User) [System.Environment]::SetEnvironmentVariable(TAOTOKEN_API_KEY, sk-你的Key, User)配置完成后先别急着写业务代码跑一条最小验证请求确认通道是通的。4. 验证请求确认通道通了再写 Skill4.1 命令行验证用 curl 直接打 TaoToken 的 API确认 Key 和端点都对curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer sk-你的Key \ -H Content-Type: application/json \ -d { model: glm-5.1, messages: [ {role: user, content: 用一句话说明 ArkTS 和 TypeScript 的区别} ] }如果返回里有正常的choices内容说明 Key、端点、模型名三者都对。如果返回 401检查 Key 是否复制完整返回 404检查base_url是否误加了 UTM 参数或多余路径。4.2 DevEco Code 侧验证启动 DevEco Code 的 TUI 界面输入一条和“奇妙科学乐园”相关的需求观察它是否真的调用了模型deveco --version deveco进入交互界面后输入为奇妙科学乐园创建一个科学问答 Skill名称为 science-qa 支持太空、自然、海洋、科技、人体、天气六大主题 对找不到答案的问题返回儿童友好的提示语。如果配置正确Agent 会开始拆解需求、生成目录结构、写 SKILL.md 和 ArkTS 入口脚本。如果它卡在“正在连接模型”或者报网络错误回到第 3 节的配置检查base_url和api_key。4.3 Skill 调用验证Skill 生成后重点验证三处名称是否一致这是最容易翻车的地方目录名: entry/skills/science-qa/ SKILL.md: name: science-qa module.json5: skillProfiles[0].name: science-qa三处必须完全一致大小写、连字符都不能差。验证方式是编译后触发一次 Skill 调用看系统能否匹配到。如果语音触发无响应且控制台无日志九成是名称不一致导致注册失败。4.4 ArkTS 页面生成验证让 DevEco Code 生成一个科学问答的结果展示页面验证它是否遵守 ArkTS 严格模式为 science-qa Skill 生成一个结果展示页面 用 ArkUI 的 Column 和 Text 组件展示 topic、answer、funFact 三个字段 不要使用 any 类型和模板字符串。生成后检查代码里有没有any、as、反引号模板字符串。如果有说明arkts.strictMode没生效或者模型没加载 ArkTS 语法规范 Skill。把编译错误直接粘贴回 DevEco Code让它自动修复这是 Vibe Coding 迭代最快的方式。5. 本篇常见错排查5.1 报错401 Unauthorized现象是请求直接返回 401模型对话页面能用但命令行不能用。原因通常是 Key 复制时带了空格或者配置文件里 Key 被引号包裹导致解析异常。检查config.toml里api_key是否有多余空格settings.json里 Key 字符串是否完整。另外确认你用的是 API Keys 页面生成的 Key而不是其他类型的凭证。5.2 报错404 Not Foundbase_url填错是最常见原因。正确值是https://taotoken.net/api不要带 UTM 参数不要多加/v1之外的路径具体以接入文档为准。有些工具会自动拼接/v1/chat/completions有些需要你手动补全配置前先看文档说明。5.3 报错ArkTS 严格模式编译失败典型报错是Spread operator is not allowed或Use of any type is not allowed。这是模型生成了不符合 ArkTS 规范的代码。解决办法有两个一是确认arkts.strictMode已开启让语法规范 Skill 在生成阶段就拦截二是把报错原文粘贴回 DevEco Code让它按 ArkTS 规范重写。展开运算符改用Object.assignany改用明确类型或unknown加类型守卫模板字符串改用拼接。5.4 报错Skill 注册失败无日志前面提过三处名称不一致是主因。除此之外还要检查module.json5里srcEntries的路径是否相对于src/main/正确。如果 Skill 目录放在entry/skills/而module.json5在entry/src/main/路径要写成../../skills/science-qa/scripts/ScienceQASkill.ets。路径写错同样会导致注册失败且没有明显报错。5.5 报错Skill 执行超时现象是触发后系统一直等待最后返回执行失败。原因是某个代码分支没有调用completeArkTSScriptInApp回传结果。参数校验失败、异常捕获这些分支最容易漏。建议封装一个统一的report方法所有分支都通过它回传成功失败都要回传否则系统侧会一直等到超时。5.6 报错argv 参数越界崩溃AI 智能体传入的参数数量不固定直接按索引访问argv[1]可能越界。正确做法是先判断argv.length再取值并给默认值兜底。第一个参数有时是主题有时是问题需要做兼容处理不能假设参数位置固定。6. 把链路跑通之后从需求描述到应用上线Vibe Coding 真正省时间的地方不在于“AI 帮你写了几行代码”而在于迭代速度。传统开发改一个触发场景要手动改文件、编译、运行、看结果一轮十几分钟配置好统一通道后用自然语言描述调整点Agent 自动改文件、自动编译、自动测试一轮几十秒。这个差距在 Skill 开发这种需要反复调触发边界和返回结构的场景里会被放大很多倍。我自己的习惯是先用 Plan 模式把复杂需求拆成任务清单再用 Build 模式逐个执行编译报错直接粘贴给 Agent 修。Key 和 API 通道统一走 TaoToken 之后DevEco Code、命令行脚本、Skill 辅助工具共用一套配置换工具不用重新配模型这是最实际的收益。如果你在配置config.toml或settings.json时遇到字段对不上的情况去接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 核对最新字段名。想先确认模型可用性用模型对话页面 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一条消息最快。长期跑编码和 Agent 任务的话Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 能把调用量固定下来。Key 管理统一在控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 的 API Keys 页面。下一篇会讲 A2A 跨应用智能体互通把“一句话查天气→推荐户外活动→自动添加日历”这条跨应用任务链跑通。在那之前建议你先用本篇的配置骨架把 science-qa Skill 完整跑一遍从需求描述到编译通过亲手体验一次 Vibe Coding 的完整闭环。
返回列表