8.4鴻蒙APP端開發(fā)本章主要講述智慧城市云管理項(xiàng)目鴻蒙APP端開發(fā)。通過學(xué)習(xí)本節(jié)將能夠了解智慧城市云管理項(xiàng)目鴻蒙APP端開發(fā)。通過本節(jié)學(xué)習(xí)可以熟悉：鴻蒙APP端HTTP編程物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程鴻蒙APP端主程序編程鴻蒙APP端HTTP編程物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程鴻蒙APP端主程序編程鴻蒙APP端開發(fā)(1/5)

首先在DevEcoStudio基于EmptyAbility模板創(chuàng)建IoTCityApp工程，并將資源圖片文件復(fù)制至工程資源目錄下的media子文件夾中，然后為工程增加網(wǎng)絡(luò)訪問權(quán)限。修改工程configuration目錄下的module.json5配置文件，在第15行插入以下內(nèi)容：

"requestPermissions":[{

"name":"ohos.permission.INTERNET"

}],鴻蒙APP端HTTP編程(2/5)HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是一種基于TCP擴(kuò)展的應(yīng)用層通信協(xié)議，用于在網(wǎng)絡(luò)中傳輸網(wǎng)頁內(nèi)容。HTTP的工作原理基于請求－響應(yīng)模型。當(dāng)用戶在網(wǎng)頁瀏覽器中輸入一個(gè)網(wǎng)址或點(diǎn)擊一個(gè)鏈接時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)送一個(gè)HTTP請求。這個(gè)請求包含了請求的類型（如GET或POST）、請求的URL（統(tǒng)一資源定位符），以及可選的頭信息（headers）與額外信息(extraData)。當(dāng)服務(wù)器接收到請求后，向?yàn)g覽器返回一個(gè)HTTP響應(yīng)數(shù)據(jù)，響應(yīng)數(shù)據(jù)中包含響應(yīng)頭信息（headers）以及響應(yīng)體信息（body），其中響應(yīng)體通常包含了客戶端請求的資源，如HTML文檔、圖片、視頻等

因此在網(wǎng)頁瀏覽器上登錄管理華為物聯(lián)網(wǎng)云平臺(tái)里的設(shè)備，本質(zhì)上就是在PC機(jī)上與華為云進(jìn)行HTTP網(wǎng)絡(luò)通信，也就是說，華為云已經(jīng)為物聯(lián)網(wǎng)建立了HTTP服務(wù)器，開發(fā)者只需在App程序中利用華為云提供的HTTP客戶端訪問接口，即可輕松實(shí)現(xiàn)對物聯(lián)網(wǎng)設(shè)備的管理功能。lethttpRequest=http.createHttp();//1.創(chuàng)建http通信對象//2.根據(jù)訪問網(wǎng)址與參數(shù)信息生成http異步訪問對象letpromise=httpRequest.request('訪問網(wǎng)址',{//當(dāng)訪問網(wǎng)址即可查看頁面數(shù)據(jù)使用GET，如訪問網(wǎng)址還需傳入賬號(hào)密碼信息則使用POST"method":http.RequestMethod.GET,"header":{//頭信息設(shè)置},"extraData":{//額外信息設(shè)置}});awaitpromise.then((data)=>{//3.讓訪問對象執(zhí)行http訪問，并設(shè)置接收數(shù)據(jù)的回調(diào)函數(shù)//data.result獲取響應(yīng)體數(shù)據(jù)//data.headers獲取響應(yīng)頭信息})鴻蒙APP端HTTP編程(3/5)

根據(jù)官方開發(fā)文檔，鴻蒙HTTP通信編程主要步驟如下：鴻蒙APP端HTTP編程(4/5)

因網(wǎng)絡(luò)延時(shí)的原因，無法在剛發(fā)起訪問就獲取服務(wù)器的響應(yīng)，所以在HTTP網(wǎng)絡(luò)通信編程，將使用async、await、Promise等關(guān)鍵詞與對象，實(shí)現(xiàn)網(wǎng)絡(luò)訪問的異步處理(即發(fā)出網(wǎng)絡(luò)訪問后，并不會(huì)一直等待服務(wù)器的響應(yīng)，而是先執(zhí)行處理其他任務(wù)，直到接收到服務(wù)器的響應(yīng)后才恢復(fù)處理)。接下來實(shí)驗(yàn)一個(gè)通過HTTP時(shí)間服務(wù)器獲取當(dāng)前時(shí)間的編程實(shí)例，首先在瀏覽器上通過網(wǎng)址獲取時(shí)間:鴻蒙APP端HTTP編程(5/5)

