ThingsBoardをDockerでインストール

前回の投稿からの続きです。読んでなくても大丈夫ですが、読んであると、より理解しやすいです。
ThingsBoardは、IoTを扱うためのプラットフォームです。Androidのスマホをもってあちこち歩いているときに、バックグラウンドで位置情報を取得して、このThingsBoardで位置情報を保存・可視化することが目的です。

（参考）
[Androidのフォアグラウンドサービスで位置情報を取得する](https://qiita.com/poruruba/items/aa02207080a390e1ac85)
[CasaOSで自分NASを構築する](https://qiita.com/poruruba/items/03f7179c9e370bfdd5ec)
[Nginx Proxy Managerを使ってワイルドカードSSL証明書を作成する](https://qiita.com/poruruba/items/13ec1d93b27a43359ea5)

# CasaOS上から、ThingsBoardをインストール

CasaOS上からDockerを使ってThingsBoardをインストールします。

https://thingsboard.io/docs/user-guide/install/docker/

まずは、サーバPC上で、事前にデータをホスト側に保存するためのフォルダを作成します。

```
> mkdir /opt/thingsboard
> cd /opt/thingsboard
> mkdir {data,logs}
> chown 799:799 {data,logs}
```

CasaOSをブラウザで開き、Appの右端にある＋ボタンをクリックして、Install a customized appを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/46ce3f44-c809-6c63-5ff3-38e42f0b5670.png)

右上のImportボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/84f247b4-0196-101f-92f1-f4fc981a0ab2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f3445b90-fa8f-8bf7-2a8c-c493c782bd2f.png)

以下のコピペして、Submitボタンをクリックします。

```
version: '3.0'
name: thngsboard
services:
  mytb:
    restart: always
    image: "thingsboard/tb-postgres"
    ports:
      - "8080:8080"
      - "1883:1883"
      - "7070:7070"
      - "5683-5688:5683-5688/udp"
    environment:
      - HTTP_BIND_PORT=8080
      - TB_QUEUE_TYPE=in-memory
    volumes:
      - /opt/thingsboard/data:/data
      - /opt/thingsboard/logs:/var/log/thingsboard
x-casaos:
  port_map: "8080"
  title:
    custom: ThingsBoard
```

そのまま、Installボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/362b9e4e-3726-396d-0526-674d3f493976.png)

インストールが完了すると、ThingsBoardのアイコンができています。

 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3670ee87-d6c3-37a5-893c-7c21c1a1b57d.png)

ThingsBoardアイコンをクリックします。
（最初はThingsBoardの起動まで時間がかかるかと思います）
	
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/344d9a52-c64b-f17e-53f4-4f815fea34fe.png)

初期パスワードは以下です。まずは、System Administratorでログインします。

* System Administrator: sysadmin@thingsboard.org / sysadmin
* Tenant Administrator: tenant@thingsboard.org / tenant
* Customer User: customer@thingsboard.org / customer

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/a59b585a-4a06-ca6a-5985-2b9a6730423e.png)

左側のナビゲーションメニューからテナントを選択します。
右上の＋ボタンを押してテナントを作成しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/8836da8d-747b-17fc-ea05-3cc4b3b6fd36.png)

適当に、MyTenantとしてみました。国はJapanですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/a6cfce3a-0c67-8e0a-5876-9cb4f4143bce.png)

出来上がったMyTenantの右側にあるテナント管理者の管理のアイコンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c1f0d5ed-6d41-172e-9df2-a4f3997633f7.png)

＋ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3ea0a0dc-fbfe-aaed-efc1-e434c6b33d86.png)

Eメールは適当に、「test@sample.work」としてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3637ab8c-1691-2bb5-ba2a-001b7f04d9c4.png)

作成したテナントに作成したEメールでログインするためのURLが生成されますので、ブラウザで開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/54b528ae-d49d-0537-5c69-605cb46df01b.png)

任意のパスワードを設定すれば、ログインできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/7ba6a931-7eb9-4ab8-9d20-17ad7dc03c92.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f0e7672d-7e10-6cd8-2863-f3e309ea06d8.png)

これでいったんThingsBoardの初期設定が完了です。

# デバイスを登録する

位置情報をトレースするデバイスを登録します。
ナビゲーションメニューからデバイスをクリックし、右上の＋ボタンを押して、「新しいデバイスを追加する」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/d39d0feb-19ee-91ae-f5e4-e2b7a5344bec.png)

デバイス名は適当に「Walking」にしておきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f7c31c21-a3e2-9e37-db59-ac2d5abe93eb.png)

アクセストークンが払い出されましたので、メモっておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/503aafa3-4285-bf61-911e-cbb730210173.png)

さっそく位置情報を登録することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ed56c3df-f67b-5804-4fbb-6d450bb18fe2.png)

curlでの実行方法が示されていますが、仮想の位置情報をアップするように少し変えてます。

```
> curl -v -X POST http://【サーバPCのIPアドレス】:8080/api/v1/【アクセストークン】/telemetry --header Content-Type:application/json --data "{lat:35.45270900995957,lng:139.64289287132883}"
```

【サーバPCのIPアドレス】と【アクセストークン】のところを各自に合わせてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/7cc09a46-fc82-f756-4f24-7bdd65d255c3.png)

ちゃんとStateがActiveになって仮想的な位置情報が登録されたようです。

# ダッシュボードを作成する

位置情報を登録できたので、地図上に表示されるようにダッシュボードを作成します。
ナビゲーションメニューからダッシュボードを選択し、右上の＋ボタンをクリックして、「新しいダッシュボードを作成する」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/13c9b215-bb34-ce59-55c3-2e6909fa5ab0.png)

