w Praktyce
7 godz. 1 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerPodstawą produktywnej pracy z angularem jest możliwość zagwarantowania że wszystko działa bez potrzeby wielokrotnego “przeklikiwania” poszczególnych ekranów. W pierwszej części kursu omawiam więc temat testów automatycznych.Już po obejrzeniu pierwszych lekcji zobaczysz dlaczego warto testować kod i jak dzięki narzędziom dostarczonym z angularem jest to proste. Zobaczysz jak testowanie automatyczne pozwoli zaoszczędzić Ci wiele godzin spędzonych na szukaniu błędów.
Za jakość aplikacji odpowiada nie tylko to czy działa ona poprawnie, ale w dużej mierze decyduje o tym dobry interfejs użytkownika oraz UX, czyli user experience. Dwie kolejne sekcje kursu poświęcone są właśnie dobremu UI oraz UX. Omawiam typowe problemy w oparciu o zasady i wskazówki specyfikacji Google Material Design - jednej z najbardziej szczegółowych specyfikacji UX. Wszystkie przykłady UI zarówno w wariantach desktopowych jak i mobilnych omówione są na przykładzie Angulara oraz obszernej biblioteki komponentów Angular Material. Zobaczysz nie tylko jak korzystając z gotowych komponentów błyskawicznie budować nowe funkcjonalności, ale przy okazji omówimy wiele praktycznych wskazówek oraz dobrych praktyk UX które warto wykorzystać w Twoich aplikacjach.
W ramach budowania interfejsów skupimy się na najmniejszych szczegółach takich jak prawidłowe zachowanie linków, przycisków oraz wskaźników przechodząc stopniowo do coraz większych elementów aplikacji takich jak nawigacja, układ strony, paski nawigacyjne czy okna dialogowe. Przy każdym etapie czeka Cię masa wskazówek, przykładów i rozwiązań typowych problemów user experience.
Jednak UX to nie tylko wygląd i zachowanie pojedynczych elementów. W ostatnich sekcjach kursu dowiesz się jak projektować bardziej złożone interakcje z użytkownikiem. Zobaczysz wieloetapowe formularze kreatora oraz dowiesz się jak zarządzać stanem aplikacji oraz różnymi źródłami danych. Pokaże Ci jak zbudować samodzielnie sortowane, filtrowane i stronicowane źródła danych oraz połączyć je z różnymi komponentami UI takimi jak listy czy datagrid.
Na koniec kursu zobaczysz jak możemy różne gotowe elementy UI połączyć w przepływ ekranów budując ścieżkę użytkownika. Zobaczysz jak prawidłowo zaprojektowane komponenty wraz z dobrze zaplanowanym UX pozwalają być niesamowicie produktywnym jednocześnie nie poświęcając jakości czy dobrej architektury aplikacji.
Jest to kurs dla osób które już pracowały z angularem i chciałyby wyjść poza pojedyncze techniki oraz poznać proces projektowania aplikacji w praktyce z uwzględnieniem najlepszych praktyk programistycznych oraz user experience. Zarówno w wariancie webowym jak i projektując pod urządzenia mobilne.
Angular 6, 7, 8+
A więc skończyliśmy ostatnią lekcję kursu Angular.
W praktyce przerobiliśmy tutaj różne kwestie od struktury projektu, testowania,
budowanie pojedynczych elementów, budowanie ekranów, zarządzanie danymi.
Było tu dużo rzeczy w głównej części, tutaj opierały się Angular materiały.
Chciałem jednak, żebyś nie myślał o tym kursie jako kursie Angular Material.
Te wszystkie wzorce, praktyki
UX owe, jak i struktura aplikacji o testy możesz jak najbardziej wykorzystać w
swoich projektach, nawet jeśli nie korzystasz z Material Design.
Po prostu ta struktura komponentów, te praktyki, te wzorce, które tutaj
pokazaliśmy, są bardzo dobrze przemyślane, sprawdzone już w innych aplikacjach
i warto tutaj z nich uczyć się wziąć przykład.
Nawet jeśli Twoja aplikacja faktycznie
niekoniecznie ma wyglądać jak Angular Material.
Tutaj też w kursie, mimo że przerobiliśmy masę różnych przykładów, masę elementów,
to na pewno nie przeszliśmy przez wszystko.
Nie prosiłem też wszystkich opcji.
Gdybyśmy chcieli faktycznie to zrobić, to
kurs byłby bardzo długi i zapewne bardzo nudny.
Gdybyśmy każdy parametr, każdą opcję chcieli omówić.
Więcej by też pozostaje dla Ciebie tutaj sporo miejsca do eksploracji, żeby
zobaczyć co tu jeszcze można zrobić, jakie jeszcze opcje parametry są dostępne.
Także polecam tutaj przejrzeć sobie CD ka, czyli tutaj Component Development.
Kiedy chcesz tworzyć własne komponenty, niekoniecznie oparte o material, to to o
czym się uczyliśmy jest tutaj jakby podzielone jeszcze na samą logikę.
Same elementy Java, skryptowe, same dyrektywy bez CSS, a tutaj.
Czyli masz pełną dowolność sterowania, ale możesz wykorzystać np.
pewne elementy tutaj na przykład tabeli,
którą omawialiśmy, stworzyć własną tabelę z własnymi stylami, ale jednocześnie żeby
wykorzystać wszystkie te mechanizmy, o których mówiliśmy.
Polecam też przerobić sobie Guides.
Jest tu też sporo ciekawych informacji ponad to, co znajduje się w kursie.
I tak jak mówię, to co omawialiśmy tutaj z Material Design to co ma być.
Jeśli chodzi o samą specyfikację materiał
jest to masa cennych informacji na temat UX, UI, struktury aplikacji.
Tak więc jest to kurs w praktyce.
Tak, skupiałem się na tym
jak myśleć o Angular, że jak myślisz o budowaniu aplikacji,
której material był taką dużą podporą, też teoretyczną, praktyczną.
Dało nam zestaw gotowych klocków,
aczkolwiek największą wartość wyciągniesz z tego, jeśli będziesz po prostu myśleć o
tych elementach jako o przykładach, które można we własnej aplikacji zastosować.
Bardzo za uwagę.
Za to, że dotarłeś do tej części kursu.
Jeśli elementy, które były nie do końca
jasne, niezrozumiałe, to też pamiętaj, że jest to kurs w praktyce.
Ja zakładam, że przerobiłem przerobiła już tutaj materiały
z pozostałych kursów lub jeśli coś było niejasne korzystałem z
jakiś narzędzi, jakiś mechanizmów RPG, które nie były jasne, to polecam zajrzeć
do pozostałych kursów Angular owych na łeb oraz kursu w JavaScript ECMAScript Script.
Jest tam masa informacji uzupełniających, które pozwoli Ci ten kurs lepiej zrozumieć
oraz te wzorce, których się nauczyliśmy też zastosować w innych projektach, które
niekoniecznie korzystają z Material Design.
Ja dziękuję i mam nadzieję do zobaczenia w innym kursie na.