Erstellen einer Batterie nämlich mit node.js: client

Key Takeaways

• Der Artikel beschreibt, wie ein Client -Teil für einen Batterie -Visualisierungsdienst mit node.js erstellt wird, wodurch der Batteriestatus in regelmäßigen Abständen aktualisiert wird, ohne die Seite neu zu laden. Der Client kann innehalten oder fortfahren Aktualisierungen, um das Überladen des Systems zu vermeiden, wenn die Informationen nicht benötigt werden.
• reaktives Design und deklarative Frameworks werden verwendet, um das DOMR -Modell (DOM) (DOM) als Reaktion auf Änderungen der Daten automatisch und effizient zu aktualisieren. Dies wird mit Ractive.js erreicht, einer Bibliothek, die Daten an DOM -Elemente bindet und das DOM jedes Mal aktualisiert, wenn sich die Daten ändert.
• Der Autor zeigt, wie man Ractive.js verwendet, um eine Batterievisualisierung zu erstellen, einschließlich der Einrichtung eines Mechanismus zum Pause/wieder aufgenommene Updates und asynchrones Abrufen von Daten aus einem REST -Dienst.
• Der Artikel endet mit einem Anruf, um die besprochenen Tools und Konzepte weiter zu untersuchen, z. und ractive.js.

Im ersten Teil dieser Mini-Serie haben wir die Details des von uns erstellten Dienstes und dem, was Sie lernen, besprochen. Wir haben dann abgedeckt, warum wir einen Server brauchen und warum ich mich für einen erholsamen Dienst entschieden habe. Während ich diskutierte, wie der Server entwickelt wird, nutzte ich die Chance, zu diskutieren, wie Sie das aktuelle Betriebssystem identifizieren können und wie Sie node.js verwenden können, um Befehle darauf auszuführen. In diesem zweiten und letzten Teil dieser Serie werden Sie feststellen, wie Sie den Client -Teil erstellen, um die Informationen den Benutzern auf gute Weise zu präsentieren. Um dieses Ziel zu erreichen, sollten wir den Status der Batterie alle x Minuten (oder Sekunden) aktualisieren, ohne die Seite neu zu laden. Darüber hinaus sollten wir in der Lage sein, Updates innehalten/wieder aufzunehmen, um das Überschwemmung unseres Systems zu vermeiden, wenn wir die Informationen nicht benötigen, oder wenn wir die Seite nicht betrachten. Um das zu tun, werden wir:

• Zeitplan AJAX -Anrufe an unseren Backend -Service über regelmäßige Zeitabschnitte;
• Verwenden Sie ein deklaratives Framework, das das DOM automatisch und effizient als Reaktion auf Änderungen an den Daten aktualisiert.
• Verwenden Sie eine JQuery -Dienstprogrammfunktion, um unser Leben zu erleichtern;
• Verwenden Sie einige schöne Bilder und CSS, um das Dashboard visuell ansprechend zu machen (als Bonus!).

reaktives Design

Die Diskussion von Ajax und asynchronen Aufrufen ist sicherlich nicht in diesem Artikel hinaus (ich werde am Ende des Beitrags einige nützliche Links anbieten). Zu unserem Zweck können wir sie sogar als schwarze Kästchen behandeln, mit denen wir den Server nach Daten fragen und nach dem Rücksenden der Daten eine Aktion ausführen können. Nehmen wir uns stattdessen eine Minute Zeit, um reaktives Design und deklarative Rahmenbedingungen zu diskutieren. Eine HTML -Seite ist standardmäßig eine statische Entität. Das bedeutet, dass für eine reine HTML -Seite der auf der Seite angezeigte Inhalt jedes Mal gleich bleibt, wenn sie in einem Browser gerendert wird. Wir wissen jedoch, dass wir mit JavaScript und möglicherweise einigen Vorlagenbibliotheken wie Schnurrbart sie dynamisch aktualisieren können. Es gibt viele Bibliotheken, die Entwicklern helfen, Daten an Dom -Knoten zu binden. Die meisten von ihnen verwenden JavaScript, um die DOM -Elemente zu beschreiben, auf die die Daten übersetzt werden sollten, und müssen Aktualisierungen der Seite manuell ausgelöst werden (über JavaScript). Wir verlassen uns also auf die Logik der Anwendung, um zu entscheiden, wann die Visualisierung aktualisiert werden soll und welche Änderungen als Reaktion auf Datenänderungen vorgenommen werden sollten. Deklarative Frameworks binden die Daten an DOM -Elemente und aktualisieren die DOM jedes Mal automatisch, wenn sich die Daten ändert. Diese Bindung wird auch unter Verwendung von Vorlagen in der Präsentation (HTML -Markup) und nicht unter JavaScript bereitgestellt. Der Mehrwert dieser Frameworks kann in wenigen wichtigen Punkten identifiziert werden:

