技术案例:使用华为云码道(CodeArts)智能体开发鸿蒙徒步行程记录App

0. 动手准备

下载安装码道IDEhttps://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf\&sourcead=dmzntgwwbwz

在码道里选择鸿蒙专属模型 :GLM-5.2-ArkTS-SPARK

输入一句话需求:帮我开发一个鸿蒙App,用于记录徒步行程

1. 项目概述

项目名称 :HikingTracker --- 徒步行程记录应用

开发工具 :华为云码道(CodeArts)代码智能体

目标平台 :HarmonyOS (API 24, HarmonyOS 6.1.1)

开发日期 :2026年9月1日

项目路径D:\demo\demo8\HikingTracker

功能概览

功能模块 说明
创建行程 填写名称、日期、起终点、预估距离
实时轨迹记录 GPS定位监听、距离/时长/海拔实时统计、Canvas轨迹绘制
历史行程列表 按日期倒序排列、状态标签、长按删除、继续记录
行程详情 轨迹路径Canvas、海拔变化曲线、数据摘要
行程统计 总距离、总时长、总次数三项核心指标

2. 开发流程

整个开发过程遵循 hmos-dev-pipeline 流水线,分为4个阶段:

复制代码
用户需求 → Stage -1: 项目脚手架 → Stage 0: 规格+测试用例 → Stage 1: 编码+构建 → Stage 2: 设备自测

Stage -1:项目脚手架创建

操作

  • 使用 devecocli create 创建 HarmonyOS 项目
  • 应用名称:HikingTracker,Bundle名称:com.example.hikingtracker
  • 初始 API 级别:26(后降级至24)
  • Git 仓库初始化,基线提交ID:ab7d94e

关键命令

bash 复制代码
devecocli create --app-name "HikingTracker" --bundle-name "com.example.hikingtracker" --project-path "D:\demo\demo8\HikingTracker"

产出 :30个基础脚手架文件,包括 build-profile.json5module.json5EntryAbility.etsIndex.ets 等。


Stage 0:功能规格与测试用例生成

hmos-feature-spec-generator 子智能体自动完成,产出4个核心文档:

文档 内容
feature-request.md 规范化的用户需求描述
feature-spec.md 5个场景的详细规格定义(311行)
test_case.md 10个测试用例(TC-001 ~ TC-010,215行)
context-notes.md 代码库上下文分析(114行)

5个场景定义

  1. 创建徒步行程记录(表单验证、数据模型)
  2. 实时记录徒步轨迹(GPS监听、Haversine距离计算、Canvas绘制)
  3. 查看历史行程列表(倒序排列、状态标签、长按删除)
  4. 行程详情展示(轨迹地图、海拔曲线、数据摘要)
  5. 行程统计(总距离/总时长/总次数)

数据模型

typescript 复制代码
interface TripRecord {
  id: string; name: string; date: string;
  startPoint: string; endPoint: string;
  estimatedDistance: number; actualDistance: number;
  duration: number; trackPoints: TrackPoint[];
  status: TripStatus; maxAltitude: number; minAltitude: number;
  altitudeChanges: AltitudePoint[];
}

Stage 1:逻辑编码与构建收敛

hmos-logic-coder 子智能体执行,经历2轮构建收敛:

轮次 结果 详情
第1次 失败 geoLocationManager.LocationSwitchStatus API不存在
第2次 成功 修复为 geoLocationManager.isLocationEnabled(),BUILD SUCCESSFUL

实现的文件结构

复制代码
entry/src/main/ets/
├── common/Constants.ets        --- 常量定义(配色、路由、存储键)
├── model/TripModel.ets         --- 数据模型(TripRecord, TrackPoint, AltitudePoint, TripStatus)
├── utils/
│   ├── TripStorage.ets         --- Preferences本地持久化(增删改查+统计)
│   ├── LocationUtils.ets       --- geoLocationManager集成(位置监听+权限检查)
│   └── DistanceUtils.ets       --- Haversine公式 + 时长/距离格式化
├── pages/
│   ├── Index.ets               --- 主页/统计页
│   ├── CreateTrip.ets          --- 创建行程页
│   ├── TrackRecording.ets      --- 轨迹记录页
│   ├── TripList.ets            --- 历史列表页
│   └── TripDetail.ets          --- 行程详情页

