鸿蒙应用开发项目式教程（AI助学）（微课版）-教案 项目7 校园通应用、项目8 视频播放器应用

《鸿蒙应用开发项目式教程》课程教学单元设计第1页共7页《鸿蒙应用开发项目式教程》课程教学单元设计项目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提