因時(shí)間服務(wù)器性能的原因，通常需要訪問多次才可以成功獲取到時(shí)間信息，所以在程序中將創(chuàng)建一個(gè)定時(shí)器每隔一秒發(fā)出訪問直到獲取到時(shí)間為止，Index.ets關(guān)鍵代碼：structIndex{

//異步執(zhí)行的函數(shù)，函數(shù)執(zhí)行結(jié)束后返回一個(gè)字符串

asyncgetCNTime():Promise<string>{

//1.創(chuàng)建http通信對象

//2.根據(jù)訪問網(wǎng)址與參數(shù)信息生成http異步訪問對象

//3.讓訪問對象執(zhí)行http訪問，并設(shè)置接收數(shù)據(jù)的回調(diào)函數(shù)

returnsRet;

}

aboutToAppear(){//每隔一秒鐘訪問網(wǎng)址，直到獲取時(shí)間為止

this.timerID

=setInterval(()=>{

//調(diào)用異步函數(shù)，待函數(shù)返回時(shí)將屬性成員message值設(shè)為返回的時(shí)間字符串值鴻蒙APP端HTTP編程物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程鴻蒙APP端主程序編程物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程(1/7)

根據(jù)文檔指導(dǎo)，應(yīng)用側(cè)APP需要憑華為云的IAM賬號(hào)與密碼獲取通信密鑰Token,在后續(xù)所有HTTP通信中需要在頭信息里提供此Token。1.

創(chuàng)建IAM賬號(hào)并授權(quán)IAM賬號(hào)的創(chuàng)建方法如下：在瀏覽器登錄華為云官網(wǎng)后，點(diǎn)擊右上角的賬號(hào)彈出菜單點(diǎn)擊“統(tǒng)一身份認(rèn)證”如圖所示：物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程(2/7)進(jìn)入認(rèn)證頁面后，點(diǎn)擊右上角的“創(chuàng)建用戶”，并在創(chuàng)建頁面上設(shè)置用戶名與密碼:然后在下一步頁面中將用戶加入“admin”用戶組，最后點(diǎn)擊“創(chuàng)建用戶”完成創(chuàng)建。物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程(3/7)2.

獲取APP的HTTP接入地址在云平臺(tái)freeStandardInstance實(shí)例的總覽頁面上，找到并點(diǎn)擊“接入信息”，在接入信息頁面上查看應(yīng)用接入的HTTPS地址，如圖所示：物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程(4/7)3.云平臺(tái)HTTP通信模塊編程然后在工程的pages目錄下創(chuàng)建IoTHW子目錄，并在此子目錄下創(chuàng)建IoTHttp.ets源文件。在源文件中根據(jù)華為云提供的HTTP客戶端訪問接口，實(shí)現(xiàn)獲取訪問密鑰Token、ProjectId與DeviceId等信息。IoTHttp.ets關(guān)鍵代碼：exportclassIoTHttp{

//獲取Token的訪問地址

publicstatic

serverIam:string="";

//物聯(lián)網(wǎng)云平臺(tái)的應(yīng)用接入HTTPS地址

publicstatic

serverIot:string="https://"+"73"+"/v5/iot/";

public

token:string="";//記錄Token

public

projectID:string="";//記錄ProjectId

public

deviceIDs:Array<string>=[];//記錄所有的設(shè)備ID物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程(5/7)//2.獲取ProjectId，因需要ProjectId才能獲取設(shè)備IDasyncgetProjectId():Promise<string>{...returnjectID;//返回ProjectID}//3.獲取云平臺(tái)上所有設(shè)備的IDasyncgetDeviceID():Promise<string[]>{...returnthis.deviceIDs;//返回存放設(shè)備ID的數(shù)組}物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程(6/7)

云平臺(tái)HTTP通信模塊完成后，接下來先進(jìn)行應(yīng)用測試。在Index頁面的index.ets源文件中，修改aboutToAppear函數(shù)代碼，執(zhí)行獲取Token、ProjectId與DeviceId的函數(shù)。關(guān)鍵代碼：

privatehwID:string='hid_t7ojccjv0-c7re4'//主賬號(hào)

privateiamID:string="iothw"http://IAM賬號(hào)

privateiamPasswd:string="hi3861"http://IAM賬號(hào)密碼

aboutToAppear(){

letiotHttp:IoTHttp=newIoTHttp();

//根據(jù)賬號(hào)信息獲取token

iotHttp.getToken(this.hwID,this.iamID,this.iamPasswd).then((token:string)=>{

//成功獲取token后，再獲取projectId

//成功獲取projectId后，最后獲取云平臺(tái)上所有設(shè)備的ID并輸出

iotHttp.getDeviceID().then((devIdList:Array<string>)=>{

})物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程(7/7)成功執(zhí)行后在調(diào)試終端輸出信息:鴻蒙APP端HTTP編程物聯(lián)網(wǎng)云平臺(tái)HTTP通信編程鴻蒙APP端主程序編程鴻蒙APP端主程序編程(1/6)

原Index頁面將修改作為登錄驗(yàn)證頁面，主頁面MainPage通過鼠標(biāo)選中工程pages目錄后，右鍵選菜單“New”－>“Page”－>“EmptyPage”進(jìn)行創(chuàng)建。

修改Index.ets源文件代碼功能，實(shí)現(xiàn)接收用戶輸入的賬號(hào)與密碼信息，并連接華為云獲取Token、ProjectId與DeviceId等參數(shù)。設(shè)計(jì)頁面效果如圖所示：鴻蒙APP端主程序編程(2/6)

當(dāng)驗(yàn)證失敗時(shí)彈出對話框提示用戶錯(cuò)誤信息，驗(yàn)證通過后則切換至MainPage頁面，index.ets關(guān)鍵代碼：structIndex{

//State變量:記錄華為帳號(hào)IAM帳號(hào)IAM帳號(hào)密碼

privatemyHwIoT:IoTHttp=newIoTHttp();

build(){

//使用重疊式的布局管理器實(shí)現(xiàn)華為云圖標(biāo)與背景圖疊層顯示

Column({space:20}){//華為云帳號(hào)輸入行的圖片組件描述、TextInput組件描述與onChange時(shí)改變State變量值

//華為云IAM帳號(hào)輸入行的圖片組件描述、TextInput組件描述與onChange時(shí)改變State變量值//華為云IAM帳號(hào)密碼輸入行的圖片組件描述、TextInput組件描述與onChange時(shí)改變State變量值

//登錄按鈕組件描述

//當(dāng)單擊時(shí)通過IoTHttp對象獲取Token、ProjectID與設(shè)備ID

}鴻蒙APP端主程序編程(3/6)

為了便于管理每個(gè)設(shè)備，先設(shè)計(jì)設(shè)備的頁面組件如圖所示，并在組件中實(shí)現(xiàn)定時(shí)更新傳感器數(shù)據(jù)與下發(fā)命令的功能。exportstructIoTDeviceUI{

//@State變量:記錄濕度、設(shè)備在線狀態(tài)、狀態(tài)字體顏色、更新時(shí)間

//屬性成員：IoTHttp通信對象

設(shè)備ID定時(shí)器IDIoTDevice對象

aboutToAppear(){//創(chuàng)建IoTDevice對象，并由屬性成員記錄

//創(chuàng)建定時(shí)器，并定時(shí)查詢設(shè)備的狀態(tài)、影子設(shè)備數(shù)據(jù)、數(shù)據(jù)更新時(shí)間

}dealCommand(cmdName:string,isOn:boolean){//通過調(diào)用IoTDevice對象的功能函數(shù)實(shí)現(xiàn)下發(fā)命令功能

}鴻蒙APP端主程序編程(4/6)在pages目錄下創(chuàng)建IoTDeviceUI.ets源文件，源文件關(guān)鍵代碼：build(){Column({space:5}){//此行顯示設(shè)備ID及在線狀態(tài)的組件描述//此行顯示設(shè)備數(shù)據(jù)更新的時(shí)間的組件描述Row(){//以下區(qū)域：左部分顯示傳感器數(shù)據(jù)，右部分硬件設(shè)備控制按鈕Column(){//左部分

傳感器數(shù)據(jù)區(qū)//濕度圖標(biāo)、文字、值組件描述//亮度圖標(biāo)、文字、值組件描述}Column(){//右部分,控制按鈕區(qū)//灌溉開關(guān)圖標(biāo)、文字、Toggle按鈕組件描述，并增加按鈕onClick時(shí)下發(fā)命令的功能

//路燈開關(guān)圖標(biāo)、文字、Toggle按鈕組件描述，并增加按鈕onClick時(shí)下發(fā)命令的功能

}

}}.height(200).width('96%').bac