Erstellen Sie eine App, die Sensordaten sammelt

Sep 17, 2025

wie man

Heute genießen erschwingliche Plattformen zur Entwicklung von miteinander verbundenen Produkten die weit verbreitete Verfügbarkeit, und wir haben einen Push für eine erhöhte JavaScript-Unterstützung in IOT-Technologien gesehen, mit leistungsstarken Unternehmen wie IBM, Google, Intel, Microsoft und Cisco, die APIs für ihre Produkte eröffnen. Das Ergebnis ist ein erweitertes Ökosystem von Mikrocontrollern, mit Cloud-Services verbundenen Datenlogger, die an Cloud-Dienste angeschlossen sind, und anpassungsfähige Schnittstellen, die Daten in Echtzeit analysieren, umfassen alle neue Möglichkeiten für Designer mit kundenseitigen Webkenntnissen.

Die 13 besten iPad-Apps für Pro-Designer

Dafür ist das Ziel dieses Tutorials, etwas zu entwerfen und zu bauen, das nicht nur "ordentlich" ist, sondern in der realen Welt nützlich ist: ein miteinander verbundenes Produkt (oder Service), das Wetterdaten von einem Sensor in einen lokalen Webserver hochlädt , und zeigt diese Daten in einer adaptiven Benutzeroberfläche in Echtzeit an. Dieses Projekt veranschaulicht, wie wir uns von der direkten Manipulation in der UI-Gestaltung abbrechen können, und zeigt einige Möglichkeit, dass Designer ihre Prototyping-Techniken über Webserver und flache Designs übernehmen können.

Werfen Sie einen Blick auf die Quelldaten für dieses Tutorial. .

Sensoren und Mikrocontrollers.

Für dieses Tutorial verwenden wir den Arduino-Mikrocontroller. Dies ist eine beliebte Wahl, dank günstiger Preis, einfacher Entwicklungskit und viel Online-Unterstützung. Laden Sie Ihren Mikrocontroller auf Ihrem Computer ein, laden Sie die Entwicklungsumgebung herunter (die IDE-Option) Hier . Der Mikrocontroller steckt mit einem USB-Kabel an Ihren Computer an, der es auch ausmacht. Der Arduino-Code ist als Skizzen bekannt, die in C ++ - basierten Code geschrieben werden, um Daten zu analysieren, die von Sensoren kommen.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Unsere Probenanwendung umfasst einen Sensor (1), einen Mikrocontroller (2), eine Web-API (3) und eine adaptive UI (4)

Da wir eine App entwerfen, die Wetterdaten liest, habe ich den Temperatursensor LM35 verwendet. Dies ist eine gute, erschwingliche Option, aber genau wie bei Mikrocontrollers gibt es viel zu wählen. Richten Sie den LM35-Sensor zusammen mit Jumper-Drähten und Breakfoard auf diese Anweisungen .

Der Mikrocontroller arbeitet mit einer Skizzendatei zusammen, die einen Datenvorschub vom Temperatursensor von LM35 direkt in Ihr lokales Dateisystem erstellt. Um dies einzustellen, müssen Sie zunächst eine Variable deklarieren, um analoge Daten vom Sensor zu halten (eine Variable ist ein Weg, um einen Wert für die spätere Verwendung durch das Programm zu benennen und zu speichern - in diesem Fall Daten von einem Sensor).

Deklarieren Sie eine Setup-Funktion, die mit dem seriellen Anschluss in Ihrem Laptop kommuniziert. Dies wird aufgerufen, wenn eine Arduino-Skizze beginnt, und es wird in das serielle Fenster aufgenommen. Der serielle Anschluss dient zur Kommunikation zwischen der Arduino-Platine und Ihrem Laptop.

Als nächstes müssen wir die Baudrate einstellen - die Rate, mit der Informationen übertragen werden. Wir wünschen uns eine Rate von 9600, dh der serielle Anschluss kann maximal 9600 Bit pro Sekunde aus dem Signal übertragen, wodurch der Temperatursensor LM35 mit dem USB-Kabel in Ihren Laptop zurückkehrt wird. Konvertieren Sie die erfasste Rohsensordaten zuerst in das Temperaturformat, dann von ganzzahliger bis zu Text in JSON, um in JSON eingefügt und im Speicher gehalten zu werden.

