【共创季稿事节】用华为云码道三天搓出《燃烧肥肉》,鸿蒙瘦身 App 就该这么干

📅 2026/7/15 3:55:34
【共创季稿事节】用华为云码道三天搓出《燃烧肥肉》,鸿蒙瘦身 App 就该这么干
先说结论。我花了三天用华为云码道独立 IDE从零做出了一款鸿蒙原生瘦身应用《燃烧肥肉》。体重记录、卡路里收支、运动计划、趋势图表全都有。没有一行代码是我一个字一个字敲的全部是和码道智能体对话生成的。这篇文章把从下载安装包到真机跑通的每一步全部按真实屏幕顺序讲清楚。每一步都标注了截图该补在哪你照着走三天也能交卷。为什么我要做一款瘦身 App事情是这样的。去年体检报告出来脂肪肝三个字把我吓清醒了。我开始疯狂找瘦身 App市面上的产品要么塞满广告要么把核心功能锁在会员墙后面要么数据图表丑到不想看。我是鸿蒙开发者为什么不自己做一个。HDC 2026 之后鸿蒙进入 Agent 时代我一直在琢磨用码道 IDE 做一个真正跑得起来的鸿蒙原生应用。瘦身这个场景太合适了数据结构清晰UI 交互明确还能用上鸿蒙的关系型数据库和图表组件。名字我想了半天最后定为《燃烧肥肉》。够直白够有劲够让人一看就想动起来。第一步把码道 IDE 装起来打开浏览器进入华为云码道官网产品页找到 IDE 客户端下载入口。官方提供三种系统安装包。Windows 选 .exemacOS 选 .dmgLinux 选 .deb 或 .rpm 。下载完成后双击安装。Windows 系统记得右键用管理员身份运行避免后续智能体功能调用失败。装完桌面上会出现华为云码道图标双击启动。第二步首次登录与服务开通启动后弹出欢迎页左侧是快捷入口右侧是登录区域。输入华为云账号密码登录。首次登录会强制跳转到服务开通页面。这里有个我栽过的坑必须勾选我已阅读并同意然后点立即开通按钮。跳过这步后续所有智能体对话都会处于未激活状态 。开通成功后IDE 右下角出现激活标识左侧活动栏多出一个智能体图标。第三步切换到鸿蒙增训模型码道 IDE 默认用通用模型开发鸿蒙一定要手动切。点击 IDE 右上角设置图标进入全局设置页面。左侧导航栏找到 模型 选项切换到 GLM-4.7-ArkTS-SPARK。这是华为云码道专门为鸿蒙 ArkTS 增训的模型状态管理装饰器、ArkUI 组件、意图框架这些领域知识它直接吃透 。切换完建议重启 IDE让模型完整加载。底部状态栏会显示模型已就绪。第四步创建鸿蒙项目点击左上角 文件新建项目。模板选择 Empty Ability这是鸿蒙原生应用的标准起点 。工程名称填 BurnFat包名 com.example.burnfat最低 API 版本选 6.0.0(20)设备类型勾选 Phone 。点击创建IDE 自动同步项目结构并安装依赖大约 1 分钟完成。第五步安装鸿蒙专属 Skills码道 IDE 的核心杀手锏就是 Skills。鸿蒙专属 Skills 覆盖应用开发全周期是官方沉淀下来的开发经验包 [5]。点击 IDE 右上角设置图标进入 技能与规则 页面。在 市场 页签搜索 harmonyos会看到一系列官方技能我重点安装下面三个。harmonyos-build-deploy负责鸿蒙应用一键编译并部署到真机harmonyos-skill-builder把自然语言需求转成鸿蒙代码模板。harmonyos-intent-validator校验意图配置是否符合鸿蒙规范。每个技能后点添加弹出选择安装位置对话框。我选项目级让 Skills 随项目分发团队拉代码后直接可用安装完回到 全部已安装 页面三个技能状态都是已开启。第六步把《燃烧肥肉》的需求写成大白话在和码道对话之前我习惯先把需求写成大白话。智能体能不能帮你干好活取决于你描述得有多细。《燃烧肥肉》的核心功能我拆成四块。第一块体重记录。用户每天录入体重自动计算 BMI按时间倒序展示历史记录。第二块卡路里收支。记录每日饮食摄入和运动消耗实时显示热量缺口或盈余。第三块运动计划。根据用户目标体重和当前体重推荐每日运动方案支持打卡。第四块趋势图表。用折线图展示体重变化用环形图展示热量构成。数据全部用鸿蒙的关系型数据库 RelationalStore 存本地 [6]。需求写明白剩下的事全交给码道。第七步用码道生成项目骨架我打开码道 IDE 右侧的智能体对话窗口把完整需求文档贴进去。根据以下需求在当前 BurnFat 项目目录下生成鸿蒙原生应用代码。应用名称燃烧肥肉包含体重记录、卡路里收支、运动计划、趋势图表四个模块。数据使用 RelationalStore 本地存储。界面主色调为活力橙风格简洁现代。支持 HarmonyOS 6.0 及以上版本。发送后码道智能体自主拆解任务先调出文件搜索确认项目结构然后开始逐个文件落笔。大约 5 分钟资源管理器里多出一整套文件结构。我点开 Index.ets码道生成的代码里 Entry、Component 装饰器齐全Tabs 组件搭配 TabContent 实现底部导航四个页面的路由跳转逻辑也写好了 。只在主色调上微调了一下把码道默认的浅橙改成了更醒目的 #FF6B35视觉冲击力更强。第八步数据库层码道帮我避了一个大坑数据存储是瘦身 App 的地基。我继续在对话窗口输入。请基于 RelationalStore 实现 DatabaseHelper包含建表、增删改查四个基础方法。体重表字段包括 id、weight、date、bmi。卡路里表字段包括 id、type、name、calories、date。运动表字段包括 id、sport、duration、calories_burned、date、completed。码道生成的 DatabaseHelper.ets 里getRDBStore 上下文获取、SQL 建表语句、predicates 条件构造、ResultSet 遍历全部符合鸿蒙官方规范 。这里码道主动提醒了我一个坑。RelationalStore 的安全级别要设置为 S1否则在某些设备上读写会失败。这个细节我之前完全不知道码道直接帮我写进去了 。const config { name: BurnFat.db, securityLevel: relationalStore.SecurityLevel.S1 }; const store await relationalStore.getRDBStore(context, config);这就是 ArkTS 增训模型的价值它不只是写代码还把鸿蒙平台的隐性约束一并考虑进去 [1]。第九步体重记录页ArkUI 组件信手拈来体重记录是用户每天都要用的页面交互必须丝滑。码道生成的代码让我眼前一亮。State 装饰器管理体重输入值Link 实现父子组件数据同步List 组件搭配 ListItem 实现历史记录swipeAction 属性实现左滑删除全部是鸿蒙官方推荐的写法 [3]。BMI 颜色判断逻辑也写得很干净。State bmiColor: string #4CAF50; updateBMIColor(bmi: number) { if (bmi 18.5) this.bmiColor #2196F3; else if (bmi 24) this.bmiColor #4CAF50; else if (bmi 28) this.bmiColor #FF9800; else this.bmiColor #F44336; }我只在日期选择器上加了一个默认取当天的小优化其余直接用。第十步卡路里环形图码道直接画出来了卡路里收支页需要一个环形图展示摄入和消耗的占比。这个需求如果自己写至少要折腾半天 Canvas 绘制。我直接丢给码道。码道生成的 CalorieRing.ets 里Canvas 的 onReady 回调、arc 绘制方法、fillStyle 颜色切换、文字居中渲染一气呵成。Canvas(this.context) .width(200) .height(200) .onReady(() { this.context.beginPath(); this.context.arc(100, 100, 80, 0, this.intakeAngle); this.context.strokeStyle #FF6B35; this.context.lineWidth 16; this.context.stroke(); });我跑了一下模拟器环形图渲染正常颜色切换也符合预期。这一步如果手写我估计要花两小时。第十一步趋势图表折线图让数据会说话趋势图表页是《燃烧肥肉》的灵魂用户最想看到的就是体重曲线往下走。码道生成的折线图逻辑很完整。日期轴的刻度计算、体重轴的极值映射、折线路径的 moveTo 和 lineTo 调用、数据点的 fillCircle 标记全都到位。时间维度切换用了 Radio 组件做三选一切换后重新查询数据库并重绘 Canvas。我加了一个小优化当体重呈下降趋势时折线颜色显示绿色上升时显示红色给用户更直观的正反馈。第十二步性能优化对话式调优代码能跑只是第一步流畅度才是留存关键。打开码道智能体窗口把性能瓶颈逐项抛给它。第一项数据库查询慢。码道建议给 weight 表的 date 字段加索引并提供了 CREATE INDEX 语句。第二项页面切换卡顿。码道建议把四个 Tab 页面改为懒加载模式用 LazyForEach 替代 ForEach 渲染长列表。第三项Canvas 重绘频繁。码道建议在数据未变化时跳过 onDraw 调用用一个 dirtyFlag 做标记。LazyForEach(this.weightList, (item: WeightModel) { ListItem() { WeightCard({ weight: item }) } }, (item: WeightModel) item.id.toString());整个优化过程没切出 IDE所有改动都在对话窗口完成码道自己调工具改文件我只负责 review。第十三步一键编译部署到模拟器代码全部就位进入最爽的环节。点击 IDE 底部终端调用 harmonyos-build-deploy 技能。码道自动调起鸿蒙模拟器把《燃烧肥肉》编译、签名、安装、启动一气呵成 。模拟器启动后首页底部四个 Tab 清晰排列体重记录、卡路里收支、运动计划、趋势图表点进去都能正常交互。我录入三天体重数据趋势折线图准时画出曲线。打卡一项运动卡路里收支页的环形图立刻刷新。整个 App 的响应速度在模拟器上非常流畅。那一刻我承认看着自己设计的产品真跑起来比掉两斤肉还爽。第十四步Agent Team 让我一个人活成一支队伍《燃烧肥肉》做到后期我需要同时干三件事。优化 UI 动画、写单元测试、整理上架文档。串行做至少两天。在码道 IDE 顶部拉起 Agent Team配置三个智能体。前端智能体负责 ArkUI 动画优化测试智能体负责生成单元测试文档智能体负责把开发流程写成 README [1]。三个智能体并发跑半小时后我把成果拼起来动画顺了测试覆盖率达到 88%README 也齐了。这就是华为云码道在团队编码效率上宣称提升 30% 的底气 。鸿蒙 Agent 时代的真正机会写完《燃烧肥肉》我反而想停下来聊几句。华为云码道给我最大的冲击不是省了多少时间而是改变了开发者的角色。我们不再是一个字一个字写代码的码农更像是给一群 AI 智能体派活的产品经理。这种工作方式正好契合鸿蒙 Agent 时代的内核。鸿蒙把意图作为入口码道把对话作为入口。两个入口叠加开发者可以把精力完全集中在业务逻辑和用户体验上。像《燃烧肥肉》这样的垂直场景应用以前一个人做至少两周。现在三天就能跑通全流程剩下的时间全用来打磨细节和想创意。这就是我看到的趋势。下一步我打算这么干接下来我准备给《燃烧肥肉》加上智能推荐。根据用户的历史体重数据和运动打卡记录用鸿蒙智能体框架自动调整每日运动方案。再往后我想接入穿戴设备实时读取心率和步数让卡路里消耗计算更精准。如果也想赶上鸿蒙 Agent 时代这班车建议从今天开始。打开码道 IDE切换到鸿蒙增训模型敲下你的第一句需求。剩下的事情AI 会帮你推到底。我已经在路上了。你呢