node.js：クライアントを使用してバッテリーvizを作成します

キーテイクアウト

• この記事では、ページをリロードせずに定期的にバッテリーステータスを更新するnode.jsを使用して、バッテリー視覚化サービスのクライアントパーツを構築する方法について説明します。クライアントは、情報が不要になったときにシステムの過負荷を避けるために、更新を一時停止または再開できます。
リアクティブな設計と宣言的なフレームワークは、データの変更に応じてドキュメントオブジェクトモデル（DOM）を自動的かつ効率的に更新するために使用されます。これは、データが変更されるたびにデータをDOM要素にバインドし、DOMを更新するライブラリであるRactive.jsを使用して達成されます。
• 著者は、Ractive.jsを使用してバッテリーの視覚化を作成する方法を示しています。これには、更新を一時停止/再開するメカニズムの設定や、RESTサービスからのデータの非同期的な取得などがあります。
この記事は、node.jsを使用してHTTPサーバーのセットアップ、RESTFUL APIS、node.jsサーバーでOS端末コマンドの実行、宣言的なフレームワークの基本など、説明したツールと概念をさらに調査するための呼び出しで終了します。およびractive.js。
このミニシリーズの最初の部分では、私たちが構築しているサービスの詳細とあなたが学ぶことについて説明しました。次に、サーバーが必要な理由と、Restfulサービスを作成することを選択した理由について説明しました。サーバーの開発方法を議論している間、私はあなたが現在のオペレーティングシステムをどのように識別できるか、またnode.jsを使用してコマンドを実行する方法について話し合う機会を得ました。 このシリーズのこの2番目の最後の部分では、クライアントパーツを構築して情報をユーザーに提示する方法を見つけます。この目標を達成するには、ページをリロードせずに、x分（または秒）ごとにバッテリーのステータスを更新する必要があります。さらに、情報が不要な場合、またはページを見ていない場合でも、システムがあふれないように、更新を一時停止/再開することができるはずです。それをするために、私たちは次のようにします
スケジュールAJAXは、通常の時間間隔でバックエンドサービスに電話をかけます;

データの変更に応じてDOMを自動的かつ効率的に更新する宣言的なフレームワークを使用します;
jQueryユーティリティ機能を使用して、私たちの生活を楽にします;
いくつかの素敵な画像とCSSを使用して、ダッシュボードを視覚的に魅力的にします（ボーナスとして！）。

リアクティブな設計

Ajaxと非同期呼び出しについて議論することは、確かにこの記事の範囲外です（投稿の最後にいくつかの有用なリンクを提供します）。私たちの目的のために、それらをブラックボックスとして扱うこともできます。ブラックボックスは、サーバーに何らかのデータを尋ねたり、データが送信されたらアクションを実行したりすることもできます。 代わりに、リアクティブな設計と宣言的なフレームワークについて話し合うために、ちょっと時間を取りましょう。 HTMLページは、デフォルトで静的エンティティです。つまり、純粋なHTMLページの場合、ページに表示されるコンテンツは、ブラウザでレンダリングされるたびに同じままです。ただし、JavaScriptとMoustacheなどのテンプレートライブラリを使用することで、動的に更新できることがわかっています。 開発者がデータをDOMノードに結合するのに役立つ多くのライブラリがあります。それらのほとんどはJavaScriptを使用して、データを翻訳する必要があるDOM要素を記述し、ページの更新を手動でトリガーする必要があります（JavaScriptを介して）。したがって、視覚化を更新する時期とデータの変更に応じてどのような変更を行うべきかを決定するためのアプリケーションのロジックに依存することになります。 宣言的なフレームワークは、データを変更するたびにデータをDOM要素にバインドし、DOMを自動的に更新します。このバインディングは、JavaScriptではなくプレゼンテーション（HTMLマークアップ）のテンプレートを使用して提供されます。 これらのフレームワークの付加値は、いくつかの重要なポイントで識別できます。

