保存したセンサーデータをGETして表示してみる（AngularJS）

AngularJS AWS IoT Raspberry Pi

前回の記事でAngularJSで書かれたbluradminというbootstrapアプリケーションをインストールしました。

イケてるbootstrapのダッシュボードをEC2上で動かす - ブログを書くまでがなんちゃら

今回は下図のようにAPIで取得した値を表示するところまで書きます。

f:id:ykarakita:20160911114726j:plain

ちなみにラズパイから取得した値をPOST、GETするところはAWS APIを使っています。
そちらは以下ブログを参考にさせていただいて実装できました。

Raspberry PiからAPIでDynamoDBに保存したデータを取得してみる【GET】: Raspberry Piでやってみた

API呼び出しすると以下のような出力になります。

# curl -H 'x-api-key:"APIキー"' "APIエンドポイントのURL"/prod/raspi/distance?limit=2
{"Items":[{"value":{"N":"111.5"},"date":{"S":"2016-08-24T01:29:12Z"},"type":{"S":"distance"}},{"value":{"N":"111.9"},"date":{"S":"2016-08-24T01:29:06Z"},"type":{"S":"distance"}}],"Count":2,"ScannedCount":2,"LastEvaluatedKey":{"date":{"S":"2016-08-24T01:29:06Z"},"type":{"S":"distance"}}}

データを取得するfactoryを作成する

AngularJSのモジュールは用途、使い方によってserviceとかfactoryとかに分けるみたいです。 色々試してみてfactoryで実装できたので今回はそちらを使いますが、 同じようなことがserviceでもできるようです。

// getDist.js

function() {
  'use strict';

  angular.module('BlurAdmin.pages.dashboard').factory('getDist', getDist);

    function getDist($http) {
      var factory = function() {

        return $http({
          method: 'GET',
          url: 'https://hi3xxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/raspi/distance?limit=10',
          headers: {
            'x-api-key':'d99xxxxxxxxxxxxxxxxxxxxxxxxxA94i'
          }
        });
      }
      return factory;
    }

})();

作成したfactoryを使って値を表示する

// DashboardPieChartCtrl.js

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.dashboard')
      .controller('DashboardPieChartCtrl', DashboardPieChartCtrl);

  /** @ngInject */
 function DashboardPieChartCtrl($scope, $http, $timeout, baConfig, baUtil, getDist) {
    var pieColor = baUtil.hexToRGB(baConfig.colors.defaultText, 0.2);
    var factory = new getDist();
    var distdata;

    factory.then(function(data, status, header, config) {

    distdata = data.data.Items[0].value.N;

    $scope.charts = [{
      color: pieColor,
      description: '距離センサー１',
      stats: distdata + " cm"
    }
    ];
    });

    function getPersentage(dist) {
      return dist / 180 * 100;
    }
// 中略
    function updatePieCharts() {
      $('.pie-charts .chart').each(function(index, chart) {
        $(chart).data('easyPieChart').update(getPersentage(distdata));
      });
    }
// 中略
  }
})();

ハマったところ

データ取得方法でGETとJSONPどちらを使えばよいのかわかっていなかった。
  • 他ドメイン名からJSON形式で値を取得するときはJSONPメソッドで取得しなくてはならないみたい。
  • それを知り、JSONPメソッドを使っていたが全くうまくいかない。
  • そもそも取得する値がJSON形式ではない？のが原因か？
    • 原因不明。今後の課題。
  • 結局GETで取得できた。
$httpのthenを書く場所が間違っていた。
  • getDist.js内のreturn $http({ ....にthenの処理も書いていた。
  • 原因全く分からずお手上げ。teratailを初めて使ってみる。AngularJS - factory内でAPIからの値取得(44775)｜teratail
  • teratailすげーーーーーー。
  • controllerでfactoryを展開してからthenの処理を書かなくてはいけなかった。
取得したデータから特定の値の取り出し方がわからなかった。
  • そもそも取得したデータがJSONではなく連想配列だったので（多分。自信ない）Items[0]みたいな書き方しなくてはいけなかった。

参考にした本

AngularJS　アプリケーションプログラミング 大型本 – 2015/8/19 山田 祥寛 (著) Amazon CAPTCHA

今回AngularJSを見るのも初めてでしたが、それでもよく理解できるような良い参考書でした。

そもそもこんなことしなくても。。。

いろいろな可視化サービス出てるよねw

Webエンジニア向けIoT Visualizationサービス色々 ( #iotlt vol15 : 5分) // Speaker Deck

bluradminがかっこよかったから使いたかっただけ。

これからまたハードの方をいじり始めようかな。