鸿蒙应用开发项目式教程（AI助学）（微课版）-教案 全丽莉 项目6-10 桌面计算器-综合实训-智能充电家用版应用

《鸿蒙应用开发项目式教程》课程教学单元设计第1页共7页《鸿蒙应用开发项目式教程》课程教学单元设计项目6桌面计算器授课教师：授课班级:学时：8教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：1．熟悉FormKit的服务卡片架构、特征等2．掌握ArkTS卡片的创建方法3．掌握ArkTS卡片配置文件的结构和作用4．掌握ArkTS卡片从创建到销毁的完整生命周期流程技能目标：能够使用ArkTS卡片开发计算器卡片素质目标：1．培养工程化思维与规范意识2．具有职业责任感，强化质量意识任务描述手机桌面计算器是日常高频使用工具，本次任务要求基于鸿蒙ArkTS+ArkUI框架，开发一款桌面计算器应用。需完成项目资源配置、计算器主界面搭建、四则运算逻辑编码、桌面ArkTS卡片开发、配置文件编写、卡片生命周期管理，最终在预览器和模拟器中调试运行，实现计算器基础运算与桌面卡片复用功能。教学内容1．鸿蒙项目目录结构认知、字符串资源与应用图标配置。2．ArkUI声明式UI布局、状态管理与按钮组件开发。3．中缀表达式解析、调度场算法、后缀表达式运算逻辑实现。4．计算器卡片界面复用开发与页面代码修改。5．module.json5、form_config.json卡片配置文件编写。6．FormExtensionAbility卡片生命周期回调方法使用。7．应用预览器测试、模拟器功能测试与Bug调试。重点：掌握ArkUI界面开发、计算器运算逻辑、ArkTS卡片配置文件编写难点：调度场算法逻辑理解、卡片生命周期回调、组件功能复用任务分析与实现1.任务需求分析：开发带桌面卡片的鸿蒙计算器。2.项目架构设计：采用ArkUI前端展示+运算算法+Form卡片扩展Ability三层架构，卡片复用主页面代码简化开发。3.核心功能实现：借助FormExtensionAbility管理卡片生命周期，双配置文件实现桌面卡片。

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入手机桌面计算器如何开发？鸿蒙桌面卡片是什么？如何实现计算器功能与桌面卡片计算器？教师讲授引导法多媒体教师：讲解演示学生：观察思考知识讲解1.鸿蒙项目目录结构、字符串与图标资源配置；2.ArkUI声明式布局、@State状态管理、按钮组件应用；3.中缀转后缀表达式、调度场算法原理；4.ArkTS卡片结构、module与form配置文件作用；5.卡片生命周期7个核心回调函数功能。启发讲解讨论归纳多媒体课件演示代码投屏思考交流互动分组讨论记录笔记示范操作1.创建鸿蒙项目并配置string.json、应用图标资源；2.编码实现Index.ets计算器主界面布局与按钮事件；3.讲解运算核心代码、中缀转后缀算法调试；4.开发CardCalculator.ets卡片界面、复用业务逻辑；5.编写module.json5和form_config.json配置文件；6.编写卡片生命周期代码、预览器与模拟器测试。问题引导操作演示分析归纳多媒体投屏DevEcoStudio实时演示观摩思考归纳总结实战训练学生独立完成完整实训任务：参照课本项目案例，独立完成鸿蒙计算器全流程开发，完成界面搭建、运算逻辑编码、卡片配置、生命周期编写，在预览器和模拟器中运行测试。动手实践做中学DevEcoStudio真实开发环境实践操作查阅资料巡视指导评估讨论1.评估学生项目完成进度与代码规范；2.展示标准参考源码与实现方案；3.抽取学生作品演示运行效果、集体点评；4.从功能实现、代码规范、界面布局进行综合考核。教师启发讨论归纳分数激励实训项目单作品投屏思考结果演示课堂总结1.ArkUI声明式开发是鸿蒙界面开发核心，状态管理是交互基础；2.调度场算法是实现计算器优先级运算的关键，需理解栈的使用逻辑；3.ArkTS卡片支持代码复用，只需修改入口组件即可共享业务逻辑；4.module.json5和form_config.json是卡片正常运行的核心配置文件，路径和参数必须准确；5.FormExtensionAbility进程有10s存活限制，耗时业务需交由主应用处理。教师讲解多媒体课件演示代码回顾整理笔记引导创新课后作业完善本次计算器项目，独立完成AI赋能拓展任务：在主界面和卡片界面新增计算历史记录保存功能，展示最近1条运算记录；提交完整项目源码、运行截图及开发实训报告。教师讲授多媒体布置作业提出要求《鸿蒙应用开发项目式教程》课程教学单元设计项目7校园通应用授课教师：授课班级:学时：12教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：1．了解NetworkKit网络服务概念2．了解网络连接管理、网络状态变化3．掌握使用HTTP访问网络的方法4．掌握使用RCP访问网络的方法技能目标：1．能熟练将项目接入网络2．能熟练使用NetworkKit请求数据素质目标：1．树立规范使用网络、注重数据安全的意识2．在封装网络请求、处理异步数据时，培养构建清晰的代码结构与主动调试排错的习惯任务描述本项目旨在开发一款名为“校园通”的移动应用，为师生提供便捷的校园信息服务。在主界面展示当前日期以及用户信息；点击“进入校园”按钮后进入校园通主功能界面，展示校园新闻和本周课表，底部留言板提供提交留言功能。教学内容1.网络服务NetworkKit简介。2.网络状态变化。3.使用HTTP请求网络数据。4.使用RCP请求网络数据。5.搭建本地Node服务器。重点：使用HTTP请求网络数据难点：数据的请求与处理，异步处理、异常捕获任务分析与实现1.任务需求分析：开发校园通App，实现首页数据加载、校园新闻、课程表、留言提交以及新闻详情弹窗查看等网络交互功能。2.项目架构设计：采用鸿蒙ArkUI前端页面+Node.js本地服务端架构，通过HTTP协议完成客户端与服务端的数据通信与接口调用。3.核心功能实现：配置网络权限并搭建本地Node服务器，使用HTTP的GET/POST请求完成数据拉取与留言提交，新增接口与弹窗组件实现新闻详情查看功能。

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入结合日常校园场景提问：校园通知、课表、留言等信息如何在手机App上实时展示？引出NetworkKit网络框架，讲解本项目将借助HTTP网络通信，完成校园通App数据交互开发。教师讲授引导法多媒体教师：讲解演示学生：观察思考知识讲解介绍NetworkKit网络服务整体作用、应用场景与所需网络权限配置；讲解网络状态监听的对象创建、事件订阅、启停监听全套流程；详解HTTP协议GET/POST请求用法、请求参数、响应结果解析及异常处理；简述RCP通信框架核心概念与基础使用；5.讲解Node.js本地HTTP服务器搭建、路由接口编写与跨域配置。启发讲解讨论归纳多媒体课件演示代码投屏思考交流互动分组讨论记录笔记示范操作搭建Node.js本地服务器，编写用户、日期、新闻、课表、留言及新闻详情接口；在鸿蒙项目中配置网络权限，搭建项目页面目录；编码实现首页GET请求加载日期、用户信息，完成页面路由跳转；4.实现主页面新闻、课表数据拉取与留言板POST提交功能。问题引导操作演示分析归纳多媒体投屏DevEcoStudio实时演示观摩思考归纳总结实战训练1.完成网络权限配置、搭建本地Node服务器。2.完成实现校园通首页、主页面基础布局。3.使用GET/POST网络请求，完成数据展示与留言提交。动手实践做中学DevEcoStudio真实开发环境实践操作查阅资料巡视指导评估讨论展示学生实训作品，从权限配置、网络请求、功能完整性、代码规范四个维度进行点评；汇总网络请求失败、跨域报错、数据解析异常等常见问题并统一讲解解决方案；3.分组讨论GET与POST请求的使用区别、移动端网络开发注意事项。教师启发讨论归纳分数激励实训项目单作品投屏思考结果演示课堂总结1回顾NetworkKit、网络状态监听、HTTP请求、Node服务等核心知识点；2.梳理校园通App从服务端搭建、权限配置、页面开发到网络交互的完整开发流程；重申网络请求异步处理、异常捕获、跨域处理等重难点；4.强调规范编码与严谨排查问题的职业素养。教师讲解多媒体课件演示代码回顾整理笔记引导创新课后作业完善课堂实训项目项目，独立完成AI赋能拓展任务：进一步完善校园通功能，用户可以点击校园新闻栏右侧的详情按钮，通过弹窗展示校园新闻的详情。教师讲授多媒体布置作业提出要求《鸿蒙应用开发项目式教程》课程教学单元设计项目8视频播放器应用授课教师：授课班级:学时：12教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：1．理解HarmonyOS多媒体开发框架MediaKit的核心功能及其应用场景2．掌握AVPlayer组件的功能特性和状态机生命周期3．掌握XComponent组件在视频渲染中的角色及其与AVPlayer的协作机制4．掌握PanGesture手势控制的用法技能目标：能够使用ArkTS实现视频播放器素质目标：1．培养用户导向的设计思维2．培养规范的编程习惯，强化资源管理安全意识任务描述创建一个视频播放器应用。该应用能够获取本地存储视频，通过AVPlayer进行视频播放控制，实现播放/暂停、视频切换、倍速播放、进度控制、音量调节等功能。视频播放界面支持全屏播放。教学内容1.MediaKit框架各组件功能介绍、rawfile视频资源获取方式。2.AVPlayer完整状态机生命周期与各状态API调用规则。3.XComponent组件创建Surface实现视频渲染配置。4.播放控制：播放暂停、切视频、倍速、进度、音量代码实现。5.PanGesture手势绑定、三阶段回调实现滑动调音量。6.窗口API实现全屏横竖屏切换与控件显隐控制。7.MVVM分层编码、模拟器整体联调测试。重点：AVPlayer状态管理、播放器各项播放控制、PanGesture手势开发难点：AVPlayer多状态流转逻辑、MVVM分层开发、全屏尺寸自适应任务分析与实现1.任务需求分析：开发本地视频播放器，实现视频加载、播放控制、手势调参、全屏播放全套功能。2.项目架构设计：采用MVVM分层架构，分离UI、数据、业务控制代码，便于后期功能扩展。3.核心功能实现：借助AVPlayer做媒体解码，XComponent渲染画面，PanGesture完成手势交互，窗口API实现全屏切换。