• Sie erzwingen einen größeren Grad an Trennung zwischen Inhalt und Präsentation. Dies wird erreicht, indem Sie in der Präsentationsschichtbindung für Daten, Ereignishandler und sogar die Struktur der Ansichten definieren können (wie für iterative und zusammengesetzte Objekte, z. B. Tabellen);
• Sie bieten eine einfache Möglichkeit, Ihr Datenmodell und Ihre Präsentation synchronisiert zu halten.
• Sie tun dies im Allgemeinen äußerst effizient und stellen sicher, dass Sie nur die minimal mögliche Untergruppe Ihres DOM -Baums neu überfließen lassen. Beachten Sie in dieser Hinsicht, dass Reflowing und Neulackierung normalerweise Engpässe für clientseitige Browseranwendungen sind.

ractive.js

Für Ractive.js, die Bibliothek, die wir verwenden werden, wird die Synchronisation zwischen Daten und DOM über Containerobjekte erhalten. Die Bibliothek erstellt Objekte, die die Daten umwickeln. Diese Objekte haben Zugriff auf die Daten. Jedes Mal, wenn Sie eine Eigenschaft festlegen oder erhalten, kann die Bibliothek Ihre Aktion erfassen und sie intern an alle Abonnenten senden.

praktisch

Nachdem wir gesehen haben, wofür Ractive.js nützlich ist, ist es Zeit, unserer Seite unsere erste rive Vorlage hinzuzufügen. Dazu können Sie ein Skript -Tag mit einer ID Ihrer Wahl überall im hinzufügen. Ich empfehle Ihnen, die ID mit Bedacht zu wählen, da wir sie später brauchen werden. Wir müssen auch ein Attribut type = 'Text/Ractive' hinzufügen:

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

type = 'text/ractive' ' Würde für Ihren Browser tatsächlich keinen Sinn ergeben, da es das Skript ignoriert, es sei denn, Sie fügen Ihrer Seite auch das Skript von Ractive hinzu:

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

Innerhalb des raktiven Skripts können Sie nun HTML -Tags und Vorlagenvariablen und Bedingungen/Schleifen hinzufügen. Ractive.js kümmert sich um die Bewertung von allem in den {{}} -Gruppen.

<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>

Im obigen Beispiel können Sie sehen:

