5.5項(xiàng)目實(shí)踐：物聯(lián)網(wǎng)設(shè)備管理APP開發(fā)本章主要講述項(xiàng)目實(shí)踐：物聯(lián)網(wǎng)設(shè)備管理APP開發(fā)

。通過學(xué)習(xí)本節(jié)將能夠了解項(xiàng)目實(shí)踐：物聯(lián)網(wǎng)設(shè)備管理APP開發(fā)過程。通過本節(jié)學(xué)習(xí)可以熟悉：App功能模塊設(shè)計(jì)項(xiàng)目工程的創(chuàng)建與配置登錄驗(yàn)證模塊功能實(shí)現(xiàn)設(shè)備管理模塊功能實(shí)現(xiàn)項(xiàng)目總結(jié)與拓展App功能模塊設(shè)計(jì)項(xiàng)目工程的創(chuàng)建與配置登錄驗(yàn)證模塊功能實(shí)現(xiàn)設(shè)備管理模塊功能實(shí)現(xiàn)項(xiàng)目總結(jié)與拓展App功能模塊設(shè)計(jì)(1/3)

采用模塊化設(shè)計(jì)實(shí)現(xiàn)一個(gè)鴻蒙移動(dòng)端的物聯(lián)網(wǎng)設(shè)備管理系統(tǒng)。主要功能實(shí)現(xiàn)：登錄驗(yàn)證通過后，以圖文列表的形式向用戶及時(shí)顯示各個(gè)物聯(lián)網(wǎng)設(shè)備的傳感器數(shù)據(jù)

。

整個(gè)App根據(jù)功能劃分，分成登錄驗(yàn)證與設(shè)備管理兩個(gè)模塊。采用在一個(gè)Ability窗口上切換Page頁面的方式，實(shí)現(xiàn)此兩個(gè)模塊的界面設(shè)計(jì)與它們之間的界面切換。App功能模塊設(shè)計(jì)(2/3)

登錄驗(yàn)證模塊負(fù)責(zé)驗(yàn)證用戶輸入的賬號(hào)與密碼，驗(yàn)證通過后進(jìn)入設(shè)備管理頁面。在登錄驗(yàn)證模塊采用自定義組件的方式，將賬號(hào)與密碼輸入框封裝帶圖標(biāo)的輸入框，并通過箭頭函數(shù)的回調(diào)方式實(shí)現(xiàn)由狀態(tài)變量實(shí)時(shí)存儲(chǔ)用戶在自定義組件上輸入的信息。App功能模塊設(shè)計(jì)(3/3)

設(shè)備管理模塊負(fù)責(zé)將每個(gè)物聯(lián)網(wǎng)設(shè)備的煙霧、溫度、濕度等傳感器數(shù)據(jù)以圖文列表方式展示出來。在模塊中，為每種傳感器設(shè)計(jì)由Image與Text組件封裝構(gòu)建帶圖標(biāo)的傳感器組件，再基于傳感器組件再度封裝構(gòu)建出物聯(lián)網(wǎng)設(shè)備組件，并且基于List組件實(shí)現(xiàn)支持多個(gè)物聯(lián)網(wǎng)設(shè)備的管理。在模塊中為每個(gè)物聯(lián)網(wǎng)設(shè)備組件創(chuàng)建了一個(gè)定時(shí)器，用于定時(shí)產(chǎn)生隨機(jī)數(shù)模擬傳感器的數(shù)據(jù)更新。App功能模塊設(shè)計(jì)項(xiàng)目工程的創(chuàng)建與配置登錄驗(yàn)證模塊功能實(shí)現(xiàn)設(shè)備管理模塊功能實(shí)現(xiàn)項(xiàng)目總結(jié)與拓展項(xiàng)目工程的創(chuàng)建與配置(1/4)

基于“EmptyAbility”模板創(chuàng)建一個(gè)名為“MyIotSystem”的工程。選中工程的pages文件夾后點(diǎn)擊鼠標(biāo)右鍵，再選擇“New->>EmptyPage”，創(chuàng)建登錄驗(yàn)證頁面的Login.ets源文件:項(xiàng)目工程的創(chuàng)建與配置(2/4)Page創(chuàng)建完成后，再次選中pages文件夾通過右鍵菜單“New->ArkTSFile”創(chuàng)建用于設(shè)計(jì)自定義組件的MyCustomUI.ets源文件，而工程默認(rèn)創(chuàng)建的Index.ets則作為設(shè)備管理頁面的源文件。工程的pages文件夾下的三個(gè)源文件:項(xiàng)目工程的創(chuàng)建與配置(3/4)將項(xiàng)目所需的資源圖像文件復(fù)制至工程目錄下的resources->base->media文件夾中:項(xiàng)目工程的創(chuàng)建與配置(4/4)

