Czas na podsumowanie pierwszego tygodnia pracy nad projektem w ramach konkursu Daj Się Poznać. Nie udało mi się zrobić wszystkiego, co zaplanowałam, bo moje możliwości okazały się trochę mniejsze niż ambicje. Większość czasu spędziłam na szukaniu rozwiązań i doczytywaniu różnych kwestii. Na szczęście, pierwszy commit już jest na githubie.
Przejdźmy zatem do szczegółów, czyli, co udało mi się zrobić.
Po pierwsze – rozpisałam szczegółowy plan, czyli kroki tworzenia aplikacji.
Wcześniej nie przygotowywałam sama aplikacji, więc postanowiłam podzielić pracę na kilka części. Każda część może być jednocześnie traktowana jako osobny projekt. Już tłumaczę, jak to rozumieć: nie chcę budować na 100% każdej funkcjonalności od razu, tylko najpierw stworzyć ramy, zbudować coś prostego, co działa i jest miłe dla oka. Kolejnym krokiem będzie ulepszenie tego, co już mam. Wiem, że mogłabym od razu starać się zaimplementować wszystkie zaplanowane funkcjonalności, ale uznałam, że to będzie za dużo,jak na pierwszy raz. Poza tym, lubię widzieć efekty swojej pracy, a właściwei cały poprzedni tydzień upłynął na budowie menu i czytaniu o tym, jak to zrobić najlepiej, i nie chcę tego powtarzać. Może będzie czekać mnie przez to więcej pracy (np. budowanie responsywnych widoków będzie wymagało napisania części kodu od nowa), ale dzięki temu sposobowi szybciej uda mi się uzyskać działającą aplikację. Rozrysowałam sobie również na kartce rozkład elementów na stronie oraz wstępne funkcje (czyli – gdy klikasz tu, pojawia się to i to). Plan jest bardzo wstępny i na pewno zmieni się z czasem, ale wiem, jakie etapy mnie czekają. Wybrałam również paletę kolorów oraz fonty, które mają być zastosowane w aplikacji.
Po drugie – przygotowałam środowiska do pracy.
Nigdy sama nie przygotowywałam aż tak skomplikowanego środowiska (jak dla mnie), więc wspomogłam się gotowym z tutoriala na oficjalnej stornie Angulara (tutaj można zobaczyć całą treningową aplikację). Skopiowałam więc to, co było we wspomnianej aplikacji i przystosowałam do swoich potrzeb. Co więc zrobiłam? Usunęłam narzędzia testowe, czyli Karmę i Jasmine, bo na razie nie chcę rzucać się na aż tak głęboką wodę. To moje pierwsze kroki w Angularze, także na razie chce się skupić na budowaniu strony, a nie pisaniu testów. Jeśli zostanie mi czas, na pewno wrócę do kwestii testów. Druga rzecz to było dodanie Gulpa, żeby móc pracować w Sassie. Kolejną rzeczą było przygotowanie plików do pracy już bezpośrednio w aplikacji. Zbudowałam więc wstępną strukturę – podzieliłam moją aplikację na części, które będą jednocześnie różnymi widokami. Mam między innymi stronę powitalna, stronę z demo aplikacji, czy strony logowania lub rejestracji.
Po trzecie – zaczęłam pracę nad samą aplikacją.
Jak już wspomniałam wcześniej, nie poszło to dokładnie tak, jak założyłam. Przez pierwszy tydzień chciałam zakodować menu i stronę powitalną, a jeśli się uda, także stronę z opisem koncepcji projektu. Utknęłam z menu. Nie wiedziałam, na co się zdecydować. Czy budować je za pomocą wbudowanych funkcji Boostrapa, czy może zrobić je w jQuery, czy użyć funkcji Angulara, skoro aplikacja ma być w Angularze. Albo połączyć to wszystko. Plus jeszcze dodać responsywność. Próbowałam, testowałam – bez większych sukcesów. Wtedy właśnie podjęłam decyzję, żeby najpierw skupić się na zbudowaniu szkieletu, a nie wnikać na razie na przykład w kwestie responsywności w Angularze. Finalnie, mam menu zbudowane na Bootstrapie, na razie nie zmienia się w hamburger menu przy mniejszych ekranach.
Problemem okazał się także Sass, a dokładniej śledzenie plików SCSS przez Gulpa. Wszystkie ścieżki były określone dobrze, a jednak pliki CSS nie generowały się odpowiednio. Udało mi się na szczęście to w miarę szybko naprawić. Chyba po prostu wywołałam za dużo poleceń plus źle nazwałam pliki, które miały być zaciągane do głównego pliku SCSS i przez to skończyłam z kilkoma CSSami. Ale już sytuacja opanowana, plik CSS jest jeden. Pliki SCSS podzieliłam analogicznie do poszczególnych elementów aplikacji (czyli menu, strona powitalna, itp), dodałam także plik ze zmiennymi, gdzie zdefiniowana kolory oraz fonty, których chcę używać. Powstał także plik _general.scss do styli dotyczących całej aplikacji.
Po tych wszystkich przebojach, menu wygląda na razie tak:
Nie ma dużo do pokazania, ale w przyszłym tygodniu powinno już być trochę lepiej.
Na sam koniec – plany na kolejny tydzień.
Jak już wspomniałam, chcę zakodować stronę powitalną i tę o koncepcji projektu (tj. kilka informacji o tym, jak buduje się nawyki i dlaczego warto to robić). Chcę również dodać przekierowywanie do odpowiednich widoków, w zależności od tego, co użytkownik wybierze z menu. Czeka mnie więc użycie ngRoute w Angularze oraz przygotowanie modułów, komponentów i plików html dla każdego widoku. Plus oczywiście stylowanie. Rozważam użycie flexboxa, ale muszę najpierw poczytać, jak wygląda użycie jednocześnie klas Bootstrapa i flexboxa.
Kolejny raport za tydzień 🙂