Habit Tracker – raport z postępów

własna aplikacja

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, że ż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ę, że 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ę, że 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, że mocno to teraz odczułam. Jednak jak się nie ćwiczy jakichś umiejętności, one bardzo szybko 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, że 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, że 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 ręcznie, ale potem zauważyłam, że 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, że mimo że 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ę, że 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!

    6 Replies to “Habit Tracker – raport z postępów”

    1. Achh zazdroszczę, że udaje Ci się realizować taki projekt „na boku”!

      Nie myślałaś, żeby użyć czegoś fajniejszego do stylowania apki? W sensie np styled-components? Wydaje mi się, że o wiele lepiej wtedy sobie można ogarnąć repo 😛

      Mogę dorzucić kilka, delikatnych uwag odnośnie kodu:
      – w stopce dajesz sztywną wysokość, tzn height: 100px – whyy? Wysokość raczej powinna być ustalana na podstawie tego, co znajduje się w środku. Inaczej przy dodaniu większej zawartości posypie Ci się ten element. Zresztą nie tylko tam tak masz, w innych miejscach też się to powtarza. Zdecydowanie lepiej wtedy wysokość ustalać dodając górne i dolne paddingi, jeśli chcesz mieć coś większego 🙂
      – nadajesz zmiennym takie nazwy, jak: „firstSectionTitle”, „secondSectionTitle”, „thirdSectionTitle” itp, a co jeśli nagle w projekcie trzeba będzie wykonać jedną, malutką zmianę, czyli 2 sekcję przenieść na miejsce 3? Lepiej dać nazwy odpowiadające temu, czym są te sekcje, co się w nich znajduje.
      – odnośnie tych tekstów wyżej to trochę tego jest. Może lepiej byłoby to przekazywać do WelcomeSectionComponent jako jego dziecko? Wtedy te zmienne też nie zajmowałyby tyle miejsca, bo obstawiam, że nigdzie więcej w tym pliku i tak ich nie wykorzystasz.
      – w folderze „src” raczej nie powinno być jednocześnie „App.scss” i „App.css”

      I powodzenia z projektem! 🙂

      1. Dzięki za uwagi! Zastosuję na pewno 🙂 Co do pliku css i scss w src, korzystam z tego sposobu na używanie scssa w projekcie > https://dev.to/koheishingaihq/react-with-sass-11e i on właśnie tak działa, że tworzy plik css. Nie jest to rozwiazanie idealne, więc może jeszcze nad czymś innym pomyślę

    2. dodałbym _variables.scss , wtedy wiadomo, że to particle ze zmiennymi

      1. Mam consts.scss, który ma pełnić taką funkcję 🙂

    3. Hej, ja mogę się pochwalić moim ostanim projektem – https://www.draybee.io/. Dokładnie tydzień temu na Google Playa wrzuciłem wersję BETA na Androida

      1. Super projekt, gratulacje 🙂

    Dodaj komentarz