Vytvoření aplikace, která shromažďuje data senzorů

Sep 12, 2025

jak

Dnes, cenově dostupné platformy pro rozvoj propojených produktů se těší širokou dostupnost, a jsme viděli push pro zvýšení podpory JavaScriptu v IOt technologiích, s výkonnými společnostmi, jako je IBM, Google, Intel, Microsoft a Cisco otevírá API pro své produkty. Výsledkem je rozšířený ekosystém mikroregulátorů, záznamníků dat připojených k cloudovým službám a přizpůsobivá rozhraní, která analyzují data v reálném čase, z nichž všechny představují nové příležitosti pro projektanty s webovými dovednostmi na straně klienta.

13 nejlepších aplikací iPad pro projektanty

S ohledem na to, cílem tohoto tutoriálu je navrhnout a vybudovat něco, co není jen 'elegantní', ale je užitečné v reálném světě: vzájemně propojený produkt (nebo služba), která nahrává data počasí ze senzoru do místního webového serveru a zobrazí tato data v adaptivním uživatelském rozhraní v reálném čase. Tento projekt ilustruje, jak se můžeme odtrhnout od přímé manipulace v UI designu, a demonstruje některé způsoby, jak mohou návrháři brát jejich prototypování techniky mimo webové servery a ploché vzory.

Podívejte se na zdrojové soubory Pro tento tutorial. .

Snímače a mikrokontroléry

Pro tento tutoriál použijeme mikrokontrolér Arduino. To je oblíbená volba díky levné ceně, snadné rozvojové sady a spoustě online podpory. Chcete-li nastavit mikrokontrolér v počítači, stáhněte si vývojové prostředí (možnost IDE) tady . Mikrokontrolér svíčky do počítače s kabelem USB, který jej také síluje. Arduino kód je známý jako náčrtky, které jsou napsány v C ++ - založený kódu k analýze dat přicházejících ze senzorů.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Naše ukázková aplikace obsahuje senzor (1), mikrokontrolér (2), Web API (3) a adaptivní UI (4)

Když navrhujeme aplikaci, která čte data počasí, použil jsem teplotní senzor LM35. To je dobrá, cenově dostupná možnost, ale stejně jako u mikrokontroléry je spousta vybrat si. Nastavte senzor LM35 spolu s propojovacími dráty a prkénkou podle Tyto pokyny .

Mikrokontrolér pracuje s náčrtkovým souborem, který vytváří datové podávání z teplotního čidla LM35 přímo do systému místního souboru. Chcete-li to nastavit, nejprve musíte deklarovat proměnnou, která má podržet analogová data ze senzoru (proměnná je způsob pojmenování a ukládání hodnoty pro pozdější použití pomocí programu - v tomto případě data ze senzoru).

Deklarovat funkci nastavení (), která komunikuje s sériovým portem v notebooku. Toto se nazývá, když začíná náčrtu Arduino a bude nahrávat na sériové okno. Sériový port se používá pro komunikaci mezi deskou Arduino a notebookem.

Dále potřebujeme nastavit přenosovou rychlost - sazba, za které jsou informace převedeny. Chceme rychlost 9600, což znamená, že sériový port je schopen přenosu maximálně 9600 bitů za sekundu ze signálu, pocházejícího se v teplotním čidle LM35, který pochází přes USB kabel do vašeho notebooku. Převést zachycené datové senzorové daty nejprve do formátu teploty, pak z celého čísla na text, který má být vložen do JSON a držen v paměti.

Nakonec smyčka výše uvedené funkce, takže senzor sbírá teplotní data nepřetržitě. Arduino Microcontroller bude fungovat nepřerušovaný v pozadí, sbírání teplotních dat v sériovém portu notebooku.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Typický arduino set-up, skládající se z kabelů, vodičů, pinů, senzorů a připojení USB přenosného počítače

Webové rozhraní API

Jakmile je teplotní čtení zaznamenána v paměti, musí být k němu přidáno časová značka před vložením do formátu JSON. Chcete-li začít, musíme stanovit umístění, kde bude souboru JSON bydlet, a otevřít tento soubor v krátkých intervalech, aby připojili hodnoty.

Je možné dosáhnout tohoto využití technologie pokročilých webových serverů, ale to je mimo rozsah tohoto článku a vznikl by nás pryč do různých tečnic. V zájmu jednoduchosti budeme používat zpracování pro analýzu dat senzorů, ale existuje spousta up-and-příchod, robustní technologie programování webového serveru JS, které lze použít k získání dat senzorů z paměti sériového portu jakýkoli webový server nebo cloud ( viz zde ).

Zpracování používá soubor skica pro získání dat odeslaných firmou Arduino poslechem dat v sériovém portu a vrácení řetězce pro přidržení čtení. Využívá také funkce Draw (), která nepřetržitě provádí řádky kódu obsaženého uvnitř jeho bloku - v tomto případě přijímá hodnoty z sériového portu, přidání časové razítko a tisk do textového souboru končícího v podobné struktuře JSON na ["18:05:53", 43.00].

Nakonec skončíme se systémem, který obsahuje pouze jeden teplotní senzor, mikrokontrolér a webový server. Jedná se o prototyp pro větší systém akvizice dat složený s senzorovými sítěmi a mrakem, reprezentujícím reálný svět nebo službu.

Adaptivní rozhraní

