Maak een app die sensorgegevens verzamelt

Sep 13, 2025

Procedures

Tegenwoordig genieten betaalbare platforms voor het ontwikkelen van onderling verbonden producten een wijdverspreide beschikbaarheid, en we hebben een push voor verhoogde JavaScript-ondersteuning in IoT-technologieën gezien, met krachtige bedrijven zoals IBM, Google, Intel, Microsoft en Cisco die API's openen voor hun producten. Het resultaat is een uitgebreid ecosysteem van micro-controllers, dataloggers die zijn aangesloten op cloudservices en aanpasbare interfaces die gegevens in realtime parseren, die nieuwe kansen presenteren voor ontwerpers met client-side webvaardigheden.

De 13 beste iPad-apps voor Pro Designers

Met dat in gedachten is het doel van deze tutorial om iets te ontwerpen en te bouwen dat niet alleen 'netjes' is, maar nuttig is in de echte wereld: een onderling verbonden product (of service) dat weergegevens van een sensor naar een lokale webserver uploadt en geeft deze gegevens in een adaptieve gebruikersinterface in realtime weer. Dit project illustreert hoe we kunnen breken van directe manipulatie in het UI-ontwerp, en toont een aantal manieren waarop ontwerpers hun prototypingtechnieken kunnen nemen die verder gaan dan webservers en platte ontwerpen.

Kijk eens naar de bronbestanden Voor deze tutorial

Sensoren en microcontrollers

Voor deze tutorial gebruiken we de Arduino Microcontroller. Dit is een populaire keuze dankzij een goedkope prijs, eenvoudige ontwikkelingskit en veel online ondersteuning. Als u uw microcontroller op uw computer wilt instellen, downloadt u de ontwikkelingsomgeving (de IDE-optie) hier De microcontroller plugt op uw computer met een USB-kabel die het ook bevoegd is. Arduino-code staat bekend als schetsen, die zijn geschreven in C ++-gebaseerde code om gegevens uit sensoren te ontleden.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Onze monsteraanvraag omvat een sensor (1), microcontroller (2), web-API (3) en een adaptieve UI (4)

Omdat we een app ontwerpen die weergegevens leest, heb ik de LM35-temperatuursensor gebruikt. Dit is een goede, betaalbare optie, maar net zoals met microcontrollers zijn er genoeg om uit te kiezen. Stel de LM35-sensor in, samen met jumperdraden en breadboard volgens Deze instructies

De microcontroller werkt met een schetsbestand dat een gegevensfeed van de LM35-temperatuursensor rechtstreeks in uw lokale bestandssysteem maakt. Om dit in te stellen, moet u eerst een variabele declareren om analoge gegevens van de sensor te houden (een variabele is een manier om een waarde te benoemen en op te slaan voor later gebruik door het programma - in dit geval data van een sensor).

Verklaar een setup () -functie die communiceert met de seriële poort in uw laptop. Dit wordt gebeld wanneer een Arduino-schets begint, en het zal opslaan naar het serienaam. De seriële poort wordt gebruikt voor communicatie tussen het Arduino-bord en uw laptop.

Vervolgens moeten we de baudrate instellen - het tarief waarop informatie wordt overgedragen. We willen een snelheid van 9600, wat betekent dat de seriële poort in staat is om een maximum van 9600 bits per seconde uit het signaal te overbrengen, van oorsprong uit de LM35-temperatuursensor, die door de USB-kabel in uw laptop reist. Converteer de opgenomen onbewerkte sensorgegevens eerst in temperatuurindeling, dan van gehele getal naar tekst die in JSON moet worden ingevoegd en in het geheugen gehouden.

Eindelijk, loop de bovenstaande functie, zodat de sensor continu temperatuurgegevens verzamelt. De Arduino Microcontroller loopt ononderbroken op de achtergrond, het verzamelen van temperatuurgegevens in de seriële poort van uw laptop.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Een typische Arduino-opzet, bestaande uit kabels, draden, pinnen, sensoren en een USB-laptopverbinding