• Variablen: {{Batteriestate}}
• Bedingungen: {{#Batterystate}}
• Funktionsanrufe: {{batteriestateClass (batteriestate)}}}

Um diese Dinge zum Laufen zu bringen, müssen wir in JavaScript einige Bindungen hinzufügen. Dazu müssen wir ein neues Ractive.js -Objekt erstellen:

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

Die Optionen, die wir an den Konstruktor übergeben, sind sehr wichtig. Erstens muss El die ID eines DOM -Elements innerhalb des Ractive.js übereinstimmen, das die Vorlage rendert. In diesem Fall müssen wir eine DIV zur HTML -Seite hinzufügen:

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

Der Punkt, an dem Sie dieses Tag einfügen. Es wird das übergeordnete Element für alle Elemente von Ractive.js Templating -System sein. Der zweite wichtige Parameter, auf den Sie vorsichtig sein müssen, ist die Vorlage. Der Wert muss mit der ID des Text-/Raktiv -Skripts auf Ihrer Seite übereinstimmen. Schließlich weisen wir Daten ein Objekt zu, dessen Schlüssel Variablennamen sind, auf die wir in unserer Vorlage verweisen, oder Funktionen, die wir aufrufen. Mit Ractive.js können wir sogar benutzerdefinierte Ereignisse definieren, auf die die Bibliothek antwortet:

<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>

In einigen Zeilen haben wir einen Mechanismus eingerichtet, um unsere Updates zu pausieren/wieder aufzunehmen. Wir müssen jedoch immer noch den UpdateBatterystatus definieren () Funktion.

asynchrones Abrufen von Daten

Wie versprochen ist es hier eine Funktion, die sich um das Abrufen von Daten aus unserem REST -Service kümmert. Durch die Verwendung des JQuery Deferred -Objekts haben wir einen Rückruf eingerichtet, der aufgerufen werden soll, sobald einige Daten vom Server empfangen werden. Da wir auch Ractive.js in diesem Rückruf verwenden, müssen wir nicht die Logik der Aktualisierung der Präsentationsschicht durchlaufen. Tatsächlich aktualisieren wir nur den Wert der im Vorlagenskript verwendeten Variablen, und Ractive.js kümmert sich um alles. Was ich gerade beschrieben habe, wird durch den unten angegebenen Code implementiert:

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>

alles zusammenfügen

Natürlich gibt es noch etwas mehr Verkabelung, um all diese zusammenarbeiten zu lassen. Wir haben das Design des Dashboard UX insgesamt übersprungen. Das liegt letztendlich bei Ihnen, sobald Sie so erhalten haben, wie es mit dem Vorlagensystem funktioniert! Wie cool wäre es beispielsweise, wenn wir den Ladungsprozentsatz sowohl als Text als auch visuell mit einem coolen Power -Indikator unter Verwendung von Bildern und Animationen ausführen lassen könnten? Mit Ractive.js ist es nicht so schwer! Schauen Sie sich das Endergebnis an: Wenn Sie den Code inspizieren möchten, können Sie ihn erneut auf GitHub finden.

Schlussfolgerungen

Unser Multi-Plattform-Batterie-Armaturenbrett sollte jetzt bereit sein. Dies sollte jedoch eher ein Ausgangspunkt als ein Endergebnis sein, und die wichtigen Punkte, von denen Sie hoffen, dass Sie auf dem Weg gelernt haben, sind:

• So richten Sie einen HTTP -Server mit node.js
ein
• RESTFOR APIS
• So führen Sie OS -Terminalbefehle auf einem node.js server
aus
Grundlagen deklarativer Frameworks und Ractive.js insbesondere

Wenn Sie es auf die nächste Ebene bringen möchten, ist es mein Rat, mit dem Experimentieren mit diesen Tools zu experimentieren und das Netz zu graben, um das Wissen in diesen Bereichen zu vertiefen. Wenn Sie die in diesem Artikel behandelten Themen vertiefen möchten, empfehle ich Ihnen dringend, sich diese guten Ressourcen anzusehen:

• Architekturstile und das Design von netzwerkbasierten Softwarearchitekturen
• Richtlinien für die Erstellung einer erholsamen API
• Was sind die Vor-/Nachteile der Verwendung von REST -API gegenüber nativen Bibliotheken?
• Template -Methodenmuster
• asynchrone Anfragen in JavaScript
• Crockford über JavaScript - Episode IV: Die Metamorphose von Ajax - Großartiger Einblick, wie üblich, sowie eine super lustige Geschichte über die Ursprünge des Begriffs Ajax, als Bonus!
• jQuery $ .getJson -Methode
• RactiveJS Tutorial

häufig gestellte Fragen (FAQs) zum Erstellen einer Batterievisualisierung mit Node.js Client

Wie kann ich den Batteriestatus mit JavaScript? Diese API enthält Informationen über die Batterieladung des Systems und ermöglicht es Ihnen, durch Ereignisse benachrichtigt zu werden, die bei der Batteriespiegel oder des Ladezustands zugesandt werden. Hier ist ein einfaches Beispiel für die Verwendung:

navigator.getBattery (). Dann (Funktion (Batterie) {
console.log ("Batteriespiegel:" Battery.level*100 "%" );
Die Methode der Navigator.getBattery ist Teil der Batteriestatus -API. Es wird ein Versprechen zurückgegeben, das sich in ein BatteryManager -Objekt auflöst, das Informationen über die Batterieladung des Systems enthält und Sie durch Ereignisse benachrichtigt werden Daten zur Batteriestatus? Mit diesen Bibliotheken können Sie verschiedene Arten von Diagrammen und Grafiken aus Ihren Daten erstellen. Sie können auch HTML und CSS verwenden, um ein einfaches Balken- oder Kreisdiagramm zu erstellen.

Kann ich den Batteriestatus auf allen Geräten erhalten? Nicht alle. Es ist auch erwähnenswert, dass einige Geräte, wie z.

Wie kann ich den Batteriestatus ändert? Die Batterie -Status -API bietet mehrere Ereignisse wie „LadingChange“, „LevelChange“, „LadingTimechange“ und „DecadingTimechange“. Hier ist ein Beispiel für die Verwendung der folgenden Ereignisse:

navigator.getbattery (). Dann (Funktion (batterie) {
batterie.adDeVent -Veristener ('LevelChange', function () {
Konsole. log ("Batteriepegel:" Batterie.Level*100 "%");
});
}); Die Konsole, wenn sich der Akkuspiegel ändert. Sie können jedoch einen untergeordneten Prozess verwenden, um einen Systembefehl auszuführen, der den Batteriestatus erhält, und dann die Ausgabe analysieren. Der spezifische Befehl hängt von Ihrem Betriebssystem ab. Es ist jedoch immer eine gute Praxis, Ihre Benutzer zu informieren, wenn Sie Daten zu ihrem System sammeln. Bei der Batteriestatus -API liegt eine Zahl zwischen 0,0 und 1,0, was den aktuellen Batteriepegel als Bruchteil der vollständigen Ladung darstellt. Die Genauigkeit dieses Wertes hängt vom Gerät und seiner Batterie ab. Beachten Sie jedoch, dass nicht alle Browser Web -Mitarbeiter unterstützen und nicht alle Browser, die Webarbeiter unterstützen, die Batterie -Status -API in einem Webarbeiter unterstützen.

Wenn die Batterie -Status -API nicht unterstützt wird, können Sie nicht viel tun, um den Batteriestatus zu erhalten. Sie können die Funktionserkennung verwenden, um zu überprüfen, ob die API unterstützt wird, und dem Benutzer eine alternative Funktionalität oder eine Nachricht bereitzustellen, wenn dies nicht der Fall ist.

Das obige ist der detaillierte Inhalt vonErstellen einer Batterie nämlich mit node.js: client. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!