配置更新

  • main_pages.json:注册5个页面路由
  • module.json5:新增 APPROXIMATELY_LOCATIONLOCATION 权限声明
  • string.json:新增应用名称和定位权限说明

构建产出entry-default-unsigned.hap(328KB)


Stage 2:设备自测

首次尝试 --- 阻塞

问题:模拟器系统镜像缺失

  • 项目 compatibleSdkVersion 为 26.0.0(HarmonyOS 7.0.0 Beta1)
  • 3台模拟器(Pura 90 Pro、Mate X7、MateBook Pro)均配置使用 API 26 镜像,但该镜像文件不存在
  • 最高可用镜像仅为 API 24(HarmonyOS 6.1.1)
  • 10个测试用例全部 BLOCKED
解决方案

采取4步措施解决模拟器缺失问题:

步骤 操作 结果
1 下载 HarmonyOS 6.1.1(24) phone 系统镜像(2.17GB) 成功
2 将项目 compatibleSdkVersion26.0.0 降级至 6.1.1(24) 构建成功
3 创建新模拟器 HikingPhone(phone类型,API 24镜像) 成功
4 启动模拟器并验证设备连接 127.0.0.1:5555 已连接

关键命令

bash 复制代码
# 下载镜像
devecocli emulator image download --os-version "HarmonyOS 6.1.1(24)" --device-type phone --force

# 创建模拟器
devecocli emulator create "HikingPhone" --device-type phone --os-version "HarmonyOS 6.1.1(24)"

# 启动模拟器
devecocli emulator start "HikingPhone"

API版本格式注意 :API 10-25 需使用 '6.1.1(24)' 格式(平台版本+API级别),API 26+ 使用 '26.0.0' 格式。


3. UI重设计 --- 户外探险风格

在功能开发完成后,对全部5个页面进行了视觉重设计,从朴素灰白风格升级为户外探险深绿主题。

配色体系

色彩角色 颜色值 用途
背景渐变顶 #2D4A35 深森林绿
背景渐变底 #1A2E1F 更深的森林绿
卡片背景 #243528 深色卡片
强调-橙 #E8703A 日落橙(主按钮、终点标记)
强调-绿 #4A8B5C 森林绿(距离、起点标记)
强调-蓝 #3A7CA5 天空蓝(总距离统计)
强调-黄 #E9C46A 暖黄(暂停状态、轨迹点数)
强调-红 #C44536 警示红(结束行程、GPS未定位)

各页面设计亮点

