Jak się uczę: AngularJS część 2

Dzisiaj druga część z nowej serii Jak się uczę. Nadal pozostaję w temacie Angulara 1.x, ale tym razem chciałam przedstawić Wam listy zadań, które stworzyłam podczas nauki. Dzięki nim mogłam sprawdzić swoją wiedzę i utrwalić to, co przerobiłam na kursach.
Dla osób, które nie czytały części pierwszej – krótkie wyjaśnienie. Seria Jak się uczę ma przybliżyć mój sposób nauki nowych zagadnień w zakresie front-endu. Będzie więc o frameworkach, bibliotekach czy różnych narzędziach. W poprzednim wpisie opisałam materiały, z których korzystałam ucząc się podstaw AngularJS. Wpis można znaleźć tutaj. Z kolei wszystkie wpisy z serii znajdują się w kategorii Jak się uczę.

Tytułem wstępu

Ucząc się czegoś nowego zazwyczaj robię notatki w OneNote. Pozwala on na łatwą kategoryzację i naprawdę wygodne poukładanie wszystkich notatek. Mam w swoim zeszycie OneNote odpowiednie sekcje, w których tworzę kolejne zakładki. Dzięki temu mogę potem szybko odnaleźć interesujące mnie zagadnienia. Gdy zaczynam nowy temat, od razu tworzę sobie dwie zakładki – jedną z różnymi linkami, a drugą z zadaniami, które muszę wykonać. W trakcie przerabiania materiału zapisuję sobie w punktach różne rzeczy do zrobienia. Zadania można podzielić zazwyczaj na dwie główne kategorie. Pierwsza to rzeczy do przećwiczenia z tematu, który właśnie przerabiam. Druga natomiast to zagadnienia, które pojawiają się przy okazji, wątki poboczne, o których chciałabym więcej poczytać.

Lista 1 – podstawowe zagadnienia

Chcę, by ten wpis był bardzo praktyczny, dlatego od razu przechodzę do pierwszej listy. Powstała ona podczas przerabiania materiałów z tutoriala na oficjanej stronie Angulara (tutorial tutaj) oraz podstawowego kursu z Angulara na Codecademy (kurs tutaj). Większość zadań bazuje dość mocno na tych dwóch kursach, ale wydaje mi się, że można je sobie “przełożyć” też na inne kursy, bo zakładają tworzenie aplikacji w różnych wariantach. Przerobienie tych kursów nie jest więc konieczne, aby skorzystać z listy. Do rzeczy!

Do zrobienia
• stworzyć przykładowy moduł, komponent, kontroler i template
• stworzyć aplikację pobierającą listę książek (lista zapisana jako array)
• do listy książek dodać obrazki (każda książka jako obiekt z atrybutem picture, który zawiera url)
• dodać funkcję wyszukiwania książek po tytule i roku
• dodać licznik + i – do każdej książki plus funkcje zmieniające liczbę polubień pod każdą książką
• dodać opcję filtrowania
• pobierać listę jako JSON; do użycia gotowe pliki JSON z codecademy – pogoda, zdjęcia, maile
• dodać dodatkowy widok przekierowujący do detali danej książki po kliknięciu (użycie routingu)
• pobierać listę z API zamiast z JSON; różne API do użycia tutaj (na końcu artykułu)
• stworzyć aplikację, która pobiera zdjęcia z NASA API – link tutaj
• dodać animacje w CSS do listy (przewijanie itp na przykład podczas filtrowania)
• napisać test na podstawie tego w tutorialu – np sprawdzić, czy lista zawiera 5 książek

Jak widać, zadania są dość ogólne, nie ma podanych zbyt wielu szczegółów. Zazwyczaj wymagały poszukania rozwiązania i przypomnienia sobie materiału z kursu.

Lista 2 – zagadnienia poboczne

Podczas przechodzenia przez materiały ze wspomnianych wyżej kursów, pojawiało się dużo dodatkowych zagadnień, o których chciałam poczytać. Były to zarówno tematy, z którymi już się spotkałam i chciałam je sobie odświeżyć, jak i takie, o których słyszałam po raz pierwszy. Dlatego właśnie niektóre zagadnienia z listy są bardzo podstawowe, bo nie miałam o nich wcześniej pojęcia. A lista wyglądała tak:

Do przeczytania
• jak dokładnie działa use strict
• przeczytać co to Karma
• przeczytać co to Bower
• przeczytać więcej o Protractor API
• funkcja callback w JS
• przypomnieć sobie animacje w CSS i jQuery
• użycie HTTP i API w JS
• co to jest IIFE
• przeczytać o design patterns

Jak to działa?

Dla mnie tworzenie tego typu list jest najlepszą formą nauki. Dzięki temu jestem pewna, że nie umkną mi dodatkowe wątki, o których chcę poczytać, a do tego będę w stanie przetestować nowo zdobyte umiejętności. Gdy nie robiłam takich list podczas nauki, często wydawało mi się, że już coś umiem, gdy tak naprawdę nie byłam w stanie odtworzyć tego, o czym przeczytałam. Przechodzenie przez kolejne zadania, które spisałam w trakcie nauki, po prostu zmusza mnie do przypomnienia sobie potrzebnych informacji. Zawsze najpierw staram się wykonać zadanie bez wracania do materiałów. Na tyle, na ile pamiętam buduję choćby szkielet rozwiązania. Później porównuję sobie moje rozwiązanie z tym z kursu. Dobrze jest robić listy przerabiając jakiś materiał, bo łatwo potem zweryfikować poprawność swoich odpowiedzi. Często też nie miałam pomysłu, jakie jeszcze zadania mogłabym zrobić, żeby sobie coś utrwalić, więc spisywanie takich zadań na bieżąco pozwala po prostu odtworzyć te z kursu. Zupełnie inaczej wygląda próba napisania aplikacji od zera, niż uzupełnianie tylko niektórych linijek w zadaniach na codecademy. Bardzo polecam tę formę nauki. Mam nadzieję, że moje listy posłużą jako przykłady zadań, które można sobie wyznaczyć. Oczywiście zachęcam też do korzystania z list bezpośrednio, bo na pewno pozwolą Wam sprawdzić swoją wiedzę i wskazać obszary, nad którymi jeszcze trzeba popracować. Udanej nauki!