[mBaaS IoT]　ドアセンサーとスマホ連携

Copyright @ NIFTY Corporation All Rights Reserved

ニフティ株式会社

ドア監視アプリを作ってみようIoTハンズオン

1


ハンズオン資料はこちら

http://goo.gl/y5ItWt（http://www.slideshare.net/mobilebackend/mbaas-iot）


事前準備

Monaca

ニフティクラウドmobile backend

https://ja.monaca.io/

http://mb.cloud.nifty.com/

※利用登録

※利用登録

※動作確認するため、Monacaのデバッグツールをダウンロードし、インストールしてください

3




スマートフォンアプリのバックエンド機能が

開発不要になるクラウドサービス

mobileBackend

as ＝ mBaaS !!aService

初期コストの削減サーバー運用の手間削減

アプリ開発がスピードアップ！！！

4

ニフティクラウドmobile backendとは？


ニフティクラウドmobile backendとは？

IoTバックエンド機能として利用していただきます！

5


簡単に

全体

の状態（開く・閉める）をサーバーに保存

遠隔でスマホで見れるプッシュ通知で知らせる


6


①ドアの状態を取得し、サーバーに保存する

7


全体図

Door SensorRaspberryPi

ドアセンサーからのデータを取得RaspberryPi経由

ニフティクラウドmobile backend(mBaaS)にデータを保存

スマホでデータを取得し、ドアの状態を知らせる

8


手順

1.2 回路の準備作業

1.3 mobile backendと連携作業

1.1 RaspbeｒryPiでNode-REDの説明

1.4 動作確認＆解説

9


全体図

Door Sensor

RaspberryPi

Node-REDはRaspberryPiで動いています！※Node-REDを利用し、データを保存します

10


手順





11


Node-REDとは

参考：http://nodered.org/

GUI（ブラウザー）でモノ（Things）をつなぐためのツールNode.jsベースで自由にNode(ノード)をカスタマイズし、組み合わせることで、フロー設計が可能です

12

http://nodered.org/


Node-REDでフロー準備

ドアセンサー信号を受信

信号をmobile backendサーバに保存

DoorStatusINノード SaveDataToServerノード

13


RaspberryPiでNode-REDを準備

・Node.js、Node-REDをインストールする・Node-REDに

mobile backendサーバにデータの保存とプッシュ通知の登録を行うncmbdsノードを作成

ncmbds.htmlncmbds.js

・Node-REDフローの設計ファイルを作成

flows_raspberrypi.json RaspberryPi インストール済み

14


Node-REDの準備

• RaspberryPiでNode.jsとNode-REDをインストール

wget http://node-arm.herokuapp.com/node_archive_armhf.deb

sudo dpkg -i node_archive_armhf.deb

npm -g install node-red

RaspberryPi インストール済み

15


• インストールしたNode-REDのフローとノードを準備します

Node-REDの準備

cd /root/.node-red

git clone https://github.com/ncmbadmin/nodered_ncmb.git

cd /root/.node-red/nodered_ncmb/nodes

npm -g install .

cp /root/.node-red/nodered_ncmb/flows_raspberrypi.json /root/.node-red/flows_raspberrypi.json

RaspberryPi 準備済み

nodeのソースコードはGithubに公開中

必要なnodeのlibraryをインストールします

16


• Node-REDが起動時に動作するようにpm2を利用し、設定

Node-REDの準備

sudo npm install -g pm2

pm2 start /usr/local/bin/node-red --node-args="--max-old-space-size=128" -- -v

pm2 save

pm2 startup

準備済みRaspberryPi 準備済み

17


手順





18


回路の準備

•RaspberryPi 2 model B

•回路用•磁石リードスイッチセンサー： 1個•カーボン抵抗１／４Ｗ１ｋΩ ： 2個•ジャンパーコード（オス－メス）： 3本•ブレッドボード： 1個

19


回路の作成

これから作るイメージ

20


今回使うセンサー

• 磁石リードスイッチセンサー

http://akizukidenshi.com/catalog/g/gP-04025/秋月で1個￥150（税込）

21

http://akizukidenshi.com/catalog/g/gP-04025/


今回使うセンサー

• 磁石リードスイッチセンサー：ドアが閉める・開ける状態によって、電流が流れ、信号が0か1として判定します。

22


補足：RaspberryPi 2 Model B GPIOについて

GPIOとは？

General Purpose Input / Output（汎用入出力）・Input（入力）：電気回路などからのデジタル信号を読み取る・Output（出力）：他のデバイスの制御や信号の通知を行う

参考：https://www.raspberrypi.org/documentation/usage/gpio-plus-and-raspi2/

23

https://www.raspberrypi.org/documentation/usage/gpio-plus-and-raspi2/


補足：ブレッドボードの使い方

中では薄いオレンジ線でつながっています24


回路設計

+3.3V

GND

GPIO23 Door switch sensor

25


RaspberryPiネットワーク準備

RaspberryPiに電源を入れ、LANケーブル（有線）でネットワークにつなぎます。

ローカルIPの確認を行いますので、上記の作業が終わりましたら、お声かけください！

26


PCでNode-REDにアクセス

