鴻蒙應(yīng)用開發(fā)項目式教程（AI助學(xué)）（微課版）-教案 項目7 校園通應(yīng)用、項目8 視頻播放器應(yīng)用

《鴻蒙應(yīng)用開發(fā)項目式教程》課程教學(xué)單元設(shè)計第1頁共7頁《鴻蒙應(yīng)用開發(fā)項目式教程》課程教學(xué)單元設(shè)計項目7校園通應(yīng)用授課教師：授課班級:學(xué)時：12教學(xué)條件計算機實訓(xùn)室、DevEcoStudio開發(fā)工具、投影設(shè)備、廣播教學(xué)軟件教學(xué)素材教材《鴻蒙應(yīng)用開發(fā)項目式教程》、教學(xué)課件、實訓(xùn)項目單、案例源碼庫、微課視頻、教學(xué)網(wǎng)站教學(xué)目標(biāo)設(shè)計知識目標(biāo)：1．了解NetworkKit網(wǎng)絡(luò)服務(wù)概念2．了解網(wǎng)絡(luò)連接管理、網(wǎng)絡(luò)狀態(tài)變化3．掌握使用HTTP訪問網(wǎng)絡(luò)的方法4．掌握使用RCP訪問網(wǎng)絡(luò)的方法技能目標(biāo)：1．能熟練將項目接入網(wǎng)絡(luò)2．能熟練使用NetworkKit請求數(shù)據(jù)素質(zhì)目標(biāo)：1．樹立規(guī)范使用網(wǎng)絡(luò)、注重數(shù)據(jù)安全的意識2．在封裝網(wǎng)絡(luò)請求、處理異步數(shù)據(jù)時，培養(yǎng)構(gòu)建清晰的代碼結(jié)構(gòu)與主動調(diào)試排錯的習(xí)慣任務(wù)描述本項目旨在開發(fā)一款名為“校園通”的移動應(yīng)用，為師生提供便捷的校園信息服務(wù)。在主界面展示當(dāng)前日期以及用戶信息；點擊“進入校園”按鈕后進入校園通主功能界面，展示校園新聞和本周課表，底部留言板提供提交留言功能。教學(xué)內(nèi)容1.網(wǎng)絡(luò)服務(wù)NetworkKit簡介。2.網(wǎng)絡(luò)狀態(tài)變化。3.使用HTTP請求網(wǎng)絡(luò)數(shù)據(jù)。4.使用RCP請求網(wǎng)絡(luò)數(shù)據(jù)。5.搭建本地Node服務(wù)器。重點：使用HTTP請求網(wǎng)絡(luò)數(shù)據(jù)難點：數(shù)據(jù)的請求與處理，異步處理、異常捕獲任務(wù)分析與實現(xiàn)1.任務(wù)需求分析：開發(fā)校園通App，實現(xiàn)首頁數(shù)據(jù)加載、校園新聞、課程表、留言提交以及新聞詳情彈窗查看等網(wǎng)絡(luò)交互功能。2.項目架構(gòu)設(shè)計：采用鴻蒙ArkUI前端頁面+Node.js本地服務(wù)端架構(gòu)，通過HTTP協(xié)議完成客戶端與服務(wù)端的數(shù)據(jù)通信與接口調(diào)用。3.核心功能實現(xiàn)：配置網(wǎng)絡(luò)權(quán)限并搭建本地Node服務(wù)器，使用HTTP的GET/POST請求完成數(shù)據(jù)拉取與留言提交，新增接口與彈窗組件實現(xiàn)新聞詳情查看功能。

