Opprett en app som samler sensordata

Sep 11, 2025

hvordan

[1. 3]

I dag nyter rimelige plattformer for å utvikle sammenkoblede produkter utbredt tilgjengelighet, og vi har sett et press for økt JavaScript-støtte i IOT-teknologier, med kraftige selskaper som IBM, Google, Intel, Microsoft og Cisco åpner APIer for sine produkter. Resultatet er et utvidet økosystem med mikro-kontroller, dataloggere som er koblet til skygtjenester, og tilpasningsdyktige grensesnitt som analyserer data i sanntid, som alle presenterer nye muligheter for designere med webferdigheter med klientside.

De 13 beste iPad-appene for pro-designere

Med det i tankene er målet med denne opplæringen å designe og bygge noe som ikke bare er "pent", men er nyttig i den virkelige verden: et sammenkoblet produkt (eller tjeneste) som laster opp værdata fra en sensor til en lokal webserver , og viser disse dataene i et adaptivt brukergrensesnitt i sanntid. Dette prosjektet illustrerer hvordan vi kan bryte seg bort fra direkte manipulasjon i UI-design, og demonstrerer noen måter designere kan ta sine prototypingsteknikker utover webservere og flate design.

Ta en titt på Kildefiler for denne opplæringen .

Sensorer og mikrokontroller

For denne opplæringen bruker vi Arduino Microcontroller. Dette er et populært valg takket være en billig pris, enkel utviklingssett og mye online support. For å sette opp mikrokontrolleren på datamaskinen, last ned utviklingsmiljøet (IDE-alternativet) her . Mikrokontrolleren plugger inn i datamaskinen din med en USB-kabel som også driver den. Arduino-koden er kjent som skisser, som er skrevet i C ++ - basert kode for å analysere data som kommer inn fra sensorer.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Vår prøveapplikasjon omfatter en sensor (1), mikrokontroller (2), web API (3) og en adaptiv UI (4)

Når vi designer en app som leser værdata, har jeg brukt LM35-temperaturføleren. Dette er et godt, rimelig alternativ, men akkurat som med mikrokontrollerne er det mye å velge mellom. Sett opp LM35-sensoren, sammen med jumpertråd og breadboard som per disse instruksjonene .

Mikrokontrolleren fungerer med en skisseringsfil som lager en datafilding fra LM35-temperatursensoren direkte inn i ditt lokale filsystem. For å sette opp dette, må du først erklære en variabel for å holde analoge data fra sensoren (en variabel er en måte å navngi og lagre en verdi for senere bruk av programmet - i denne saken fra en sensor).

Erklære en oppsett () -funksjon som kommuniserer med seriell port i den bærbare datamaskinen. Dette kalles når en Arduino Sketch starter, og det vil ta opp i serievinduet. Seriell port brukes til kommunikasjon mellom Arduino-bordet og den bærbare datamaskinen.

Deretter må vi sette baudrenten - frekvensen der informasjonen overføres. Vi ønsker en hastighet på 9600, som betyr at seriell port er i stand til å overføre maksimalt 9600 bits per sekund fra signalet, som kommer fra LM35-temperaturføleren, som kjører gjennom USB-kabelen i den bærbare datamaskinen. Konverter de fangede røde sensordataene først til temperaturformat, deretter fra heltall til tekst som skal settes inn i JSON og holdes i minnet.

Til slutt, sløyfe ovenstående funksjon, slik at sensoren samler temperaturdata kontinuerlig. Arduino Microcontroller vil kjøre uavbrutt i bakgrunnen, samle temperaturdata i din bærbare seriell port.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — En typisk Arduino-oppsett, bestående av kabler, ledninger, pinner, sensorer og en USB-bærbar tilkobling

En nettbasert API

Når temperaturavlesningen er registrert i minnet, må en tidsstempel legges til den før du setter den inn i JSON-formatet. For å begynne, må vi etablere stedet der JSON-filen vil bo, og åpne den filen med korte intervaller for å legge til avlesningene.

Det er mulig å oppnå dette ved hjelp av avansert webserverteknologi, men dette er utenfor omfanget av denne artikkelen og vil ta oss bort i forskjellige tangenter. For enkelhets skyld vil vi bruke behandling til å analysere sensordataene, men det er mange opp-og-kommer, robuste JS-baserte webserver programmeringsteknologier som kan brukes til å skaffe sensordataene fra seriell portminnet til enhver webserver eller skyen ( se her ).

Behandlingen bruker en skissefil for å få data sendt av Arduino ved å lytte til data i seriell port og returnere en streng for å holde avlesningene. Det gjør også bruk av en tegning () -funksjon, som kontinuerlig utfører linjene med kode som er inneholdt i blokken - i dette tilfellet tar verdiene fra seriell port, og legger til en tidsstempel og skriver ut dem i en tekstfil som slutter i en JSON-struktur som ligner til ["18:05:53", 43.00].

Til slutt ender vi med et system som inneholder bare en temperatursensor, mikrokontroller og webserver. Dette er en prototype for et større datainnsamlingssystem som består av sensornett og skyen, som representerer et ekte verdensprodukt eller en tjeneste.

Et adaptivt grensesnitt