Een web-gebaseerde API

Zodra de temperatuurwaarde is opgenomen in het geheugen, moet er een tijdstempel aan worden toegevoegd voordat het in het JSON-formaat wordt ingevoerd. Om te beginnen, moeten we de locatie opzetten waar het JSON-bestand zich zal bevinden en dat bestand op te openen op korte tussenpozen om de metingen toe te voegen.

Het is mogelijk om dit te bereiken met behulp van geavanceerde webservertechnologie, maar dit is buiten de reikwijdte van dit artikel en neemt ons weg naar verschillende raaklijnen. Omwille van de eenvoud zullen we de verwerking gebruiken om de sensorgegevens te ontleden, maar er zijn veel up-and-coming, robuuste JS-gebaseerde webserverprogrammeringstechnologieën die kunnen worden gebruikt om de sensorgegevens van het seriële poortgeheugen in te verkrijgen elke webserver of de cloud ( kijk hier

Verwerking gebruikt een schetsbestand om gegevens te krijgen die door Arduino worden verzonden door naar gegevens in de seriële poort te luisteren en een tekenreeks te retourneren om de metingen vast te houden. Het maakt ook gebruik van een draw-functie (), die continu de lijnen van de code in zijn blok voert - in dit geval de waarden van de seriële poort innemen, een tijdstempel toevoegen en afdrukken in een tekstbestand dat eindigt in een vergelijkbare JSON-structuur tot ["18:05:53", 43.00].

Uiteindelijk eindigen we met een systeem dat slechts één temperatuursensor, microcontroller en webserver bevat. Dit is een prototype voor een groter data-acquisitiesysteem dat bestaat uit sensornetwerken en de cloud, die een echt wereldproduct of -service vertegenwoordigt.

Een adaptieve interface

Op dit moment willen we een eenvoudige UI samenstellen met een single-pagina-applicatie (spa) starter-pakket en een op JS gebaseerd gereedschap zoals reageren of hoekig. Ik heb reageer gereageerd omdat het het gemakkelijk maakt om te beschrijven wat de browser zou moeten maken, verwijdert veel lawaai bij het bouwen van de DOM in de browser en bindt de gegevens van elke API erg snel. Ook, in plaats van het opnieuw weer te geven aan de hele DOM, werkt het alleen de UI-elementen die zijn gewijzigd, wat geweldig is voor prototyping.

Als u begint met uw UI, installeert u eerst de spa met een van de vele online startpakketten die online beschikbaar zijn. Een zeer handige is de boilerplaat van het web-app Reageer kit Zodra u uzelf vertrouwd bent met de bestandsstructuur, moet u een nieuwe component instellen die toegang heeft tot de JSON-feed in de lokale webserver of een cloudservice en de gegevens voor het display verwerkt.

In React, is Setstate de hoofdmethode die wordt gebruikt om UI-updates te activeren. Wijzigingen worden geactiveerd door Event Handlers of Server-callbacks en hoeven vervolgens correct te worden geïmplementeerd om het JSON-bestand te lezen. Ten slotte definiëren we de variabele metingen om de geparseerde gegevens te houden, en de & lt; lezingslijst / & GT; Tag in de rendermethode om de UI-component te vertegenwoordigen die de visualisatie dient:

 LoadPathSdata () {
  This.SetState ({gegevens: gegevens});


loadinitialstate () {
  Retourneer {gegevens: {metingen: []}};


componentwillmount () {
  deze.Loadpathsdata ();


render () {
  terug (
    & LT; DIV & GT;
      & LT; lezingslijst-gegevens = {this.state.data} / & GT;
    & LT; / DIV & GT;
  
}

Definieer de UI-component van de lezingslijst om de metingen van het eerder gemaakte JSON-bestand vast te houden. Voeg een nieuwe klasse (lezingslijst) rechtstreeks boven de klassendefinitie toe. Reageer gebruikt de rendermethode om de virtuele weergave van een inheemse DOM-component (zoals het & LT; DIV / & GT; hieronder) of een andere gedefinieerde component te implementeren. Als gevolg hiervan hebben we een UI-component die de JSON-metingen weergeeft:

 VAR-lezingslijst = react.createclass ({
  render: functie () {
    terug (
      & LT; DIV & GT;
      
      & LT; / DIV & GT;
    
  
});

Combineer dynamische CSS-verklaringen met datamoewijzingen om de metingen in de browser in te stellen.

U kunt op korte tussenpozen opgefrissen op het niveau van de component of browser. Dit kan worden gedaan met behulp van de meer robuuste reactupportfunctie (die de reactie vertelt, moet opnieuw worden uitgevoerd () hierboven door kracht -Update te bellen), of geïmplementeerd in de JADE-sjabloon weergave met een basis-setInterval-functie.

Bij het opnieuw laden van de spa, lopen alle componenten de temperatuurmetingen in realtime opnieuw aangezien de JS en CSS dynamisch worden gecombineerd in een visualisatie van cross-apparaat. Het resultaat wordt weergegeven in de onderstaande afbeelding.

The final interface shows the temperature readings from the sensor, and updates in real time — De definitieve interface toont de temperatuurmetingen van de sensor en updates in realtime

Wat is het volgende?

De Basic IoT-prototypingconcepten geïllustreerd in dit artikel kunnen worden gebouwd om onderling verbonden producten of diensten te ontwerpen die dynamische gegevens nuttig en bruikbaar maken in adaptieve UIS, of deze worden geserveerd in een mobiel apparaat, kleiner beeldscherm of zelfs een interactief tv-scherm. Basic Web Development-vaardigheden kunnen worden genomen buiten webservers en flatscreen-interfaces door middel van open webtechnologieën waarmee we al bekend zijn.

Webprofessionals beginnen praktische manieren te verkennen om met datarrays te werken die afkomstig zijn in sensoren en dan een gebruikersinterface hebben ontworpen om hen heen. Deze verkenningen bieden nieuwe manieren om na te denken over gegevens en design in onderling verbonden producten, waarin CSS niet alleen over stijlen maar een voertuig is door middel om zinvolle verbindingen tussen mensen en gegevens te creëren. Er is ook veel te experimenteren met in nieuwe en aankomende CSS-gebaseerde technologieën die CSS-verklaringen koppelen met gegevenselementen om digitale ervaringen te verbeteren, inclusief browserweergavetechnieken.

Gegevens zijn overal om ons heen en we hebben een unieke kans om het te gebruiken om de ongeziene te zien, en haken voor het schrijven in CSS via JavaScript ... we hebben het over vermindering van wrijving en het maken van een naadloos contactpunt tussen mensen en elk digitaal product. De goedkeuring van JavaScript in IoT-platforms suggereert dat CSS nog steeds een primaire stylingtool van keuze is voor op Javascript gebaseerde klanten of webbrowsers van alle maten voor een tijdje.

Dit artikel verscheen oorspronkelijk in netto tijdschrift uitgave 289; koop het hier

Gerelateerde artikelen:

De rol van ontwerp op het internet der dingen
Waarom zou je Design Denken moeten omarmen
5 Essentiële CHATBOT-leermiddelen

Maak een app die sensorgegevens verzamelt

Sensoren en microcontrollers

Een web-gebaseerde API

Een adaptieve interface

Wat is het volgende?

Procedures - Meest populaire artikelen

Gebruik Adobe XD om micro-interacties te maken

Bouw een clientportaal met WordPress

Hoe een teken in pen en inkt te tekenen

17 manieren om betere wezens te tekenen

Easy Posing Techniques voor 3D-modellen

Adobe Capture CC gebruiken

4 Essential Image Optimization Tips

Hoe maak je 3D-belettering in Illustrator

Categorieën