?

1、概述

本實踐案例中使用LoRa氣象監(jiān)測設(shè)備監(jiān)測氣象信息，上報溫度、濕度、大氣壓、經(jīng)度、緯度等數(shù)據(jù)，并使用IoT Studio平臺搭建監(jiān)控大屏，展示氣象監(jiān)測設(shè)備最新上報的數(shù)據(jù)和歷史數(shù)據(jù)曲線圖。

架構(gòu)圖

本案例的架構(gòu)圖如下。

?

方案設(shè)計

實現(xiàn)過程：

1. 自主搭建氣象站的LoRa網(wǎng)絡(luò)。
2. 配置LoRa氣象監(jiān)測設(shè)備接入物聯(lián)網(wǎng)平臺。
3. 在IoT Studio平臺搭建監(jiān)控大屏。

物料準(zhǔn)備

購買LoRa網(wǎng)關(guān)和LoRa氣象監(jiān)測設(shè)備硬件。

購買已通過Link WAN認(rèn)證的產(chǎn)品（內(nèi)置Link WAN密鑰），可訪問廣域物聯(lián)網(wǎng)或阿里云IoT元器件館。

2、配置LoRa網(wǎng)關(guān)

使用LoRa設(shè)備之前，您需在物聯(lián)網(wǎng)絡(luò)管理平臺上配置LoRa網(wǎng)關(guān)，搭建物聯(lián)網(wǎng)所需的網(wǎng)絡(luò)服務(wù)。

前提條件

已開通物聯(lián)網(wǎng)絡(luò)管理平臺。

操作步驟

1. 登錄物聯(lián)網(wǎng)絡(luò)管理平臺控制臺
2. 在左側(cè)導(dǎo)航欄，選擇快速入門。
3. 選擇搭建與分享網(wǎng)絡(luò)對應(yīng)的開始搭建。

4. 單擊開始體驗。
5. 注冊網(wǎng)關(guān)，填入您的網(wǎng)關(guān)基本信息和位置信息后，單擊下一步。網(wǎng)關(guān)的GwEUI、PIN Code和頻段信息，請在您網(wǎng)關(guān)設(shè)備的標(biāo)簽上查看。

   如下圖所示。

6. 將網(wǎng)關(guān)通電、連網(wǎng)。

   稍等片刻之后，網(wǎng)關(guān)狀態(tài)顯示為在線，則表示網(wǎng)關(guān)連網(wǎng)上線成功。

7. 添加入網(wǎng)憑證，單擊下一步。

8. 將憑證授權(quán)給自己，單擊完成。

執(zhí)行結(jié)果

將憑證授權(quán)給自己后，在物聯(lián)網(wǎng)平臺上使用該憑證創(chuàng)建連網(wǎng)方式為LoRaWAN的產(chǎn)品。

3、配置LoRa設(shè)備接入物聯(lián)網(wǎng)平臺

配置LoRa網(wǎng)關(guān)后，您需要在物聯(lián)網(wǎng)平臺上創(chuàng)建LoRa產(chǎn)品和設(shè)備，定義物模型，編寫、提交LoRa設(shè)備的數(shù)據(jù)解析腳本。

創(chuàng)建產(chǎn)品和設(shè)備

1. 登錄物聯(lián)網(wǎng)平臺控制臺。
2. 在實例概覽頁，找到對應(yīng)的實例，單擊實例進(jìn)入實例詳情頁。

3. 在左側(cè)導(dǎo)航欄，選擇設(shè)備管理?>?產(chǎn)品。
4. 在產(chǎn)品頁，單擊創(chuàng)建產(chǎn)品，創(chuàng)建一個連網(wǎng)方式為LoRaWAN的產(chǎn)品。

   參數(shù)	說明
   產(chǎn)品名稱	自定義產(chǎn)品名稱。
   所屬品類	選擇為自定義品類。
   節(jié)點類型	選擇直連設(shè)備。
   連網(wǎng)方式	選擇為LoRaWAN。
   入網(wǎng)憑證	選擇您在物聯(lián)網(wǎng)絡(luò)平臺中創(chuàng)建并已授權(quán)的入網(wǎng)憑證。
   數(shù)據(jù)格式	選擇為透傳/自定義。
   認(rèn)證方式	選擇為設(shè)備密鑰。

5. 產(chǎn)品創(chuàng)建成功后，單擊添加設(shè)備欄下的前往添加，添加一個設(shè)備。

   設(shè)備的DevEUI和PIN Code，請在您的設(shè)備標(biāo)簽上查看。

