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

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

キーテイクアウト

この記事では、ページをリロードせずに定期的にバッテリーステータスを更新するnode.jsを使用して、バッテリー視覚化サービスのクライアントパーツを構築する方法について説明します。クライアントは、情報が不要になったときにシステムの過負荷を避けるために、更新を一時停止または再開できます。
著者は、Ractive.jsを使用してバッテリーの視覚化を作成する方法を示しています。これには、更新を一時停止/再開するメカニズムの設定や、RESTサービスからのデータの非同期的な取得などがあります。

リアクティブな設計

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</span> id<span>='meterVizTemplate'</span> type<span>='text/ractive'</span>></span><span><span></script</span>></span></span>

ログイン後にコピー

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

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

ログイン後にコピー

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

<span><span><span><script</span> id<span>='meterVizTemplate'</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><span><span>        <span><div class='battery-shell'>
</span></span></span><span><span>          <span><div class='battery-percent-text'>{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></div>
</span></span></span><span><span>        <span><div class='battery-level'>
</span></span></span><span><span>          <span><div class='battery-mask' style="width:{{(100 - batteryPercent) + '%'}};">
</span></span></span><span><span>          <span></div>                
</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 <= batteryRedThreshold}}
</span></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></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></script</span>></span></span>

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

<span><span><span><script</span> id<span>='meterVizTemplate'</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><span><span>        <span><div class='battery-shell'>
</span></span></span><span><span>          <span><div class='battery-percent-text'>{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></div>
</span></span></span><span><span>        <span><div class='battery-level'>
</span></span></span><span><span>          <span><div class='battery-mask' style="width:{{(100 - batteryPercent) + '%'}};">
</span></span></span><span><span>          <span></div>                
</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 <= batteryRedThreshold}}
</span></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></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></script</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 <= BATTERY_RED_THRESHOLD ? BATTERY_RED_CLASS : (percent <= BATTERY_YELLOW_THRESHOLD ? BATTERY_YELLOW_CLASS : BATTERY_GREEN_CLASS);
</span>        <span>}
</span>    <span>}
</span><span>});</span>

ログイン後にコピー

すべてをまとめる

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

コードを検査したい場合は、GitHubでもう一度見つけることができます。

結論

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

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

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

アーキテクチャスタイルとネットワークベースのソフトウェアアーキテクチャの設計
ガイドライン
ネイティブライブラリでREST APIを使用することの利点/短所は何ですか？
テンプレートメソッドパターン
での非同期リクエスト
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をサポートしているわけではないことに注意してください。