Zadania
- Research i prototypowanie
- Design UI
- Development
- Tworzenie automatycznych testów
Prototypowanie
Głównymi założeniami podczas prototypowania interfejsu był minimalizm, przejrzystość oraz prostota obsługi. Najistotniejsze informacje w postaci wykresów zostały umieszczone na głównym ekranie aplikacji, dzięki czemu użytkownik może na bieżąco sprawdzać aktualne spożycie makroskładników.
Design UI
Do tworzenia UI wykorzystany został program Figma, który posiada możliwość tworzenia re-używalnych komponentów, czyli grupowania kilku powiązanych ze sobą elementów w jeden, który można wielokrotnie używać w kilku miejscach np. przycisk zawierający tło oraz tekst. Wzorzec komponentów jest również wykorzystywany w React.js, dzięki czemu już na etapie projektowania interfejsu można było przewidzieć, jakie komponenty będzie potrzebowała aplikacja, co ułatwiło późniejszy proces przenoszenia grafiki na kod aplikacji.
Rozwiązania
Dziennik żywieniowy
Pozwala na dodawanie spożytych posiłków i produktów, oraz śledzenie dziennego spożycia makroskładników.
Personalizacja
Obliczenia dotyczące dziennego zapotrzebowania makroskładników są spersonalizowane na podstawie płci, wieku, wagi, wzrostu oraz celu. Dzięki temu zapewniają one dużą dokładność i są dostosowane indywidualnie dla danej osoby.
Wyszukiwarka produktów
Ręczne dodawanie nowych produktów może być czasochłonne, więc aplikacja posiada wyszukiwarkę z listą gotowych produktów.
Wsparcie dla trybu offline
Do działania aplikacji nie jest wymagany dostęp do połączenia, więc do zapisu danych wykorzystana została biblioteka ORM TypeORM, która posiada wsparcie dla natywnej, mobilnej bazy danych SQLite3.
Skaner kodów kreskowych
Wyszukiwanie produktów według nazwy może być uciążliwe, więc aplikacja posiada skaner kodów kreskowych stworzony przy użyciu modułu react-native-camera.
Wsparcie accessibility
Aplikacja posiada wsparcie dla dostępności. Interaktywne elementy posiadają odpowiednie opisy oraz podpowiedzi, aby ułatwić korzystanie z aplikacji.
Wykorzystane technologie
React Native - framework do tworzenia natywnych aplikacji mobilnych z wykorzystaniem React.js.
TypeScript - wysoka skalowalność aplikacji i łatwość refaktoryzacji kodu.
Redux.js - zarządzanie stanem globalnym aplikacji.
TypeORM - ORM do zarządzania natywną bazą danych SQLite3.
Jest - testowanie aplikacji.
Figma - prototypowanie, tworzenie UI, identyfikacji wizualnej i prezentacji.
Rezultat