然后修改工程中的EntryAbility啟動(dòng)窗口的代碼，將啟動(dòng)頁面由Index頁面改為L(zhǎng)ogin頁面。雙擊打開entryability文件夾下的EntryAbility.ets源文件，在編輯窗口中將第18行代碼修改為以下內(nèi)容：windowStage.loadContent('pages/Login',(err)=>{完成上述修改后，當(dāng)App啟動(dòng)時(shí)，將首先呈現(xiàn)登錄驗(yàn)證頁面。但因通過向?qū)?chuàng)建的Index與Login頁面除了文件名外其他內(nèi)容完全相同，可以通過修改Login.ets中message字符串狀態(tài)變量值予以識(shí)別。App功能模塊設(shè)計(jì)項(xiàng)目工程的創(chuàng)建與配置登錄驗(yàn)證模塊功能實(shí)現(xiàn)設(shè)備管理模塊功能實(shí)現(xiàn)項(xiàng)目總結(jié)與拓展登錄驗(yàn)證模塊功能實(shí)現(xiàn)(1/3)登錄驗(yàn)證頁面設(shè)計(jì)目標(biāo)效果：登錄驗(yàn)證模塊功能實(shí)現(xiàn)(2/3)登錄驗(yàn)證頁面自定義的圖標(biāo)輸入框組件，關(guān)鍵代碼：@Componentexport

