Utwórz aplikację, która gromadzi dane czujnika

Sep 17, 2025

Jak

Dziś przystępne platformy rozwijające się połączone produkty cieszą się szeroką dostępnością, a my widzieliśmy na zwiększenie wsparcia JavaScript w technologii IOT, z potężnymi firmami, takimi jak IBM, Google, Intel, Microsoft i Cisco otwierają API do swoich produktów. Rezultatem jest rozszerzony ekosystem mikro-kontrolerów, rejestratorów danych podłączonych do usług w chmurze i adaptowalne interfejsy, które analizują dane w czasie rzeczywistym, z których wszystkie obecne nowe możliwości projektantów z umiejętnościami internetowymi po stronie klienta.

13 najlepszych aplikacji iPad dla projektantów Pro

Mając to na uwadze, celem tego samouczka jest zaprojektowanie i budowanie czegoś, co nie tylko "schludne", ale jest przydatne w rzeczywistym świecie: połączonym produktem (lub usłudze), które przesyłają dane pogodowe z czujnika do lokalnego serwera WWW i wyświetla te dane w adaptacyjnym interfejsie użytkownika w czasie rzeczywistym. Ten projekt ilustruje, jak możemy oderwać od bezpośredniego manipulacji w projekcie interfejsu interfejsu użytkownika i pokazuje pewnych sposobów, w jaki projektanci mogą przyjmować techniki prototypów poza serwerami internetowymi i płaskimi wzorami.

Spójrz na pliki źródłowe Dla tego samouczka .

Czujniki i mikrokontrolery.

W tym samouczku użyjemy mikrokontrolera Arduino. Jest to popularny wybór dzięki tanio cenie, łatwy zestaw do rozwoju i mnóstwo wsparcia online. Aby skonfigurować mikrokontroler na swoim komputerze, pobierz środowisko programistyczne (opcja IDE) tutaj . Mikrokontroler podłącza się do komputera za pomocą kabla USB, który również go mocuje. Kod Arduino jest znany jako szkice, które są zapisywane w Kodeksie oparte na C ++, aby przeanalizować dane wchodzące z czujników.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Nasza przykładowa aplikacja zawiera czujnik (1), mikrokontroler (2), interfejs API (3) oraz adaptacyjnego UI (4)

Jak zaprojektujemy aplikację, która czyta dane pogodowe, używałem czujnika temperatury LM35. Jest to dobra, niedrogie opcja, ale tak jak z mikrokontrolerami jest mnóstwo do wyboru. Ustaw czujnik LM35 wraz z przewodami skoczkowymi i breadboardem jako te instrukcje .

Mikrokontroler działa z plikiem szkicu, który tworzy kanał danych z czujnika temperatury LM35 bezpośrednio do lokalnego systemu plików. Aby to ustawić, najpierw musisz zadeklarować zmienną do przechowywania danych analogowych z czujnika (zmienna jest sposobem nazywania i przechowywania wartości do późniejszego wykorzystania przez program - w tym przypadku danych z czujnika).

Oświadczanie funkcji SETUP (), która komunikuje się z portu szeregowego w swoim laptopie. Nazywa się to, gdy zaczyna się szkic Arduino, a będzie nagrywać do okna szeregowego. Port szeregowy służy do komunikacji między deską Arduino a laptopem.

Następnie musimy ustawić szybkość transmisji - stawka, w której informacje są przekazywane. Chcemy stawkę 9600, co oznacza, że port szeregowy jest zdolny do przeniesienia maksymalnie 9600 bitów na sekundę od sygnału, pochodzącego z czujnika temperatury LM35, podróżując przez kabel USB do laptopa. Konwertuj przechwycone dane czujnika surowego najpierw do formatu temperatury, a następnie z całkowitego do tekstu, który ma być włożony do JSON i przechowywany w pamięci.

