項(xiàng)目10 綜合實(shí)訓(xùn)-智能充電家用版應(yīng)用

項(xiàng)目10綜合實(shí)訓(xùn)——

智能充電家用版應(yīng)用目錄1項(xiàng)目描述2學(xué)習(xí)目標(biāo)3知識(shí)圖譜4技術(shù)準(zhǔn)備5項(xiàng)目實(shí)施6項(xiàng)目小結(jié)7AI賦能1項(xiàng)目描述創(chuàng)建一個(gè)智能充電家用版應(yīng)用，需求如下。（1）進(jìn)入智能充電家用版應(yīng)用主界面，界面分為5部分。頂部顯示應(yīng)用名稱(chēng)和“我的充電樁”“愛(ài)車(chē)信息”。頂部下方顯示用戶(hù)車(chē)輛信息，包括車(chē)輛圖片、車(chē)牌號(hào)、品牌、型號(hào)和續(xù)航里程。車(chē)輛信息下方是車(chē)輛充電功能區(qū)，顯示車(chē)輛充電狀態(tài)（待充電/充電中/已充滿(mǎn)）、充電樁名稱(chēng)、電池電量和“開(kāi)始充電/結(jié)束充電”按鈕。車(chē)輛充電功能區(qū)下方顯示功能按鈕，包括“添加充電樁”“添加車(chē)輛”“一鍵充電”。底部導(dǎo)航欄位置固定，包括“首頁(yè)”“訂單”“個(gè)人中心”。點(diǎn)擊導(dǎo)航欄中的某一項(xiàng)，進(jìn)入對(duì)應(yīng)的界面。（2）點(diǎn)擊“開(kāi)始充電”按鈕，啟動(dòng)充電功能，車(chē)輛充電狀態(tài)變?yōu)槌潆娭校@示電池充電動(dòng)態(tài)進(jìn)度（動(dòng)畫(huà)效果展示）、充電功率、充電電量、預(yù)計(jì)剩余時(shí)間和“結(jié)束充電”按鈕。（3）點(diǎn)擊“結(jié)束充電”按鈕，恢復(fù)到之前的待充電狀態(tài)。應(yīng)用運(yùn)行效果如圖10-1、圖10-2所示（方框處為不同車(chē)輛充電狀態(tài)下界面的差別）。1項(xiàng)目描述

圖10-1待充電效果

圖10-2充電中效果2學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.掌握工具類(lèi)的封裝方法2.熟悉主界面的搭建方法3.掌握主界面的數(shù)據(jù)獲取方法4.熟悉API調(diào)用方法技能目標(biāo)1.能熟練構(gòu)建復(fù)雜界面2.能熟練獲取后端數(shù)據(jù)素質(zhì)目標(biāo)1.培養(yǎng)在綜合項(xiàng)目中整合數(shù)據(jù)綁定與UI布局的系統(tǒng)開(kāi)發(fā)思維2.提升解決復(fù)雜問(wèn)題的能力3知識(shí)圖譜本項(xiàng)目所涉及的知識(shí)圖譜以“智能充電家用版應(yīng)用”為核心，系統(tǒng)梳理了構(gòu)建該應(yīng)用的核心知識(shí)體系。圖譜采用中心輻射式結(jié)構(gòu)，在核心主題節(jié)點(diǎn)下延伸出四大模塊，直觀(guān)呈現(xiàn)了從工具類(lèi)的封裝、主界面搭建、主界面數(shù)據(jù)獲取到API的完整學(xué)習(xí)路徑。項(xiàng)目知識(shí)圖譜如圖10-3所示。

圖10-3

項(xiàng)目知識(shí)圖譜4技術(shù)準(zhǔn)備10.4.1工具類(lèi)的封裝1.RequestUtil類(lèi)—HTTP請(qǐng)求封裝staticasyncget(url:string)——HTTP的get請(qǐng)求staticasyncpost(url:string,data:any)——HTTP的post請(qǐng)求staticasyncput(url:string,data:any)——HTTP的put請(qǐng)求這些方法在圖10-4的RequestUtil類(lèi)中。