教學(xué)過程設(shè)計主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動問題引入結(jié)合日常校園場景提問：校園通知、課表、留言等信息如何在手機App上實時展示？引出NetworkKit網(wǎng)絡(luò)框架，講解本項目將借助HTTP網(wǎng)絡(luò)通信，完成校園通App數(shù)據(jù)交互開發(fā)。教師講授引導(dǎo)法多媒體教師：講解演示學(xué)生：觀察思考知識講解介紹NetworkKit網(wǎng)絡(luò)服務(wù)整體作用、應(yīng)用場景與所需網(wǎng)絡(luò)權(quán)限配置；講解網(wǎng)絡(luò)狀態(tài)監(jiān)聽的對象創(chuàng)建、事件訂閱、啟停監(jiān)聽全套流程；詳解HTTP協(xié)議GET/POST請求用法、請求參數(shù)、響應(yīng)結(jié)果解析及異常處理；簡述RCP通信框架核心概念與基礎(chǔ)使用；5.講解Node.js本地HTTP服務(wù)器搭建、路由接口編寫與跨域配置。啟發(fā)講解討論歸納多媒體課件演示代碼投屏思考交流互動分組討論記錄筆記示范操作搭建Node.js本地服務(wù)器，編寫用戶、日期、新聞、課表、留言及新聞詳情接口；在鴻蒙項目中配置網(wǎng)絡(luò)權(quán)限，搭建項目頁面目錄；編碼實現(xiàn)首頁GET請求加載日期、用戶信息，完成頁面路由跳轉(zhuǎn)；4.實現(xiàn)主頁面新聞、課表數(shù)據(jù)拉取與留言板POST提交功能。問題引導(dǎo)操作演示分析歸納多媒體投屏DevEcoStudio實時演示觀摩思考?xì)w納總結(jié)實戰(zhàn)訓(xùn)練1.完成網(wǎng)絡(luò)權(quán)限配置、搭建本地Node服務(wù)器。2.完成實現(xiàn)校園通首頁、主頁面基礎(chǔ)布局。3.使用GET/POST網(wǎng)絡(luò)請求，完成數(shù)據(jù)展示與留言提交。動手實踐做中學(xué)DevEcoStudio真實開發(fā)環(huán)境實踐操作查閱資料巡視指導(dǎo)評估討論展示學(xué)生實訓(xùn)作品，從權(quán)限配置、網(wǎng)絡(luò)請求、功能完整性、代碼規(guī)范四個維度進行點評；匯總網(wǎng)絡(luò)請求失敗、跨域報錯、數(shù)據(jù)解析異常等常見問題并統(tǒng)一講解解決方案；3.分組討論GET與POST請求的使用區(qū)別、移動端網(wǎng)絡(luò)開發(fā)注意事項。教師啟發(fā)討論歸納分?jǐn)?shù)激勵實訓(xùn)項目單作品投屏思考結(jié)果演示課堂總結(jié)1回顧NetworkKit、網(wǎng)絡(luò)狀態(tài)監(jiān)聽、HTTP請求、Node服務(wù)等核心知識點；2.梳理校園通App從服務(wù)端搭建、權(quán)限配置、頁面開發(fā)到網(wǎng)絡(luò)交互的完整開發(fā)流程；重申網(wǎng)絡(luò)請求異步處理、異常捕獲、跨域處理等重難點；4.強調(diào)規(guī)范編碼與嚴(yán)謹(jǐn)排查問題的職業(yè)素養(yǎng)。教師講解多媒體課件演示代碼回顧整理筆記引導(dǎo)創(chuàng)新課后作業(yè)完善課堂實訓(xùn)項目項目，獨立完成AI賦能拓展任務(wù)：進一步完善校園通功能，用戶可以點擊校園新聞欄右側(cè)的詳情按鈕，通過彈窗展示校園新聞的詳情。教師講授多媒體布置作業(yè)提出要求《鴻蒙應(yīng)用開發(fā)項目式教程》課程教學(xué)單元設(shè)計項目8視頻播放器應(yīng)用授課教師：授課班級:學(xué)時：12教學(xué)條件計算機實訓(xùn)室、DevEcoStudio開發(fā)工具、投影設(shè)備、廣播教學(xué)軟件教學(xué)素材教材《鴻蒙應(yīng)用開發(fā)項目式教程》、教學(xué)課件、實訓(xùn)項目單、案例源碼庫、微課視頻、教學(xué)網(wǎng)站教學(xué)目標(biāo)設(shè)計知識目標(biāo)：1．理解HarmonyOS多媒體開發(fā)框架MediaKit的核心功能及其應(yīng)用場景2．掌握AVPlayer組件的功能特性和狀態(tài)機生命周期3．掌握XComponent組件在視頻渲染中的角色及其與AVPlayer的協(xié)作機制4．掌握PanGesture手勢控制的用法技能目標(biāo)：能夠使用ArkTS實現(xiàn)視頻播放器素質(zhì)目標(biāo)：1．培養(yǎng)用戶導(dǎo)向的設(shè)計思維2．培養(yǎng)規(guī)范的編程習(xí)慣，強化資源管理安全意識任務(wù)描述創(chuàng)建一個視頻播放器應(yīng)用。該應(yīng)用能夠獲取本地存儲視頻，通過AVPlayer進行視頻播放控制，實現(xiàn)播放/暫停、視頻切換、倍速播放、進度控制、音量調(diào)節(jié)等功能。視頻播放界面支持全屏播放。教學(xué)內(nèi)容1.MediaKit框架各組件功能介紹、rawfile視頻資源獲取方式。2.AVPlayer完整狀態(tài)機生命周期與各狀態(tài)API調(diào)用規(guī)則。3.XComponent組件創(chuàng)建Surface實現(xiàn)視頻渲染配置。4.播放控制：播放暫停、切視頻、倍速、進度、音量代碼實現(xiàn)。5.PanGesture手勢綁定、三階段回調(diào)實現(xiàn)滑動調(diào)音量。6.窗口API實現(xiàn)全屏橫豎屏切換與控件顯隱控制。7.MVVM分層編碼、模擬器整體聯(lián)調(diào)測試。重點：AVPlayer狀態(tài)管理、播放器各項播放控制、PanGesture手勢開發(fā)難點：AVPlayer多狀態(tài)流轉(zhuǎn)邏輯、MVVM分層開發(fā)、全屏尺寸自適應(yīng)任務(wù)分析與實現(xiàn)1.任務(wù)需求分析：開發(fā)本地視頻播放器，實現(xiàn)視頻加載、播放控制、手勢調(diào)參、全屏播放全套功能。2.項目架構(gòu)設(shè)計：采用MVVM分層架構(gòu)，分離UI、數(shù)據(jù)、業(yè)務(wù)控制代碼，便于后期功能擴展。3.核心功能實現(xiàn)：借助AVPlayer做媒體解碼，XComponent渲染畫面，PanGesture完成手勢交互，窗口API實現(xiàn)全屏切換。