Schließlich schließen Sie die obige Funktion auf, sodass der Sensor Temperaturdaten kontinuierlich sammelt. Der Arduino-Mikrocontroller läuft im Hintergrund ununterbrochen und sammelt Temperaturdaten in der seriellen Port Ihres Laptops.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Ein typisches Arduino-Setup, bestehend aus Kabeln, Drähten, Pins, Sensoren und einer USB-Laptopverbindung

Eine webbasierte API

Sobald der Temperaturwert im Speicher aufgezeichnet ist, muss ein Zeitstempel hinzugefügt werden, bevor Sie ihn in das JSON-Format einsetzen. Um zu beginnen, müssen wir den Speicherort feststellen, an dem die JSON-Datei aufhält, und öffnet diese Datei in kurzen Abständen, um die Messwerte anzuhängen.

Dies ist möglich, dies mithilfe der erweiterten Webserver-Technologie zu erreichen, dies ist jedoch außerhalb des Geltungsbereichs dieses Artikels hinaus und würde uns in verschiedene Tangenten bringen. Der Einfachheit halber verwenden wir die Verarbeitung, um die Sensordaten zu analysieren, aber es gibt viele aufsteigende, robuste, robuste, robuste Webserver-Programmiertechnologien, mit denen die Sensordaten vom seriellen Port-Speicher in erwerben können jeder Webserver oder die Cloud ( siehe hier ).

Die Verarbeitung verwendet eine Skizzendatei, um von Arduino gesendete Daten zu erhalten, indem Sie Daten in den seriellen Anschluss anhören und eine Zeichenfolge zurückgeben, um die Messwerte zu halten. Es verwendet auch eine Draw () -Funktion, die die in ihrem Block enthaltenen Codelinien kontinuierlich ausführt - in diesem Fall, in diesem Fall die Werte des seriellen Anschlusses einnehmen, wobei ein Zeitstempel hinzugefügt wird und in einer Textdatei druckte, die in einer JSON-Struktur endet, ähnlich zu ["18:05:53", 43.00].

Schließlich enden wir mit einem System, das nur einen Temperatursensor, einen Mikrocontroller und einen Webserver enthält. Dies ist ein Prototyp für ein größeres Datenerfassungssystem, das aus Sensornetzwerken und der Cloud besteht, was ein reales World-Produkt oder einen Dienst darstellt.

Eine adaptive Schnittstelle.

An diesem Punkt möchten wir eine einfache Benutzeroberfläche mit einem einseitigen Anwendungsstarterpaket (SPA) und ein JS-basiertes Werkzeug wie reagieren oder eckig zusammenstellen. Ich habe Reaktion gepflückt, weil es leicht ist, zu beschreiben, was der Browser rendern soll, entfernen Sie viel Geräusch, wenn Sie den DOM im Browser aufbauen, und bindet Daten von jeder API sehr schnell. Anstatt das gesamte DOM erneut zu rendieren, aktualisiert er nur die änderten Benutzeroberfläche, die sich ändert, was für das Prototyping ideal ist.

Um mit Ihrer Benutzeroberfläche zu beginnen, installieren Sie zunächst das SPA mit einem der vielen Online-Starter-Packs, das online verfügbar ist. Ein sehr praktischer ist die Web-App-Kesselplatte Kit reagieren . Sobald Sie sich mit der Dateistruktur vertraut gemacht haben, müssen Sie eine neue Komponente einrichten, auf der sich auf den JSON-Feed auf dem lokalen Webserver oder einem Cloud-Service greift und die Daten für die Anzeige verarbeitet.

In React ist SetState die Hauptmethode, mit der UI-Updates ausgelöst werden. Änderungen werden durch Ereignishandleiter oder Serveranforderungsrückrufe ausgelöst und müssen dann korrekt implementiert werden, um die JSON-Datei zu lesen. Schließlich definieren wir die variablen Messwerte, um die analysierten Daten zu halten, und die & lt; ReadingsList / & gt; Tag in der Render-Methode, um die UI-Komponente darzustellen, die der Visualisierung dient:

 LoadpathsData () {
  this.setState ({Daten: Daten});
}

LoadInitialState () {
  Rückgabe {Daten: {Messungen: []}};
}

componentwillmount () {
  this.loadpathsdata ();
}