6. 測試設(shè)備連接物聯(lián)網(wǎng)平臺。

   按照設(shè)備上的標(biāo)識，為設(shè)備連接天線、GPS天線、電池或電源。

   設(shè)備上電約2分鐘后，在物聯(lián)網(wǎng)平臺控制臺對應(yīng)的實例下的設(shè)備頁的設(shè)備列表中，該設(shè)備的狀態(tài)會顯示為在線。

定義物模型

物模型是將物理空間中的實體進(jìn)行數(shù)字化，并在云端構(gòu)建該實體的數(shù)據(jù)模型。在物聯(lián)網(wǎng)平臺中，定義物模型即定義產(chǎn)品功能（包括屬性、事件、服務(wù)）。完成功能定義后，系統(tǒng)將自動生成該產(chǎn)品的物模型。本示例中，氣象監(jiān)測設(shè)備上報溫度、濕度、氣壓、地理位置坐標(biāo)等信息。因此，先在物聯(lián)網(wǎng)平臺上，為這些信息定義數(shù)據(jù)模型，即定義對應(yīng)的屬性。

1. 在物聯(lián)網(wǎng)平臺控制臺對應(yīng)實例下的左側(cè)導(dǎo)航欄，選擇設(shè)備管理?>?產(chǎn)品?。
2. 在產(chǎn)品頁，找到之前創(chuàng)建的產(chǎn)品，單擊對應(yīng)的查看。
3. 在產(chǎn)品詳情頁功能定義頁簽下，選擇編輯草稿?>?添加自定義功能，添加以下自定義功能。

   屬性名	標(biāo)識符	類型	取值范圍	步長	單位	讀寫類型
   溫度	Temperature	double	-99~100	0.01	℃	讀寫
   濕度	Humidity	double	1~100	0.01	%	讀寫
   大氣壓	Atmosphere	float	550 ~1060	0.01	hPa	讀寫
   經(jīng)度	Longitude	double	-180~180	0.01	°	讀寫
   緯度	Latitude	double	-90~90	0.01	°	讀寫
   海拔	Altitude	float	0~9999	0.01	m	讀寫
   X加速度	Acceleration_X	float	-1000~1000	0.01	mg	讀寫
   Y加速度	Acceleration_Y	float	-1000~1000	0.01	mg	讀寫
   Z加速度	Acceleration_Z	float	-1000~1000	0.01	mg	讀寫
   運行速度	Speed	float	-10000 ~10000	0.01	Km/h	讀寫
   電池電壓	Battery_voltage	float	0~100000	0.01	V	讀寫
   氣體阻力	Gas_resistance	float	-10000 ~10000	0.01	無	讀寫

   新增物模型的詳細(xì)操作說明，請參見單個添加物模型。

4. 單擊發(fā)布上線將物模型發(fā)布為正式版。

編寫數(shù)據(jù)解析腳本

本示例中，LoRa設(shè)備上報的數(shù)據(jù)是二進(jìn)制格式，如01880537A5109D5A00846C。其中 1、2 字節(jié)為數(shù)據(jù)標(biāo)識碼01 88；3、4、5字節(jié)為海拔數(shù)據(jù)altitude:339m；6、7、8字節(jié)為緯度數(shù)據(jù)latitude:34.1925；9、10、11字節(jié)為經(jīng)度數(shù)據(jù)longitude:108.8858。

阿里云物聯(lián)網(wǎng)平臺的標(biāo)準(zhǔn)數(shù)據(jù)格式為Alink JSON格式，不能直接使用二進(jìn)制數(shù)據(jù)進(jìn)行業(yè)務(wù)處理；并且物聯(lián)網(wǎng)平臺下發(fā)的數(shù)據(jù)也是Alink JSON格式。您需要根據(jù)您的設(shè)備數(shù)據(jù)格式和定義的物模型，編寫數(shù)據(jù)解析腳本，提交到物聯(lián)網(wǎng)平臺，以供物聯(lián)網(wǎng)平臺調(diào)用來解析上下行數(shù)據(jù)。

