Opret en app, der samler sensordata

Sep 13, 2025

hvordan

I dag nyder overkommelige platforme til udvikling af sammenkoblede produkter udbredt tilgængelighed, og vi har set et skub for øget JavaScript-support i IOT-teknologier, med stærke virksomheder som IBM, Google, Intel, Microsoft og Cisco åbner API'er til deres produkter. Resultatet er et udvidet økosystem af mikrocontrollere, dataloggere, der er tilsluttet Cloud Services og tilpasningsfulde grænseflader, der analyserer data i realtid, som alle præsenterer nye muligheder for designere med web-færdigheder.

De 13 bedste iPad apps til pro designere

Med det i tankerne er formålet med denne tutorial at designe og bygge noget, der ikke er bare 'pænt', men er nyttigt i den virkelige verden: et sammenkoblet produkt (eller service), der uploader vejrdata fra en sensor til en lokal webserver , og viser disse data i en adaptiv brugergrænseflade i realtid. Dette projekt illustrerer, hvordan vi kan bryde væk fra direkte manipulation i UI Design, og demonstrerer, at nogle måder designere kan tage deres prototypingsteknikker ud over webservere og flade designs.

Tag et kig på kilde filer for denne vejledning .

Sensorer og mikrocontrollers.

For denne vejledning bruger vi Arduino Microcontroller. Dette er et populært valg takket være en billig pris, Easy Development Kit og masser af online support. For at oprette din mikrocontroller på din computer skal du downloade udviklingsmiljøet (IDE-indstillingen) her . Mikrocontrolleren sætter ind i din computer med et USB-kabel, der også styrker det. Arduino-kode er kendt som skitser, som er skrevet i C ++ -baseret kode for at analysere data, der kommer ind fra sensorer.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Vores prøveapplikation omfatter en sensor (1), mikrocontroller (2), Web API (3) og en adaptiv UI (4)

Da vi designer en app, der læser vejrdata, har jeg brugt LM35 temperatursensoren. Dette er en god, overkommelig løsning, men ligesom med mikrocontrollere er der masser at vælge imellem. Oprette LM35-sensoren, sammen med jumperledninger og brødbræt efter disse instruktioner .

Mikrocontrolleren arbejder med en skitsefil, der opretter et datafeed fra LM35-temperaturføleren direkte i dit lokale filsystem. For at indstille dette, skal du først erklære en variabel for at holde analoge data fra sensoren (en variabel er en måde at nævne og lagre en værdi til senere brug af programmet - i dette tilfælde data fra en sensor).

Erklære en opsætning () funktion, der kommunikerer med seriel port i din bærbare computer. Dette kaldes, når en arduino skitse starter, og den vil optage til serielt vindue. Serienhavnen bruges til kommunikation mellem Arduino Board og din bærbare computer.

Dernæst skal vi indstille baudrate - den hastighed, hvormed information overføres. Vi ønsker en hastighed på 9600, hvilket betyder, at seriel port er i stand til at overføre maksimalt 9600 bits pr. Sekund fra signalet, med oprindelse i LM35-temperaturføleren, der rejser gennem USB-kablet i din bærbare computer. Konverter de indfangede rå sensordata først i temperaturformat, så fra heltal til tekst, der skal indsættes i JSON og holdes i hukommelsen.

Endelig løkke ovenstående funktion, så sensoren samler temperaturdata kontinuerligt. Arduino Microcontroller vil løbe uafbrudt i baggrunden, indsamle temperaturdata i din bærbare computers serielle port.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — En typisk arduino-opsætning, der består af kabler, ledninger, stifter, sensorer og en USB-laptopforbindelse

En webbaseret API

Når temperaturaflæsningen er optaget i hukommelsen, skal en tidsstempel tilføjes til det, før den indsættes i JSON-formatet. For at begynde skal vi oprette det sted, hvor JSON-filen vil opholde sig, og åbne den pågældende fil med korte intervaller for at tilføje aflæsningerne.

Det er muligt at opnå dette ved hjælp af avanceret webserverteknologi, men det er uden for denne artikels anvendelsesområde og ville tage os væk i forskellige tangenter. Af hensyn til enkelheden vil vi bruge behandling til at analysere sensordataene, men der er mange up-and-coming, robuste JS-baserede webserverprogrammeringsteknologier, der kan bruges til at erhverve sensordataene fra seriel porthukommelsen i enhver webserver eller skyen ( Se her ).

Behandling bruger en skitsefil for at få data sendt af Arduino ved at lytte til data i seriel port og returnere en streng for at holde aflæsningerne. Det gør også brug af en tegning () funktion, som kontinuerligt udfører lineerne med kode indeholdt i sin blok - i dette tilfælde tager værdierne fra seriel port, tilføjer en tidsstempel og udskriver dem i en tekstfil, der slutter i en JSON-struktur lignende til ["18:05:53", 43.00].

Til sidst ender vi med et system, der indeholder kun en temperaturføler, mikrocontroller og webserver. Dette er en prototype til et større dataindsamlingssystem sammensat af sensornetværk og skyen, der repræsenterer en ægte verdensprodukt eller en tjeneste.

En adaptiv interface

