Mój projekt – Raport II

Daj Się Poznać 2017

W końcu nadszedł czas na kolejny raport postępów nad projektem w ramach Daj Się Poznać 2017. Ten tydzień był naprawdę owocny, jeśli chodzi o projekt, chociaż kolejny raz zmieniłam koncepcję. Tym razem tylko minimalnie: postanowiłam skupić się na funkcjonalności, a kolejny tydzień przeznaczyć na pracę nad warstwą wizualną. Poniżej krótka relacja ze postępów, czyli co udało mi się zrobić.

Struktura projektu

Pierwsza, i bardzo ważna, dla mnie rzecz to (mam nadzieję) ostateczna struktura projektu. Już wcześniej miałam ogólny plan, jak to powinno wyglądać, ale dopiero przy realnym kodowaniu udało się wszystko poukładać. Jak wspominałam, dla każdej nowej funkcjonalności, tj. widoku, stworzyłam model, komponent i template. Dzięki temu mogę pracować nad każdym elementem osobno i łatwo odnaleźć mi się w plikach. Obecnie mam więc pięć modułów związanych z poszczególnymi widokami plus ogólny moduł, który “zbiera” pozostałe, także struktura wygląda tak, jak na poniższym obrazku.

Routing

Zdecydowałam się na budowę SPA, czyli Single-Page Application, więc zależy mi na uniknięciu przeładowywania strony. Pomogło mi w tym użycie routingu, które udostępnia Angular. Dzięki temu, strona nie przeładowuje się po wybraniu poszczególnych elementów menu. W zależności od wybranego elementu, widać po prostu inny template, określony w pliku app.config.js. Jak pisałam na facebooku, dużo czasu zajęło mi poczytanie o tym zagadnieniu, ale na szczęście udało mi się wprowadzić routing do projektu bez większych problemów.

Habits list

Punkt, z którego cieszę się najbardziej, bo stanowi on główną funkcjonalność aplikacji. Chodzi oczywiście o dynamiczne tworzenie listy nawyków. Na razie pracuję nad wersją demo, czyli taką, która będzie dostępna dla każdego, kto wejdzie na stronę, bez konieczności zakładania konta. Będzie można dodawać nowe nawyki do listy, sprawdzić, jak wygląda gotowa lista, czy odznaczanie na niej nawyków. Obecnie lista nie jest szczególnie ładna, ale na razie skupiłam się na funkcjonalności, na elementy estetyczne przyjdzie czas za parę dni. Aplikacja wygląda obecnie tak:

Co więc można zrobić teraz? Po wpisaniu nowego nawyku w formularz, określeniu daty początkowej i liczby dni, przez jakie chcemy budować nawyk, nowy element jest dodawany do list. Automatycznie generuje się tyle checkboxów, ile dni wskazaliśmy. Można także usunąć wybrany nawyk z listy. Przyznam, że największym wyzwaniem tutaj była dla mnie budowa funkcjonalności oparta tylko na Angularze. Wcześniej robiłam listy zadań, ale w JavaScripcie i jQuery, więc mogłam odnosić się bezpośrednio do elementów DOM. Tymczasem Angular działa trochę inaczej.

Plany na kolejny tydzień

Kolejny tydzień zapowiada się bardzo pracowicie, bo wyznaczyłam sobie sporo zadań.
Po pierwsze, w planie mam dodanie przechowywania listy nawyków w localstorage, żeby zasymulować pracę faktycznej aplikacji, która będzie przechowywała listy dla poszczególnych użytkowników w bazie danych.
Po drugie, chcę zakodować statyczne elementy aplikacji, czyli strony Welcome, Concept i About me. Znajdą się tu ogólne informacje o projekcie, o tym, skąd wzięła się koncepcja budowy nawyków, a także cytaty z książki “Siła nawyku” Charlesa Duhigga.
Po trzecie, chcę zadbać o wizualną stronę listy nawyków, czyli sprawić, żeby nie tylko działała, ale też była ładna. Nie jest to moja najmocniejsza strona, bo o wiele bardziej bawi mnie JavaScript, ale mam nadzieję, że pójdzie w miarę sprawnie.