På dette tidspunktet vil vi sette sammen en enkel brukergrensesnitt med en enkeltside-applikasjon (spa) startpakke og et JS-basert verktøy som reagere eller vinkel. Jeg har plukket reagert fordi det gjør det enkelt å beskrive hva nettleseren skal gjengi, fjerner mye støy når du bygger DOM i nettleseren, og binder data fra enhver API veldig fort. Også, i stedet for å gjenvinne hele DOM, oppdaterer den bare brukerne som har endret seg, som er flott for prototyping.

For å komme i gang med din brukergrensesnitt, må du først installere spaet ved hjelp av en av de mange startpakkene som er tilgjengelige på nettet. En veldig praktisk er Web App Boilerplate Reagere kit . Når du har kjent deg med filstrukturen, må du konfigurere en ny komponent som får tilgang til JSON-feeden i den lokale webserveren eller en skygtjeneste og behandler dataene for visning.

I reaksjonen er SetState hovedmetoden som brukes til å utløse UI-oppdateringer. Endringer utløses av hendelseshåndterere eller serverforespørsel tilbakeringinger, og må deretter implementeres på riktig måte for å lese JSON-filen. Til slutt definerer vi de variable avlesningene for å holde de analyserte dataene, og GT; ReadingsList / & GT; Merk i rendermetoden for å representere UI-komponenten som tjener visualisering:

 LoadPathsData () {
  this.setState ({data: data});
}

LoadinitialState () {
  returnere {data: {avlesninger: []}};
}

komponentwillmount () {
  dette.loadpathsdata ();
}

gjengi () {
  komme tilbake (
    & lt; div & gt;
      & lt; readingsList data = {this.State.data} / & gt;
    & lt; / div & gt;
  );
}

Definer ReadingsList UI-komponenten for å holde avlesningene fra den tidligere opprettede JSON-filen. Legg til en ny klasse (avlesningsliste) rett over klassefinisjonen. Reagere bruker gjengivelsesmetoden for å implementere den virtuelle representasjonen av en innfødt DOM-komponent (som for eksempel Div / & GT; nedenfor) eller annen definert komponent. Som et resultat har vi en UI-komponent som viser JSON-avlesningene:

 Var ReadingsList = React.CreateClass ({
  Render: Funksjon () {
    komme tilbake (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Kombiner dynamiske CSS-erklæringer med data mappings for å stille lesingene i nettleseren.

Du kan tvinge oppdatering på enten komponenten eller nettlesernivået med korte intervaller. Dette kan gjøres ved hjelp av den mer robuste reaktkvalitetsfunksjonen (som forteller reagerer det må gjenopplive gjengivelsen () ovenfor ved å ringe forceUpdate), eller implementert i Jade-malgjenvinningen med en grunnleggende setiseringsfunksjon.

Når du gjenoppretter spaet, laster alle komponentene temperaturavlesningene i sanntid, da JS og CSS kombineres dynamisk i en visualisering av tverrinnretningen. Resultatet vises i bildet nedenfor.

The final interface shows the temperature readings from the sensor, and updates in real time — Det endelige grensesnittet viser temperaturavlesningene fra sensoren, og oppdateringer i sanntid

Hva blir det neste?

De grunnleggende IOT-prototypingskonseptene som er illustrert i denne artikkelen, kan bygges på for å designe sammenkoblede produkter eller tjenester som gjør dynamiske data som er nyttige og brukbare i adaptiv UiS, om disse serveres i en mobil enhet, mindre skjerm eller til og med en interaktiv TV-skjerm. Grunnleggende webutviklingsferdigheter kan tas utover webservere og flatskjermgrensesnitt gjennom åpne webteknologier vi allerede er kjent med.

Webprofessorer begynner å utforske praktiske måter å jobbe med data arrays som kommer fra sensorer og har deretter et brukergrensesnitt som er designet rundt dem. Disse utforskninger tilbyr nye måter å tenke på data og design i sammenhengende produkter, der CSS ikke bare handler om stiler, men et kjøretøy som skal skape meningsfulle forbindelser mellom mennesker og data. Det er også mye å eksperimentere med i nye og kommende CSS-baserte teknologier som par CSS-erklæringer med dataelementer for å forbedre digitale erfaringer, inkludert nettleser som gir teknikker.

Data er rundt oss, og vi har en unik mulighet til å bruke den til å se de usynlige, og skrive kroker for det i CSS gjennom JavaScript ... Vi snakker om å redusere friksjon og skape et sømløst kontaktpunkt mellom mennesker og ethvert digitalt produkt. Vedtaket av JavaScript i IOT-plattformer tyder på CSS, vil fortsatt være et primært stylingverktøy for valg for JavaScript-baserte kunder eller nettlesere av alle størrelser for en stund.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 289; Kjøp det her !

Relaterte artikler:

Rollen som design på internett av ting
Hvorfor bør du omfavne designtanking
5 Viktige chatbot læringsressurser

Opprett en app som samler sensordata

Sensorer og mikrokontroller

En nettbasert API

Et adaptivt grensesnitt

Hva blir det neste?

hvordan - Mest populære artikler

Adobe Fresco Tutorial: Lag et portrett i maleriappen

Hvordan tegne en fugl

Få mer fra grafitt med disse tipsene

Hvordan lage glasur med akvarell

4 tips for å forbedre sidens ytelse

Hvordan bevege seg mellom Daz Studio og Zbrush

Mal et portrett som de gamle mestere

Lag en travel by scene i Illustrator

Kategorier