structMyLoginRow{

創(chuàng)建對(duì)象時(shí)需要傳值的屬性成員：記錄資源圖像

記錄輸入框onChange事件發(fā)生時(shí)調(diào)用的回調(diào)函數(shù)

記錄輸入框的掩碼類型

記錄輸入框的提示

build(){

Row({space:25}){//Image組件描述

//TextInput組件描述

}

}登錄驗(yàn)證模塊功能實(shí)現(xiàn)(3/3)在登錄驗(yàn)證頁面的Login.ets源文件關(guān)鍵代碼：import{MyLoginRow}from'./MyCustomUI';//導(dǎo)入自定義的圖標(biāo)輸入框Column({space:20}){Text('物聯(lián)網(wǎng)設(shè)備管理系統(tǒng)').fontSize(30).fontWeight(FontWeight.Bold)//賬號(hào)的圖標(biāo)輸入框//密碼的圖標(biāo)輸入框Button('登錄').onClick(()=>{//切換到Index頁面router.pushUrl({url:'pages/Index',params:''},router.RouterMode.Standard);})App功能模塊設(shè)計(jì)項(xiàng)目工程的創(chuàng)建與配置登錄驗(yàn)證模塊功能實(shí)現(xiàn)設(shè)備管理模塊功能實(shí)現(xiàn)項(xiàng)目總結(jié)與拓展設(shè)備管理模塊功能實(shí)現(xiàn)(1/7)

設(shè)備管理頁面主要實(shí)現(xiàn)以圖文列表的方式向用戶提供多個(gè)物聯(lián)網(wǎng)設(shè)備的煙霧、溫度、濕度等傳感器數(shù)據(jù)的監(jiān)控視圖，頁面效果:設(shè)備管理模塊功能實(shí)現(xiàn)(2/7)在MyCustomUI.ets源文件中，自定義的傳感器組件MyDeviceRowUI關(guān)鍵代碼：structMyDeviceRowUI{

屬性成員：記錄傳感器圖像

記錄傳感器名稱

@Propval:string='';//綁定一個(gè)狀態(tài)變量，val的值跟隨此狀態(tài)變量變化

build(){

Row({space:20}){//Image組件描述

//Text組件傳感器名稱//Text組件傳感器值

}

}}設(shè)備管理模塊功能實(shí)現(xiàn)(3/7)

由三個(gè)傳感器組件構(gòu)建物聯(lián)網(wǎng)設(shè)備組件MyDeviceUI，在組件內(nèi)部以一個(gè)定時(shí)器實(shí)現(xiàn)每隔3秒產(chǎn)生隨機(jī)數(shù)作為傳感器的數(shù)據(jù)，并通過狀態(tài)變量的綁定實(shí)現(xiàn)在傳感器組件上的更新顯示。MyDeviceUI組件關(guān)鍵代碼：exportstructMyDeviceUI{

//State變量成員：humiditytemperaturesmoke

privatetimerID:number=0;//記錄定時(shí)器的ID

aboutToAppear():void{//當(dāng)頁面將要出現(xiàn)時(shí)觸發(fā)執(zhí)行的函數(shù)

//創(chuàng)建一個(gè)定時(shí)器，實(shí)現(xiàn)每隔3秒以隨機(jī)數(shù)作為傳感器的數(shù)據(jù)

this.timerID=setInterval(()=>{//更新State變量值

},3000)

}

設(shè)備管理模塊功能實(shí)現(xiàn)(4/7)exportstructMyDeviceUI{aboutToDisappear():void{//當(dāng)頁面將要銷毀或隱藏時(shí)觸發(fā)執(zhí)行的函數(shù)clearInterval(this.timerID);//關(guān)閉定時(shí)器}build(){Column({space:10}){//分別以三個(gè)傳感器組件呈現(xiàn)濕度、溫度與煙霧傳感器的數(shù)據(jù)MyDeviceRowUI({imgSrc:$r('app.media.humidity'),sName:'濕度',val:this.humidity})MyDeviceRowUI({imgSrc:$r('app.media.temperature'),sName:'溫度',val:this.temperature})MyDeviceRowUI({imgSrc:$r('app.media.smoke'),sName:'煙霧',val:this.smoke})}

設(shè)備管理模塊功能實(shí)現(xiàn)(5/7)

在設(shè)備管理頁面Index.ets中定義一個(gè)記錄設(shè)備名稱的MyDevice類,并通過構(gòu)造函數(shù)記錄傳入的設(shè)備名稱:classMyDevice{publicsName:string='';publicconstructor(sName:string){this.sName=sName;}}設(shè)備管理模塊功能實(shí)現(xiàn)(6/7)

接著在Index組件內(nèi)部增加一個(gè)存放多個(gè)MyDevice對(duì)象的動(dòng)態(tài)數(shù)組，實(shí)現(xiàn)記錄多個(gè)物聯(lián)網(wǎng)設(shè)備的名稱。增加Index組件的aboutToAppear函數(shù)，并在函數(shù)里為每個(gè)物聯(lián)網(wǎng)設(shè)備自動(dòng)生成相應(yīng)的名稱并存入動(dòng)態(tài)數(shù)組:structIndex{privatedevs:Array<MyDevice>=[];//以動(dòng)態(tài)數(shù)組記錄設(shè)備名稱privatecount:number=8;//物聯(lián)網(wǎng)設(shè)備的數(shù)量aboutToAppear():void{for(leti=0;i<this.count;i++){this.devs.push(newMyDevice('設(shè)備'+i+'號(hào)'));}}設(shè)備管理模塊功能實(shí)現(xiàn)(7/7)

最后在Index頁面的List組件里通過ForEach函數(shù)遍歷動(dòng)態(tài)數(shù)組，為每個(gè)物聯(lián)網(wǎng)設(shè)備描述創(chuàng)建出一個(gè)MyDeviceUI組件，實(shí)現(xiàn)物聯(lián)網(wǎng)設(shè)備監(jiān)控列表，關(guān)鍵代碼:import{MyDeviceUI}from'./MyCustomUI';structIndex{build(){Column(){List(){ForEach(this.devs,(dev:MyDevice)=>{ListItem(){MyDeviceUI({devName:dev.sName})}})App功能模塊設(shè)計(jì)項(xiàng)目工程的創(chuàng)建與配置登錄驗(yàn)證模塊功能實(shí)現(xiàn)設(shè)備管理模塊功能實(shí)現(xiàn)項(xiàng)目總結(jié)與拓展項(xiàng)目總結(jié)與拓展

本次項(xiàng)目通過綜合運(yùn)用自定義組件、定時(shí)器、List列表組件、頁面切換等鴻蒙應(yīng)用開發(fā)技術(shù)，實(shí)現(xiàn)了物聯(lián)網(wǎng)設(shè)備管理系統(tǒng)的基礎(chǔ)功能，向用戶提供設(shè)備監(jiān)控操作界