Mój projekt – Raport III

Daj Się Poznać 2017

Kolejny tydzień razem z Daj Się Poznać minął owocnie. Udało mi się zrobić wszystko, co założyłam. Moja aplikacja w końcu jakoś wygląda, a ja mogę zacząć skupiać się na wprowadzeniu bardziej zaawansowanych funkcji. Jednak, zanim to nastąpi, zapraszam na krótkie podsumowanie działań w tym tygodniu.

Dane w localstorage

Pierwszym znaczącym krokiem było dodanie przechowywania danych w localstorage. Zdecydowałam, że wersja demo nie będzie korzystać z bazy danych, ale po prostu zapisywać dane lokalnie. Dzięki temu można już właściwie korzystać z głównej funkcji aplikacji, czyli zapisywać listy i odhaczać poszczególne dni, gdy wykonało się dane zadanie. Nie mam jeszcze aplikacji umieszczonej na stronie, gdzie można by bezpośrednio zobaczyć demo. Głównie dlatego, że muszę poczytać więcej o tym, jak to zrobić. Zazwyczaj do prezentacji swojej pracy korzystam z github pages, co jest szybkie i wygodne. Nie wiem jednak, czy zadziała tam strona w Angularze. Na razie więc, gdyby ktoś był zainteresowany przetestowaniem działania aplikacji, zapraszam na githuba. Żeby zobaczyć aplikację, wystarczy ściągnąć folder zip, wypakować go, a w konsoli wpisać ‘npm start’. Jako że w plikach znajduję się bower, wszystko powinno się zainstalować automatycznie. Po instalacji strona będzie dostępna pod adresem http://localhost:8000.

Strona powitalna i koncept aplikacji

Właściwie od początku pracy nad projektem zakładałam, że te dwie strony zakoduję jak najszybciej. W toku okazało się jednak, że lepiej najpierw skupić się na głównej funkcjonalności. Na szczęście, udało mi się dotrzeć w końcu do tych dwóch stron. Jako że aplikacja jest również dla mnie projektem kończącym mój kurs programowania, chciałam, żeby nie była tylko jedną stroną z listą nawyków. Dlatego dodałam małą marketingową otoczkę. Mamy więc stronę powitalną oraz stronę, która opisuje główne założenia projektu. Ściśle mówiąc, założenia opisuje na razie lorem ipsum, ale to się na dniach zmieni. Strona powitalna na razie prezentuje się tak:

Natomiast wstępna wersja strony o źródle pomysłu na śledzenie nawyków wygląda tak:

Miałam trochę problemów ze stroną o koncepcji pomysłu, ponieważ bardzo chciałam tu użyć efektu parallax. Znalazłam nawet gotowy moduł ngParallax stworzony w Angularze, który robiłby to za mnie. Niestety, mimo wielu prób i kombinacji, nie udało mi się sprawić, żeby zadziałał. Sama więc zrobiłam parallax w CSS korzystając z tutoriala w3schools.
Przy okazji chciałam zaznaczyć, że w projekcie korzystam z darmowych zdjęć dostępnych na Jest Rudo. Zdjęcia są w super jakości i idealnie wpisują się w moją estetykę.

Wygląd listy nawyków

Ostatnia rzecz, o której dzisiaj wspomnę to wygląd listy nawyków. W zeszłym tygodniu była bardzo uboga, ale teraz Habit Tracker zaczyna nabierać kształtów. Bawiłam się tutaj na razie głównie w CSS, także zmieniła się jedynie strona wizualna. Formularz do dodawania nawyków przeniosłam w lewy górny róg, dopracowałam także wygląd wyświetlanych nawyków. Nad listą widać przycisk “Save Changes”, który pozwala na zapisanie aktualnego stanu listy w localstorage. Obecnie sama lista wygląda tak:

Nie do końca jest to jeszcze taki efekt, jaki chciałam uzyskać, dlatego na pewno trochę nad listą posiedzę w najbliższym czasie. Jednak ogólny zarys wyglądu jak najbardziej mi już odpowiada. Powiem więcej, nawet jestem z siebie dumna, że zrobiłam coś, co jest całkiem estetyczne. Jak wspominałam wcześniej, odpowiedzialność za część wizualną nie należy do moich ulubionych stron pracy nad projektem w pojedynkę.

Plany na kolejny tydzień

Na kolejny tydzień mam kilka konkretnych zadań:

• stworzenie opisu koncepcji projektu
• dodanie priorytetu do nawyków oraz możliwości sortowania po tym priorytecie
• dodanie możliwości wyszukiwania nawyków po ich nazwie
• zmiana wyglądu zrealizowanych nawyków (teraz pojawia się box z informacją, że cel został osiągnięty, myślę bardziej o “wygaszeniu” zadania na liście, ale nie o jego usunięciu)
• jeśli czas pozwoli – dodanie animacji do listy, które będzie widać przy sortowaniu i wyszukiwaniu

Mam nadzieję, że starczy mi czasu i siły na realizację tych zadań. Chciałabym mieć już w miarę ostateczną formę listy, żeby niedługo móc zacząć pracę nad bazą danych i opcją tworzenia kont i logowania. Chociaż na horyzoncie jest też możliwość przepisana całej aplikacji na Angulara 2, więc zobaczę co los przyniesie!