Platioで簡単に作れるセンサー活用モバイルアプリ 第一回


はじめまして、こんにちは! インフォテリア株式会社の吉谷です。 いよいよ週末に近づいてきました伊那市LoRaWANハッカソン。
LoRaWANを利用したハッカソン、素晴らしい自然、美味しそうな名物と、
伊那市に訪れるのがとても楽しみですね!

今回ご紹介させて頂くのは、モバイルアプリを開発するツール「Platio」です。
センシングデータを持ち運べるモバイル活用により、IoTアイデアの表現の幅が広がります! PlatioとLoRaWAN構成を含めたIoT活用方法の一例を、三回に分けてご紹介したいと思います。
  • 第一回: まずはPlatioでアプリを作ってみよう
  • 第二回: センサーデータをPlatioで表示してみよう
  • 第三回: センサーデータを使ってPlatioで様々な表現をしてみよう

ハッカソン当日はこちらで用意したアカウントを利用していただけますが、 「30日間の無料トライアル」もありますので、是非ハッカソンの前に触ってみてください!
利用開始はこちらからどうぞ!:モバイルアプリを開発するツール「Platio」

では第一回のお題です!

まずはPlatioでアプリを作ってみよう

最初のアプリの作成から簡単なのもPlatioの魅力です。
  1. プレートを用意する
  2. ミニアプリをテンプレートから選択
  3. プレートをデプロイする
  4. アプリを利用するユーザーを作成する
  5. アプリを利用する
  6. アプリをカスタマイズする
  7. アプリを更新する

以上の流れでPlatioを使ったアプリを作成、利用する事ができます。
ここからは「Platio Studio」(https://studio.plat.io)にログインした後の画面から解説します。

1.プレートを用意する


プレートはPlatio上で動作するアプリケーションのような概念で、後述のミニアプリをまとめるものです。

「プレートを作成」ボタンを押して、次の画面は説明だけなので「次へ」を押して


プレートの名前を任意で付けて「作成」を押すだけです。


簡単ですね😊

2.ミニアプリをテンプレートから選択します。


続けてミニアプリの追加画面が出てきます。
今回は一番基本的な「レコード管理」を選択してみます。

これも簡単ですね😊

第三回でテンプレートは少し掘り下げて解説予定です😉

3.プレートをデプロイする

次にデプロイの画面が出ます。
デプロイする事で、作成や編集を確定してアプリを利用出来るようになります。

デプロイしてしまいましょう。


4.アプリを利用するユーザーを作成する

デプロイが完了すると、アプリを利用するユーザーを作成する画面になります。
必要な情報を入力して作成しましょう。

今回は手軽に1ユーザーでの利用を想定しているので、
「レコードや添付ファイルへのAPIでのアクセスを許可」にチェックを入れておきます。



ユーザーを作成すると、プレート(アプリ)の使用画面が出てきます。


また、メールアドレス宛にPlatioと今回作ったプレート、ユーザーの情報が送信されます。



5.アプリを利用する

既にテンプレートで選んだアプリが使えるようになっています。

まずはアプリをダウンロードして基本的なデータ入力をしてみましょう!

AppStoreで「Platio」で検索をするか、届いたメールのリンクからダウンロードしてください。

既に公開済みのアプリなので、自前で開発環境を作らなくて良いのも使いやすいですね。

届いたメールにあるプレート名(今回はplate_002)をスマートフォンからタップするか、アプリを起動後のQRコードをスキャンボタンを押してPC画面のQRコードを読み込む事ですぐに利用出来ます。

ユーザー情報を入れてアプリを起動すると、アプリの初期画面が出てきます。
 

右下の「+」ボタンをタップして新しくデータを入力してみましょう。
名前と写真を入れるだけの簡単なアプリです。
入力が終わったら右下のチェックマークをタップすると、レコード一覧画面に移ります。
 

これでデータ入力が出来ました。

iPhone / iPadがネットワークに繋がっているなら、Platioのクラウドに既にデータが同期されています!

クラウドデータのPCでの閲覧方法はセンサー活用とともに第二回で解説します😄

6.アプリをカスタマイズする

さて、名前と写真をクラウドに上げるだけのアプリでは嬉しくないですね・・・😓

今回は第二回でセンサーデータを表示する準備の為に、

センサーで取得する温度データと、時刻を入れるアプリにカスタマイズしましょう。
プレートを使う画面で「完了」を押した後、プレート内のミニアプリ一覧画面になっています。
先程作ったミニアプリ「plate_002」(最初のミニアプリはプレートと同じ名前になります※変更可)をクリックしましょう。


ミニアプリの編集画面が出てきます。
上部がアプリに表示する項目を設定する画面、下部がアプリのプレビュー画面です。


上部のテーブルにある、大きな「+」をクリックすると、項目「フィールド」を追加する画面が出てきます。

今回は時刻を入れる為に、「日時」>「日時」を選択して追加します。

次にセンサーで取得したデータを入れる為のフィールドを「一般」>「数値」で追加します。
名前をクリックすると編集出来るので、「温度」にします。入力したらエンターで決定です。
 

次に写真は不要なので、削除してしまいましょう。
削除したいフィールドの右上の▼から削除を選びます。


並び替えはアイコンをドラッグで可能です
日時、名前、温度の順番にしました。


写真を削除すると、下部のプレビュー画面の画像が全部消えてしまうので、
画像の必要ない画面にしましょう。
ページ下部「一覧」画面の右上にある青い地の歯車をクリックします。


「セルのタイプ」を「アイテム」にします。
「バインディング」では

  • タイトル:日付
  • サブタイトル:名前
  • 値:温度

にしました。
完了を押して決定します。


プレート名とミニアプリ名が同じで混乱するので、名前を変更しましょう。
フィールド設定の右上にある「設定」から変更できます。
「保存」を押して決定します。


次にフィールド設定の右上にある「保存」を押して、ミニアプリの変更を保存しましょう。


その後左上のパンくずリストにあるプレート名「plate_002」をクリックしてプレート画面に戻ります。

7.アプリを更新する

デプロイする事で今までの編集を確定して、プレートを更新します。 オレンジ色のマークが付いているのは、変更後にデプロイされていない事を表しています。
デプロイボタンを押してデプロイしましょう。

デプロイが完了すると、アプリ側で右上に赤い●の更新通知が付きます。
もし付いていない場合でも問題なく更新出来ますので、そのまま進めていただいて大丈夫です。
 

タップしてメニューを押し、更新ボタンを押します。
この時電源ボタンを押すとプレートをログアウトしてしまうので注意です。
  
確認してみると先程の変更が反映されていますね😊  


第一回まとめ

この様に、Platioを使うことでアプリの開発環境の構築や申請、プログラミングなどしなくてもモバイルアプリが簡単に作れてしまいます。

第二回ではセンサーデータをPlatioで活用してみたいと思います!

お楽しみに😉

コメント

このブログの人気の投稿

LoRaWANの下り通信

遅ればせながら・・・第2回のレポート前編

enebuler X MotionBoard による、IoT リアルタイムモニタリング