Wreszcie pętla powyższej funkcji, dzięki czemu czujnik gromadzi dane dotyczące temperatury w sposób ciągły. Mikrokontroler Arduino uruchomi nieprzerwany w tle, zbierając dane o temperaturze w porcie szeregowym laptopa.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Typowy konfiguracja Arduino, składająca się z kabli, przewodów, szpilki, czujników i połączenia z laptopem USB

API internetowe

Po zapisaniu temperatury w pamięci można dodać do niego znacznik czasu przed włożeniem do formatu JSON. Aby rozpocząć, musimy ustalić lokalizację, w której znajduje się plik JSON i otworzy ten plik w krótkich odstępach czasu, aby dołączyć odczyty.

Możliwe jest osiągnięcie tej zaawansowanej technologii serwera WWW, ale jest to poza zakresem tego artykułu i zabierze nas w różne styki. Ze względu na prostotę użyjemy przetwarzania do przetwarzania danych czujników, ale istnieje wiele w górę i nadchodzących technologii programowania serwerów internetowych na bazie JS, które można wykorzystać do zdobycia danych czujnika z pamięci portu szeregowego każdy serwer internetowy lub chmura ( Spójrz tutaj ).

Przetwarzanie używa pliku szkicu, aby uzyskać dane wysyłane przez Arduino, słuchając danych w porcie szeregowym i zwracając ciąg do przechowywania odczytów. Wykorzystuje również rysunek () funkcji, która stale wykonuje linie kodu zawartego wewnątrz jego bloku - w tym przypadku, podejmując wartości z portu szeregowego, dodając znacznik czasu i drukowanie w pliku tekstowym kończącym się w strukturze JSON podobnej do ["18:05:53", 43,00].

W końcu skończymy z systemem, który zawiera tylko jeden czujnik temperatury, mikrokontroler i serwer WWW. Jest to prototyp większy system akwizycji danych złożonych z sieci czujników i chmury, reprezentujących prawdziwy światowy produkt lub usługę.

Adaptive Interface.

W tym momencie chcemy zebrać proste interfejsy UI z dodatkowym dodatkiem (SPA) Pack i narzędziem opartym na bazie J, jak reagować lub kątowy. Wybrałem reakcję, ponieważ ułatwia opisać, co powinna renderować przeglądarka, usuwa wiele hałasów podczas budowania domu w przeglądarce i wiąże dane z dowolnego interfejsu API bardzo szybko. Również zamiast ponownego renderowania całego domu, aktualizuje tylko elementy UI, które się zmieniły, co jest świetne do prototypowania.

Aby zacząć od swojego interfejsu użytkownika, najpierw zainstaluj spa za pomocą jednego z wielu pakietów starterowych dostępnych online. Bardzo wygodna jest kotła internetowa Reaguj Kit. . Po zapoznaniu się z strukturą plików musisz skonfigurować nowy komponent, który uzyskuje dostęp do kanału JSON w lokalnym serwerze sieci Web lub obsługa w chmurze i przetwarza dane do wyświetlenia.

W reakcji Setstate jest główną metodą używaną do wyzwalania aktualizacji UI. Zmiany są wywołane przez obsługiwanie obsługi zdarzeń lub żądania oddzwonień serwera, a następnie należy poprawnie wdrożyć, aby przeczytać plik JSON. Wreszcie, definiujemy odczyty zmienne do przechowywania analizowanych danych i LT; odczyty LIGHT / & GT; Znacznik w metodzie renderowania, aby reprezentować komponent UI, który obsługuje wizualizację:

 LoadPathsdata () {
  to.setstate ({dane: dane});
}

LoadiniTiTiTiate () {
  zwróć {dane: {odczyty: []}};
}

ComponentWillmount () {
  to. loadpathsdata ();
}

renderowanie() {
  powrót (
    & lt; div & gt;
      & LT; Data List Data = {ten.state.data} / & GT;
    & lt; / div & gt;
  );
}