På dette tidspunkt vil vi sammensætte en simpel brugergrænseflade med en single-side applikation (spa) starterpakke og et JS-baseret værktøj som reaktion eller vinkel. Jeg har valgt reagerer, fordi det gør det nemt at beskrive, hvad browseren skal gøre, fjerner en masse støj, når du bygger DOM i browseren og binder data fra enhver API meget hurtigt. Også i stedet for at genskabe hele DOM'en opdaterer den kun de UI-elementer, der er ændret, hvilket er fantastisk til prototyper.

For at komme i gang med din UI skal du først installere spaen ved hjælp af en af de mange starterpakker, der er tilgængelige online. En meget bekvem er Web App Boilerplate Reagere kit . Når du har kendskab til dig selv med filstrukturen, skal du oprette en ny komponent, der får adgang til JSON-feedet i den lokale webserver eller en sky-service og behandler dataene til Display.

I reaktion er SetState den vigtigste metode, der bruges til at udløse UI-opdateringer. Ændringer udløses af hændelseshåndterer eller serverforespørgsel tilbagekald, og skal derefter implementeres korrekt for at læse JSON-filen. Endelig definerer vi de variable aflæsninger for at holde de parsede data, og The & LT; aflæsningslisten / GT; Tag i Render-metoden til at repræsentere UI-komponenten, der tjener visualiseringen:

 loadpathsdata () {
  dette.setstate ({data: data});
}

loadinitialstate () {
  Returner {Data: {Lægninger: []}};
}

komponentwillmount () {
  this.LOODPATHSDATA ();
}

render () {
  Vend tilbage (
    & lt; div & gt;
      & lt; aflæsningsliste data = {this.state.Data} / & gt;
    & lt; / div & gt;
  );
}

Definer aflytningslisten UI-komponenten for at holde aflæsningerne fra den tidligere oprettede JSON-fil. Tilføj en ny klasse (aflæsningsliste) direkte over klassesdefinitionen. React anvender Render-metoden til at implementere den virtuelle repræsentation af en native DOM-komponent (såsom LT; DIV / GT; nedenfor) eller en anden defineret komponent. Som følge heraf har vi en UI-komponent, der viser JSON-aflæsningerne:

 VAR aflæsningsliste = React.createClass ({
  Render: Funktion () {
    Vend tilbage (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Kombiner dynamiske CSS-erklæringer med data-mappings for at style aflæsningerne i browseren.

Du kan tvinge opdateret på enten komponent- eller browserniveauet med korte intervaller. Dette kan gøres ved hjælp af den mere robuste reagert kraftupdate-funktion (som fortæller reagerer, det skal re-runere render () ovenfor ved at kalde kraftupdate) eller implementeres i jade-skabelonen, der gør det med en grundlæggende setinterval-funktion.

Ved genoptagelse af spaen genindlæser alle komponenter temperaturaflæsningerne i realtid, da JS og CSS kombineres dynamisk i en tværindretning visualisering. Resultatet er vist i billedet nedenfor.

The final interface shows the temperature readings from the sensor, and updates in real time — Den endelige grænseflade viser temperaturaflæsningerne fra sensoren og opdateringer i realtid

Hvad er næste?

De grundlæggende IOT-prototypingskoncepter, der er illustreret i denne artikel, kan bygges på for at designe sammenkoblede produkter eller tjenester, der gør dynamiske data nyttige og brugbare i Adaptive UIS, uanset om disse serveres i en mobilenhed, mindre skærm eller endda en interaktiv tv-skærm. Grundlæggende webudvikling færdigheder kan tages ud over webservere og fladskærmsgrænseflader gennem åbne webteknologier, vi allerede er bekendt med.

Web-fagfolk begynder at udforske praktiske måder at arbejde med dataarrayer, der stammer fra sensorer, og derefter har en brugergrænseflade designet omkring dem. Disse udforskninger tilbyder nye måder at tænke på data og design i sammenkoblede produkter, hvor CSS ikke kun handler om stilarter, men et køretøj, hvorigennem at skabe meningsfulde forbindelser mellem mennesker og data. Der er også meget at eksperimentere med nye og kommende CSS-baserede teknologier, der parrer CSS-erklæringer med dataelementer for at forbedre digitale oplevelser, herunder browsergengivelsesteknikker.

Data er alle omkring os, og vi har en enestående mulighed for at bruge den til at se de usete og skrive kroge til det i CSS gennem JavaScript ... Vi taler om at mindske friktion og skabe et sømløs kontaktpunkt mellem mennesker og ethvert digitalt produkt. Vedtagelsen af JavaScript i IOT-platforme tyder på, at CSS stadig vil være et primært stylingværktøj til valg til JavaScript-baserede klienter eller webbrowsere af alle størrelser i et stykke tid.

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 289; Køb det her !

Relaterede artikler:

Designets rolle på internettet af ting
Hvorfor skal du omfavne designtænkning
5 Essential Chatbot Learning Resources

Opret en app, der samler sensordata

Sensorer og mikrocontrollers.

En webbaseret API

En adaptiv interface

Hvad er næste?

hvordan - Mest populære artikler

22 bedste UI designværktøjer

Kom godt i gang med Adobe Dimension CC

Tilføj ui animationer til dit websted

Hvad er en terminatorlinie?

Opret et fliser materiale i stofdesigner

Opret interaktive 3D-visualer med tre.js

Fremskynde din 3D-modellering

Kom i gang med prototyping i Adobe XD

Kategorier