Luo sovellus, joka kerää anturitietoja

Sep 16, 2025

Miten tehdään

Tänään edulliset foorumit yhdistää yhteenliitettyjä tuotteita, jotka nauttivat laajalle levinneestä saatavuudesta, ja olemme nähneet painopisteen JavaScript-tukea IOT Technologiesissa, joilla on tehokkaita yrityksiä, kuten IBM, Google, Intel, Microsoft ja Cisco avaamalla API: t tuotteilleen. Tuloksena on laajennettu mikroohjaimien ekosysteemi, pilvipalveluihin liitetyt datasulakkeet ja sopeutuneet rajapinnat, jotka jäsenttävät tietoja reaaliaikaisesti, kaikki esittelevät uusia mahdollisuuksia suunnittelijoille, joilla on asiakaspuoliset web-taidot.

Pro suunnittelijoiden 13 parasta iPad-sovellusta

Tämän mielessä tämän opetusohjelman tavoitteena on suunnitella ja rakentaa jotain, joka ei ole vain "siisti", mutta on hyödyllinen todellisessa maailmassa: yhteenliitetty tuote (tai palvelu), joka lataa säätiedot anturista paikalliseen web-palvelimeen ja näyttää nämä tiedot adaptiivisessa käyttöliittymässä reaaliajassa. Tämä hanke havainnollistaa, miten voimme katkaista suoraa manipulaatiota UI-suunnittelussa ja osoittaa, että suunnittelijat voivat ottaa prototyyppitekniikat Web-palvelimien ja tasainen malleja.

Katsokaa Lähdetiedostot Tähän opetusohjelmaan .

Anturit ja mikrokontrollerit

Tätä opetusohjelmaa käytämme Arduinon mikrokontrolleriä. Tämä on suosittu valinta halvan hinnan ansiosta helppo kehityspaketti ja paljon online-tukea. Voit määrittää mikrokontrollerin tietokoneellesi ladata kehitysympäristö (IDE-vaihtoehto) tässä . Microcontroller-liitännät tietokoneeseen USB-kaapelilla, joka myös toimittaa sen. Arduino-koodi tunnetaan luonnoksi, jotka on kirjoitettu C ++ -pohjaiseen koodiin, jotta voidaan jäsentää antureista tulevia tietoja.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Näyttekohakemuksemme käsittää anturin (1), mikrokontrollerin (2), Web API: n (3) ja adaptiivisen UI: n (4)

Kun suunnittelemme sovelluksen, joka lukee säätietoja, olen käyttänyt LM35-lämpötila-anturia. Tämä on hyvä, kohtuuhintainen vaihtoehto, mutta aivan kuten mikrokontrollereiden kanssa on paljon tekemistä. Aseta LM35-anturi sekä jumperjohdot ja leipälevy Nämä ohjeet .

Mikrokontrolleri toimii luonnostiedostolla, joka luo datan syötteen LM35-lämpötila-anturista suoraan paikalliseen tiedostojärjestelmään. Aseta tämä ylös, ensin sinun on ilmoitettava muuttuva, jotta analogiset tiedot anturista (muuttuja on tapa nimetä ja tallentaa arvo myöhempää käyttöä varten - tässä tapauksessa anturin tiedot).

Ilmoittakaa setup () -toiminto, joka kommunikoi kannettavan tietokoneen sarjaportin kanssa. Tätä kutsutaan, kun Arduino-luonnos alkaa, ja se tallentaa sarjaikkunaan. Sarjaporttia käytetään kommunikointiin Arduino-aluksen ja kannettavan tietokoneen välillä.

Seuraavaksi meidän on asetettava baudinopeus - nopeus, jolla tiedot siirretään. Haluamme nopeuden 9600, mikä tarkoittaa, että sarjaportti pystyy siirtämään enintään 9600 bittiä sekunnissa signaalista, joka on peräisin LM35-lämpötila-anturista, joka kulkee USB-kaapelin kautta kannettavaan tietokoneeseen. Muunna kaapattu raaka-anturitiedot ensin lämpötilamuotoon, sitten kokonaislukuista, jotka on asetettu JSON: hen ja pidetään muistiin.

Lopuksi, silmukan edellä mainittu toiminto niin anturi kerää lämpötilatietoja jatkuvasti. Arduino mikrokontroller toimii keskeytyksettä taustalla, kerätä lämpötilatietoja kannettavan tietokoneen sarjaporttiin.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Tyypillinen arduino-asennus, joka koostuu kaapeleista, johdoista, nastat, anturit ja USB-kannettava tietokone