RaspberryPiのIPが「192.168.10.x」の場合PCのブラウザーから、下記のURLをアクセスし、Node-REDを開きます。

192.168.10.x:188027


Node-REDのフロー確認

RaspberryPiから信号を受けるとsaveDataToServerが実行されます

28


ノードをダブルクリックします

信号を受けるGPIOピンを指定します


29


サーバーにデータを保存するノードプッシュ通知を登録するノード

APIキーを指定します

保存先のクラス名、フィールド名を指定します

プッシュ通知を送るための設定をします


30


デバッグ用ノード（画面に受信した信号を表示する）


31


ドアセンサーを操作しましょう！

センサーの状態によって値（開:０/ 閉:1）が変わるかどうか確認

デバッグログを確認


32


手順





33


mobile backendと連携


※右クリックして新しいタブで開くと便利です。下記URLよりサイトにアクセスしてください。

ここをクリック

ここをクリック

34




「ログイン」をクリック

ご登録いただいた@nifty IDで

ログイン利用規約を確認後、同意して

利用開始！

35



利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

mBaaSは、「アプリケーションキー」「クライアントキー」の2つのキーを使い、サーバー接続の認証を行っています。その２つのキーがアプリ作成時に生成されます。

「iotHandson」と入力してください

２つのキーは後で使います

OKをクリックすると管理画面が表示されます

36



アプリ設定をクリック

ここにあります

コピー＆ペーストで貼り付けて

設定が行えます

Node-REDで

アプリケーションキークライアントキー

を設定します。

ダブルクリックします

OKを選択し、右上の

Deployをクリックします

37


手順





38


動作確認

ニフティクラウドmobile backendのデータストアの

DoorDataクラスにデータが保存されていることを確認します

39


解説

RaspberryPiのGPIO23を利用し、電流でスイッチのON/OFF状態判断

+3.3VGNDGPIO23

Door switch sensor

40


解説

Node-REDでフローを作成し、GPIO INから信号を受信すると、サーバにデータを保存する「saveData」というノードが実行されます

41


解説

saveDataノードでは以下のようにデータの保存処理を実装をしています

var NCMB = require(“ncmb”);

<省略>

RED.nodes.createNode(this,config);

this.appkey = config.appkey;

this.clikey = config.clikey;

this.classname = config.classname;

this.fieldname = config.fieldname;

var node = this;

this.on('input', function(msg) {

var ncmb = new NCMB(this.appkey, this.clikey);

var NCMBClass = ncmb.DataStore(this.classname);

var ncmbClass = new NCMBClass();

ncmbClass.set(this.fieldname, msg.payload);

ncmbClass.save();

node.send(msg);

});

NCMBにAPIキーを渡し、初期化します

データストアに保存するクラス名を指定します

保存するデータをsetで渡し、save()を実行するとサーバへ保存します

NCMBのSDKをインポートします

42


②スマホと連携し、監視アプリを作成

43


全体図

Door SensorRaspberryPi

44


事前準備

•Monacaの利用登録 https://ja.monaca.io/

45



https://ja.monaca.io/debugger.html

•Monacaデバッガーのインストール

事前準備

46

https://ja.monaca.io/debugger.html


「Import Project」を選択してください

Monacaでアプリ作成

47


「インポート」をクリック

アプリの名前を入力

https://github.com/ncmbadmin/iot_ncmb/archive/master.zip を入力


コピー用：https://goo.gl/mnketq48

https://github.com/ncmbadmin/iot_ncmb/archive/master.zip

https://goo.gl/mnketq


ダッシュボードの左側に作成したプロジェクトが追加されています


「開く」をクリック

49



50


Ｍonacaで作成したアプリを連携するために、Javascript SDKをインポートします。

Monacaで「設定」＞「JS/CSSコンポーネントの追加と削除...」を選択

MonacaでSDKインポート

右上の検索欄に｢NCMB｣と入力して検索ボタンを押す

51


｢追加｣を選択

｢インストール開始｣を選択

｢components/ncmb/min.js｣にチェックをつけて

｢OK｣を選択

↓そのまま

52

MonacaでSDKインポート


コピー用ページ

ソースコピー用のページを開いておきます

https://goo.gl/mnketq53

https://goo.gl/mnketq


サーバ連携の初期化

index.htmlファイルを開き、次のコメントの直下にコードを追加します

54


APIキー設定

index.htmlにアプリケーションキーとクライアントキーを設定

55


①ドアのステータスを表示する

これからこちらのメソッドを実装していきます。

56



STEP 1.1のコメントの直下に次のコードをタイプあるいはコピー＆ペーストしてください。

57



58

次はここに書きます




59

STEP 1.2.1のコメントの直下に次のコードをタイプあるいはコピー＆ペーストしてください。



60

このようになっていればOKです


①動作確認

スマホからドアの開閉状況を確認しましょう！（スマホ画面の更新をタップし、更新をしてください）

61


②タイムラインを表示する

これからこちらのメソッドを実装していきます。

62



63




64


次はここに書きます


※こちらではtimelineMe.jsを利用しています。詳細はhttps://mickaelr.github.io/jquery-timelineMe/

