Přejít na obsah
Stáhnout CV (PDF)
← Zpět na portfolio

04 2023–2024

Mobilní aplikace pro správu IoT zařízení

Skleník, který se zalévá sám. Návrh i vývoj, zároveň moje bakalářská práce.

Klient
Soleqa s.r.o.
Období
2023–2024
Role
Návrh i vývoj aplikace
Stack
React NativeTypeScriptGraphQLECharts

Dělala jsem návrh a frontend. Backend v Pythonu a firmware zařízení psal někdo jiný, na diagramu architektury je moje část ohraničená.

Kontext

Aplikace, ve které uživatel spravuje IoT zařízení, tedy senzory a aktuátory, přímo z mobilu. Typické nasazení je skleník nebo zahrada.

Vznikla jako moje bakalářská práce na FIT VUT, ale zadání a požadavky přišly od Soleqy, takže to nebyl školní projekt do šuplíku. Práci jsem obhájila v červnu 2024.

Cílem bylo dostat do jedné aplikace čtyři věci: monitoring v reálném čase, porovnání s historickými daty, ruční ovládání a automatizaci.

Problém

Každý senzor mohl být jiný a nést jiné údaje. Rozhraní proto nesmělo počítat s pevnou sadou hodnot, ale muselo si poradit s libovolnou kombinací, a to na malé obrazovce.

Uživatel potřebuje nastavit, kdy se má co samo sepnout, a to bez programování.

A hlavně: dvě různá pravidla mohou chtít po stejném zařízení opak. Zalévání má běžet, když je sucho, a zastavit se, když je mokro. Aplikace musí vědět, které vyhraje.

Rozhodnutí

  1. 01

    Navrhnout aplikaci, ne jen naprogramovat

    Návrh rozhraní jsem dělala sama, včetně toho, jak se ovládá podmínkový systém. U produktu, kde uživatel bez technického zázemí nastavuje automatizaci, je právě návrh ta nejtěžší část.

  2. 02

    Historie jako součást přehledu

    Graf se přepíná mezi hodinou, dnem, měsícem a rokem, odečítá minimum, maximum a průměr a umí překrýt dvě období přes sebe, aby šlo porovnat dnešek s minulým týdnem. Rozsah překrytí se dopočítává podle zvoleného období. Bez srovnání v čase je aktuální hodnota jen číslo.

  3. 03

    Kritické hodnoty přímo v grafu

    Uživatel si u senzoru nastaví horní a dolní kritickou mez a ta se vykreslí jako linka přes graf. Překročení je pak vidět na první pohled, bez čtení čísel.

  4. 04

    Podmínkový systém přes skupiny

    Automatizace se skládá ze skupin: skupina drží podmínky (senzor, operátor, hodnota) a seznam aktuátorů, které se při splnění přepnou. Uživatel tak sestaví pravidlo klikáním, ne psaním logiky.

  5. 05

    Ukázat, co je špatně, dřív než to uživatel hledá

    Domovská obrazovka řadí nahoru senzory v kritickém stavu a teprve pod ně oblíbené. Notifikace navíc neříkají jen „aktuátor se přepnul“, ale i to, která skupina ho přepnula. U automatizace je nejhorší pocit, když se něco stane a uživatel neví proč.

  6. 06

    Priorita jako řešení konfliktů

    Nejtěžší rozhodnutí celé práce. Když na jeden aktuátor sáhne víc skupin, rozhoduje priorita, a přiřazení priority automaticky přečísluje ostatní, aby pořadí zůstalo konzistentní. Ruční ovládání má přednost před vším.

Moje role

  • Návrh rozhraní i celý frontend v React Native a TypeScriptu.
  • Napojení na backend přes GraphQL, grafy nad knihovnou ECharts.
  • Interní testování přes Google Play Console.

Ukázky

  • Architektura celého systému. Moje část je frontend, tedy ta ohraničená.

  • Domovská obrazovka: kritické hodnoty první, pak oblíbené

  • Kritické meze v grafu a překrytí dvou období

  • Podmínkové skupiny a řešení konfliktů prioritou

  • Notifikace říkají, která skupina zařízení přepnula, a přehled skupin

Výsledek

  • Aplikace, ve které si uživatel bez technického zázemí nastaví automatizaci vlastního skleníku.
  • Bakalářská práce obhájená v červnu 2024 na FIT VUT.
  • Pro mě první zkušenost s tím, že návrh rozhraní je stejně důležitý jako kód pod ním.