Habit Tracker – raport z postępów

Własna aplikacja to duże wyzwanie! Ja w końcu usiadłam nad Habit Trackerem i powoli zaczyna jakoś wyglądać. Zapraszam Was więc na raport z prac. Będzie o tym, co ostatnio zrobiłam i jakie mam plany na najbliższe dwa tygodnie.

Wpis jest częścią serii Własna aplikacja krok po kroku. W poprzednich wpisach znajdziecie informacje o tym, jak znaleźć pomysł na swoją pierwszą aplikację i jakie zadania trzeba wykonać na sam początek. A ostatni artykuł z kolei zaznajomi Was z pracami związanymi ze stroną User Exerience, które trwały nad Habit Trackerem. Jest to wpis gościnny, który przygotowała Zuzia Mrożewska i bardzo mocno Wam go polecam, jak jeszcze nie mieliście okazji zajrzeć, bo to naprawdę świetne case study powstawania UXowej strony aplikacji. W sam raz dla tych, co chcą dowiedzieć się, jak taki proces wygląda.

A teraz w końcu czas na mój raport! Zajrzałam sobie ostatnio do artykułu z moimi planami na rok 2018 i znalazłam tam wzmiankę o Habit Trackerze. Tak, tak, miałam zamiar zajmować się własną aplikacją już od początku roku. Wiadomo jednak, iż życie plany weryfikuje i prowadziłam mnóstwo innych inicjatyw. Prace nad Habit Trackerem działy się gdzieś tam w międzyczasie, ale trudno było mi usiąść do aplikacji tak porządnie. Teraz też nie jest łatwo, bo mocno muszę ograniczać czas spędzony przed komputerem ze względów zdroworynych. Całodnodne (i wieczorne) maratony kodowania odpadają, ale jakoś posuwam się do przodu. Powoli, ale coś się dzieje.

Dzisiejszy wpis będzie bardziej moim raportem niż instrukcją dla Was. Chcę pokazać, co zrobiłam do tej pory i jakie mam plany na najbliższy czas. Mam nadzieję, iż tego typu wpis przypadnie Wam do gustu.

Moim celem było zakodowanie strony powitalnej według projektu Zuzi (cały projekt znajdziecie we wpisie o UXowej stronie aplikacji). Chcę podczas pracy nad tym projektem jak najwięcej się nauczyć, dlatego zdecydowałam się wykorzystać CSS grida. To moje pierwsze podejście do grida, dlatego na sam początek musiałam poczytać trochę dokumentacji i odświeżyć sobie informacje z kursów, które robiłam. Na razie z gridem pracowało mi się fajnie, ale oczywiście czuję, iż jeszcze nie jest to dla mnie coś naturalnego. Chętnie poczytam o dobrych praktykach czy przykładach zastosowania, więc jak macie takie materiały do polecenia, koniecznie dajcie mi znać.

Ostatnimi czasy w pracy miałam mało do czynienia z CSSem w ogóle i przyznam, iż mocno to teraz odczułam. Jednak jak się nie ćwiczy jakichś umiejętności, one bardzo gwałtownie zanikają. Dlatego kilka pierwszych chwil z layoutem Habit Trackera było dla mnie raczej źródłem frustracji niż satysfakcji. Dałam jednak radę. Idealnie oczywiście nie jest i na pewno jeszcze sporo pracy mnie w tym obszarze czeka. Ogólnie na ten rok chciałabym sobie postawić jako jeden z celów dobre opanowanie CSSa. Mam wrażenie, iż on u mnie zawsze ląduje na ostatnim miejscu, a chciałabym się na nim skupić trochę bardziej i nie czuć się, jakbym błądziła we mgle za każdym razem, gdy coś dziwnie się wyświetla.

Stronka też nie jest na razie do końca responsywna, ale nad tym będę pracować. Grid wprawdzie sprawia, iż strona całkiem dobrze się skaluje np. do rozmiaru tabletu, ale nad wersją mobilną trzeba posiedzieć.

Popracowałam też nad strukturą komponentu, który jest stroną powitalną. Na sam początek chciałam po prostu umieścić wszystkie potrzebne sekcje w tym komponencie manualnie, ale potem zauważyłam, iż wszystkie są dość powtarzalne i mogę stworzyć reużywalny komponent, który będzie przyjmował kilka parametrów. Tym samym stworzyłam właśnie generyczny komponent, któremu mogę przekazać tytuł, tekst, źródło obrazka, stronę, po której obrazek ma się wyświetlać. Zyskałam dzięki temu bardziej czytelny kod. Zastanawiam się, czy wszystkich potrzebnych tekstów nie przenieść jeszcze do osobnego pliku i stamtąd je pobierać, bo zrobi się wtedy jeszcze większy porządek.

W trakcie prac wrzuciłam kod w grupie na FB prosząc o szybkie code review i dostałam znak, aby popracować nad strukturą komponentów. Przyznam, iż mimo iż w Reakcie pracuję rok, nie robiłam w nim projektu sama od zera (bo pracowałam już w istniejącym). I czytałam o budowaniu struktury, jednak wiadomo, praktyka to zupełnie coś innego.

Wcześniej już dodałam do aplikacji routing, więc za każdym razem, gdy się ją odpala, na razie przekierowuje użytkownika do strony powitalnej. Zakodowałam też nagłówek oraz stopkę. Nie dodałam jeszcze funkcji logowania, bo na razie skupiłam się na layoucie. Jak chcecie przejrzeć jak teraz wygląda kod, zapraszam do projektu na moim GitHubie. To, nad czym pracuję aktualnie znajduje się na gałęzi welcome-page. Jak macie jakieś sugestie, koniecznie napiszcie do mnie, bo feedback jest dla mnie bardzo cenny. A samo code review udostępnię Wam jak tylko wypełnię punkty z listy poniżej. Wtedy stworzę na GitHubie pull requesta i będziecie mogli dokładnie zapoznać się z kodem, który wprowadzam i zasugerować konkretne już zmiany. Ale tak jak mówię, na tym etapie uwagi również są jak najbardziej mile widziane.

Jakie mam plany na najbliższy czas? Oto lista zadań:

dodanie testów jednostkowych do stworzonych komponentów

zapisanie kolorów/innych powtarzalnych części kodu (szczególnie w plikach ze stylami) do zmiennych

poprawienie projektu zgodnie z linterem

praca nad strukturą komponentów

praca nad responsywnością strony powitalnej (przystosowanie do widoku mobilnego)

dodanie logowania przez FB i GitHuba (co łączy się z podłączeniem Firebase do aplikacji)

To są zadania na najbliższy miesiąc, choć liczę, iż uda mi się z nimi uporać wcześniej i zacznę pracę nad główną częścią aplikacji, jaką jest dashboard z nawykami. Zobaczymy, na ile czas i zdrowie mi pozwolą. A jak ciekawi Was, jak wygląda teraz aplikacja, możecie krótkie video znaleźć w tym poście na FB.

A jak Wasze aplikacje? Pracujecie nad czymś teraz albo macie taki plan w najbliższym czasie? Podzielcie się koniecznie!