圖10-4RequestUtil類(lèi)由于RequestUtil類(lèi)中涉及到網(wǎng)絡(luò)通信，需要在“module.json5”文件中添加以下配置內(nèi)容，用于申請(qǐng)網(wǎng)絡(luò)權(quán)限。"requestPermissions":[{"name":"ohos.permission.INTERNET"}]4技術(shù)準(zhǔn)備2.StorageUtils類(lèi)—輕量級(jí)本地存儲(chǔ)封裝staticasyncput(key:string,value:ValueType,preferenceName:string=defaultPreferenceName)——存數(shù)據(jù)staticasyncget(key:string,defaultValue:ValueType="",preferenceName:string=defaultPreferenceName)——取數(shù)據(jù)staticasyncdelete(key:string,preferenceName:string=defaultPreferenceName)——?jiǎng)h數(shù)據(jù)staticasyncclear(preferenceName:string=defaultPreferenceName)——清數(shù)據(jù)這些方法在圖10-5的StorageUtils類(lèi)中。

圖10-5StorageUtils類(lèi)4技術(shù)準(zhǔn)備10.4.2主界面搭建1.主界面啟動(dòng)流程EntryAbility.ts的onWindowStageCreate方法中啟動(dòng)BootPage界面，代碼如下。

onWindowStageCreate(windowStage:window.WindowStage){//Mainwindowiscreated,setmainpageforthisability(0x0000,'testTag','%{public}s','AbilityonWindowStageCreate');windowStage.loadContent("pages/start/BootPage",(err,data)=>{if(err.code){hilog.error(0x0000,'testTag','Failedtoloadthecontent.Cause:%{public}s',JSON.stringify(err)??'');return;}(0x0000,'testTag','Succeededinloadingthecontent.Data:%{public}s',JSON.stringify(data)??'');});}4技術(shù)準(zhǔn)備在BootPage界面中會(huì)調(diào)用LoginPage界面先進(jìn)行登錄，登錄完畢后跳轉(zhuǎn)到Index主界面。主界面啟動(dòng)流程如圖10-6所示。

圖10-6主界面啟動(dòng)流程2.主界面結(jié)構(gòu)主界面底部由Tabs組件包含3個(gè)TabContent組件組成，點(diǎn)擊“首頁(yè)”TabContent組件后會(huì)調(diào)用HomeComp自定義組件，此組件實(shí)現(xiàn)了主界面的功能。主界面結(jié)構(gòu)如圖10-7所示。圖10-7主界面結(jié)構(gòu)4技術(shù)準(zhǔn)備10.4.3主界面數(shù)據(jù)獲取在HomeComp自定義組件中包含以下三個(gè)方法用于獲取后端數(shù)據(jù)1.getChargeInfo()——獲取充電信息2.getCarChargingStatus()——獲取車(chē)輛充電狀態(tài)3.getCarAndStationNum()——獲取車(chē)輛和充電樁數(shù)量這三個(gè)方法從后端獲取的數(shù)據(jù)在主界面上的顯示區(qū)域如圖10-8所示。

圖10-8

從后端獲取的數(shù)據(jù)在主界面上的顯示4技術(shù)準(zhǔn)備這些方法調(diào)用了ApiGroup中封裝的API接口，如圖10-9所示。

圖10-9ApiGroup.ets中封裝的API4技術(shù)準(zhǔn)備10.4.4API接口A(yíng)piGroup中封裝的API接口會(huì)用到后端提供的各類(lèi)API，本應(yīng)用用到的后端API如圖10-10所示。

圖10-10后端API5項(xiàng)目實(shí)施10.5.1項(xiàng)目目錄結(jié)構(gòu)項(xiàng)目目錄結(jié)構(gòu)如圖10-11所示。

圖10-11項(xiàng)目目錄結(jié)構(gòu)5項(xiàng)目實(shí)施10.5.2工具類(lèi)實(shí)現(xiàn)（代碼實(shí)現(xiàn)參見(jiàn)教材）1.RequestUtil.ets代碼2.StorageUtils.ets代碼10.5.3主界面實(shí)現(xiàn)（代碼實(shí)現(xiàn)參見(jiàn)教材）1.ApiGroup.ets代碼2.Index.ets代碼3.HomeComp.ets代碼10.5.4應(yīng)用測(cè)試1.在預(yù)覽器中測(cè)試在預(yù)覽器中測(cè)試效果如圖10-12所示。圖10-12預(yù)覽器中測(cè)試效果5項(xiàng)目實(shí)施2.在模擬器中測(cè)試模擬器中測(cè)試效果如圖10-13所示。圖10-13模擬器中測(cè)試效果6項(xiàng)目小結(jié)本項(xiàng)目的實(shí)施主要涉及到項(xiàng)目目錄結(jié)構(gòu)的創(chuàng)建，工具類(lèi)的封裝，主界面功能實(shí)現(xiàn)。其中主界面功能實(shí)現(xiàn)除了界面結(jié)構(gòu)的搭建以外，還涉及到后