検索
連載

Socket.IOでセンサー&MongoDB〜AngularJSアプリ間の通信を行うArduinoで始めるWeb技術者のためのIoT入門(6)(1/3 ページ)

家電〜Webアプリ間の双方向通信をSocket.IOで行うアプリについて、サーバー側のArduino連携やMongoDBへのデータ保存などと、クライアント側のAngularJSに分けて動作を解説します。

PC用表示 関連情報
Share
Tweet
LINE
Hatena
「Arduinoで始めるWeb技術者のためのIoT入門」のインデックス

連載目次

 前回の「MEANスタックで家電制御アプリを作るための設計・準備と温度湿度センサーからのデータ読み取り」に引き続き、スマートフォンから家電を操作するためのWebシステムを作っていきます。前回は設計指針を解説し、anugular-fullstackジェネレーターでアプリケーションのひな型を作成しました。

 今回は、Arduinoとの通信部分、Model定義、UIについて解説しながら完成を目指します。今回のコードはGitHubに公開していますので、下記のコマンドでダウンロードしてください。

git clone https://github.com/iwanaga/hemsjs.git

前回記事で用意したUI

angular-fullstackで生成されたコードの解説

 まずは、ジェネレーターで生成したコード構成を把握して、全体像をつかみます。

サーバー側

◇app.js

 サーバーを起動する際、まずこのファイルを実行します。Socket.IOサービスとの連携処理は、このファイルでrequireしています。今回組み込むArduinoとの通信サービスも、このファイルでrequireしてコードの統一感を維持します。

◇api

 このディレクトリにはAPIエンドポイントに関するファイルを配置します。下記コマンドを実行すると、ここにファイルが生成されます。このひな型を基にして、コードを書いていきます。

yo angular-fullstack:endpoint {リソース名}

◇index.js

 リソース固有のルーティングを定義します。

  • *.model.js

 mongooseのmodelメソッドを使って、スキーマ定義を記述します。詳細は後ほど解説します。

  • *.socket.js

 angular-fullstackの工夫が見られるファイルです。リソース固有のSocket.IOイベント処理を記述します。今回は、MongoDBへの保存が完了したときに、クライアントへemitする処理を定義します。

◇config

 listen portやexpressミドルウェアを指定するファイルがあります。注目すべきファイルは下記のsocketio.jsです。

  • socketio.js

 Socket.IOの「接続時」と「切断時」の挙動を定義します。ファイルが肥大化しないように工夫してあり、onConnect関数が重要な役割を持っています。

クライアント側

◇app

 UIコンポーネントのファイルを配置します。下記のコマンドを実行すると、ここにファイルが生成されます。

yo angular-fullstack:route {コンポーネント名}

◇components

 複数のコントローラーで利用するサービスが格納されています。Socket.IOをラップしたsocketサービスの実体もここにあります。

◇e2e

 end to endテストのファイルを配置します。

  • *.po.js

 「po」とは「Page Object」の略です。テストで利用するDOMを取得してエクスポートするだけの内容になっています。他のテストでも再利用可能にするために、テスト本体のファイルから分離しています。テスト実行時はAngularJSのend to endテストフレームワークである「Protractor」のAPIを利用して「バインドしているデータの変数名でエレメントを取得する」といったことも可能です。

  • *.spec.js

 テストの本体です。beforeEachでPage Objectをインポートし、結合テストを行います。

Copyright © ITmedia, Inc. All Rights Reserved.

       | 次のページへ
ページトップに戻る