Web-pohjainen API

Kun lämpötilan lukema tallennetaan muistiin, siihen on lisättävä aikaleima ennen sen asettamista JSON-muotoon. Aluksi meidän on perustettava sijainti, jossa JSON-tiedosto asuu ja avata kyseisen tiedoston lyhyillä aikaväleillä lukemien liittämiseksi.

Tämä on mahdollista saavuttaa käyttämällä kehittynyttä web-palvelintekniikkaa, mutta tämä on tämän artikkelin soveltamisalan ulkopuolella ja vie meidät pois eri tangentteihin. Yksinkertaisuuden vuoksi käytämme jalostusta anturin tietojen jäsentämiseksi, mutta on olemassa paljon ylöspäin ja tulevia, vankkoja JS-pohjaisia web-palvelimen ohjelmointitekniikoita, joita voidaan käyttää anturitietojen hankkimiseen sarjaportin muistista Mikä tahansa web-palvelin tai pilvi ( Katso tästä ).

Käsittely käyttää luonnostiedostoa, jotta voit saada tietoja Arduinon lähettämillä tiedoilla kuuntelemalla tietoja sarjaporttiin ja palauttamalla merkkijonon pitämään lukemat. Se käyttää myös vedon () -funktiota, joka suorittaa jatkuvasti sen lohkon sisältämän koodin linjat - tässä tapauksessa ottamalla arvot sarjaporttiin, lisäämällä aikaleiman ja tulostamaan ne tekstitiedostoon, joka päättyy JSON-rakenteeseen ["18:05:53", 43.00].

Lopulta pääsemme järjestelmään, joka sisältää vain yhden lämpötila-anturin, mikrokontrollerin ja web-palvelimen. Tämä on prototyyppi suuremmalle tiedonhankintajärjestelmille, joka koostuu anturiverkosta ja pilvestä, joka edustaa todellista maailmanlaajuista tuotetta tai palvelua.

Adaptiivinen käyttöliittymä

Tässä vaiheessa haluamme koota yksinkertaisen UI yhden sivun sovelluksen (SPA) käynnistyspaketin ja JS-pohjaisen työkalun, kuten reagoida tai kulma. Olen valinnut reagoivan, koska se on helppo kuvata, mitä selaimen pitäisi tehdä, poistaa paljon kohinaa, kun rakennetaan DOM-levyä selaimessa ja sitoo tietoja mistä tahansa API: stä erittäin nopeasti. Myös koko DOM: n uudelleen, se päivittää vain UI-elementit, jotka ovat muuttuneet, mikä on hienoa prototyyppiin.

Aloittaminen UI: n kanssa asenna ensin kylpylä jollakin monista käynnistyspaketeista verkossa. Erittäin kätevä on web-sovelluksen kattila Reagoida . Kun olet tutustunut tiedostorakenteeseen, sinun on perustettava uusi komponentti, joka käyttää JSON-syötettä paikallisessa verkkopalvelimessa tai pilvipalvelussa ja käsittelee näytön tiedot.

Reagoiessa seastote on tärkein menetelmä, jota käytetään UI-päivityksiä. Muutokset laukaisevat tapahtumakäsittelijät tai palvelimen pyytävät soittopyyntöjä ja sitten on toteutettava oikein JSON-tiedoston lukeminen. Lopuksi määritämme vaihtelevat lukemat, jotka pitävät jäsennetyt tiedot ja & lt; lukematList / & gt; Merkitse render-menetelmä edustaa UI-komponenttia, joka palvelee visualisointia:

 loadpathsdata () {
  tämä.SetState ({Data: Data});
}

loadinitialstate () {
  Palauta {Tiedot: {lukemat: []}};
}

ComponentWillmount () {
  Tämä.LoadPathsData ();
}