65

STEP 2.1.1のコメントの直下に次のコードをタイプあるいはコピー＆ペーストしてください。


https://mickaelr.github.io/jquery-timelineMe/

Copyright @ NIFTY Corporation All Rights Reserved 66

このようになっていればOKです



②動作確認

67

スマホからドアの開閉状況を確認しましょう！（スマホ画面の更新をタップし、更新をしてください）


コード解説 ①

データストアDoorDataに検索する宣言

保存する日付createDateの序順にデータ検索

取得したデータによって、閉開画像を表示する

68


コード解説 ②

データストアDoorDataに検索する宣言

保存する日付createDateの序順にデータ検索

取得したデータによって、タイムラインのデータを作成する

69


③リアルタイムにプッシュ通知

70


やりたいこと

ドアを開閉すると

プッシュ通知で携帯に知らせる【ドアは開いています！】【ドアは閉じています！】

DoorApp

Door is opened now

71


mBaaSのプッシュ通知


プッシュ通知機能を無料で使えます！

72


サーバ

プッシュ通知

ここに

を使います！サーバの準備が必要不可欠！！

プッシュ通知

iPhone

Android

プッシュ通知

mBaaSのプッシュ通知

プッシュ通知機能を実装するためはサーバが必要です。でも、開発・運用していくのは大変…mBaaSを使えばサーバの開発・運用は不要に！

73


やりたいこと

RaspberryPi


RaspberryPi経由し、プッシュ通知を

登録しますAPNs + GCM

DoorApp

Door is opened now

プッシュ通知が配信されます

74


手順

受信アプリ側

Androidプッシュ通知APIキーを取得

RaspberryPi側でプッシュ通知送信（済み）

mBaaS側・アプリでプッシュ通知APIキー設定

75



Node-REDを開いてください（コード解説は後程）

SendPushの設定項目は「Yes」を選択

PushTimingの設定項目は通知タイミングを設定

PushDeviceで配信予定端末タイプを選択

76


手順

アプリ側の準備




77



Monacaでプッシュ通知を利用するために、Monacaプッシュ通知プラグインをインポートします。Monacaで「設定」＞「Cordovaプラグインの管理」を選択します

検索欄に｢NCMB｣と入力して検索ボタンを押す

78



｢有効｣ボタンを押し、組み込まれたプラグインの一覧で確認

79



index.htmlファイルを開き、STEP 3のコメントの直下にコードを追加します

80


手順





81


Androidのプッシュ通知設定

Android Firebaseにログインしますhttps://console.firebase.google.com/

FCMのAPIキーの発行

｢新規プロジェクトを作成...｣をクリック

82

｢プロジェクトを作成.｣をクリック

https://console.firebase.google.com/


Androidのプッシュ通知設定

GCMのAPIキーの発行

Android ｢クラウドメッセージング｣をクリック

｢プロジェクトを設定｣をクリック

GCMAPIキー

※後で使用します

FCMSENDER_ID

※後で使用します


手順





84


mBaaS側でAPIキーを設定します

共通

Android

プッシュ通知プッシュ通知の許可→「許可する」を選択して「保存する」をクリック

Androidプッシュ通知APIキー→FCMのAPIキーを入力して「保存する」をクリック

mobile backendのダッシュボードで「プッシュ通知」を開いて設定を行います

85


Monaca側でプロジェクト番号を設定します

index.htmlファイルを開き、

「SENDER_ID(Android_only)」はFCMの送信者 IDに書き換えてください

Ctrl + S（保存）を忘れずに！

86


端末へビルド

• Monacaでメニュー「ビルド」＞「Androidアプリのビルド」を選択

87


端末へビルド

• Monacaでメニュー「ビルド」開始

88


端末へビルド

• Monacaでメニュー「ビルド」完了、アプリを端末にインストール

89


動作確認


プッシュ通知で携帯に知らせる【ドアは開けています！】【ドアは閉めています！】

DoorApp

Door is opened now

※タイミングによって、プッシュ通知が届くまでは時間がかかる場合があります

90


コード解説（Node-RED）

実装コードプッシュ通知のターゲットをフォームで入力した値を判定し設定

プッシュ通知を登録

91


コード解説（Node-RED）

プッシュ通知を登録するインスタンスを作成

プッシュ通知の送信条件を指定

プッシュ通知をサーバに登録

92


まとめ

93


まとめ

遠隔監視

様々な機能を簡単に実装できます！プッシュ通知も！Android, iOSアプリ両方対応！

センサーデータ保存

プッシュ通知

94


参考

充実した日本語ドキュメントをご用意しています

http://mb.cloud.nifty.com/doc/

95

http://mb.cloud.nifty.com/doc/


参考

https://github.com/NIFTYCloud-mbaas/UserCommunity

質問、作ったアプリの共有TIPSがあったらぜひ活用してください！

サポートやコミュニティもあります

96

https://github.com/NIFTYCloud-mbaas/UserCommunity

Copyright @ NIFTY Corporation All Rights Reserved 97

Technology

[mBaaS IoT] ドアセンサーとスマホ連携

[mBaaS IoT]　ドアセンサーとスマホ連携