教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入手机播放器如何读取本地视频？播放卡顿、画面渲染依靠什么组件？滑动调节音量依靠什么手势？教师讲授引导法多媒体教师：讲解演示学生：观察思考知识讲解1.MediaKit整体框架与各子模块作用；2.resourceManager读取rawfile视频资源方法；3.AVPlayer状态流转与对应API；4.XComponent创建Surface绑定播放器流程；5.PanGesture手势三个回调方法与方向参数；6.窗口API横竖屏、状态栏隐藏实现原理。启发讲解讨论归纳多媒体课件演示代码投屏思考交流互动分组讨论记录笔记示范操作1.新建项目并导入mp4视频至rawfile目录；2.编写Model实体类与ViewModel实现视频列表解析；3.编码XComponent渲染页面、初始化AVPlayer并绑定Surface；4.分步实现播放暂停、进度拖动、倍速、音量控制代码；5.添加PanGesture手势实现滑动调音量；6.编写全屏切换逻辑，模拟器调试尺寸适配。问题引导操作演示分析归纳多媒体投屏DevEcoStudio实时演示观摩思考归纳总结实战训练学生独立完成实训：参照教材案例，基于MVVM完整实现视频播放器，完成资源读取、播放控制、手势、全屏全部功能，模拟器调试运行。动手实践做中学DevEcoStudio真实开发环境实践操作查阅资料巡视指导评估讨论1.核查项目完整度与资源释放代码规范性；2.展示标准参考代码与实现方案；3.随机抽取学生作品演示播放效果，集中点评优缺点；4.从功能、代码规范、兼容性综合评分。教师启发讨论归纳分数激励实训项目单作品投屏思考结果演示课堂总结1.MediaKit是鸿蒙多媒体开发基础，AVPlayer是播放器核心；2.AVPlayer状态严格有序切换，错误调用会造成播放异常与内存泄漏；3.XComponent提供渲染表面，是视频画面正常显示必备组件；4.PanGesture三段回调配合坐标计算可快速实现各类滑动交互；5.项目遵循MVVM分层便于维护，使用完毕必须调用release释放媒体资源。教师讲解多媒体课件演示代码回顾整理笔记引导创新课后作业完善现有播放器项目，完成AI拓展任务：新增上下手势调节屏幕亮度功能，提交完整项目源码、运行截图与实训报告。教师讲授多媒体布置作业提出要求《鸿蒙应用开发项目式教程》课程教学单元设计项目9第一个元服务授课教师：授课班级:学时：4教学条件计算机实训室、DevEcoStudio开发工具、模拟器设备、投影设备、广播教学软件、网络环境（用于华为开发者账号授权）教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站、元服务开发官方规范文档教学目标设计知识目标：1.了解元服务相关概念2.熟悉元服务的创建方法3.熟悉元服务卡片的创建方法4.熟悉元服务的运行方法技能目标：能够熟练创建元服务素质目标：1.加强关注交互细节和用户体验优化的意识2.增强对鸿蒙系统新特性的快速学习与应用能力任务描述本项目为鸿蒙元服务基础实训项目，基于DevEcoStudio开发工具完成首个鸿蒙元服务开发。学生需完成元服务工程创建、华为开发者账号授权与AppID配置、项目基础配置、元服务图标生成配置、主界面搭建、桌面服务卡片创建与界面修改，最终实现桌面卡片展示“我是卡片，点我进入元服务”，点击卡片跳转元服务主界面并展示“AtomicService”。同时结合AI赋能任务，完成天气、温度动态刷新拓展功能，掌握元服务从创建、开发、配置到模拟器运行测试的全流程，熟练掌握鸿蒙元服务轻量化开发核心流程与规范。教学内容1.元服务基础认知：元服务概念、核心特征、优势、使用场景，对比传统应用与元服务的区别。2.元服务命名规范：合规命名规则、各类禁用词汇与违规内容要求，掌握元服务开发合规标准。3.元服务工程搭建：AtomicService项目创建、CloudDev资源关联、华为账号授权、AppID选择与项目配置。4.项目资源配置：通过ImageAsset生成元服务图标，完成模块配置文件图标参数设置。5.界面开发：元服务主界面文字内容修改、服务卡片创建、模板选择与卡片界面内容定制。6.元服务运行测试：模拟器直接运行项目、桌面添加服务卡片、卡片点击启动元服务的完整操作。7.AI赋能拓展开发：借助CodeGenie优化界面代码、生成随机温度、天气模拟函数，实现信息定时刷新功能。重点：元服务工程创建与配置、服务卡片创建与界面修改、元服务模拟器运行与桌面部署操作、元服务命名合规规范。难点：元服务与服务卡片的关联逻辑、AI辅助代码生成与优化、动态数据刷新功能实现、元服务合规开发细节把控。任务分析与实现1.任务需求分析：明确元服务主界面、桌面卡片展示效果，掌握卡片跳转核心交互逻辑，熟知合规开发要求。2.开发流程设计：工程创建→账号授权与项目配置→图标资源配置→主界面开发→服务卡片创建与修改→模拟器测试部署→AI拓展功能开发。3.核心效果实现：桌面卡片展示指定文案，点击卡片正常跳转元服务，主界面展示指定内容，拓展实现天气温度动态刷新。教学过程设计主要步骤教学内容教学方法教学手段师生活动问题引入讲解鸿蒙元服务的应用场景，对比传统APP，提问元服务轻量化优势是什么？手机桌面小组件、负一屏服务和元服务卡片有何区别？如何自主开发一款可桌面展示的鸿蒙元服务？教师讲授、引导提问法多媒体课件、真机演示教师：场景演示、问题引导、知识点导入学生：观察体验、思考问题、互动作答知识讲解1.元服务核心概念、特征、优势与使用场景；2.元服务与传统应用的差异对比；3.元服务官方命名规范、各类禁用规则与合规要求；4.元服务开发整体流程与项目目录结构；5.服务卡片与元服务的关联原理、交互逻辑。启发讲解、案例对比、讨论归纳多媒体课件、代码投屏、规范文档展示学生：认真听讲、分组讨论、记录知识点教师：答疑解惑、梳理知识框架示范操作1.打开DevEcoStudio，新建AtomicService空项目；2.完成华为开发者账号授权、关联AppID、配置项目信息；3.导入图片资源，生成并配置元服务图标；4.修改元服务主界面代码，展示指定文字内容；5.新建DynamicWidget服务卡片，修改卡片界面文案；6.模拟器运行项目，演示桌面添加卡片、点击跳转效果。问题引导、分步演示、实操讲解、归纳总结投屏实时演示、DevEcoStudio实操展示学生：观摩操作、记录步骤、梳理开发流程教师：分步讲解、强调重难点与易错点实战训练学生独立完成完整实训任务：创建元服务工程、完成账号与项目配置、配置应用图标、修改主界面与卡片界面、在模拟器中运行项目、添加桌面卡片并测试跳转功能；排查修复运行Bug。项目驱动、动手实践、做中学DevEcoStudio开发环境、模拟器、实训指导书学生：独立实操、自主排错、完成功能开发教师：巡回指导、针对性答疑、纠正操作问题评估讨论1.检查学生项目完成情况，核对界面展示、卡片跳转、功能运行效果；2.检查项目命名、配置是否符合官方规范；3.展示优秀学生作品，对比问题案例集中点评；4.从功能实现、代码规范、合规性、拓展功能完成度综合考核。作品点评、分组互评、归纳激励作品投屏、实训评分标准学生：作品演示、互评交流、总结问题教师：点评优缺点、给出优化建议课堂总结1.梳理元服务轻量化、免安装、即用即走的核心特点；2.总结元服务从工程创建、资源配置、界面开发到部署测试的完整流程；3.强调元服务开发合规命名的重要性；4.归纳元服务卡片与主服务的交互核心逻辑。梳理归纳、重难点复盘多媒体课件、知识框架复盘学生：整理笔记、巩固知识点教师：整体复盘、梳理知识体系课后作业完善本次元服务项目代码，独立完成AI赋能拓展任务：实现天气信息和温度情况定时刷新功能；提交完整源码、运行截图、实训报告任务布置、自主拓展多媒体学生：课后自主完善、复盘巩固教师：明确作业要求与提交标准《鸿蒙应用开发项目式教程》课程教学单元设计项目10综合实训——智能充电家用版应用授课教师：授课班级:学时：12教学条件计算机实训室、DevEcoStudio开发工具、投影设备、广播教学软件教学素材教材《鸿蒙应用开发项目式教程》、教学课件、实训项目单、案例源码库、微课视频、教学网站教学目标设计知识目标：1.掌握工具类的封装方法2.熟悉主界面的搭建方法3.掌握主界面的数据获取方法4.熟悉API调用方法技能目标：1.能熟练构建复杂界面2.能熟练获取后端数据素质目标：1.培养在综合项目中整合数据绑定与UI布局的系统开发思维2.提升解决复杂问题的能力任务描述本次任务为鸿蒙综合实训，基于ArkTS+ArkUI框架开发智能充电家用版应用，面向新能源车用户实现充电桩与车辆管理、充电状态监控、开始/结束充电控制。需完成项目目录搭建、RequestUtil/StorageUtils工具类封装、ApiGroup接口管理、主界面（车辆信息、充电状态、功能按钮、底部导航）开发、充电动画与状态切换、后端数据获取与绑定，最终在预览器与模拟器中调试运行，满足多鸿蒙终端控制与实时监控需求。教学内容1.鸿蒙智能充电项目目录结构规范与工程创建。2.HTTP请求封装RequestUtil（GET/POST/PUT）。3.轻量级存储StorageUtils（增删改查）。4.Tabs底部导航、TabContent与自定义组件HomeComp实现。5.主界面五区域布局：顶部栏、车辆信息、充电状态、功能按钮、底部导航。6.ApiGroup接口封装与后端数据获取。7.开始/结束充电、状态切换与充电进度动画。8.预览器与模拟器测试、接口联调与Bug修复。重点：工具类封装、底部导航实现、主界面布局、API接口调用与数据绑定难点：HTTP请求与本地存储结合、充电状态管理、异步数据获取与界面刷新、动画效果实现任务分析与实现1.任务需求分析：界面结构、充电控制、数据展示、终端适配。2.项目架构设计：工具层、接口层、UI组件层、界面路由层。3.核心功能实现：工具类封装→接口封装→