Hozzon létre egy olyan alkalmazást, amely érzékelőadatokat gyűjt

Sep 12, 2025

kézikönyv

Ma, megfizethető platformok fejlesztése összekapcsolt termékeink élvez széles körű hozzáférhetősége, és láttunk egy push fokozott JavaScript támogatás IoT technológiák erőteljes cégek, mint az IBM, a Google, az Intel, a Microsoft és a Cisco megnyitása API termékeiket. Az eredmény a mikro-vezérlők, a felhőszolgáltatásokhoz csatlakoztatott adatgyűjtők, valamint az adatok valós idejű adatainak adaptív interfészei, amelyek mindegyike új lehetőségeket mutat az ügyféloldali webes képességekkel rendelkező tervezők számára.

A 13 legjobb iPad alkalmazás a PRO-tervezők számára

Ezzel szem előtt tartva az e bemutató célja, hogy tervezzen és építsen valamit, ami nem csak "tiszta", hanem hasznos a valós világban: egy összekapcsolt termék (vagy szolgáltatás), amely feltölti az időjárási adatokat egy érzékelőtől egy helyi webszerverre , és megjeleníti ezt az adatokat egy adaptív felhasználói felületen valós időben. Ez a projekt azt szemlélteti, hogy hogyan tudunk elszakadni az UI design közvetlen manipulációjától, és bizonyítja, hogy a tervezők a webkiszolgálókon és lapos formatervezéseken túlmutató prototípus-technikákat képesek lehettetni.

Nézd meg a forrás fájlok Ehhez a bemutatóhoz .

Érzékelők és mikrokontrollerek

Ehhez az ARDUINO MICROCONTROLER-t használjuk. Ez egy népszerű választás az olcsó ár, az egyszerű fejlesztési készlet és sok online támogatásnak köszönhetően. A mikrokontroller beállításához a számítógépen töltse le a fejlesztési környezetet (az IDE opciót) itt . A mikrokontroller egy USB-kábellel csatlakozik a számítógéphez, amely szintén hatással van rá. Az Arduino kódot vázlatoknak nevezik, amelyeket C ++ alapú kódban írunk az érzékelőkből származó adatok elemzéséhez.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — A mintaalkalmazásunk egy érzékelőt (1), mikrokontroller (2), webes API-t (3) és egy adaptív felhasználói felületet (4)

Ahogy egy olyan alkalmazást tervezünk, amely időjárási adatokat olvas, az LM35 hőmérséklet-érzékelőt használtam. Ez egy jó, megfizethető opció, de csakúgy, mint a mikrokontrollerek, rengeteg választani kell. Állítsa be az LM35 érzékelőt, valamint a jumper vezetékeket és a kenyérlapot Ezek az utasítások .

A Microcontroller olyan vázlatfájllal működik, amely az LM35 hőmérséklet-érzékelőből származó adatbevitel közvetlenül a helyi fájlrendszerbe kerül. Ahhoz, hogy ezt állítsa be, először olyan változót kell kijelölnie, hogy az analóg adatokat az érzékelőből tartsa (a változó a program későbbi használatának értékének megnevezése és tárolása - Ebben az esetben az érzékelő adatai).

Írja ki a telepítő () funkciót, amely kommunikál a laptop soros portjával. Ezt úgy hívják, amikor egy Arduino vázlat kezdődik, és rögzíti a soros ablakot. A soros portot az Arduino-kártya és a laptop közötti kommunikációra használják.

Ezután be kell állítanunk az átviteli sebességet - az információ átvitelét. 9600-as sebességet akarunk, ami azt jelenti, hogy a soros port képes maximum 9600 bitre jutni másodpercenként az LM35 hőmérséklet-érzékelőből származó jelből, az USB kábelen keresztül az Ön laptopjába. A rögzített nyers érzékelő adatokat először a hőmérséklet formátumba konvertálja, majd az egész számból a JSON-ba behelyezve és a memóriában tartva.