V tomto okamžiku chceme dát dohromady jednoduché UI s jedním stránkovou aplikací (SPA) startovacím balíčkem a nástrojem JS-založeným nástrojem, jako je reakce nebo úhlové. Zvedl jsem reagovat, protože to usnadňuje popis toho, co by prohlížeč měl vykreslit, při budování DOM v prohlížeči, a váže data z jakéhokoliv API velmi rychle. Také namísto re-vykreslování celého DOM aktualizuje pouze prvky UI, které se změnily, což je skvělé pro prototypování.

Chcete-li začít s vaším uživatelským uživatelem, nejprve nainstalujte lázně s jedním z mnoha startovacích balíčků dostupných online. Velmi pohodlný je kotelní webová tabulka Reagovat s kitem . Jakmile se seznámíte s strukturou souboru, budete muset nastavit novou komponentu, která přistupuje ke zdroji JSON v lokálním webovém serveru nebo službě Cloud Service a zpracovává data pro zobrazení.

V reakci, SetState je hlavní metodou použitou pro spouštění aktualizací UI. Změny jsou spuštěny manipulátory událostí nebo zpětné volání požadavků na server a pak je třeba správně implementovat ke čtení souboru JSON. Nakonec definujeme variabilní odečtení, abychom drželi analyzovaná data a & lt; čtení Seznam / gt; Značka v metodě render představovat komponentu UI, která slouží vizualizaci:

 LoadPathSData () {
  Toto.Setstate ({Data: Data});
}

LoadinitialState () {
  vrátit {data: {čtení: []}};
}

komponentawilmount () {
  Tento.loadpatsdata ();
}

poskytnout() {
  vrátit se (
    & lt, div a gt;
      & lt, čtení seznamu = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Definujte komponentu pro čtení seznamu, abyste mohli odečítat od dříve vytvořeného souboru JSON. Přidat novou třídu (seznam čtení) přímo nad definicí třídy. Reagovat využívá metodu vykreslení k implementaci virtuální reprezentace nativní komponenty domorodého doma (např. DIV; DIV / gt; níže) nebo jakoukoli jinou definovanou komponentu. V důsledku toho máme komponentu UI, která zobrazuje četby JSON:

 var čteníistu = reagovat.CreateClass ({
  Vykreslení: Funkce () {
    vrátit se (
      & lt, div a gt;
      
      & lt; / div & gt;
    )
  }
});

Kombinujte dynamická deklarace CSS s mapováním dat pro styl čtení v prohlížeči.

Můžete vynutit aktualizovat buď na úrovni komponenty nebo prohlížeče v krátkých intervalech. To lze provést pomocí robustnější funkce reagovat SileUpdate (která říká, že reaguje, musí znovu spustit vykreslení () výše voláním SildUpdate), nebo implementován v vykreslování šablony Jade se základní setintervalu funkcí.

Při obnovení lázní, všechny komponenty znovu načtěte teplotní odečty v reálném čase, protože JS a CSS jsou dynamicky kombinovány v vizualizaci křížového zařízení. Výsledek je zobrazen na obrázku níže.

The final interface shows the temperature readings from the sensor, and updates in real time — Konečné rozhraní ukazuje teplotní hodnoty ze senzoru a aktualizace v reálném čase

Co bude dál?

Základní koncepty prototypování IOT ilustrovaných v tomto článku mohou být postaveny na navrhování vzájemně propojených produktů nebo služeb, které provádějí dynamická data užitečná a použitelná v adaptivním UIS, ať už se podávají v mobilním zařízení, menší displej nebo dokonce interaktivní televizní obrazovce. Základní dovednosti pro rozvoj webu mohou být pořízeny mimo webové servery a ploché obrazovky rozhraní prostřednictvím otevřených webových technologií, se kterými jsme již obeznámeni.

Weboví profesionálové začínají prozkoumat praktické způsoby práce s datovými poli, které pocházejí z senzorů a pak mají uživatelské rozhraní navržené kolem nich. Tyto průzkumy nabízejí nové způsoby přemýšlení o datech a designu v propojených produktech, ve kterých CSS není jen o stylech, ale vozidle, kterými pro vytváření smysluplných spojení mezi lidmi a daty. Existuje také hodně k experimentu s novými a nadcházejícími technologiemi založenými na CSS, které se týkají prohlášení CSS s datovými prvky pro zvýšení digitálních zkušeností, včetně technik vykreslování prohlížeče.

Data jsou všude kolem nás, a máme jedinečnou příležitost používat ji vidět neviditelné a psát háčky na to v CSS přes JavaScript ... Mluvíme o zmírnění tření a vytváření bezproblémového kontaktního bodu mezi lidmi a jakýmkoliv digitálním produktem. Přijetí JavaScriptu v platformě IOT naznačuje CSS bude stále primárním stylingovým nástrojem volby pro klienty založené na JavaScriptu nebo webové prohlížeče všech velikostí.

Tento článek se původně objevil Čistý časopis Vydání 289; koupit to tady Dokázal se!

Související články:

Úloha designu na internetu věcí
Proč byste měli přijmout design myšlení
5 Essential Chatbot Studijní zdroje

Vytvoření aplikace, která shromažďuje data senzorů

Snímače a mikrokontroléry

Webové rozhraní API

Adaptivní rozhraní

Co bude dál?

jak - Nejoblíbenější články

Listy znaků pro 3D Modellers: 15 Top tipů

Zastavte roboty s Google reCAPTCHA

Jak vytvořit text glitch a obrazové efekty v CSS

Afinitní návrhář: Jak používat nástroj pera

Procreate tutoriál: Nové nástroje zkoumané

Navrhněte citlivým místem s emisemi na bázi EM

Malování expresivního zátiší v akrylech

Jak získat více z digitálních textur

Kategorie