開(kāi)發(fā)移動(dòng)應(yīng)用監(jiān)控室內(nèi)溫度
本文介紹搭建室內(nèi)溫度監(jiān)控移動(dòng)應(yīng)用的開(kāi)發(fā)過(guò)程。
前提條件
步驟一：創(chuàng)建移動(dòng)應(yīng)用
登錄物聯(lián)網(wǎng)應(yīng)用開(kāi)發(fā)控制臺(tái)，在頁(yè)面左上角選擇公共實(shí)例后，在左側(cè)導(dǎo)航欄單擊項(xiàng)目管理。
在普通項(xiàng)目列表中，找到室內(nèi)溫度監(jiān)控項(xiàng)目，單擊項(xiàng)目卡片。
在項(xiàng)目主頁(yè)頁(yè)面的項(xiàng)目開(kāi)發(fā)下，單擊移動(dòng)應(yīng)用頁(yè)簽。
在移動(dòng)應(yīng)用頁(yè)簽，單擊應(yīng)用列表上方的新建。
在新建移動(dòng)應(yīng)用對(duì)話框中，輸入應(yīng)用名稱(chēng)（室內(nèi)溫度監(jiān)控）和描述，單擊確認(rèn)。
移動(dòng)應(yīng)用創(chuàng)建完成后，會(huì)自動(dòng)進(jìn)入移動(dòng)應(yīng)用編輯器。
在移動(dòng)應(yīng)用頁(yè)面的畫(huà)布左側(cè)，單擊編輯按鈕
，編輯頁(yè)面標(biāo)題。
步驟二：配置組件樣式和數(shù)據(jù)源
在移動(dòng)應(yīng)用編輯器中，單擊最左側(cè)的組件圖標(biāo)
。從左側(cè)組件列表中，拖拽一個(gè)圖片組件到畫(huà)布上方。
在移動(dòng)應(yīng)用編輯器右側(cè)樣式中，設(shè)置圖片樣式并單擊上傳圖片，上傳室內(nèi)布局圖，如下圖所示。更多信息，請(qǐng)參見(jiàn)圖片。
拖拽一個(gè)選項(xiàng)卡組件到圖片組件下方，設(shè)置三個(gè)選項(xiàng)卡，分別為客廳溫濕度、臥室溫濕度、廚房溫濕度，對(duì)應(yīng)展示不同內(nèi)容。在每個(gè)選項(xiàng)卡中添加三個(gè)卡片組件和一個(gè)柱狀圖組件，展示臥室溫濕度、客廳溫濕度、廚房溫濕度、空氣質(zhì)量的狀態(tài)，如下圖所示。
分別選中溫度、濕度、PM2.5濃度卡片，配置卡片樣式和數(shù)據(jù)源。本案例以客廳溫濕度頁(yè)簽為例。
卡片組件以一定的界面樣式展示常用數(shù)據(jù)，設(shè)置顯示大小、標(biāo)題、單位、背景顏色。更多信息，請(qǐng)參見(jiàn)卡片。
在移動(dòng)應(yīng)用編輯器右側(cè)樣式中，單擊展示數(shù)據(jù)后的配置數(shù)據(jù)源。數(shù)據(jù)源參數(shù)配置如下，詳細(xì)配置說(shuō)明，請(qǐng)參見(jiàn)配置數(shù)據(jù)源。
配置項(xiàng)
溫度卡片
濕度卡片
PM2.5濃度卡片
選擇數(shù)據(jù)源
選擇設(shè)備。
產(chǎn)品
本案例選擇客廳溫濕度。
本案例選擇空氣檢測(cè)器。
設(shè)備
本案例選擇指定設(shè)備為room4。
本案例選擇指定設(shè)備為Air-detector。
數(shù)據(jù)項(xiàng)
作為卡片組件數(shù)據(jù)源的數(shù)據(jù)項(xiàng)。默認(rèn)為設(shè)備屬性。
屬性
選擇溫度屬性。
選擇濕度屬性。
選擇PM2.5濃度屬性。
選中柱狀圖組件，在移動(dòng)應(yīng)用編輯器右側(cè)樣式中，設(shè)置柱狀圖的顯示大小，并單擊展示數(shù)據(jù)后的配置數(shù)據(jù)源。數(shù)據(jù)源參數(shù)配置如下。更多信息，請(qǐng)參見(jiàn)配置數(shù)據(jù)源。
配置項(xiàng)
說(shuō)明
選擇數(shù)據(jù)源
選擇數(shù)據(jù)表資源。
數(shù)據(jù)表類(lèi)型
選擇設(shè)備數(shù)據(jù)表。
產(chǎn)品
本案例選擇客廳溫濕度。
設(shè)備選擇方式
選擇項(xiàng)目下指定設(shè)備。
選擇設(shè)備
本案例選擇指定設(shè)備為room4。
刷新設(shè)置
選中定時(shí)刷新復(fù)選框，并設(shè)置刷新頻次為1分鐘。
說(shuō)明如果不選中，數(shù)據(jù)將不會(huì)自動(dòng)更新，為保證性能，刷新頻次間隔最低為1分鐘。
拖拽四個(gè)自由卡片組件到選項(xiàng)卡組件下方，在自由卡片組件中添加文字組件和開(kāi)關(guān)組件，控制客廳燈、臥室燈、空調(diào)、空氣凈化器的開(kāi)關(guān)狀態(tài)，如下圖所示。
雙擊自由卡片進(jìn)入編輯頁(yè)面。從左側(cè)組件列表中，拖拽一個(gè)開(kāi)關(guān)和一個(gè)文字組件到自由卡片中，設(shè)置標(biāo)題和樣式。
自由卡片組件作為背景容器，設(shè)置填充顏色為#FAFAFA。更多信息，請(qǐng)參見(jiàn)自由卡片。
文字組件作為開(kāi)關(guān)標(biāo)題（例如臥室燈）。更多信息，請(qǐng)參見(jiàn)文字。
開(kāi)關(guān)組件作為燈開(kāi)關(guān)狀態(tài)的顯示，分別為ON和OFF狀態(tài)上傳對(duì)應(yīng)圖片（您可自定義）。更多信息，請(qǐng)參見(jiàn)開(kāi)關(guān)。
選中開(kāi)關(guān)組件，在移動(dòng)應(yīng)用編輯器右側(cè)樣式中，單擊開(kāi)關(guān)數(shù)據(jù)后的配置數(shù)據(jù)源。以臥室燈開(kāi)關(guān)為例，數(shù)據(jù)源參數(shù)配置如下。更多信息，請(qǐng)參見(jiàn)配置數(shù)據(jù)源。
配置項(xiàng)
說(shuō)明
選擇數(shù)據(jù)源
選擇設(shè)備。
產(chǎn)品
本案例選擇開(kāi)關(guān)遙控器。
設(shè)備
本案例選擇指定設(shè)備為switch。
數(shù)據(jù)項(xiàng)
作為開(kāi)關(guān)組件數(shù)據(jù)源的數(shù)據(jù)項(xiàng)。默認(rèn)為設(shè)備屬性。
屬性
選擇臥室燈開(kāi)關(guān)屬性。
單擊編輯器上方保存按鈕，保存設(shè)置。