render () {
  Paluu (
    & lt; div & gt;
      & lt; lukematList Data = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Määritä lukematList UI -komponentti pitämään lukemat aiemmin luotu JSON-tiedostosta. Lisää uusi luokka (lukulista) suoraan luokan määritelmän yläpuolelle. React käyttää Render-menetelmää toteuttamaan alkuperäisen dom-komponentin (kuten & lt; div / & gt; alla) tai minkä tahansa muun määritellyn komponentin virtuaalisen esityksen. Tämän seurauksena meillä on UI-komponentti, joka näyttää JSON-lukemat:

 var Rightingslist = reagoida.createclass ({
  Render: Toiminto () {
    Paluu (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Yhdistä dynaamiset CSS-ilmoitukset, joissa on datakartoitukset selaimen lukemien tyyliin.

Voit pakottaa joko komponentin tai selaimen tasolla lyhyillä väliajoin. Tämä voidaan tehdä käyttämällä voimakkaampaa reagoivaa FADEPDATE-toimintoa (joka kertoo reagoivan sen on suoritettava uudelleentarkastus () ylläpitämällä FACKUPDATE) tai toteutettu Jade-mallin tekemällä perusasetuksella.

Kylpylän käynnistämisessä kaikki komponentit lataavat lämpötilamerkit reaaliaikaisesti, kun JS ja CSS yhdistetään dynaamisesti ristikkäisen visualisoinnissa. Tulos näkyy alla olevassa kuvassa.

The final interface shows the temperature readings from the sensor, and updates in real time — Lopullinen käyttöliittymä näyttää lämpötilan lukemat anturista ja päivitykset reaaliaikaisesti

Mitä seuraavaksi?

Tässä artikkelissa esitetyt perus IOT Prototyypointikonseptit voidaan rakentaa yhteenliitettyjen tuotteiden tai palveluiden suunnittelussa, jotka tekevät dynaamisia tietoja käyttökelpoisiksi ja käyttökelpoisiksi Adaptive UIS: ssä, onko niitä palvelemaan mobiililaitteessa, pienemmässä näytössä tai jopa vuorovaikutteisella TV-näytöllä. Perusverkkokehitysosaaminen voidaan ottaa pois Web-palvelimien ja taulukoneen rajapintojen kautta avoimen web-teknologian kautta, joita olemme jo perehtynyt.

Web-ammattilaiset alkavat tutkia käytännöllisiä tapoja työskennellä antureissa peräisin olevien tietoryhmien kanssa ja sitten niiden ympärillä on käyttöliittymä. Nämä tutkimukset tarjoavat uusia tapoja ajatella tietoja ja muotoilua yhteenliitettyihin tuotteisiin, joissa CSS ei ole pelkästään tyylejä vaan ajoneuvo, jonka kautta luodaan mielekkäitä yhteyksiä ihmisten ja tietojen välillä. On myös paljon kokeilla uusia ja tulevia CSS-pohjaisia tekniikoita, jotka yhdistyvät CSS-ilmoituksiin tietoelementeillä digitaalisten kokemusten parantamiseksi, mukaan lukien selaimen renderointitekniikat.

Tiedot ovat kaikki ympärillämme, ja meillä on ainutlaatuinen mahdollisuus käyttää sitä näkemään näkymättömät ja kirjoituskoukut CSS: ssä JavaScriptin kautta ... Puhumme vähentämään kitkaa ja luomaan saumattoman yhteyspisteen ihmisten ja minkä tahansa digitaalisen tuotteen välillä. JavaScriptin käyttöönotto IOT Platformissa ehdottaa CSS: tä on edelleen ensisijainen muotoilu työkalu JavaScript-pohjaisille asiakkaille tai kaikenkokoisille web-selaimille jonkin aikaa.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti numero 289; Osta se täällä !

Aiheeseen liittyvät artikkelit:

Suunnittelun rooli asioiden internetissä
Miksi sinun pitäisi omaksua suunnittelu ajattelu
5 tärkeitä chatbot oppimisresursseja

Luo sovellus, joka kerää anturitietoja

Anturit ja mikrokontrollerit

Web-pohjainen API

Adaptiivinen käyttöliittymä

Mitä seuraavaksi?

Miten tehdään - Suosituimmat artikkelit

LINO PRINTMAING: Johdanto

Kuinka luoda videopelimerkki Zbrushissa

Kolme vaihetta kuohuviiniä taivas akvarellessa

4 Vinkkejä sivun suorituskyvyn parantamiseen

Tee realistiset 3D-hiukset ja turkikset 3DS max ja V-Ray

Kuinka luoda karvainen sarjakuvahahmo

Luo luonne, jossa on tyylitelty realismi

Prototyyppi Kelluva toimintopainike pixaateessa

Luokat