Végül hurok a fenti funkciót, így az érzékelő folyamatosan összegyűjti a hőmérsékleti adatokat. Az ARDUINO MICROCONTROLER a háttérben megszakítás nélkül fut, és a laptop soros portjának hőmérsékletadatait gyűjti.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Egy tipikus Arduino beállítás, amely kábelből, vezetékekből, csapokból, érzékelőkből és USB laptop csatlakozásból áll

Webes API

Miután a hőmérsékletet a memóriában rögzítették, az időbélyegzőt hozzá kell adni hozzá, mielőtt behelyezné a JSON formátumba. Kezdjük, meg kell állapítanunk azt a helyet, ahol a JSON fájl lakik, és megnyitja ezt a fájlt rövid időközönként az olvasások hozzáadásához.

Lehetőség van erre a fejlett webkiszolgáló technológiával, de ez meghaladja a cikk hatályát, és különböző érintőképpen vesz részt. Az egyszerűség kedvéért a feldolgozást az érzékelő adatok elemzésére fogjuk használni, de sok olyan felfelé és eljövetel, robusztus JS-alapú webszerver programozási technológiák vannak, amelyek az érzékelő adatai beszerzésére használhatók a soros port memóriájából bármely webszerver vagy felhő ( lásd itt ).

Feldolgozás felhasználása egy vázlatot fájlt kap által küldött adatok Arduino hallgat adatokat a soros port és a visszatérő egy string, hogy tartsa az adatokat. Ezenkívül egy rajz () függvényt is használ, amely folyamatosan végrehajtja a blokk belsejében található kódvonalakat - ebben az esetben az értékeket a soros kikötőből, és egy időbélyegzőt és nyomtatásokat nyomtat egy szöveges fájlban, amely hasonló ["18:05:53", 43.00].

Végül olyan rendszerrel végezünk, amely csak egy hőmérséklet-érzékelőt, mikrokontrollert és webszervert tartalmaz. Ez egy prototípus egy nagyobb adatgyűjtő rendszer, amely az érzékelőhálózatokból és a felhőből áll, amely valódi világterméket vagy szolgáltatást képvisel.

Adaptív felület

Ezen a ponton egy egyszerű UI-t szeretnénk összeilleszteni egy lapos alkalmazással (SPA) indítócsomaggal és egy JS-alapú eszközzel, mint például a reagálni vagy a szögletes eszközzel. Kényeztem reagálni, mert könnyű leírni, hogy a böngészőnek meg kell adnia, sok zajt távolít el, amikor a DOM-t a böngészőben építi fel, és nagyon gyorsan kötődik az API-ből. Az egész DOM újraküldése helyett csak frissíti az UI elemeket, amelyek megváltoztak, ami nagyszerű a prototípusozáshoz.

Az UI-vel kezdve először telepítse a gyógyfürdőt az interneten elérhető számos indítócsomag segítségével. Egy nagyon kényelmes az internetes alkalmazás kazán Reagál . Miután megismerte magát a fájlstruktúrával, be kell állítania egy új összetevőt, amely hozzáfér a JSON FEED-hez a helyi webkiszolgálóban vagy a felhőszolgáltatásban, és feldolgozza az adatokat a kijelzőn.

Reakcióban a setstate az UI-frissítések kiváltására szolgál. A változtatásokat az eseménykezelők vagy a kiszolgáló kérése visszahívások indítják el, majd helyesen kell végrehajtani a JSON fájl elolvasásához. Végül meghatározzuk a változó méréseket, hogy tartsák az elemzett adatokat, és a & lt; readingslist / & gt; A megjelenítési módban lévő címke a megjelenítést szolgáló UI komponens ábrázolásához:

 LOADPATHSDATA () {
  ez.enstate ({DATA: DATA});
}

loadinitialstate () {
  Visszatérés {adatok: {Olvasmányok: []}};
}

komponenswillmount () {
  ez.loadPathsdata ();
}