• コンテンツとプレゼンテーションの間のより大きな分離を実施します。これは、データ、イベントハンドラー、さらにはビューの構造のためのプレゼンテーションレイヤーバインディングで定義できるようにすることで実現されます（例えば、テーブルなどの反復オブジェクトや複合オブジェクトなど）;
• データモデルとプレゼンテーションを同期させる簡単な方法を提供します;
• 彼らは通常、非常に効率的な方法でそれを行い、DOMツリーの最小可能なサブセットのみを反映するようにします。その点に関しては、クライアント側のブラウザアプリケーションのリフルティングと再塗装は通常、ボトルネックであることに留意してください。

ractive.js

ractive.jsの場合、使用するライブラリの場合、データとDOMの間の同期は、コンテナオブジェクトを介して取得されます。ライブラリは、データをラップするオブジェクトを作成します。これらのオブジェクトはデータにアクセスできるため、プロパティを設定または取得するたびに、ライブラリはアクションをキャプチャし、すべてのサブスクライバーに内部的にブロードキャストできます。

ハンズオン

ractive.jsが役立つものを見たので、今度は最初のRactiveテンプレートをページに追加する時が来ました。そのために、内部のどこにでも選択したIDを使用してスクリプトタグを追加できます。後で必要なので、IDを賢く選択することをお勧めします。また、type = 'text/ractive'属性を追加する必要があります。

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

type = 'text/ractive' Ractiveのスクリプトもページに追加しない限り、スクリプトを無視するため、ブラウザには実際には意味がありません。

<span><span><span><script> src<span >='http://cdn.ractivejs.org/latest/ractive.js'</script></span>></span><span><span></span>></span></span>