Render () {
  Rückkehr (
    & lt; div & gt;
      & lt; ReadingsList Data = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Definieren Sie die MadingList-UI-Komponente, um die Messwerte der zuvor erstellten JSON-Datei zu halten. Fügen Sie eine neue Klasse (Messliste) direkt über der Klassendefinition hinzu. Die Reaktion verwendet die Render-Methode, um die virtuelle Darstellung einer nativen DOM-Komponente (z. B. der & lt; div / & gt; unten) oder einer anderen definierten Komponente umzusetzen. Als Ergebnis haben wir eine UI-Komponente, die die JSON-Messungen anzeigt:

 VAR-ReadingsList = React.CreateClass ({
  Render: Funktion () {
    Rückkehr (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Kombinieren Sie dynamische CSS-Deklarationen mit Datenzuordnungen, um die Messwerte im Browser zu gestalten.

Sie können entweder auf der Komponente oder der Browserebene in kurzen Abständen erfordern. Dies kann mit der robueren Reaktionskraft-Funktion (der darauf hinweist, dass es reagieren muss, um Render () oben durch Aufruf von kraftzuwenden erneut auszuführen oder in der Jade-Template-Rendering mit einer grundlegenden SetInTerval-Funktion implementiert.

Beim Relaunching des SPA laden alle Komponenten die Temperaturwerte in Echtzeit, wenn die JS- und CSS in einer Kreuzeinrichtung-Visualisierung dynamisch kombiniert werden. Das Ergebnis ist in dem Bild unten gezeigt.

The final interface shows the temperature readings from the sensor, and updates in real time — Die endgültige Schnittstelle zeigt die Temperaturwerte des Sensors und Updates in Echtzeit

Was kommt als nächstes?

Die in diesem Artikel dargestellten grundlegenden IOT-Prototyping-Konzepte können aufgebaut werden, um miteinander verbundene Produkte oder Dienste zu gestalten, die dynamische Daten nützlich und in adaptiver UIS nützlich und verwendbar sind, ob diese in einem mobilen Gerät, kleinerer Anzeige oder sogar einem interaktiven Fernsehbildschirm serviert werden. Die grundlegenden Webentwicklungsfähigkeiten können über Webservern und Flachbildschirm-Schnittstellen über offene Web-Technologien hinausgehen, mit denen wir bereits vertraut sind.

Web-Profis fangen an, praktische Wege zu erforschen, um mit Datenarrays zu arbeiten, die in Sensoren stammen, und dann eine Benutzeroberfläche, die um sie herum entworfen hat. Diese Erkundungen bieten neue Denkweisen über Daten und Design in miteinander verbundenen Produkten, in denen CSS nicht nur in Dritten ist, sondern ein Fahrzeug, durch das er sinnvolle Verbindungen zwischen Mensch und Daten erzeugt werden kann. Es gibt auch viel zu experimentieren, mit neuen und anstehenden CSS-basierten Technologien, die CSS-Erklärungen mit Datenelementen koppeln, um digitale Erlebnisse zu verbessern, einschließlich Browser-Rendering-Techniken.

Die Daten sind rundum uns um uns herum, und wir haben eine einzigartige Gelegenheit, um das Unsichtbare zu sehen, und schreibe Haken in CSS durch JavaScript ... Wir sprechen von der Minderung der Reibung und schaffen einen nahtlosen Kontaktpunkt zwischen Mensch und einem digitalen Produkt. Die Annahme von JavaScript in IOT-Plattformen schlägt vor, dass CSS noch ein primäres Styling-Tool der Wahl für JavaScript-basierte Clients oder Webbrowser aller Größen für eine Weile sein wird.

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 289; Kaufen Sie es hier. Schnitte

Zum Thema passende Artikel:

Die Rolle des Designs im Internet der Dinge
Warum sollten Sie Designdenken annehmen?
5 Wesentliche Chatbot-Lernressourcen

Erstellen Sie eine App, die Sensordaten sammelt

Sensoren und Mikrocontrollers.

Eine webbasierte API

Eine adaptive Schnittstelle.

Was kommt als nächstes?

wie man - Die beliebtesten Artikel

Wie man eine Ebene in Photoshop umdreht: einen vollständigen Anleitung

Beginnen Sie mit Arttrage

Facebook-Datenschutzeinstellungen: So halten Sie Ihr Profil privat

So erstellen Sie ein App-Symbol in Illustrator

Malen Sie eine klassische Märchen-Szene mit Procreate

Wie man in Kino 4d skulpt

So erstellen Sie Ihre eigenen Leinwandbretter

Erstellen Sie 3D-Kleidung mit realistischen Falten und Falten

Kategorien