Vakol() {
  Visszatérés (
    & lt; div & gt;
      & lt; readingslist adatok = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Határozza meg az olvasási lista ui összetevőt, hogy tartsa a leolvasásokat a korábban létrehozott JSON fájlból. Adjon hozzá egy új osztályt (olvasmánylistát) közvetlenül az osztálymeghatározás felett. A reakciót a renderelési módszert használja a natív dom komponens virtuális ábrázolásának (például a & lt; div / & gt; alább) vagy bármely más meghatározott komponens virtuális ábrázolásának megvalósítására. Ennek eredményeként van egy UI komponense, amely megjeleníti a JSON-olvasmányokat:

 Var ReadingsList = reagálás.Createclass ({
  Render: Funkció () {
    Visszatérés (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Keverjük össze a dinamikus CSS nyilatkozatok adatokkal leképezések stílus leolvasott a böngészőben.

A komponens vagy a böngésző szintjén rövid időközönként frissítheti. Ezt meg lehet tenni az erőteljesebb reagál forceUpdate funkció (ami megmondja reagál azt kell újra futni render () meghívásával fenti forceUpdate), vagy végre a Jade Sablonmegjelenítő bázikus setInterval funkciót.

A gyógyfürdő újraindításakor az összes komponens újratölti a hőmérséklet-leolvasásokat valós időben, mivel a JS és a CSS-t dinamikusan dinamikusan kombinálják egy kereszteződéses vizualizációban. Az eredmény az alábbi képen látható.

The final interface shows the temperature readings from the sensor, and updates in real time — A végső felület mutatja az érzékelő hőmérséklet-leolvasását, és valós időben frissíti

Mi a következő lépés?

Az alapvető tárgyak internete prototípus fogalmak azt ebben a cikkben építhető kialakítása érdekében egymáshoz kapcsolódó termékek vagy szolgáltatások, amelyek a dinamikus adatok hasznos és használható adaptív UI, hogy ezek szolgálnak fel egy mobil eszköz, kisebb kijelző, vagy akár interaktív TV képernyőjén. Alapvető webfejlesztés készségek lehet venni túl webszerverek és síkképernyős interfészek nyílt webes technológiák vagyunk már ismeri.

A webes szakemberek elkezdenek felfedezni az érzékelőkből származó adathordozókkal való gyakorlati módjait, majd a körülötte lévő felhasználói felületet. Ezek a feltárások új gondolkodási módokat kínálnak az adatok és a tervezés az összekapcsolt termékekben, amelyben a CSS nem csak a stílusokról szól, hanem olyan jármű, amelyen keresztül értelmes kapcsolatokat hozhat létre az emberek és az adatok között. Sokat kell kísérleteznie az új és közelgő CSS-alapú technológiákban, hogy pár CSS nyilatkozatok adatelemekkel a digitális tapasztalatok fokozására, beleértve a böngésző-renderelési technikákat is.

Az adatok körülöttünk vannak, és egyedülálló lehetőségünk van arra, hogy használhassuk a láthatatlanságot, és írjunk horgokat a CSS-ben a JavaScript-en keresztül ... a súrlódás és a zökkenőmentes érintkezési pont létrehozásáról és bármilyen digitális termék között. A JavaScript a IoT platformokon történő elfogadása azt sugallja, hogy a CSS továbbra is elsődleges stílusú választási eszköz a JavaScript-alapú ügyfelek vagy az összes méretű web böngészők számára.

Ez a cikk eredetileg megjelent net magazin 289. kiadás; Vásárolja meg itt !

Kapcsolódó cikkek:

A tervezés szerepe az interneten
Miért kell magában foglalnia a tervezési gondolkodást
5 Essential Chatbot tanulási erőforrások

Hozzon létre egy olyan alkalmazást, amely érzékelőadatokat gyűjt

Érzékelők és mikrokontrollerek

Webes API

Adaptív felület

Mi a következő lépés?

kézikönyv - Most Popular Articles

Vegyes média művészeti bemutató: hogyan lehet az akvarell a digitális grafika felett

10 csodálatos dolog, amit a rétegekkel tehetsz

Hogyan festhetsz egy várlat vázlatot

Festeni egy Sci-Fi játékot a Photoshopban

Állattenyésztés létrehozása Corel festőben

11 Tippek egy vizes táj létrehozásához 3D-ben

A részecskéket 3D-s splash létrehozásához használjuk

Top tippek az expresszív kezek festéséhez

Kategóriák