これで、Ractiveスクリプト内で、HTMLタグとテンプレート変数と条件/ループを追加できます。 ractive.jsは、{{{}}グループ内のすべてを評価します。

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span>
</span></span><span><span>    <span>{{#batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><div class="battery-div">
<span><span>        <span><div class="battery-shell">
<span><span>          <span><div class="battery-percent-text">{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span><div class="battery-level">
<span><span>          <span><div class="battery-mask" style="width:{{(100 - batteryPercent) + '%'}};">
<span><span>          <span></span></span></span>
</div>                
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span>{{#batteryCharging}}
</span></span></span><span><span>          <span><div class="battery-plug" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryCharging}}
</span></span></span><span><span>        <span>{{#batteryPercent </span></span><span><span>          <span><div class="battery-warning" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryLife}}                
</span></span></span><span><span>      <span></span></span></span></span>
</div>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>        <span><span class="key">Battery state:</span> <span class="value {{batteryStateClass(batteryState)}}">{{batteryState}}</span>
</span></span></span><span><span>        <span><br>
</span></span></span><span><span>        <span>{{#batteryLife}}
</span></span></span><span><span>          <span><span class="key">Time to empty:</span> <span class="value {{batteryLifeClass(batteryPercent)}}">{{batteryLife}}</span>
</span></span></span><span><span>        <span>{{/batteryLife}}                  
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span>    <span>{{^batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span>LOADING...
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span></span><span><span></span>></span></span>

上記の例では、次のことがわかります。

• 変数：{{batterystate}}
• 条件：{{#batterystate}}
• 関数の呼び出し：{{batteryStateClass（BatteryState）}}

これらのものを機能させるには、JavaScriptにバインディングを追加する必要があります。そのためには、新しいractive.jsオブジェクトを作成する必要があります。

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

コンストラクターに渡すオプションは非常に重要です。まず、ELは、Ractive.jsがテンプレートをレンダリングする内部のDOM要素のIDを一致させる必要があります。この場合、HTMLページにDIVを追加する必要があります。

<span><span><span><script> src<span >='http://cdn.ractivejs.org/latest/ractive.js'</script></span>></span><span><span></span>></span></span>

このタグを挿入するポイントが重要です。 ractive.jsテンプレートシステムによってレンダリングされるすべての要素の親要素になります。注意する必要がある2番目の重要なパラメーターはテンプレートです。その値は、ページ上のテキスト/RactiveスクリプトのIDと一致する必要があります。最後に、キーがテンプレートで参照される変数名、または呼び出す関数の名前があるオブジェクトをデータに割り当てます。 Ractive.jsを使用すると、ライブラリが応答するカスタムイベントを定義することもできます。

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span>
</span></span><span><span>    <span>{{#batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><div class="battery-div">
<span><span>        <span><div class="battery-shell">
<span><span>          <span><div class="battery-percent-text">{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span><div class="battery-level">
<span><span>          <span><div class="battery-mask" style="width:{{(100 - batteryPercent) + '%'}};">
<span><span>          <span></span></span></span>
</div>                
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span>{{#batteryCharging}}
</span></span></span><span><span>          <span><div class="battery-plug" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryCharging}}
</span></span></span><span><span>        <span>{{#batteryPercent </span></span><span><span>          <span><div class="battery-warning" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryLife}}                
</span></span></span><span><span>      <span></span></span></span></span>
</div>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>        <span><span class="key">Battery state:</span> <span class="value {{batteryStateClass(batteryState)}}">{{batteryState}}</span>
</span></span></span><span><span>        <span><br>
</span></span></span><span><span>        <span>{{#batteryLife}}
</span></span></span><span><span>          <span><span class="key">Time to empty:</span> <span class="value {{batteryLifeClass(batteryPercent)}}">{{batteryLife}}</span>
</span></span></span><span><span>        <span>{{/batteryLife}}                  
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span>    <span>{{^batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span>LOADING...
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span></span><span><span></span>></span></span>

数行で、更新を一時停止/再開するメカニズムを設定しました。ただし、updatebatterystatus（）を定義する必要があります 関数。

非同期にデータを取得

約束どおり、ここでは、RESTサービスからデータの取得を処理する関数です。 jQuery Deferredオブジェクトを使用することにより、サーバーから一部のデータが受信されるとすぐに呼び出されるコールバックを設定します。また、このコールバック内でRactive.jsを使用しているため、プレゼンテーションレイヤーの更新方法のロジックを実行する必要はありません。実際、テンプレートスクリプトで使用されている変数の値を更新するだけで、Ractive.jsはすべてを処理します。 私が今説明したことは、以下に報告されたコードによって実装されています。

ractive <span>= new Ractive({
</span>    <span>el: 'panels',
</span>    <span>template: '#meterVizTemplate',
</span>    <span>data: {
</span>        <span>// Percentage at which the battery goes to 'red' zone (export for Ractive templates)
</span>        <span>batteryRedThreshold: BATTERY_RED_THRESHOLD,
</span>        <span>// Percentage at which the battery enters 'yellow' zone (export for Ractive templates)
</span>        <span>batteryYellowThreshold: BATTERY_YELLOW_THRESHOLD,
</span>        <span>// The capacity of the battery, in percentage. Initially empty
</span>        <span>batteryPercent: NaN,
</span>        <span>// How much more time can the battery last?
</span>        <span>batteryLife: "",
</span>        <span>// True  the update daemon for the battery has been paused
</span>        <span>batteryPaused: false,
</span>        <span>// True  the update daemon for the battery has reported an error at its last try
</span>        <span>batteryUpdateError: false,
</span>        <span>// Is the battery connected to power?
</span>        <span>batteryCharging: false,
</span>        <span>batteryStateClass: function (state) {
</span>            <span>return state === 'discharging' ? BATTERY_RED_CLASS : BATTERY_GREEN_CLASS;
</span>        <span>},
</span>        <span>batteryLifeClass: function (percent) {
</span>            <span>return percent         <span>}
</span>    <span>}
</span><span>});</span></span>

すべてをまとめる

もちろん、これらすべてを一緒に機能させるために、さらに配線するためのいくつかの配線があります。ダッシュボードUXのデザインを完全にスキップしました。最終的には、テンプレートシステムで動作させる方法を手に入れたら、それはあなた次第です！たとえば、画像とアニメーションを使用して、クールなパワーインジケーターでテキストとして、視覚的に視覚的に表示されるかどうかは、どれほどクールでしょうか？ Ractive.jsでは、それほど難しくありません！最終結果を見てください： コードを検査したい場合は、GitHubでもう一度見つけることができます。

結論

マルチプラットフォームのバッテリーダッシュボードは今すぐ準備ができているはずです。しかし、これは最終的な結果ではなく出発点であるべきであり、私があなたが学んだことを願っている重要な点は次のとおりです。

• node.js
を使用してHTTPサーバーを設定する方法
• RESTFUL APIS
• node.jsサーバーでOSターミナルコマンドを実行する方法
• 宣言的なフレームワークとractive.jsの基本

次のレベルに引き上げたい場合は、これらのツールの実験を開始し、ネットを掘ってこれらの領域の知識を深めることです。この記事で説明されているトピックを深めたい場合は、これらの良いリソースを見ることを強くお勧めします。

• アーキテクチャスタイルとネットワークベースのソフトウェアアーキテクチャの設計
RESTFUL APIを作成するためのガイドライン
• ガイドライン
• ネイティブライブラリでREST APIを使用することの利点/短所は何ですか？
• テンプレートメソッドパターン
JavaScript
• での非同期リクエスト
JavaScriptのCrockford - エピソードIV：Ajaxの変態 - いつものように偉大な洞察に加えて、ボーナスとしてAjaxという用語の起源に関する非常に面白い物語！ jQuery $ .getJsonメソッド
• ractivejsチュートリアル
• Node.jsクライアントを使用したバッテリーの視覚化の作成に関するよくある質問（FAQ）

javaScriptを使用してバッテリーステータスを取得するにはどうすればよいですか？

JavaScriptを使用してバッテリーステータスを取得するには、バッテリーステータスAPIを使用できます。このAPIは、システムのバッテリー充電レベルに関する情報を提供し、バッテリーレベルまたは充電ステータスが変更されたときに送信されるイベントによって通知することができます。使用方法の簡単な例を次に示します。 ）;

}）;

このコードは、現在のバッテリーレベルをコンソールにログに記録します。

navigator.getBatteryメソッドは、バッテリーステータスAPIの一部です。システムのバッテリー充電レベルに関する情報を提供し、バッテリーレベルまたは充電ステータスが変更されたときに送信されるイベントによって通知できるようにするバッテリーマネージャーオブジェクトに解決する約束を返します。バッテリーステータスデータ？

バッテリーステータスデータを視覚化するには、chart.jsやd3.jsなどのJavaScriptチャートライブラリを使用できます。これらのライブラリを使用すると、データからさまざまな種類のチャートとグラフを作成できます。また、HTMLとCSSを使用して、シンプルなバーまたはパイチャートを作成することもできます。

すべてのデバイスでバッテリーステータスを取得できますか？すべてではありません。また、デスクトップコンピューターなどの一部のデバイスが正確な状態またはバッテリーステータス情報を提供しない場合があることも注目に値します。

バッテリーのステータスの変更を処理するにはどうすればよいですか？

バッテリーマネージャーオブジェクトにイベントリスナーを追加することで、バッテリーステータスの変更を処理できます。バッテリーステータスAPIは、「chargingchange」、「levelchange」、「chargingtimechange」、「dischingtimechange」など、いくつかのイベントを提供します。これらのイベントの使用方法の例は次のとおりです。 log（ "バッテリーレベル：" Battery.Level*100 "％"）;
}バッテリーレベルが変更されるたびにコンソールに。 。ただし、子のプロセスを使用して、バッテリーステータスを取得するシステムコマンドを実行してから、出力を解析できます。特定のコマンドはオペレーティングシステムに依存します。

ユーザーの許可なしにバッテリーのステータスを取得できますか？

はい、バッテリーステータスAPIはユーザーの許可を使用する必要はありません。ただし、システムに関するデータを収集している場合は、ユーザーに通知することをお勧めします。バッテリーステータスのAPIは0.0〜1.0の数であり、現在のバッテリーレベルをフル充電の一部として表しています。この値の精度は、デバイスとそのバッテリーに依存します。

Webワーカーでバッテリーステータスを取得できますか？ただし、すべてのブラウザがWebワーカーをサポートしているわけではなく、WebワーカーをサポートするすべてのブラウザがWebワーカーのバッテリーステータスAPIをサポートしているわけではないことに注意してください。

バッテリーステータスAPIがサポートされていない場合、バッテリーステータスを取得するためにできることはあまりありません。機能検出を使用して、APIがサポートされているかどうかを確認し、代替機能またはメッセージをユーザーに提供できない場合は、ユーザーにメッセージを提供できます。

以上がnode.js：クライアントを使用してバッテリーvizを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。