1. 登錄物聯(lián)網(wǎng)平臺控制臺，在對應(yīng)實例的產(chǎn)品詳情頁，選擇數(shù)據(jù)解析頁簽。
2. 在編輯腳本輸入框中，輸入解析腳本。

   說明?腳本代碼中屬性的標(biāo)識符必須與定義物模型時定義的一致。

   詳細(xì)的數(shù)據(jù)解析腳本編寫指導(dǎo)，請參見LoRaWAN設(shè)備數(shù)據(jù)解析。

   本示例的數(shù)據(jù)解析腳本如下：

   // var COMMAND_REPORT = 02;// var COMMAND_SET = 01;var ALINK_PROP_REPORT_METHOD = "thing.event.property.post"; //標(biāo)準(zhǔn)ALink JSON格式Topic，設(shè)備上傳屬性數(shù)據(jù)到云端。var ALINK_PROP_SET_METHOD = "thing.service.property.set";var ALINK_VERSION = "1.1";function rawDataToProtocol(bytes) {    var uint8Array = new Uint8Array(bytes.length);    for (var i = 0; i < bytes.length; i++) {        uint8Array[i] = bytes[i] & 0xff;    }    var dataView = new DataView(uint8Array.buffer, 0);    var jsonMap = {};    // var fHead = uint8Array[0]; // 第0個BYTE為上報協(xié)議。// if (fHead == COMMAND_REPORT)    {        jsonMap["method"] = ALINK_PROP_REPORT_METHOD; //ALink JSON格式 - 屬性上報。        jsonMap["version"] = ALINK_VERSION; //ALink JSON格式 - 協(xié)議版本號固定字段。        jsonMap["id"] = "" + 12345; //ALink JSON格式 - 標(biāo)示該次請求id值。        var params = {};        switch (dataView.getInt16(0)) {        case 0x0267:            params["Temperature"] = Math.floor(dataView.getInt16(2) * 0.1 * 10) / 10;//保留兩位小數(shù)。            params["Humidity"] = Math.floor(100 * dataView.getUint8(6) * 0.01 / 2 * 10) / 10;            params["Atmosphere"] = Math.floor(dataView.getInt16(9) * 0.1 * 10) / 10;            break;        case 0x0188:            var buffer = new Uint8Array(4);            buffer[0] = 0;            buffer[1] = uint8Array[2];            buffer[2] = uint8Array[3];            buffer[3] = uint8Array[4];            var latitude = new DataView(buffer.buffer, 0);            params["Latitude"] = Math.floor(latitude.getInt32(0) * 0.0001 * 10000) / 10000;            buffer[0] = 0;            buffer[1] = uint8Array[5];            buffer[2] = uint8Array[6];            buffer[3] = uint8Array[7];            var longitude = new DataView(buffer.buffer, 0);            params["Longitude"] = Math.floor(longitude.getInt32(0) * 0.0001 * 10000) / 10000;            buffer[0] = 0;            buffer[1] = uint8Array[8];            buffer[2] = uint8Array[9];            buffer[3] = uint8Array[10];            var altitude = new DataView(buffer.buffer, 0);            params["Altitude"] = Math.floor(altitude.getInt32(0) * 0.01 * 100) / 100;            break;        case 0x0371:            params["Acceleration_X"] = dataView.getInt16(2);            params["Acceleration_Y"] = dataView.getInt16(4);            params["Acceleration_Z"] = dataView.getInt16(6);            break;        case 0x0702:            params["Battery_voltage"] = dataView.getInt16(2)/10;            params["Speed"] = Math.floor(dataView.getInt16(6) * 0.01 * 100) / 100;            break;        case 0x0902:            params["Gas_resistance"] = dataView.getInt16(2);            break;        }        jsonMap["params"] = params; //ALink JSON 格式 - params 標(biāo)準(zhǔn)字段 }        return jsonMap;    }    function protocolToRawData(bytes) {        var method = json["method"];        var id = json["id"];        var version = json["version"];        var payloadArray = [];        return payloadArray;    }}                        

3. 測試腳本。
   1. 選擇模擬類型為設(shè)備上報數(shù)據(jù)。
   2. 在模擬輸入下的輸入框中，輸入一個模擬數(shù)據(jù)：01880537A5109D5A00846C。
   3. 單擊執(zhí)行。

   解析結(jié)果顯示在運行結(jié)果欄中。

4. 確認(rèn)腳本能正確解析數(shù)據(jù)后，單擊提交，將腳本提交到物聯(lián)網(wǎng)平臺系統(tǒng)。

   說明?物聯(lián)網(wǎng)平臺不能調(diào)用草稿狀態(tài)的腳本，只有已提交的腳本才會被調(diào)用來解析數(shù)據(jù)。

   設(shè)備上報的屬性數(shù)據(jù)經(jīng)腳本成功解析后，您可以在該設(shè)備的設(shè)備詳情頁物模型數(shù)據(jù)?>?運行狀態(tài)頁簽下，查看設(shè)備上報的屬性數(shù)據(jù)。

4、使用IoT Studio開發(fā)監(jiān)控大屏

IoT Studio平臺，即物聯(lián)網(wǎng)開發(fā)平臺。您可以使用IoT Studio中的Web應(yīng)用編輯器可搭建監(jiān)控大屏，用于展示設(shè)備上報的數(shù)據(jù)。

操作步驟

1. 在物聯(lián)網(wǎng)平臺控制臺左側(cè)導(dǎo)航欄，選擇IoT Studio?>?項目管理，在普通項目下單擊新建項目，新建一個普通項目，具體操作參見普通項目。

   創(chuàng)建成功，自動進(jìn)入該項目。