页面 设计亮点
Index(主页) Canvas绘制三层山岭剪影 + 双色大字标题(HIKE+TRACKER) + 带色条统计卡片 + 橙色圆角主按钮带阴影 + 绿色描边次按钮
CreateTrip(创建行程) 渐变背景 + 大字标题 + 浅绿输入框(#F5F8F5) + 起终点双列布局 + 橙色圆角主按钮
TrackRecording(轨迹记录) 状态指示灯(圆点+颜色) + 深色数据卡片 + 深绿轨迹Canvas(双线描边+圆点起终点标记)
TripList(历史列表) 深色行程卡片 + 彩色状态标签 + 数据三列(距离/时长/日期) + 继续记录橙色按钮
TripDetail(行程详情) 2x2数据网格(对角圆角拼接) + 深绿轨迹Canvas + 渐变海拔曲线 + 起终点色条标识

Canvas轨迹绘制改进

  • 背景:从白色改为深绿(#1F3A26)
  • 轨迹线:双线描边(外层#6BB077粗线 + 内层#4A8B5C细线)
  • 起点:绿色圆点(#6BB077) + 白色内点
  • 终点:橙色圆点(#E8703A) + 白色内点
  • 海拔曲线:绿色渐变描边 + 最高点橙色标注 + 最低点蓝色标注

4. 最终运行结果

bash 复制代码
devecocli run --device "127.0.0.1:5555" --uninstall

执行结果

  • 构建:BUILD SUCCESSFUL in 2s 324ms
  • 卸载旧应用:Uninstalling com.example.hikingtracker... 成功
  • 安装新应用:App installed successfully
  • 启动应用:Application 'com.example.hikingtracker': start ability successfully

应用已在 HikingPhone 模拟器上成功运行,展示重新设计的户外探险风格UI。


5. 经验总结

关键经验

  1. API版本格式差异 :HarmonyOS API 10-25 使用 '平台版本(API级别)' 格式(如 '6.1.1(24)'),API 26+ 使用 '26.0.0' 格式。降级时必须匹配平台版本与API级别,否则构建报错。

  2. 模拟器镜像管理devecocli emulator image list --all 可查看所有可用镜像,--force 参数可强制重新下载。镜像约2.17GB,下载需预留充足时间。

  3. API兼容性验证geoLocationManager.LocationSwitchStatus 在目标API级别不存在,需改用 geoLocationManager.isLocationEnabled()。编码阶段应提前验证API可用性。

  4. ArkTS限制FontWeight.Black 在 ArkTS 中不存在,需使用 FontWeight.Bold。ArkTS 对类型检查更严格,未导入的常量会直接报错。

  5. 流水线效率:hmos-dev-pipeline 的4阶段流水线(脚手架→规格→编码→自测)能有效组织开发流程,规格文档为编码提供了精确的契约。

遗留问题

  • 12个 ArkTS 弃用 API �警告pushUrl/replaceUrl/getParams/back),不影响功能,后续可迁移到 router.pushNamedRoute 等新API
  • HAP 为未签名版本,真机部署需配置签名
  • app_name 字符串资源在 AppScope 和 entry 模块中重复声明,产生冲突警告

6. 项目文件索引

类别 路径
项目根目录 D:\demo\demo8\HikingTracker
功能规格 .codeartsdoer/hmos/runs/20260901-091709/feature-spec.md
测试用例 .codeartsdoer/hmos/runs/20260901-091709/test_case.md
构建报告 .codeartsdoer/hmos/runs/20260901-091709/logic/convergence-report.md
HAP文件 .codeartsdoer/hmos/runs/20260901-091709/logic/entry-default-unsigned.hap
开发Manifest .codeartsdoer/hmos/runs/20260901-091709/feature-dev-manifest.md
相关推荐
计算机魔术师2 小时前
Anthropic 详解 7·30 安全事件:配置错误致 Claude 访问真实系统,已加强沙箱隔离与实时监控
前端
zlwool2 小时前
图纸管理选型:从变更频率到齐套率
java·前端·python·erp·设备erp·非标机械
阿图灵2 小时前
MakerHub 开发报告:v1.0.0 → v1.1.0(单日 26 提交,图片渲染、目录跟随与数据真实化)
前端·vue·个人网站·deepseek·开发报告
程序员小八7773 小时前
Go Web 工程化:日志、配置与错误处理中间件,让服务「能上线」
前端·中间件·golang
SquabbyZhu3 小时前
从 4 个 URL 到 1 个入口:Peaks-Loop 驱动的微前端聚合实践
前端
Hilaku3 小时前
技术好就能升职是前端圈最大的谎言!
前端·javascript·程序员
lhldsg3 小时前
树洞倾诉的核心需求与产品定位误区
java·前端·小程序
光影少年4 小时前
react navite高频手写/实操题
前端·javascript·react native·react.js·前端框架
hunterandroid4 小时前
HarmonyOS 弱网与离线优先架构实战:请求队列、本地缓存与增量同步
前端·前端框架