外卖健康评分 App — HarmonyOS AI 应用开发技术博客一、项目背景与需求分析1.1 行业背景随着外卖行业的迅猛发展中国外卖市场规模已突破万亿元大关。然而外卖食品的健康问题日益引起消费者的关注。高油、高盐、高糖的外卖食品成为了城市白领和年轻人群的健康隐患。根据《中国居民营养与慢性病状况报告》我国居民在外就餐频率持续上升但对外卖食品的营养成分和健康程度缺乏有效的评估工具。在这样的背景下开发一款能够基于外卖菜品信息进行健康评分和智能推荐的 AI 应用具有重要的现实意义。用户只需输入菜品的名称、配料表和营养成分即可获得一份专业的健康评估报告包括综合健康评分、健康红灯警示以及替代方案建议。1.2 需求分析通过深入的用户调研和竞品分析我们明确了以下核心需求功能需求用户输入菜品名称、配料表和营养信息系统基于 AI 对菜品进行健康评分识别并标记健康风险项健康红灯提供更健康的替代方案建议生成综合总结报告非功能需求界面简洁直观操作流程清晰响应速度快AI 生成结果在 3 秒内返回支持 HarmonyOS 多设备适配代码结构清晰便于后续扩展和维护1.3 目标用户画像都市白领工作繁忙经常点外卖关注健康饮食健身爱好者需要严格控制热量和营养摄入健康管理人群对饮食健康有系统性管理需求家长群体需要为孩子评估外卖食品的健康程度二、技术架构设计2.1 整体架构概述本项目采用 HarmonyOS 原生开发技术栈基于 ArkTS 语言和 ArkUI 框架遵循 Model-Service-Page 三层架构设计模式。这种架构模式将数据模型、业务逻辑和界面展示清晰分离提高了代码的可维护性和可扩展性。2.2 架构分层详解┌─────────────────────────────────────────────────────┐ │ Page 层 │ │ FoodScorePage (UI 组件 状态管理 交互逻辑) │ │ ┌─────────────────────────────────────────────────┐ │ │ │ State inputData State resultData │ │ │ │ State showResult 生命周期管理 │ │ │ └─────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────┤ │ Service 层 │ │ FoodScoreService (AI 推理 业务逻辑 数据处理) │ │ ┌─────────────────────────────────────────────────┐ │ │ │ generateData(input) → FoodScoreData │ │ │ │ Prompt 工程 AI API 调用 结果解析 │ │ │ └─────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────┤ │ Model 层 │ │ FoodScoreData (数据定义 类型约束 默认值) │ │ ┌─────────────────────────────────────────────────┐ │ │ │ dish ingredients nutrition │ │ │ │ health_score red_flags alternatives │ │ │ │ summary │ │ │ └─────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘2.3 Model 层设计Model 层是整个应用的数据基石。在FoodScoreData类中我们定义了所有与外卖健康评分相关的数据字段exportclassFoodScoreData{dish:string// 菜品名称ingredients:string[][]// 食材列表nutrition:Recordstring,string{}// 营养信息键值对如 热量、蛋白质、脂肪等health_score:number0// 健康评分0-100 分red_flags:string[][]// 健康红灯列表潜在健康风险alternatives:string[][]// 健康替代方案列表summary:string// 综合总结}每个字段都设置了默认值这是 ArkTS 的强制要求——所有类属性必须在声明时初始化或在构造函数中赋值。这种设计确保了数据在未填充时也有确定的状态避免了空指针异常。2.4 Service 层设计Service 层是 AI 能力的核心。FoodScoreService封装了与 AI 模型交互的所有逻辑exportclassFoodScoreService{privatemodel:FoodScoreDataconstructor(){this.modelnewFoodScoreData()}generateData(input:Recordstring,Object):FoodScoreData{letresult:FoodScoreDatanewFoodScoreData()// Mock data generation logic based on inputreturnresult}}generateData方法接收一个Recordstring, Object类型的输入参数这是从 Page 层传递过来的用户输入数据。在实际生产环境中该方法会调用 HarmonyOS 的 AI 能力如端侧大模型推理或云端 API通过精心设计的 Prompt 模板生成健康评分结果。2.5 Page 层设计Page 层使用 ArkUI 的声明式 UI 语法构建通过State装饰器管理组件状态EntryComponentstruct FoodScorePage{StateinputData:Recordstring,Object{}StateresultData:FoodScoreData|nullnullStateshowResult:booleanfalseprivateservice:FoodScoreServicenewFoodScoreService()}State装饰器是 ArkUI 响应式编程的核心。当状态变量发生变化时框架会自动重新渲染相关的 UI 组件。这种数据驱动视图的模式与 React 的useState和 Vue 的ref有异曲同工之妙。三、AI 提示词工程原理3.1 提示词设计策略外卖健康评分的核心在于 AI 对食品营养知识的理解。我们的 Prompt 设计遵循以下原则角色设定将 AI 定位为专业营养师确保输出具有权威性和专业性。结构化输出要求 AI 按照预定义的字段格式输出便于解析和展示。评分标准定义明确的评分维度包括热量合理性、脂肪含量、钠含量、食材多样性、加工方式等。3.2 提示词模板以下是核心的 Prompt 模板设计思路你是一位专业营养师请对以下外卖菜品进行健康评估。 菜品名称{dish} 配料表{ingredients} 营养信息{nutrition} 请按照以下格式输出评估结果 1. 健康评分0-100分基于热量、脂肪、钠、糖、食材多样性等维度综合评分 2. 健康红灯列出所有需要警惕的健康风险项 3. 替代方案提供更健康的同类菜品建议 4. 总结给出综合性的健康建议3.3 AI 能力集成策略在 HarmonyOS 生态中集成 AI 能力有多种方案端侧大模型推理利用 HarmonyOS 的端侧 AI 能力在本地完成推理保护用户隐私云端 API 调用通过 HTTP 请求调用云端大模型 API获得更强大的 AI 能力混合方案简单任务在端侧执行复杂任务调用云端 API本项目采用松耦合设计Service 层可以灵活切换不同的 AI 后端只需修改generateData方法的实现即可。四、核心功能实现详解4.1 输入模块实现输入模块是用户与 AI 交互的入口。我们设计了三个输入字段分别对应菜品名称、配料表和营养信息Text(菜品名称).fontSize(14).fontWeight(FontWeight.Bold)TextInput({placeholder:请输入菜品名称}).fontSize(14).height(44).backgroundColor(#FFFFFF).borderRadius(8).onChange((val:string){this.inputData[dish]val})每个 TextInput 组件都通过onChange回调将用户输入实时同步到inputData状态对象中。这种设计确保了用户随时点击AI 生成按钮时所有输入数据都已就绪。4.2 AI 生成按钮交互AI 生成按钮是应用的核心交互点Button(AI 生成).width(100%).height(48).backgroundColor(#3B82F6).borderRadius(12).fontColor(#FFFFFF).fontSize(16).fontWeight(FontWeight.Bold).onClick((){this.resultDatathis.service.generateData(this.inputData)this.showResulttrue})按钮点击后会调用 Service 层的generateData方法将结果存储到resultData中并设置showResult true触发结果区域的渲染。4.3 结果展示模块结果展示使用条件渲染仅在showResult为 true 且数据不为 null 时显示if(this.showResultthis.resultData!null){Text(生成结果).fontSize(18).fontWeight(FontWeight.Bold)Text(健康评分).fontSize(14).fontColor($r(app.color.text_secondary))}这种条件渲染模式避免了页面加载时展示空数据的问题也符合用户预期——先输入再看到结果。4.4 数据流分析完整的数据流如下用户输入 → inputData (State) → 点击AI 生成 → service.generateData(inputData) → AI 推理 → 返回 FoodScoreData → resultData (State) → 条件渲染展示结果这个单向数据流清晰明了每个环节的职责分明便于调试和维护。五、用户体验优化5.1 界面设计原则清晰的信息层级页面从上到下依次为 Header → 输入区域 → 生成按钮 → 结果区域符合用户的阅读习惯和操作流程。统一的视觉风格使用柔和的蓝色主题 (#3B82F6) 作为主色调配合浅灰色背景 (#F8FAFC) 和白色卡片营造专业、清爽的视觉体验。合理的间距和尺寸输入框高度 44px、圆角 8px、按钮高度 48px这些尺寸都经过精心设计兼顾了视觉美感和触摸操作的人体工程学。5.2 交互反馈优化虽然当前版本尚未加入加载动画但架构上已经预留了扩展点。可以通过以下方式增强交互反馈点击生成按钮后显示加载指示器生成过程中禁用按钮防止重复点击生成完成后通过动画平滑展示结果5.3 响应式适配通过Scroll组件包裹内容区域确保在屏幕尺寸较小的设备上也能完整显示所有内容。layoutWeight(1)让 Scroll 区域自动填充剩余空间。六、性能优化与最佳实践6.1 ArkTS 性能优化要点状态管理优化使用State装饰器管理 UI 相关状态避免不必要的状态声明。每个State变量都会触发 UI 重新渲染因此应仅将直接影响 UI 的变量标记为State。条件渲染策略使用if (this.showResult this.resultData ! null)条件判断避免在数据未就绪时渲染复杂的 UI 结构。组件复用对于列表类型的结果展示可以使用ForEach循环渲染避免重复的代码编写。6.2 架构设计最佳实践单一职责原则Model 只负责数据定义Service 只负责业务逻辑Page 只负责 UI 展示。这种分离使得每个模块都可以独立测试和修改。面向接口编程Service 层的generateData方法接收Recordstring, Object类型的输入返回FoodScoreData类型的输出接口定义清晰便于后续替换不同的 AI 实现。防御性编程在构造函数中为所有字段赋予默认值确保对象在创建后处于有效状态避免了空指针异常。6.3 HarmonyOS 平台特性利用资源引用使用$r(app.color.text_primary)引用资源文件中的颜色值方便主题切换和国际化。路由管理使用router.pushUrl和router.back实现页面导航与 HarmonyOS 的系统导航机制无缝集成。七、总结与展望7.1 项目总结外卖健康评分 App 是 HarmonyOS AI 应用开发的一个典型范例。通过 Model-Service-Page 三层架构我们构建了一个结构清晰、易于扩展的 AI 应用。项目展示了ArkTS 语言在声明式 UI 开发中的优势面向 AI 应用的分层架构设计模式提示词工程在垂直领域 AI 应用中的实践HarmonyOS 生态下的应用开发最佳实践7.2 未来展望功能增强未来可以增加拍照识别菜品功能通过 HarmonyOS 的 Camera Kit 能力直接从图片中提取菜品信息无需手动输入。个性化推荐结合用户历史评分数据和健康档案提供个性化的饮食建议。多端协同利用 HarmonyOS 的分布式能力在手机、平板、智慧屏等多设备间同步健康数据。社区功能增加用户评分分享和健康饮食社区形成用户生态。7.3 技术启示通过本项目的开发我们深刻认识到 AI 应用开发的核心不在于 AI 模型本身而在于如何将 AI 能力与用户需求有机结合。一个好的架构设计能够让我们在 AI 技术快速迭代的背景下始终保持应用的灵活性和可维护性。Model-Service-Page 模式正是解决这一问题的有效方案——它将 AI 能力封装在 Service 层上层应用无需关心 AI 的具体实现细节只需关注数据模型和用户体验。这种关注点分离的设计哲学值得在更多的 AI 应用开发中推广和应用。