2. 在項目左側(cè)導(dǎo)航欄，選擇產(chǎn)品，再單擊關(guān)聯(lián)物聯(lián)網(wǎng)平臺產(chǎn)品，將已創(chuàng)建的氣象監(jiān)測產(chǎn)品與該項目關(guān)聯(lián)，具體操作參見關(guān)聯(lián)產(chǎn)品至普通項目。
3. 在項目左側(cè)導(dǎo)航欄，選擇設(shè)備，再單擊關(guān)聯(lián)物聯(lián)網(wǎng)平臺設(shè)備，將要監(jiān)控數(shù)據(jù)的來源設(shè)備與該項目關(guān)聯(lián)，具體操作參見關(guān)聯(lián)設(shè)備至普通項目。
4. 在項目左側(cè)導(dǎo)航欄，選擇主頁，單擊Web應(yīng)用?>?新建，新建一個Web應(yīng)用，具體操作參見創(chuàng)建Web應(yīng)用。
5. 在Web應(yīng)用編輯器中，搭建實時氣象數(shù)據(jù)監(jiān)控面板。
   1. 選擇自定義新增頁，設(shè)置頁面標(biāo)題和背景顏色等面板頁面顯示效果。
   2. 在左側(cè)導(dǎo)航欄中，選擇
      組件，打開組件列表。
   3. 從組件列表中，拖拽一個矩形組件到畫布上，并配置組件樣式，具體操作參見矩形。
   4. 從組件列表中，拖拽一個文字組件重疊于矩形組件上，再配置文字組件的數(shù)據(jù)源為氣象監(jiān)測設(shè)備的溫度屬性，具體操作參見文字。

      設(shè)置完成后，該文字組件將顯示氣象監(jiān)測設(shè)備上報的溫度值。

   5. 從組件列表中，拖拽一個文字組件重疊于矩形組件上，文字內(nèi)容設(shè)置為溫度（℃），作為溫度顯示組件的標(biāo)題。
   6. 選中配置好的三個組件，單擊鼠標(biāo)右鍵，選擇成組，將這三個組件組成組件組。

   7. 根據(jù)要展示的屬性數(shù)量，復(fù)制多個組。

      復(fù)制組件組時，各組件的顯示效果配置和數(shù)據(jù)源配置同時被復(fù)制。

   8. 對復(fù)制的組件組單擊鼠標(biāo)右鍵，選擇解散組。

      復(fù)制的組件組所有配置均相同。需先解散組，才能重新配置組件數(shù)據(jù)源等信息。

   9. 分別將數(shù)據(jù)源設(shè)置為該產(chǎn)品的其他屬性，并設(shè)置對應(yīng)的屬性名稱和單位。
   10. 如有需要，還可在頁面上增加其他組件，如圖片組件等，參見基礎(chǔ)組件使用說明。

       控制面板效果參考圖如下。

   11. 所有組件配置完成后，單擊頁面上方的
       預(yù)覽，預(yù)覽和測試應(yīng)用頁面。
6. 在Web應(yīng)用編輯器中，新建空白頁面，配置屬性數(shù)據(jù)曲線展示圖。

   以配置溫度數(shù)據(jù)展示曲線圖為例。

   1. 在左側(cè)導(dǎo)航欄，選擇
      頁面，再單擊新建符號+，新增空白頁面。
   2. 在左側(cè)導(dǎo)航欄，選擇
      組件，拖拽一個實時曲線組件到畫布上，并配置實時曲線組件的數(shù)據(jù)源為氣象監(jiān)測設(shè)備的溫度屬性，具體操作參見實時曲線。
   3. 配置曲線圖的顯示樣式。調(diào)整曲線圖大小、坐標(biāo)，設(shè)置是否顯示時間選擇器，設(shè)置系列名稱為溫度等。

      說明?如果選中時間選擇器前的復(fù)選框，表示曲線圖上顯示時間選擇器。應(yīng)用發(fā)布后，可以設(shè)置時間，查看對應(yīng)時間段的溫度數(shù)據(jù)。

   4. 配置完成后，單擊頁面上方的
      預(yù)覽，預(yù)覽和測試應(yīng)用頁面。
7. 單擊頁面上方的
   發(fā)布，發(fā)布應(yīng)用。

后續(xù)步驟

應(yīng)用發(fā)布后，在左側(cè)導(dǎo)航欄中選擇

應(yīng)用設(shè)置，可以開啟應(yīng)用Token驗證，為應(yīng)用綁定您自己的域名等。

更多Web應(yīng)用可視化開發(fā)操作指導(dǎo)，請參見Web可視化開發(fā)文檔。

?