## 簡介
[ThingsBoard](https://thingsboard.io/) 是用於資料收集、處理、視覺化和裝置管理的開源物聯網平臺。它支援透過 [MQTT](https://www.emqx.com/zh/mqtt)、[CoAP](https://www.emqx.com/zh/blog/connecting-coap-devices-to-emqx) 和 HTTP 等協議實現裝置連線，並支援雲和私有部署。使用豐富的伺服器端 API，以安全的方式提供、監測和控制您的物聯網實體，定義您的裝置、資產、客戶或任何其他實體之間的關係。以可擴充套件和容錯的方式收集和儲存遙測資料，用內建或定製的部件和靈活的儀表盤來視覺化您的資料，並且可以和您的客戶共享 Dashboard 介面。

本文將使用 ThingsBoard Cloud 結合 [EMQ](https://www.emqx.com/zh) 旗下的全託管 [MQTT 雲服務 - EMQX Cloud](https://www.emqx.com/zh/cloud)，介紹如何在 ThingsBoard 中整合第三方 MQTT Broker 並自定義配置 Dashboard UI 接入 MQTT 資料。

## 準備

由於我們使用的是 ThingsBoard Cloud ，所以我們無需下載安裝，只需要訪問 https://thingsboard.cloud/signup 進行註冊登入便可獲得相關服務。除了使用 ThingsBoard 雲服務之外，使用者也可以選擇私有部署進行[下載安裝](https://thingsboard.io/docs/user-guide/install/installation-options/)。

> 注意：只有專業版具備 [平臺整合](https://thingsboard.io/docs/user-guide/integrations/) 功能，所以需要使用 ThingsBoard Cloud 或者是下載部署專業版。

本文使用全託管的 MQTT 訊息雲服務 - EMQX Cloud 建立第三方 Broker。[註冊登入 EMQX Cloud](https://www.emqx.com/zh/signup?continue=https%3A%2F%2Fcloud.emqx.com%2Fconsole%2Fdeployments%2F0%3Foper%3Dnew) 控制檯，新建部署，一個部署即為一個 Broker。新使用者同時擁有 14 天基礎版和 14 天專業版免費試用機會。

EMQX Cloud 提供 VPC 對等連線和 REST API 等功能，且具備強大靈活的資料整合能力，方便使用者與其現有云服務資源對接。提供一站式運維代管，可以節省大量的時間和人力成本，讓企業專注在交付更有價值的業務系統。

## 整合

### 使用 EMQX Cloud

1. 獲取連線地址和埠。等待部署狀態為執行中，進入部署概覽頁面，找到連線地址和 `mqtt` 協議對應的連線埠，後續在 ThingsBoard 中新增整合時我們需要用到它們。

[![MQTT Cloud 部署資訊](http://img.blog.itpub.net/blog/2022/06/20/4a42fe30a207540e.png?x-oss-process=style/bb "MQTT Cloud 部署資訊")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "MQTT Cloud 部署資訊")

2. 新增認證資訊。進入【認證鑑權】->【認證】中新增一套使用者名稱密碼用於後續整合中的認證。

[![MQTT Cloud 新增認證資訊](http://img.blog.itpub.net/blog/2022/06/20/80983551fd4e316c.png?x-oss-process=style/bb "MQTT Cloud 新增認證資訊")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "MQTT Cloud 新增認證資訊")

### 配置 ThingsBoard

1. 在【Data converters】中新增一個 `Uplink` 型別的資料轉換器。該上行資料轉換器的作用是解析傳入訊息的有效負載並將其轉換為 ThingsBoard 使用的格式。

1. 填寫名稱，型別選擇 `Uplink` ，開啟 Debug 模式並將下述解析指令碼複製貼上到解析方法中。

```javascript
      // Decode an uplink message from a buffer
      // payload - array of bytes
      // metadata - key/value object
      
      // decode payload to json
      var payloadJson = decodeToJson(payload);
      var result = {
         deviceName: payloadJson.deviceName,
         attributes: {
             model: 'Model A',
             serialNumber: 'SN111',
             integrationName: metadata['integrationName']
         },
         telemetry: {
             temperature: payloadJson.temperature,
             humidity: payloadJson.humidity,
         }
      };
      
      // Helper functions
      function decodeToString(payload) {
         return String.fromCharCode.apply(String, payload);
      }
      function decodeToJson(payload) {
         // covert payload to string.
         var str = decodeToString(payload);
      
         // parse string to JSON
         var data = JSON.parse(str);
         return data;
      }
      
      return result;
      ```

2. 點選測試按鈕，進入測試頁面，對剛剛的解析指令碼進行測試。輸入 JSON 格式的 payload 內容進行測試，可以看到測試輸出資料中包含輸入的裝置名稱、溫度和溼度資料。然後點選儲存按鈕，回到剛剛的配置頁面。

[![ThingsBoard Data converters](http://img.blog.itpub.net/blog/2022/06/20/1d55d69501601e81.png?x-oss-process=style/bb "ThingsBoard Data converters")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Data converters")

3. 點選新增按鈕然後便成功新增一個 `Uplink` 型別的資料轉換器。

[![ThingsBoard Uplink](http://img.blog.itpub.net/blog/2022/06/20/3fd2fcc4f01d8f2d.png?x-oss-process=style/bb "ThingsBoard Uplink")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Uplink")

2. 進入【Integrations】新增 EMQX Cloud 部署整合。

1. 點選新增整合，輸入名稱並選擇上述第 1 步中成功新增好的上行資料轉換器 `MQTT-Uplink` 。之後複製貼上 EMQX Cloud 部署概覽頁面中的連線地址和 `mqtt` 協議對應的埠號。

[![ThingsBoard Integrations](http://img.blog.itpub.net/blog/2022/06/20/5b930ca22b393487.png?x-oss-process=style/bb "ThingsBoard Integrations")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Integrations")

2. 新增認證資訊。由於 EMQX Cloud 部署均預設開啟認證，所以我們可以選擇基礎型別的認證，然後填入在 EMQX Cloud 認證頁面中新增好的使用者名稱和密碼。點選測試連線，可以看到右下角彈出連線已經成功建立的資訊提示，表示已經成功和 EMQX Cloud 部署整合。最後輸入一個過濾主題 `/test/integration/emqxcloud`（後續模擬測試時，我們需要用這個主題去釋出一條訊息），最後點選新增按鈕，便成功新增好了與 EMQX Cloud 部署的整合。

[![ThingsBoard 新增認證](http://img.blog.itpub.net/blog/2022/06/20/d414bdf63d272256.png?x-oss-process=style/bb "ThingsBoard 新增認證")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard 新增認證")

## 整合測試

在完成上述整合配置之後，我們使用 [MQTT 5.0 客戶端工具 - MQTT X](https://mqttx.app/zh) 來模擬一個裝置測試和驗證該功能的有效性。

1. 使用 MQTT X 作為一個裝置連線到 EMQX Cloud 部署。

[![MQTT 連線](http://img.blog.itpub.net/blog/2022/06/20/dacdead3bb9ac9f1.png?x-oss-process=style/bb "MQTT 連線")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "MQTT 連線")

2. 成功建立連線之後，向上述整合時配置的過濾主題 `/test/integration/emqxcloud` 模擬傳送一條裝置上報的溫溼度資料。

[![MQTT 訊息釋出](http://img.blog.itpub.net/blog/2022/06/20/17e6e1ae699f73dd.png?x-oss-process=style/bb "MQTT 訊息釋出")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "MQTT 訊息釋出")

3. 進入 ThingsBoard 中的裝置組下的全部選單中，可以看到這裡已經顯示了我們剛剛模擬的裝置名稱和溫溼度資料。說明已經在 ThingsBoard 中成功整合 EMQX Cloud 部署。在 Integration with EMQX Cloud 整合詳情頁面中的 【Events】和【Relations】中也可以看到剛剛的模擬資料的相關資訊。

[![ThingsBoard MQTT](http://img.blog.itpub.net/blog/2022/06/20/d0fceba2d460dfca.png?x-oss-process=style/bb "ThingsBoard MQTT")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard MQTT")

## 自定義 Dashboard 接入 MQTT 資料

1. 新增一個新的 dashboard。

[![MQTT Dashboard](http://img.blog.itpub.net/blog/2022/06/20/b2c1bdb63bfdf9ec.png?x-oss-process=style/bb "MQTT Dashboard")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "MQTT Dashboard")

2. 開啟 dashboard 點選右下角橙色的編輯圖示，然後進行圖中所示的操作新增一個 [別名](https://thingsboard.io/docs/pe/user-guide/ui/aliases/)（定義將使用實體的資料）。過濾型別選擇單個實體，型別選擇裝置並選中上面 MQTT X 模擬的 Device Test 裝置。新增完所有的配置資訊之後，需要點選右下角的應用圖示，否則將無法應用或儲存之前已完成好的配置。

[![MQTT Device](http://img.blog.itpub.net/blog/2022/06/20/9673908b7f2ccf1e.png?x-oss-process=style/bb "MQTT Device")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "MQTT Device")

3. 新增一個時間序列表格小元件。

1. 依舊在剛剛的頁面點選右下角橙色編輯圖示，進入編輯模式，然後點選新增小元件。

[![ThingsBoard 新增小元件](http://img.blog.itpub.net/blog/2022/06/20/1cd42747ea75609c.png?x-oss-process=style/bb "ThingsBoard 新增小元件")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard 新增小元件")

2. 輸入 Cards 進行搜尋找到 Timeseries table 並點選進行配置。

[![ThingsBoard Timeseries table](http://img.blog.itpub.net/blog/2022/06/20/fb872363c690772e.png?x-oss-process=style/bb "ThingsBoard Timeseries table")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Timeseries table")

3. 配置剛剛選擇的表格，例項別名選擇上述設定好的別名，然後新增表格的鍵值，最後點選新增按鈕。

[![ThingsBoard Timeseries table1](http://img.blog.itpub.net/blog/2022/06/20/ce6f55fdaa6af881.png?x-oss-process=style/bb "ThingsBoard Timeseries table1")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Timeseries table1")
   4. 拖拽調整剛剛新增的表格大小，並且點選橙色勾圖示應用按鈕。

[![ThingsBoard Timeseries table2](http://img.blog.itpub.net/blog/2022/06/20/39fbc0354dc5ab81.png?x-oss-process=style/bb "ThingsBoard Timeseries table2")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Timeseries table2")

5. 我們現在回到 MQTT X 改變溫度值為 25，溼度為 80，再次釋出一條訊息，可以看到剛剛配置好的表格中便有了相應的資料。

[![ThingsBoard Timeseries table3](http://img.blog.itpub.net/blog/2022/06/20/690b8fa90a70ddfc.png?x-oss-process=style/bb "ThingsBoard Timeseries table3")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Timeseries table3")

4. 與上面第 3 步類似，我們點選新增小元件，搜尋輸入 charts ，然後選擇 Timeseries Line Chart，進行配置且把實時時間範圍改為最近 5 小時。使用 MQTT X 再次傳送一條資料，可以看到兩個元件中均展示了對應的資料。

[![ThingsBoard Timeseries Line Chart](http://img.blog.itpub.net/blog/2022/06/20/35c0b133c6aee05c.png?x-oss-process=style/bb "ThingsBoard Timeseries Line Chart")](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data "ThingsBoard Timeseries Line Chart")

## 總結

至此，我們完成了在 ThingsBoard Cloud 中整合 EMQX Cloud 部署，並且使用 MQTT X 測試驗證了整合功能，最後自定義配置了一個簡單的 Dashboard 接入展示 MQTT 資料。在實際專案中，我們可以在深入學習瞭解 ThingsBoard 後，進行更復雜的 Dashboard 配置，能夠更加形象具體地實時監控裝置的相關資料，並設定告警閥值，接收告警資訊並及時作出相應處理。

>版權宣告： 本文為 EMQ 原創，轉載請註明出處。
>
>原文連結：[https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data](https://www.emqx.com/zh/blog/how-to-use-thingsboard-to-access-mqtt-data)

如何使用 ThingsBoard 接入 MQTT 資料

相關文章