ボタンクリック時にiPhoneへプッシュ通知を送る（GravioとPlatioの連携）

特定の端末へ通知する、呼び出しシステムを簡単に作ってみました。
受付に呼び出しボタンを設置し、お客様がボタン押したらiPhoneにPush通知します。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/a6822818-caa0-b35e-30a0-da74d406417b.png)

Gravioで収集したセンサーデータの連携先として弊社の[**Platio**](https://plat.io/ja)を利用しました。PlatioはBearer認証でAPIを使用することができます。
Bearer認証を利用する各種ソリューションへ連携する際にも参考にしていただければと思います。

#準備したもの
■ハードウェア
・iPhone 8
・ノートPC
　-Windows 10 バージョン1809
・Gravioレンタルデバイス
　-ワイヤレススイッチ
■ソフトウェア
・[**Gravio**](https://www.gravio.com/jp/gpromo/1901-casual-iot)
　-Gravio Studio Ver.2.0.2065
　-Gravio Server Ver.2.0.2153
・[**Platio**](https://plat.io/ja)

Platioは、モバイルアプリ開発支援ツールです。
ノン・プログラミングでアプリケーションを作ることができるソフトウェアサービスです。

[**【詳細はこちら】Platioとは**](https://plat.io/ja/features)

今回は、GravioからHTTPリクエストし、PlatioのPush通知機能を動作させます。


#設定の流れ
設定の流れは、以下のとおりです。

- 【事前準備】PlatioのAPIを使用するために必要な各種情報の取得
- ワイヤレスボタンからのデータ収集設定
- 動作（アクション）の設定
- 動作タイミング（トリガー）の設定

##PlatioのAPIを使用するために必要な各種情報の取得
今回は、すでにユーザーがミニアプリを使用している状態からスタートします。
APIでPush通知を送る際に必要となる情報は以下のとおりです。

- プレートID
- ユーザーID
- APIトークン（トークンIDと秘密トークン）


Platio Studioの今回使用するプレートの編集画面からData Consoleを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/adeb3baa-b4d7-d0e5-2b24-c5e7c7a3c959.png)

右上のユーザーをクリックして表示されるプルダウンメニューの開発者をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/6ca8a557-1ddd-600b-0334-4446d9903a38.png)

開発者向け情報から、プレートのIDとユーザーIDをメモします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/0e0c73be-fce6-dadd-c473-16e1e13b9e0f.png)

APIトークンを生成します。
上図では、すでに生成されていますので、赤枠の更新ボタンをクリックすることで再度生成します。
「有効なAPIトークンがありません」と表示されている場合も、横に表示される更新ボタンをクリックすることで生成します。
表示される画面のトークンIDと秘密トークンをメモします。

PlatioのAPIトークンについては、[**こちらの記事**](http://ina-hack.blogspot.com/2017/06/platio02.html)をあわせてご確認ください。

##ワイヤレスボタンからのデータ収集設定
今回は、ワイヤレスボタンを使用します。
ワイヤレスボタンの設定については、[Slackとボタンスイッチセンサーで「呼び出しシステム」を作ってみた！](https://qiita.com/mikawan/items/ac196bbb5506a3251c55#step1%E3%82%BB%E3%83%B3%E3%82%B5%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A)
をご参照ください。

##動作（アクション）の設定
PlatioのWebAPIへHTTPリクエストするアクションを設定します。
APIの設定については、[PlatioAPIガイド](http://doc.plat.io/api/ja/guide.html#%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5%E9%80%9A%E7%9F%A5%E3%81%AE%E9%80%81%E4%BF%A1)も合わせてご参照ください。

###１．アクションカードの作成
サーバ管理画面より、アクションボタンをクリックし、アクション管理画面を表示します。
アクション管理画面の右上の”＋”をクリックし新しいアクションカードを作成します。
作成したアクションカードをダブルクリックし、アクションを設定します。
###２．アイコン（コンポーネント）を並べて設定する
ステップの追加の"+"をクリックし、コンポーネントを追加します。
今回は、"HTTPPost"コンポーネントを使用します。
追加したコンポーネントのプロパティに以下を設定します。

|項目|設定値|
|:---|:---|
|URL|https://api.plat.io/v1/[プレートID]/users/[ユーザーID]/notifications|
|HTTP METHOD|POST|
|Content-Type|application/json|
|Query String|null|
|Body|"{\"title\":\"来客通知💨\",\"body\":\"お客様がいらっしゃいました🔔\"}"|
|Authorization Type|Bearer|
|Authorization Body|[トークンID].[秘密トークン]|

![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/8d6211a1-676d-2885-e243-b6555fe38cd3.png)


Bodyに設定する、titleには通知のタイトル、bodyには通知の本文を設定します。

以上でアクションの設定が終了しました。



##動作タイミング（トリガー）の設定
ボタンが押されたタイミングで、Push通知動作を実行する設定をします。

|項目|設定値|
|:---|:---|
|エリア|設定したボタンスイッチのレイヤー|
|レイヤー|設定したボタンスイッチのレイヤー|
|アクション名|作成したアクションカード|
|Interval|1|
|Classic/Threshold Trigger|Classic Trigger|
|Button Press|Single press|
![image.png](https://qiita-image-store.s3.amazonaws.com/0/247209/0f467948-12e8-9f36-2e1c-971182bd5991.png)

保存したあと、スライドボタンを有効にすることで、ボタンを押すとPush通知されます。



#動作確認
ボタンを押すと、iPhoneに通知が表示されます。

[![動作動画](http://img.youtube.com/vi/y9mJPf3I26g/0.jpg)](http://www.youtube.com/watch?v=y9mJPf3I26g)


#あとがき
PlatioのAPIを使用するために、HTTPリクエストでAuthorathation Bearerヘッダーを使いました。
Platio以外にも、BeararトークンでAPIを使うことができるものがあれば、Gravioから連携が可能です。
受付だけでなく、備品の在庫管理などでも使うことができそうですね。