名前は適当に「マイダッシュボード」にしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/376c6097-d227-c9f5-048b-e4cb1f5659ca.png)

「新しいウィジェットを追加」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/1c28f9e3-0bb3-04b6-9868-b2859d3a5f85.png)

Mapsを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/407b9636-4d52-1e0f-f147-2530c50a1cfa.png)

Trip Animationsを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/6ef71e9d-4786-b9d1-1a71-84733f45f1e9.png)

タイプにデバイス、デバイスにWalkingを選択します。
Timeseries data keysには、とりあえずlatとlngを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/69dfcc49-037f-1839-4bb7-59e5daf12081.png)

さらにそれぞれの鉛筆アイコンをクリックして、ラベルをそれぞれ「latitude」「longitude」にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2dc09fad-6108-a5b9-5d10-eec786754107.png)

「セーブ」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/52a29ac3-fc4d-9bf3-e680-68d6ff477f20.png)

時計のアイコンをクリックして、最終の1 day等に選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3d0efa34-d751-f785-3d5b-49eb5732cd5c.png)

正しく位置情報が表示されたようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/776a6e90-3bb9-9638-34c5-19ec2798103c.png)

最後に「セーブ」ボタンをクリックして完了です。

# 外部からアクセスできるようにする

今はイントラネットからしかアクセスできない状態ですが、以前Nginx Proxy Managerをセットアップしましたので、このThingsBoardもアクセスできるようにします。

（参考）
[Nginx Proxy Managerを使ってワイルドカードSSL証明書を作成する](https://qiita.com/poruruba/items/13ec1d93b27a43359ea5)

AWS Route53を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/f1331854-97a0-4791-ac99-3df68d4bbd32.png)

「レコードを作成」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/d505eb5a-85ad-3472-c51d-b137e9a6bca1.png)

レコード名に「thingsboard」と入れて作成します。値には、インターネットルータのWAN側IPアドレスを入力します。
これで、thingsboard.sample.workでアクセスできるようになるはずです。

Nginx Proxy Managerを開きます。Proxy Hostsを選択します。
そして、「Add Proxy Host」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/7133735e-94e6-8bd2-a73b-b649a2830cd0.png)

まずは、Detailsタブにおいて、以下を入力します。

Domain Names：thingsboard.sample.work
Forwarding Hostname/IP：サーバPCのIPアドレス
Forwarding Port：8080
Websockets Support：On

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2308f155-999e-5d5b-8232-1605ddf664fb.png)

SSLタブを選択します。
SSL Certificateとして、*.sample.work を選択島sう。
最後に「Save」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/410e613d-2efd-2749-68ea-24766db9e334.png)

これで、以下のURLからアクセスできるようになっているはずです。

　https://thingsboard.sample.work

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/900cff3f-80d0-872b-46a6-e3abfee75e74.png)

# Androidアプリから位置情報をアップする

以前、バックグラウンドで位置情報をアップするAndroidアプリを作成しました。

(参考）
[Androidのフォアグラウンドサービスで位置情報を取得する](https://qiita.com/poruruba/items/aa02207080a390e1ac85)

今回の環境に合わせて以下の部分を変更します。

```java:LocationService.java

public class LocationService extends Service{
    Context context;
    NotificationManager notificationManager;
    SharedPreferences pref;
    FusedLocationProviderClient fusedLocationClient;
    LocationCallback locationCallback;

    static final String target_url_base = "https://【ThingsBoardサーバのホスト名】/api/v1/";
    static final String target_telemetry = "/telemetry";

    public static final String LocationUpdateAction = "LocationUpdateAction";
    public static final int DefaultMinTime = 5000; // msec
    public static final float DefaultMinDistance = 10.0f; // meter
・・・
```

【ThingsBoardサーバのホスト名】の部分を、thingsboard.sample.workに書き換えます。

Androidにインストールして起動させましょう。
accessTokenのところに、さきほどのデバイス登録で払い出されたアクセストークンを入力します。
「Start」ボタンをクリックして、記録を開始します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/10067acd-cb11-5c46-be03-fbe1aab96d88.png)

成功すると、ThingsBoardのマイダッシュボードをみると、位置が更新されているはずです。

# 他の人に公開する

自分の位置をわざわざ公開することもないとは思いますが、その設定方法をまとめておきます。

ThingsBoardのナビゲーションメニューからデバイスを選択します。
他の人がダッシュボードから表示するには、対象のデバイスも公開する必要があります。
Walkingデバイスの右側の「端末を公開する」アイコンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/fd2577c7-aefb-2943-1488-790579af559a.png)

「端末を公開する」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2661a5ff-a58d-5e71-a010-b973476838cb.png)

「はい」を選択して公開が完了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3473e390-e8cf-e19d-7e5b-08d5ecaa7a2c.png)
 
ダッシュボードを選択します。
右側の「ダッシュボードを公開する」のアイコンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/faaa7406-12cf-3e71-3183-028b803e57d8.png)

表示されたURLを他の人がブラウザから参照すると、ダッシュボードを参照できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/6d3f8a0e-a919-971a-7a5e-d12d96d8652e.png)

```
http://【サーバPCのIPアドレス】:8080/dashboard/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX?publicId=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
```

外からアクセスする場合は、http://【サーバPCのIPアドレス】:8080/ の部分をhttps://thingsboard.sample.work/ に読み替えてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/4c79a3c2-03e4-1a05-6746-662fbc1b0d15.png)

以上