Zdefiniuj komponent Lista UI, aby utrzymać odczyty z wcześniej utworzonego pliku JSON. Dodaj nową klasę (lista odczytów) bezpośrednio nad definicją klasy. Reaguj używa metody renderowania do wdrożenia wirtualnej reprezentacji natywnego składnika Dom (np. Div / & GT; poniżej) lub dowolnego innego zdefiniowanego składnika. W rezultacie mamy komponent UI, który wyświetla odczyty JSON:

 Var ReadingsList = Reaction.CreateClass ({
  Render: Funkcja () {
    powrót (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Połącz dynamiczne deklaracje CSS z mapowaniem danych do stylu odczytów w przeglądarce.

Możesz wymusić odświeżenie na poziomie komponentu lub przeglądarki w krótkich odstępach czasu. Można to zrobić za pomocą funkcji bardziej solidnej reagującej Forceupdate (co mówi reakcji, musi ponownie uruchomić render () powyżej, wywołując podsumowanie), lub zaimplementowany w renderowaniu szablonu jadeicznego z podstawową funkcją setinterval.

Podczas redukcji spa wszystkie elementy przeładowują odczyty temperatury w czasie rzeczywistym, ponieważ JS i CSS są połączone dynamicznie w wizualizacji urządzeń krzyżowych. Wynik jest wyświetlany na obrazku poniżej.

The final interface shows the temperature readings from the sensor, and updates in real time — Końcowy interfejs pokazuje odczyty temperatury z czujnika i aktualizuje w czasie rzeczywistym

Co dalej?

Podstawowe koncepcje prototypowania IOT zilustrowane w tym artykule można zbudować w celu zaprojektowania połączonych produktów lub usług, które tworzą dane dynamiczne przydatne i użyteczne w adaptacyjnym UIS, niezależnie od tego, czy są one obsługiwane w urządzeniu mobilnym, mniejszym wyświetlaczem, a nawet interaktywnym ekranie telewizora. Podstawowe umiejętności tworzenia stron internetowych można wykonać poza serwerami internetowymi i interfejsami płaskiego ekranu poprzez otwarte technologie internetowe, których już znamy.

Profesjonaliści internetowych zaczynają odkrywać praktyczne sposoby pracy z tablicami danych, które pochodzą z czujników, a następnie mają interfejs użytkownika zaprojektowany wokół nich. Te badania oferują nowe sposoby myślenia o danych i projektach w połączonych produktach, w których CSS nie jest tylko w przypadku stylów, ale pojazd, dzięki którym tworzyć znaczące połączenia między ludźmi i danymi. Istnieje również wiele do eksperymentowania w nowych i nadchodzących technologiach opartych na CSS, że para deklaracji CSS z elementami danych w celu zwiększenia doświadczeń cyfrowych, w tym techniki renderowania przeglądarki.

Dane są wokół nas, a my mamy wyjątkową okazję do użycia go, aby zobaczyć niewidzialne i pisać haki w CSS przez JavaScript ... Mówimy o zmniejszaniu tarcia i tworzenia bezszwowego punktu kontaktowego między ludźmi a każdym produktem cyfrowym. Przyjęcie JavaScript na platformach IOT sugeruje CSS nadal będzie głównym narzędziem stylizacji w celu wyboru dla klientów opartych na Javascript lub przeglądarek internetowych o wszystkich rozmiarach.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 289; Kupuj tutaj !

Powiązane artykuły:

Rola projektu w Internecie
Dlaczego powinieneś obejmować myślenie projektowe
5 Podstawowe zasoby edukacyjne Chatbot

Utwórz aplikację, która gromadzi dane czujnika

Czujniki i mikrokontrolery.

API internetowe

Adaptive Interface.

Co dalej?

Jak - Najpopularniejsze artykuły

Jak usunąć zmarszczki w Photoshopie

Jak narysować różę: początkujący i zaawansowane wskazówki

Stwórz promienie Boga w V-Ray

Dodaj animacje UI na witrynę

Jak tworzyć niesamowite efekty z kształtami CSS

Utwórz ozdobne płytki w projektancie substancji

Pomaluj epicką sceny Nowy Jork

Zrób plakat z szablonu w Photoshopie

Kategorie