项目10 综合实训-智能充电家用版应用

项目10综合实训——

智能充电家用版应用目录1项目描述2学习目标3知识图谱4技术准备5项目实施6项目小结7AI赋能1项目描述创建一个智能充电家用版应用，需求如下。（1）进入智能充电家用版应用主界面，界面分为5部分。顶部显示应用名称和“我的充电桩”“爱车信息”。顶部下方显示用户车辆信息，包括车辆图片、车牌号、品牌、型号和续航里程。车辆信息下方是车辆充电功能区，显示车辆充电状态（待充电/充电中/已充满）、充电桩名称、电池电量和“开始充电/结束充电”按钮。车辆充电功能区下方显示功能按钮，包括“添加充电桩”“添加车辆”“一键充电”。底部导航栏位置固定，包括“首页”“订单”“个人中心”。点击导航栏中的某一项，进入对应的界面。（2）点击“开始充电”按钮，启动充电功能，车辆充电状态变为充电中，显示电池充电动态进度（动画效果展示）、充电功率、充电电量、预计剩余时间和“结束充电”按钮。（3）点击“结束充电”按钮，恢复到之前的待充电状态。应用运行效果如图10-1、图10-2所示（方框处为不同车辆充电状态下界面的差别）。1项目描述

图10-1待充电效果

图10-2充电中效果2学习目标知识目标1.掌握工具类的封装方法2.熟悉主界面的搭建方法3.掌握主界面的数据获取方法4.熟悉API调用方法技能目标1.能熟练构建复杂界面2.能熟练获取后端数据素质目标1.培养在综合项目中整合数据绑定与UI布局的系统开发思维2.提升解决复杂问题的能力3知识图谱本项目所涉及的知识图谱以“智能充电家用版应用”为核心，系统梳理了构建该应用的核心知识体系。图谱采用中心辐射式结构，在核心主题节点下延伸出四大模块，直观呈现了从工具类的封装、主界面搭建、主界面数据获取到API的完整学习路径。项目知识图谱如图10-3所示。

图10-3

项目知识图谱4技术准备10.4.1工具类的封装1.RequestUtil类—HTTP请求封装staticasyncget(url:string)——HTTP的get请求staticasyncpost(url:string,data:any)——HTTP的post请求staticasyncput(url:string,data:any)——HTTP的put请求这些方法在图10-4的RequestUtil类中。

图10-4RequestUtil类由于RequestUtil类中涉及到网络通信，需要在“module.json5”文件中添加以下配置内容，用于申请网络权限。"requestPermissions":[{"name":"ohos.permission.INTERNET"}]4技术准备2.StorageUtils类—轻量级本地存储封装staticasyncput(key:string,value:ValueType,preferenceName:string=defaultPreferenceName)——存数据staticasyncget(key:string,defaultValue:ValueType="",preferenceName:string=defaultPreferenceName)——取数据staticasyncdelete(key:string,preferenceName:string=defaultPreferenceName)——删数据staticasyncclear(preferenceName:string=defaultPreferenceName)——清数据这些方法在图10-5的StorageUtils类中。

图10-5StorageUtils类4技术准备10.4.2主界面搭建1.主界面启动流程EntryAbility.ts的onWindowStageCreate方法中启动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技术准备在BootPage界面中会调用LoginPage界面先进行登录，登录完毕后跳转到Index主界面。主界面启动流程如图10-6所示。

图10-6主界面启动流程2.主界面结构主界面底部由Tabs组件包含3个TabContent组件组成，点击“首页”TabContent组件后会调用HomeComp自定义组件，此组件实现了主界面的功能。主界面结构如图10-7所示。图10-7主界面结构4技术准备10.4.3主界面数据获取在HomeComp自定义组件中包含以下三个方法用于获取后端数据1.getChargeInfo()——获取充电信息2.getCarChargingStatus()——获取车辆充电状态3.getCarAndStationNum()——获取车辆和充电桩数量这三个方法从后端获取的数据在主界面上的显示区域如图10-8所示。

图10-8

从后端获取的数据在主界面上的显示4技术准备这些方法调用了ApiGroup中封装的API接口，如图10-9所示。

图10-9ApiGroup.ets中封装的API4技术准备10.4.4API接口ApiGroup中封装的API接口会用到后端提供的各类API，本应用用到的后端API如图10-10所示。

图10-10后端API5项目实施10.5.1项目目录结构项目目录结构如图10-11所示。

图10-11项目目录结构5项目实施10.5.2工具类实现（代码实现参见教材）1.RequestUtil.ets代码2.StorageUtils.ets代码10.5.3主界面实现（代码实现参见教材）1.ApiGroup.ets代码2.Index.ets代码3.HomeComp.ets代码10.5.4应用测试1.在预览器中测试在预览器中测试效果如图10-12所示。图10-12预览器中测试效果5项目实施2.在模拟器中测试模拟器中测试效果如图10-13所示。图10-13模拟器中测试效果6项目小结本项目的实施主要涉及到项目目录结构的创建，工具类的封装，主界面功能实现。其中主界面功能实现除了界面结构的搭建以外，还涉及到后