【鸿蒙应用开发实战·食光篇】第一篇：项目初始化与数据模型——打造一款美食菜谱App

【鸿蒙应用开发实战·食光篇】第一篇项目初始化与数据模型——打造一款美食菜谱App一、前言这次我们将开启全新的项目——「食光」美食探索与菜谱收藏App一个涵盖5大菜系、10道经典美食的菜谱应用。本系列将延续实战风格但内容和项目完全不同。我们将重点探索全新的菜谱数据结构设计Tab切换实现食材与步骤分页圆形头像式封面设计难度等级视觉化展示本文是第一篇聚焦项目初始化、数据模型设计以及菜谱数据构建。二、项目创建2.1 开发环境IDEDevEco StudioSDKAPI 23compatibleSdkVersion 23, targetSdkVersion 24框架Stage 模型 ArkTS设备类型Phone项目创建过程与前篇相同选择 Empty Ability → Stage Model → API 23。2.2 项目结构MyApplication/ ├── AppScope/ # 应用全局配置 │ ├── app.json5 # bundleName、版本等 │ └── resources/base/element/string.json ├── entry/src/main/ets/ │ ├── entryability/ # Ability 生命周期 │ ├── model/ │ │ └── RecipeData.ets # 菜谱数据模型 ← 本篇重点 │ └── pages/ │ ├── Index.ets # 首页 │ ├── RecipeListPage.ets # 菜谱列表 │ ├── RecipeDetailPage.ets # 菜谱详情 │ ├── FavPage.ets # 我的收藏 │ └── ProfilePage.ets # 个人中心三、菜谱数据模型设计3.1 与阅读应用的区别「阅迹」的数据模型是书籍Book包含书名、作者、评分等字段。而「食光」的菜谱Recipe需要完全不同的数据结构字段阅读AppBook美食AppRecipe分类文学/科技/…川菜/粤菜/日料/…属性作者、年份、页数难度、烹饪时间详情简介文本食材列表、步骤附加—小贴士、难度色3.2 Recipe 接口定义exportinterfaceRecipe{id:number;// 唯一标识name:string;// 菜名cuisine:string;// 菜系川菜/粤菜/日料/西餐/甜品rating:number;// 评分difficulty:string;// 难度初级/中级/高级cookTime:string;// 烹饪时长ingredients:string[];// 食材清单数组steps:string[];// 烹饪步骤数组description:string;// 菜品简介tips:string;// 小贴士color:string;// 主题色}亮点设计ingredients和steps使用字符串数组便于在详情页中循环渲染为清单列表。3.3 5大菜系10道菜菜系菜品难度时长评分️ 川菜麻婆豆腐中级20min⭐4.8️ 川菜水煮鱼高级45min⭐4.7 粤菜白切鸡中级40min⭐4.6 粤菜叉烧中级60min⭐4.8 日料寿司高级50min⭐4.7 日料味增汤初级15min⭐4.4 西餐牛排中级20min⭐4.8 西餐意大利面初级25min⭐4.5 甜品提拉米苏中级30min⭐4.9 甜品芒果布丁初级15min⭐4.63.4 分类与工具函数exportconstALL_CUISINES:string[][全部,川菜,粤菜,日料,西餐,甜品];// 按菜系筛选exportfunctiongetRecipesByCuisine(cuisine:string):Recipe[]{if(cuisine全部||cuisine)returnRECIPES;returnRECIPES.filter(rr.cuisinecuisine);}// 获取推荐评分≥4.7exportfunctiongetRecommendedRecipes():Recipe[]{returnRECIPES.filter(rr.rating4.7);}// 难度等级对应的颜色exportfunctiongetDifficultyColor(difficulty:string):string{constmap:Recordstring,string{初级:#27AE60,// 绿色中级:#F39C12,// 橙色高级:#E74C3C// 红色};returnmap[difficulty]||#999;}getDifficultyColor函数是一个巧妙的细节——它将难度等级映射为视觉颜色初级绿色、中级橙色、高级红色让用户一眼就能看出菜品的难度。3.5 ArkTS 严格模式注意事项与前篇一样必须注意 ArkTS 的严格模式规则// ✅ 接口必须有显式声明exportinterfaceRecipe{/* ... */}// ✅ 数组必须标注类型exportconstRECIPES:Recipe[][/* ... */];// ✅ 对象字面量赋值给有类型的变量constmap:Recordstring,string{初级:#27AE60};四、菜谱数据的详细构建以麻婆豆腐为例看看一份完整菜谱的数据结构{id:1,name:麻婆豆腐,cuisine:川菜,rating:4.8,difficulty:中级,cookTime:20分钟,ingredients:[嫩豆腐 300g,牛肉末 50g,豆瓣酱 1勺,花椒粒 1勺,蒜末 10g,姜末 5g,葱花 适量,水淀粉 适量],steps:[豆腐切成2cm方块放入加盐的沸水中焯2分钟,热锅凉油放入牛肉末煸炒至变色,加入豆瓣酱炒出红油放入花椒粒炒出麻香味,加入适量清水烧开放入豆腐块中小火煮5分钟,淋入水淀粉勾芡撒上葱花即可出锅],description:麻婆豆腐是四川省经典名菜...,tips:豆腐焯水时加盐可以增加韧性...,color:#DC3545}数据结构设计的三个要点食材用数组— 便于在UI中逐项渲染每项自带用量步骤用有序数组— 天然支持序号渲染符合烹饪流程颜色区分— 每道菜独立主题色视觉上丰富多彩五、资源文件配置「食光」采用暖色调主题与食物主题契合颜色方案{color:[{name:start_window_background,value:#FFF5EE},{name:primary_color,value:#E67E22},{name:background_color,value:#FFF5EE},{name:text_primary,value:#2D1F14}]}#FFF5EE是一种米白色老照片色搭配橙色主调#E67E22营造温馨食欲氛围。应用名称在 AppScope 中配置{name:app_name,value:食光}六、构建验证hvigorw--modemodule-pmoduleentrydefault assembleHap首次构建会启动 daemon 并全量编译约耗时8-12秒。七、小结本篇完成了✅ 「食光」美食App的项目初始化✅ 菜谱数据模型 Recipe 接口设计✅ 10道菜谱详细数据构建✅ 难度等级颜色映射函数✅ 5大菜系分类与工具函数与「阅迹」对比Reader是书籍阅读数据简单单层文本「食光」是菜谱收藏数据复杂嵌套数组这将在详情页展示完全不同的UI交互。下一篇我们将开发首页与菜系导航实现菜系分类入口、今日推荐卡片以及人气榜单敬请期待#鸿蒙开发 #ArkTS #数据建模 #HarmonyOS #移动开发