教學(xué)過程設(shè)計主要步驟教學(xué)內(nèi)容教學(xué)方法教學(xué)手段師生活動問題引入手機播放器如何讀取本地視頻？播放卡頓、畫面渲染依靠什么組件？滑動調(diào)節(jié)音量依靠什么手勢？教師講授引導(dǎo)法多媒體教師：講解演示學(xué)生：觀察思考知識講解1.MediaKit整體框架與各子模塊作用；2.resourceManager讀取rawfile視頻資源方法；3.AVPlayer狀態(tài)流轉(zhuǎn)與對應(yīng)API；4.XComponent創(chuàng)建Surface綁定播放器流程；5.PanGesture手勢三個回調(diào)方法與方向參數(shù)；6.窗口API橫豎屏、狀態(tài)欄隱藏實現(xiàn)原理。啟發(fā)講解討論歸納多媒體課件演示代碼投屏思考交流互動分組討論記錄筆記示范操作1.新建項目并導(dǎo)入mp4視頻至rawfile目錄；2.編寫Model實體類與ViewModel實現(xiàn)視頻列表解析；3.編碼XComponent渲染頁面、初始化AVPlayer并綁定Surface；4.分步實現(xiàn)播放暫停、進度拖動、倍速、音量控制代碼；5.添加PanGesture手勢實現(xiàn)滑動調(diào)音量；6.編寫全屏切換邏輯，模擬器調(diào)試尺寸適配。問題引導(dǎo)操作演示分析歸納多媒體投屏DevEcoStudio實時演示觀摩思考?xì)w納總結(jié)實戰(zhàn)訓(xùn)練學(xué)生獨立完成實訓(xùn)：參照教材案例，基于MVVM完整實現(xiàn)視頻播放器，完成資源讀取、播放控制、手勢、全屏全部功能，模擬器調(diào)試運行。動手實踐做中學(xué)DevEcoStudio真實開發(fā)環(huán)境實踐操作查閱資料巡視指導(dǎo)評估討論1.核查項目完整度與資源釋放代碼規(guī)范性；2.展示標(biāo)準(zhǔn)參考代碼與實現(xiàn)方案；3.隨機抽取學(xué)生作品演示播放效果，集中點評優(yōu)缺點；4.從功能、代碼規(guī)范、兼容性綜合評分。教師啟發(fā)討論歸納分?jǐn)?shù)激勵實訓(xùn)項目單作品投屏思考結(jié)果演示課堂總結(jié)1.MediaKit是鴻蒙多媒體開發(fā)基礎(chǔ)，AVPlayer是播放器核心；2.AVPlayer狀態(tài)嚴(yán)格有序切換，錯誤調(diào)用會造成播放異常與內(nèi)存泄漏；3.XComponent提