センサーデータを収集するアプリを作成する

Sep 13, 2025

操作方法

今日、相互接続された製品を開発するための手頃な価格のプラットフォームは広範囲の空室状況を享受しています、そして、IBM、Google、Intel、Microsoft、およびCiscoの製品のためのAPIを開く強力な企業がIOTテクノロジでのJavaScriptサポートを強化するためのプッシュがあります。その結果、マイクロコントローラの拡張された生態系、クラウドサービスに接続されたデータロガー、およびリアルタイムでデータを解析する適応可能なインターフェースがあります。すべて、クライアント側のWebスキルを持つデザイナーに新たな機会が掲載されています。

Pro Designersのための13の最高のiPadアプリ

その念頭に置いて、このチュートリアルの目的は、「きちんと」ではなく、現実の世界で役立つものを設計して構築することです。センサーからローカルのWebサーバーへの天気データをアップロードする相互接続された製品（またはサービス）このデータをアダプティブユーザーインターフェイスにリアルタイムで表示します。このプロジェクトは、UIデザインで直接操作から離れることができる方法を示しており、設計者はWebサーバーやフラットデザインを超えてプロトタイピング手法を取ることができるいくつかの方法を示しています。

見てみましょう ソースファイル このチュートリアルのために 。

センサーとマイクロコントローラ

このチュートリアルでは、Arduinoマイクロコントローラを使用します。安い価格、簡単な開発キット、そしてたくさんのオンラインサポートのおかげで、これが人気のある選択です。コンピュータにマイクロコントローラを設定するには、開発環境（IDEオプション）をダウンロードしてください。ここに。マイクロコントローラは、電源を供給するUSBケーブルでコンピュータに差し込みます。 ArduinoコードはSketchesとして知られています。これは、センサーから入ってくるデータを解析するためのC ++ベースのコードで書かれています。

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — 我々のサンプルアプリケーションは、センサ（1）、マイクロコントローラ（2）、ウェブAPI（3）、および適応UI（4）を含む。

天気データを読むアプリを設計しているので、LM35温度センサーを使用しました。これは良い、手頃な価格のオプションですが、マイクロコントローラと同じように、選択するのがたくさんあります。 LM35センサーを、ジャンパーのワイヤとブレッドボードと一緒にセットアップしますこれらの命令。

MicroControllerは、LM35温度センサーからローカルファイルシステムに直接データフィードを作成するスケッチファイルで機能します。これを設定するには、まず、センサーからのアナログデータを保持するように変数を宣言する必要があります（変数は、この場合はセンサーからのデータで後で使用するための値を命名して保存する方法です）。

ラップトップのシリアルポートと通信するSetup（）関数を宣言します。これは、Arduinoスケッチが起動したときに呼び出され、シリアルウィンドウに記録されます。シリアルポートは、Arduinoボードとラップトップ間の通信に使用されます。

次に、ボーレートを設定する必要があります - 情報が転送される速度。これは、シリアルポートが信号から最大9600ビットの最大9600ビットを転送でき、USBケーブルを通ってラップトップに移動することができます。キャプチャされた生のセンサーデータを最初に温度形式に変換し、次に整数からテキストへの挿入されてJSONに挿入され、メモリに保持されます。

最後に、センサが温度データを連続的に収集するように、上記の機能をループします。 Arduino Microcontrollerはバックグラウンドで途切れずに実行され、ラップトップのシリアルポートの温度データを収集します。

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — ケーブル、ワイヤー、ピン、センサー、USBラップトップ接続からなる典型的なArduinoセットアップ

WebベースのAPI

温度読み取りがメモリに記録されると、それをJSON形式に挿入する前にタイムスタンプを追加する必要があります。始めるには、JSONファイルが存在する場所を確立し、そのファイルを短い間隔で開く必要があります。

これを高度なWebサーバー技術を使用してこれを達成することは可能ですが、これはこの記事の範囲を超えていて、さまざまな接線に連れて行かれます。簡単にするために、センサーデータを解析するための処理を使用しますが、シリアルポートメモリからセンサーデータを取得するために使用できるアップアンド/やってくる堅牢なJSベースのWebサーバープログラミングテクノロジがたくさんあります。 Webサーバーまたはクラウド（ここに見てください）。

処理はSketchファイルを使用して、シリアルポートのデータをリスティングして読み取りを保持するために文字列を返すことによって、Arduinoによって送信されたデータを取得します。この場合、この場合はシリアルポートからの値を取得し、JSON構造で終わるテキストファイルでそれらを印刷し、それらをテキストファイルに印刷して印刷するDraw（）関数を使用します。 ["18:05:53"、43.00]。

最終的には、1つの温度センサー、マイクロコントローラ、およびWebサーバーを含むシステムになります。これは、現実の世界製品またはサービスを表すセンサネットワークとクラウドで構成される大きなデータ収集システムのためのプロトタイプです。

適応型インタフェース

