--- title: "Tworzenie aplikacji mobilnych: Studium przypadku" date: "2021-05-21" categories: - "app-development" - "mobile-development" - "mobiletogether" tags: - "app-design" - "app-development" - "mobile-development-tools" - "user-stories" description: Zapoznaj się z procesem tworzenia aplikacji mobilnej do monitorowania produkcji energii słonecznej, ze szczególnym uwzględnieniem wymagań użytkowników, zarządzania danymi oraz efektywnych metod wizualizacji. --- Status: #blog Tags: #app-design #app-development #mobile-development-tools #user-stories Categories: [mobile-development](/blog/pl/category/mobile-development.md) | [mobile-development](/blog/pl/category/mobile-development.md) | [mobile-development](/blog/pl/category/mobile-development.md) # Tworzenie aplikacji mobilnych: Studium przypadku Ach, wiosna! Ptaki śpiewają, kwiaty kwitną, a słońce wschodzi wcześniej i zachodzi później. Ta dodatkowa ilość światła słonecznego pozwala systemom produkcji energii słonecznej generować prąd przez więcej godzin. Wraz z zbliżaniem się przesilenia letniego, systemy produkcji energii słonecznej wchodzą w swój najbardziej produktywny okres w roku. Właściciele systemów solarnych montowanych na dachach często z dużym zaangażowaniem monitorują ich wydajność. Aktor i komik John Hodgman [załatwił spór, pomógł rozwiązać konflikt](https://maximumfun.org/transcripts/judge-john-hodgman/transcript-judge-john-hodgman-ep-443-daylight-savings-crime/) Zbyt intensywnie monitoruję produkcję energii słonecznej. Moja przyjaciółka, Kasey, również jest entuzjastką energii słonecznej. Za każdym razem, gdy widzę Kasey, opowiada mi o najnowszych danych dotyczących wyprodukowanych kilowatogodzin. Dom Kasey znajduje się w ciepłym, słonecznym klimacie, gdzie największe zapotrzebowanie na energię elektryczną wynika z potrzeby korzystania z klimatyzacji. Zainstalowała panele słoneczne na dachu swojego domu pod koniec czerwca i jej system szybko zaczął generować wystarczającą ilość energii podczas długich, letnich dni, aby zrekompensować zużycie energii przez klimatyzację. Po otrzymaniu rachunku za prąd za sierpień, Kasey zadzwoniła do firmy, która zainstalowała jej system solarny, aby poinformować o sukcesie – zużycie energii elektrycznej w jej domu w tym miesiącu wyniosło zero. „Muszę przyznać, że codziennie sprawdzam stan liczników, żeby zobaczyć, jak działa system” – powiedziała Kasey do instalatora. "Wszyscy to robią" - odpowiedział instalator. "Niektórzy użytkownicy nawet mi mówią, że sprawdzają liczniki trzy razy dziennie!" Kasey zapytała mnie, czy aplikacja mobilna stworzona przy użyciu platformy MobileTogether mogłaby być dobrym narzędziem do monitorowania jej systemu energii słonecznej. „Mogłabym wprowadzać odczyty licznika do telefonu,” powiedziała. „Mogę to robić codziennie, kiedy wyprowadzam psa przed śniadaniem.” Tak właśnie rozpoczęła się nasza współpraca w zakresie tworzenia aplikacji mobilnych. Efektem jest aplikacja mobilna, którą nazywamy "Narzędzie do energii słonecznej" (Solar Power Tool). ![](/blog/images/mt_darktheme_blog_1-1.jpg) System solarny firmy Kasey obejmuje oprogramowanie do raportowania ilości wyprodukowanej energii elektrycznej, ale to tylko połowa problemu. Podobnie jak wiele domowych systemów produkcji energii słonecznej, dom Kasey jest podłączony do sieci energetycznej za pomocą systemu [rozliczeń z uwzględnieniem nadwyżki energii](https://en.wikipedia.org/wiki/Net_metering). Panele słoneczne dostarczają energię do domu tylko wtedy, gdy świeci słońce. W nocy lub w sytuacjach, gdy zapotrzebowanie na energię jest większe niż produkcja, energia jest pobierana z sieci. Kiedy panele słoneczne produkują więcej energii niż zużywa dom, nadwyżka jest oddawana do sieci, uzupełniając moce wytwórcze dostawcy energii. Rachunek za energię elektryczną, wystawiany co miesiąc, informuje o ilości energii elektrycznej wytworzonej i zużytej w danym gospodarstwie domowym. Właściciel konta płaci za nadmierne zużycie, a także niewielką opłatę za przyłączenie. Nadwyżka wytworzonej energii jest uwzględniana w rachunku za następny miesiąc. W takich domach znajdują się dwa liczniki: jeden rejestruje ilość wyprodukowanej energii elektrycznej, a drugi – ilość zużytej energii. Kasey chciała aplikacji, która monitorowałaby stan konta przez cały miesiąc, zamiast czekać na rachunek od firmy energetycznej. Stworzyliśmy listę wymagań dotyczących tworzenia aplikacji mobilnej: - zapewnić bardzo prosty formularz do wprowadzania danych, służący do rejestrowania odczytów licznika - automatycznie obliczać stan konta na podstawie odczytów - wyświetla codzienną wydajność oraz miesięczny bilans w formie numerycznej i graficznej - Śledź nadwyżkę w czasie, aby pokazać zmiany zachodzące z miesiąca na miesiąc. MobileTogether oferuje wszystkie funkcje, których potrzebowaliśmy do eleganckiego zaimplementowania wymagań aplikacji. Rozpoczęliśmy od zdefiniowania struktur danych XML dla codziennych i miesięcznych zapisów. Poniżej przedstawiono dane miesięczne w formie tabeli XMLSpy: [![Dane dotyczące miesięcznych raportów służące do monitorowania produkcji energii elektrycznej z instalacji solarnych.](/blog/images/monthly-grid-view.png)](monthly-grid-view.png) Analizując dane dotyczące daty i wartości odczytów licznika, kolumny od 4 do 7 przedstawiają proste obliczenia numeryczne dotyczące wytworzonej i zużytej energii w kilowatach, miesięcznego nadwyżki oraz całkowitego bilansu. Na przykład, w wierszu 5, ilość wytworzonej energii (kWhGen) to po prostu odczyt licznika energii słonecznej za wrzesień minus odczyt z sierpnia. Licznik energii słonecznej działa tylko w jedną stronę, natomiast licznik zużycia może działać zarówno w przód, jak i w tył, w zależności od nasłonecznienia i zużycia energii w poszczególnych godzinach. W kolejnym etapie rozwoju aplikacji mobilnej, zaprojektowaliśmy ogólną strukturę aplikacji. Postanowiliśmy stworzyć dwie główne strony: jedną do wyświetlania danych dotyczących bieżącej wydajności, a drugą do przeglądania historii miesięcznych danych. Formularze wprowadzania danych miały być podstronami, do których można było uzyskać dostęp z każdej z głównych stron. Poniżej znajduje się okno pomocnicze MobileTogether Pages, prezentujące strukturę strony: [![Struktura stron definiowana podczas tworzenia aplikacji mobilnej ](/blog/images/pages-helper.png)](pages-helper.png) Przyciski na każdej stronie umożliwiają korzystanie z funkcji MobileTogether do nawigacji między różnymi widokami. Następnie zastanowiliśmy się, jak graficznie przedstawić dane w postaci wykresów. Platforma MobileTogether umożliwia programistom tworzenie wykresów w wielu warstwach, a nawet łączenie różnych typów wykresów. Postanowiliśmy połączyć wykresy obszarowe i słupkowe. Wybraliśmy wykres obszarowy jako tło, aby przedstawić zużycie energii elektrycznej, zarówno w ciągu dnia, jak i w poszczególnych miesiącach, a na nim nałożyliśmy wykres słupkowy, który miał pokazywać produkcję energii słonecznej. Nasza logika opiera się na założeniu, że dom zużywa energię elektryczną w sposób ciągły, nawet w środku nocy, na potrzeby lodówki, zegarów elektrycznych, ładowarek do telefonów itp. Produkcja energii słonecznej jest natomiast przerywana, rozpoczynając się o wschodzie słońca i kończąc o zachodzie. Symulator to funkcja programu MobileTogether Designer, która umożliwia natychmiastowe przetestowanie rozwiązania podczas tworzenia aplikacji mobilnych. Pozwala to na sprawdzenie logiki działania, podgląd interfejsu użytkownika tak, jak będzie on wyglądał na różnych urządzeniach iOS, Android lub Windows, oraz analizę zmian w danych przepływu pracy. Poniżej znajduje się widok strony głównej raportu dziennego, wyświetlany w symulatorze: [![Wykresy służące do raportowania dziennej produkcji, jak widać w symulatorze MobileTogether, podczas tworzenia aplikacji mobilnych.](/blog/images/daily-sim-view.png)](daily-sim-view.png) Ta strona przedstawia dane dotyczące produkcji energii przez instalację solarną przez okres 14 dni, począwszy od 18 kwietnia. Produkcja energii słonecznej w dużym stopniu różni się w zależności od dnia, w zależności od zachmurzenia, co widać na wykresie umieszczonym na górze. Wykres na dole pokazuje bilans energetyczny każdego dnia – czy produkcja była większa niż zużycie (bilans dodatni) czy odwrotnie (bilans ujemny). 18 kwietnia zużyto o jeden kilowat więcej niż wyprodukowano, a 29 kwietnia bilans był zerowy. Przycisk "Pokaż" znajdujący się pod pierwszym wykresem otwiera tabelę numeryczną zawierającą dane: ![Przycisk "Pokaż/Ukryj" służy do wyświetlania lub ukrywania statystyk dziennej wydajności.](/blog/images/daily-data-table.png) Przycisk "Pokaż" modyfikuje właściwość widoczności tabeli danych w aplikacji mobilnej. Sama tabela jest przewijana w obrębie strony i zawiera dane za cały poprzedni miesiąc. Przycisk "Dodaj nowe odczyty" otwiera podstronę do wprowadzania danych dla nowego zestawu odczytów: [![Podstrona do wprowadzania danych, umożliwiająca użytkownikowi wprowadzanie nowych, codziennych odczytów.](/blog/images/enter-daily.png)](enter-daily.png) Definicja akcji dla przycisku pozwala nam otworzyć stronę jako okno dialogowe, co oznacza, że oryginalna strona pozostaje widoczna w tle. [![Ustawienia pozwalające zdefiniować układ podstrony podczas tworzenia aplikacji mobilnej](/blog/images/modal-subpage.png)](modal-subpage.png) MobileTogether umożliwia dodawanie tekstu pomocniczego do pól wprowadzania danych służących do odczytów licznika. Wykorzystaliśmy również właściwość klawiatury MobileTogether. Kiedy użytkownik dotyka pola edycji, aby wprowadzić nową wartość, wyświetlane są tylko cyfry. [![Dodawanie nowego wpisu do codziennego dziennika.](/blog/images/enter-daily-2.png)](enter-daily-2.png) Po wprowadzeniu odczytów z obu urządzeń pomiarowych, kolejnym krokiem Casey jest kliknięcie przycisku "Oblicz produkcję" [![Obliczanie statystyk dziennej produkcji na podstawie nowych danych.](/blog/images/enter-daily-3.png)](enter-daily-3.png) Ten proces wykonuje obliczenia XQuery w celu wygenerowania danych dotyczących dziennej produkcji, które będą wyświetlane w podglądzie. Następnie Kasey może dodać nowe dane lub anulować wprowadzone informacje. Dodanie nowego rekordu dziennego automatycznie aktualizuje również wykresy na stronie raportu dziennego [![Dodanie nowego odczytu automatycznie aktualizuje również dzienne wykresy produkcji.](/blog/images/enter-daily-4.png)](enter-daily-4.png) Strona raportu miesięcznego jest skonfigurowana w podobny sposób jak strona raportu dziennego. Poniżej przedstawiono dwa widoki strony miesięcznego raportu na telefonie z systemem Android, w trybie [ciemnym i jasnym](https://www.altova.com/blog/mobile-apps-that-automatically-support-dark-theme/): [![Widok strony miesięcznego raportu na telefonie z systemem Android, w trybie ciemnym i jasnym](/blog/images/monthly-report.png)](monthly-report.png) Tabela danych na tej stronie prezentuje statystyki miesięczne. Pierwsze 12 wierszy opiera się na odczytach z rachunków za media Kasey, a wartości w kolumnach 4-7 są obliczane przez aplikację. Wiersz 13 opiera się na ostatnim dziennym odczycie. Za każdym razem, gdy Kasey dodaje nowy dzienny odczyt, aplikacja aktualizuje tabelę danych dziennych oraz wykresy dzienne, a także automatycznie oblicza sumy miesięczne, zastępuje wiersz 13 w tabeli miesięcznej i aktualizuje wykresy miesięczne. To rozwiązuje podstawowy problem związany z rozwojem tej aplikacji mobilnej: umożliwia monitorowanie skumulowanego nadwyżki od ostatniej faktury za media. Skumulowana nadwyżka jest wyświetlana w wierszu 13 tabeli danych miesięcznych, w podpisie pod pierwszym wykresem miesięcznym oraz w prawych kolumnach obu wykresów miesięcznych. Ikona koła zębatego, znajdująca się w prawym górnym rogu każdej strony, jest przyciskiem utworzonym przy użyciu wbudowanego obrazu przycisku "Ustawienia" w MobileTogether. Po kliknięciu otwiera się strona ustawień, która jest tutaj pokazana na ekranie iPhone'a: [![Strona ustawień wyświetlana na iPhonie.](/blog/images/settings-1.png)](settings-1.png) Pierwsze cztery przyciski na stronie ustawień umożliwiały nam manipulowanie i wymianę zestawów danych podczas procesu tworzenia lub w celach analitycznych. Ostatnia opcja to pole kombinowane, które pozwalało Kasey resetować wykresy na stronie raportów dziennych, aby wyświetlać dane za 7, 14, 21 lub 30 dni. [![Wyświetlanie wykresu salda dziennego za okres 21 dni.](/blog/images/daily-balance-21.png)](daily-balance-21.png) Po początkowym opracowaniu aplikacji mobilnej, Kasey była zachwycona wynikami. Codziennie wyprowadzała swojego psa na poranne spacery i wprowadzała do aplikacji odczyty licznika. Kiedy otrzymywała rachunki za media, aktualizowała miesięczną tabelę, wprowadzając wartości odczytane przez pracownika firmy dostarczającej media. Pewnego dnia zadzwoniła do mnie. „Wiesz, że jestem uwięziona w domu od prawie roku, a teraz jestem gotowa znów podróżować” – powiedziała. „Co się stanie z aplikacją, jeśli pomiję kilka dni aktualizacji?” Musiałem się nad tym zastanowić i przygotowałem zestaw danych testowych, aby to sprawdzić. Okazało się, że miesięczny raport będzie poprawny. Niezależnie od tego, czy użytkownik zapomniał wprowadzić odczyty licznika przez jeden dzień, czy przez cały tydzień, aplikacja zawsze oblicza sumę nadwyżki w oparciu o najnowszy rachunek i ostatni odczyt dzienny. Codzienny raport zawierał kilka drobnych problemów. Pole daty dla codziennych odczytów było elementem umożliwiającym wybór daty, który automatycznie wyświetlał aktualną datę, ale użytkownik mógł wybrać inną datę, jeśli dostępne były dane z tego dnia. Jednakże, jeśli pominięto kilka dni pomiarów, dane dotyczące dziennej produkcji oraz wartości wykresów za ostatni dzień były niedokładne – cała produkcja i całe zużycie były przypisywane do tego ostatniego dnia. Rozwiązanie okazało się proste. Postanowiliśmy dodać pewną logikę do obliczeń statystyk dziennych, wykorzystując instrukcję warunkową "jeśli-to" oraz pętlę: - Jeśli data nowego odczytu była o więcej niż jeden dzień późniejsza niż data ostatniego odczytu, należy obliczyć liczbę brakujących dni - Podziel całkowitą produkcję i całkowite zużycie przez łączną liczbę dni między poszczególnymi pomiarami. - Użyj pętli, aby przypisać średnią produkcję i średnie zużycie do każdego dnia, w którym odnotowano brak danych. Zaimplementowałem tę logikę w grupie akcji MobileTogether i dodałem nową grupę akcji do sekwencji działań wykonywanych, gdy Kasey klikał przycisk "Dodaj dzienne odczyt". Kasey z radością wyruszyła 2 maja na trzydniową wycieczkę, łączącą obozowanie i wędrówki. 6 maja, następnego dnia po powrocie, jak zwykle, wprowadziła do systemu codzienne odczyty licznika. Poniżej przedstawiono fragmenty jej codziennego raportu oraz miesięcznego raportu, zawierające uśrednione wartości dla brakujących codziennych odczytów, wyświetlane na iPhonie: [![Wyniki strategii dotyczącej dni, w których nie czytano, wyświetlane na ekranie iPhone'a.](/blog/images/monthly-report-2.png)](monthly-report-2.png) Wartości zerowe odczytów licznika z dnia 3, 4 i 5 maja oznaczają wartości uśrednione. Jeśli tworzysz aplikacje mobilne działające na różnych platformach, potrzebujesz narzędzia z zaawansowanymi funkcjami wizualnego programowania i zintegrowanym debugowaniem! Sprawdź nasze MobileTogether [Prezentacje wideo](https://www.altova.com/pl/mobiletogether/demos#video_Demos), więcej [Przykładowe aplikacje](https://www.altova.com/pl/mobiletogether/demos), lub nawet [instrukcja online](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) aby uzyskać szczegółowe informacje. Kiedy będziecie gotowi, aby szybko rozpocząć tworzenie własnych aplikacji mobilnych działających na różnych platformach, [Pobierz program MobileTogether Designer](https://www.altova.com/pl/mobiletogether/download) aby zacząć.