この時点で、単純なUIを単一ページアプリケーション（SPA）スターターパックとReactまたはAngularのようなJSベースのツールでまとめたいです。ブラウザがレンダリングする必要があるものを簡単に説明するため、Reactを選択しました。ブラウザのDOMを構築するときに多くのノイズを削除し、任意のAPIから非常に速くデータをバインドします。また、DOM全体を再レンダリングする代わりに、変更したUI要素を更新するだけです。これはプロトタイプ化に最適です。

UIを始めるには、まずオンラインで利用可能な多くのスターターパックの1つを使用してSPAをインストールします。非常に便利なものはWebアプリのボイラープレートですキットを反応させる。ファイル構造体に慣れてきたら、ローカルのWebサーバーまたはクラウドサービスにJSONフィードにアクセスし、表示用のデータを処理する新しいコンポーネントを設定する必要があります。

REATでは、setStateはUIの更新をトリガするために使用されるメインメソッドです。変更はイベントハンドラまたはサーバー要求コールバックによってトリガされ、JSONファイルを読むために正しく実装される必要があります。最後に、解析されたデータを保持するための可変読み取り値を定義し、

 loadpathsData（）{
  this.setState（{data：data}）;
}

LoadInitialState（）{
  {data：{Readings：[]}}}
}

ComponentWillMount（）{
  this.loadPathSdata（）;
}

render（）{
  帰り（
    ＆lt; div＆gt;
      ＆lt; readingsリストデータ= {this.state.data} / gt;
    ＆lt; / div＆gt;
  ）;

ReadingsList UIコンポーネントを定義して、以前に作成されたJSONファイルから読み取り値を保持します。クラス定義の真上に新しいクラス（読み取りリスト）を追加します。 Reactは、レンダリングメソッドを使用して、ネイティブDOMコンポーネント（下記のDIV / GT、下記）またはその他の定義されたコンポーネントの仮想表現を実装します。その結果、JSONの読みを表示するUIコンポーネントがあります。

 var readingsリスト= react.CreateClass（{
  レンダリング：function（）{
    帰り（
      ＆lt; div＆gt;
      
      ＆lt; / div＆gt;
    ）
  }
;）;

ダイナミックCSS宣言をデータマッピングと組み合わせて、ブラウザ内の読み取り値をスタイル化します。

短い間隔で、コンポーネントまたはブラウザレベルで強制的にリフレッシュできます。これは、より堅牢なReact ForceUpdate関数を使用して行うことができます（これは、ForceUpdateを呼び出すことによって上記のRender（）を再実行する必要があると指示するか、基本的なSetInterval関数でJadeテンプレートレンダリングに実装されています。

SPAを再起動すると、JSとCSSがクロスデバイスの視覚化で動的に組み合わされるため、すべてのコンポーネントはリアルタイムで温度の読みをリロードします。結果を以下の画像に示す。

The final interface shows the temperature readings from the sensor, and updates in real time — 最後のインターフェースはセンサーからの温度読み取り値を示し、リアルタイムで更新

次は何ですか？

この記事に示されている基本的なIoTプロトタイピングの概念は、動的データを適応的なデータまたは適応的なデータに有用で使用可能にする相互接続された製品またはサービスを設計するために構築することができ、これらがモバイルデバイス、より小さいディスプレイ、またはインタラクティブなTV画面でさえも提供されるかどうか。基本的なWeb開発スキルは、Webサーバーやフラットスクリーンインターフェイスを介して既におなじみのオープンWebテクノロジを介して撮影できます。

Webプロフェッショナルは、センサーに由来するデータアレイを扱う実用的な方法を探り始めてから、その後に設計されたユーザーインターフェースを持っています。これらの探査は、相互接続された製品のデータとデザインについて考える新しい方法で、CSSはスタイルだけでなく、人間とデータの間の意味のある接続を作成するための車両です。ブラウザレンダリング技術を含むデジタルエクスペリエンスを強化するために、CSS宣言をデータ要素と結合する新しいおよび今後のCSSベースの技術で実験することも多くのものもあります。

データは私たちの周りであり、私たちはそれを使用して目に見えないようにそれを使用し、JavaScriptを通してCSSでフックを書くユニークな機会を持っています。 IOTプラットフォームでのJavaScriptの採用は、CSSが依然としてJavaScriptベースのクライアントまたはすべてのサイズのWebブラウザに最適なプライマリスタイリングツールであることを示唆しています。

この記事は最初に登場しました ネットマガジン 問題289; ここで購入してください ！

関連記事：

物事のインターネットにおける設計の役割
なぜあなたはデザインの思考を受け入れるべきです
5つの重要なチャットボット学習リソース

センサーデータを収集するアプリを作成する

センサーとマイクロコントローラ

WebベースのAPI

適応型インタフェース

次は何ですか？

操作方法 - 最も人気のある記事

Artrage 6からの詳細：ワークフローを後押しするための上のヒント

超迅速なJavaScriptへの21ステップ

あなたのCSSを最適化し、あなたのサイトをスピードアップする方法

Cinema 4DでRedshiftプロキシを作成する方法

拡張現実マーカーのコード方法

Photoshopでコンポジットを作る

ベクターツールを使用する：Webデザイナーのアプローチ

様式化されたリアリズムでキャラクターを作成する

カテゴリ