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+
W poprzedniej lekcji zbudowaliśmy taki przykładowy taki
pasek górny nawigacji kod źródłowy możesz
tutaj znaleźć w materiałach dołączonych do tego kursu jeśli nie
tworzyłeś samemu takiego paska górnego i w tej lekcji
rozbudujemy go o jedną istotną rzecz mianowicie tu mam przycisk menu który nic nie robi tu
mam przycisk menu który nic nie robi mamy także przyciski które oprócz tych notyfikacji
też za wiele nie robią oczywiście nie jest to jeszcze aplikacja więc ten pasek
faktycznie nie powinien mieć żadnych efektów żadnych akcji dopóki nie zepniemy go z prawdziwą aplikacją
niemniej te przyciski tutaj powinny mieć jakąś interakcję
wizualną mianowicie powinno się przynajmniej pojawić właśnie jakieś menu
i teraz tutaj w dokumentacji jak zerkiemy do components i
do sekcji navigation menu to możemy stworzyć właśnie takie proste
rozwijane menu i coś takiego spróbujemy dodać do naszego tutaj przycisku
more vert tutaj możemy dać sobie jeszcze mat tooltip
i powiedzieć sobie menu
czyli jeśli najadę teraz na tą ikonkę powinno się wyświetlić tutaj
ładny komunikat menu i teraz to menu mogę zdefiniować tutaj pod spodem
korzystając z mat menu pamiętaj jednak że jak chcesz korzystać z kolejnych
nowych komponentów materiala no to do każdego modułu trzeba dodać odpowiedni
tutaj import czyli w naszym przypadku będzie to mat menu
module jeśli wiele razy używasz tych samych modułów możesz
oczywiście spakować je w jakiś moduł typu shirt
i eksportować moduły które importujesz dzięki czemu tym razem możesz
zaimportować od razu grupę modułów właśnie w prostszy sposób nie polecam
jednak pisać wszystkiego w jeden moduł shirt dlatego że to zwiększy drastycznie
rozmiar aplikacji a niekoniecznie wszędzie będziemy w każdym module ze
wszystkich elementów materiala korzystali jest takie dopisywanie tutaj ręcznie
sprawi że aplikacja będzie miała końcowo mniejszy rozmiar niż
gdybyśmy tu wszystko wrzucili od razu czyli menu mat menu module mogę
raz użyć sobie taga tagu mat menu w ten sposób
okej teraz mat menu może
zawierać na przykład przyciski czyli dodam sobie button powiedzmy
że będzie to settings czyli ustawienia i
powiedzmy help czyli jakieś informacje
pomocy i teraz takie menu jeśli ja w ten sposób je wyrenderuję to
one tutaj w ogóle nie powinno być widoczne menu wymaga triggera czyli
wymaga akcji która takie menu aktywuje czyli nasz przycisk tutaj
tutaj more vert będzie takim triggerem będzie
akcją na kliknięcie w ten przycisk będziemy chcieli uruchomić to menu i
teraz żeby to menu uruchomić musimy dać mu nazwę i używając kotwicy tak zwanej
lokalnej referencji mogę nazwać to menu na przykład settings
extras menu nazwa
tu jest dowolna sami ją nadajemy i teraz ważne żeby do tego elementu
do tej zmiennej nie przepisywać po prostu komponentów
w ten sposób tylko wyciągnąć z niego konkretną dyrektywę mat menu
żeby w tej zmiennej znajdowała się referencja nie do elementu tylko
do odpowiedniego kontrolera do odpowiedniego obiektu instancji
klasy mat menu którą będziemy mogli sterować kontrolować naszym menu
nasz przycisk tutaj mianowicie możemy dodać dyrektywę mat menu
trigger for i tutaj podajemy
zmienną która jak widzisz wskazuje na odpowiednie menu czyli tu mamy
dyrektywę trigger która sprawi że na kliknięcie w ten przycisk on
menu któremu wskazaliśmy zwróć uwagę że podaję nie tą nazwę tylko tą on wyciągnie
tą klasę i aktywuje to menu zobaczmy jak to nam się zachowa
w tym momencie jak się odświeży stronę klikając tu pojawia nam
się takie niezbyt eleganckie menu te przyciski zobacz nie
dodałem im żadnej klasy żadnego atrybutu więc ich wygląd jest taki brzydki domyślny
przeglądarkowy teraz jeśli chcemy żeby to były menu przyciski
menu to musimy dodać odpowiedni tutaj nie mat-button bo nie chcemy tutaj zwykłych
przycisków tylko chcemy mat menu item
żeby każdy z tych przycisków był elementem listy elementem
naszego menu i tym razem wygląda jak to widzisz dużo dużo
lepiej ciekawostką jest to że to menu samo dopasowuje
się do odpowiedniego tutaj miejsca czyli powiedzmy że jeśli nasz cały
example container miał by szerokość 100% czyli nasz
pasek były od deski do deski to menu jak widzisz zachowuje odpowiedni
odstęp nie wystaje ono poza ekran samo
dopasowuje miejsce jeśli tu z drugiej strony chcemy na przykład w to miejsce
zrobimy to tymczasowo czyli tymczasowo przytnę trigger także
w inne miejsce czyli tutaj to
nasze menu pojawi się z tej strony czyli jak widzisz trigger
decyduje o tym w którym miejscu przypiąć menu jak widzisz kilka różnych przycisków
może wywołać to samo menu niezależnie skąd go uruchomimy on jak widzisz
jako punkt zaczepienia bierze dany przycisk jeśli
chcesz sterować tymi opcjami jak zajrzymy w dokumentację
tutaj w sekcji api mamy różne parametry na przykład wygląd
style klasy kierunek pozycja czyli na przykład pozycja x
i jeśli podam coś takiego do naszego mat menu
czyli nasze mat menu mogę ustalić żeby ono na
przykład zawsze w ten sposób miało pozycję before i wtedy jak sprawdzimy
jeszcze raz jak to zadziała jak widzisz zawsze
się tutaj rozwija do środka a nie na zewnątrz jeśli
usunę ten position i jest jeszcze miejsce po prawej stronie
no to się rozwija widzisz w prawą stronę czyli możemy tutaj
te poszczególne zachowania te parametry menu nadpisać ja nie będę tutaj
omawiał wszystkich jest ich dość dużo możesz sprawdzić wygląd pozycje
kierunek i tak dalej jeśli chodzi
o samo menu co tu możemy jeszcze zrobić te elementy na przykład
oprócz tekstu mogą zawierać także oczywiście ikony czyli
tu jest na przykład settings settings
analogicznie powiedzmy mat icon dla
help okej
czyli menu może zawierać na przykład ikony w
ten sposób menu może zawierać taki
element jakby divider tylko do tego muszę tutaj jeszcze dać sobie mat divider
module i mogę tu pomiędzy elementami dodać taki
rozdzielacz czyli mam dużo elementów możemy je podzielić sobie na kilka
sekcji jak widzisz tutaj w tym miejscu to nie jest zbyt praktyczne niemniej
możemy sobie te elementy porozdzielać co jeszcze
takie menu może być bardziej rozbudowane mianowicie na przykład menu
może zawierać podmenu czyli mat menu
na przykład w ten sposób nazwę go sub menu
lub settings settings menu
czyli analogicznie jak to u góry tyle że
daję mu inną nazwę i tak samo jak triggerem mógł być po
prostu przycisk w ten sposób tak
tutaj na jakimś elemencie na przykład na tym buttonie mogę zrobić mat
menu trigger for i tu podaję sub
menu możemy sobie bardzo skomplikowane tutaj zrobić zależności tutaj
dodam szybko jakieś przyciski jeszcze powiedzmy button mat menu
item i będzie na przykład uprawnienia
co tam jeszcze notification i
jakieś tam jeszcze inne tu możemy zrobić divider
żeby to ładnie wyglądało i teraz przycisk to
otwiera to menu to menu otwiera kolejne menu
i każdy z nich powinien się automatycznie pozycjonować
czyli jeśli otworzę pierwszy poziom settings i mamy
tutaj w drugą stronę się otwiera menu i teraz jeśli to
menu jest takie bardziej rozbudowane mamy dłuższe menu dynamiczne na kilka
poziomów to jak widzisz to menu rozbiło nam ten cały toolbar masa
html'a w środku teraz
dzięki temu że ten trigger wymaga tylko referencji to tak na
prawdę całe menu to jest cały zestaw naszych menu możemy stąd zupełnie
wyciągnąć i przenieść je zupełnie gdzieś na przykład tutaj na dół gdzie nam to nie będzie
przeszkadzało w to miejsce i tutaj potrzebujemy
tylko właściwej referencji czyli możemy z dowolnego miejsca w tym komponencie wywołać sobie to menu
które jest na dole dodatkowo jeśli to menu jest tu bardzo
rozbudowane i my nie chcemy go za każdym razem wywoływać
może czasem potrzebujemy go czasem nie to nie ma renderować tych
wszystkich elementów całej treści tego menu możemy użyć tutaj ng template
i zrobić tego menu szablon w ten sposób dopiero kiedy
użyjemy triggera dopiero kiedy to menu będzie potrzebne dopiero
wtedy ta cała treść zdanie wyrenderowana wcześniej ona nie będzie musiała istnieć
w drzewie domu nie będzie zajmowała tutaj miejsca nie będzie zużywała
zasobów przeglądarki żeby jednak zadziałało ten
template musi mieć odpowiednią dyrektywę mat menu content
w ten sposób i tak samo możemy zrobić
tutaj dla tego drugiego naszego
sub menu czyli mamy tutaj dynamiczną
treść zobaczmy teraz działa
to tak samo jednak dopóki nie bo uruchomimy tego triggera to
w htmlu to menu w ogóle nie istnieje czyli na samym dole jak mamy
nasze tutaj wiersze mat menu nie zawiera żadnych elementów dopiero
jak klikniemy dopiero tworzone są odpowiednie elementy w
tym miejscu w którym są potrzebne więc jest to bardzo fajny wydajny sposób co
jednak jeśli ta treść wymaga jakichś informacji z naszego
szablonu chcielibyśmy wielokrotnie wykorzystać ten sam szablon ale za
każdym razem przekazać mu inne dane czyli powiedzmy
tu dodam jeszcze jeden przycisk będzie to powiedzmy
person i zrobiłem tej log out czyli
opcja wylogowania ale chciałbym żeby ona była dynamicznie dostępna
niedostępna zależnie od tego czy jesteśmy zalogowani czy nie czyli
musimy tu jakoś do tego szablonu przekazać odpowiednią zmienną i
teraz działa to w ten sposób że każdy trigger skąd chcemy wywołać
to menu każdy
trigger może mieć coś takiego jak mat menu trigger
data i tutaj przekazujemy
obiekt który zawiera klucze i wartości
na przykład user true i
coś innego na przykład false 123 czyli możemy tutaj dowolne dane
przekazać możemy natomiast true false mój cały obiekt użytkownika tutaj przekazać też
nic nie stoi na przeszkodzie na
przykład w ten sposób i teraz żeby do tej danej się dostać musimy
w szablonie po prostu konkretny ten klucz przypisać do zmiennej
szablonu czyli nasz mat menu content na
ng template do tego tutaj musi być faktycznie template robimy let nazwa
zmiennej czyli na przykład user równa się i tutaj nazwa
zmiennej stąd więc ja może current user
równa się user czyli
to jest zmienna którą nam trigger przekazał a to jest lokalna
zmienna której mogę na przykład użyć w tym miejscu czyli
ng if i jeśli mam użytkownika no
to wyloguj się zobaczmy
teraz jeszcze raz mamy
logout bo mamy użytkownika i teraz zrobić coś takiego żeby
może tutaj tym razem zrobimy false czyli powiedzmy że jesteśmy
wylogowani i
nie mamy opcji wylogowania i w ten sposób możemy przekazywać więcej informacji
na przykład przekazać tutaj funkcje obiekty zmienne wszystko czego
będą potrzebowały nasze menu i zwróć uwagę że przypisuję to do
konkretnego triggera czyli jeśli mamy kilka triggerów to każdy z nich może
to samo menu uruchomić z innymi opcjami z innymi parametrami żeby
inne informacje inny rodzaj meniu inne parametry inne przyciski wyświetli
zależnie od tego który z triggerów który z aktywatorów wyświetlił
to menu menu pozwalają także na programistyczny dostęp
mianowicie jak mam przypisane menu do zmiennej extras menu to
mogę tutaj podejrzeć sobie różne opcje parametry zmienne funkcje
dostępne na tym obiekcie mat menu mogę jak widzisz tutaj dodać
elementy ustawiać różne własności sprawdzać pobierać klasy
zmienić pozycję czyli mamy dostęp do wszystkich różnych wartości tego menu
zwróć jednak uwagę że na menu mogę je zamknąć sprawdzić
czy jest zamknięte ale nie mogę z menu samego otworzyć żeby menu otworzyć
to jest menu kontekstowe ona potrzebuje punkt zaczepienia trigger
jest koniecznym warunkiem dlatego że pamiętasz że trigger jest punktem zaczepienia menu
czyli jeśli chcemy otworzyć menu no to muszę nazwać na przykład
tutaj ten button i tu zrobimy sobie powiedzmy menu trigger
nazwa dowolna i wyciągnę odpowiednią klasę czyli
mat menu trigger
spróbujmy w ten sposób okej i
jak zobaczymy sobie teraz mat menu trigger to bym jeszcze troszeczkę niżej tutaj pod
paskiem powiedzmy
jakiś widoczny przycisk toggle
menu i tu na click mogę
odwołać tego triggera i tu mamy close menu focus mamy
sprawdzić możemy czy jest otwarte czy nie możemy otworzyć menu
i możemy włączyć wyłączyć czyli toggle zmieniać stan tego
menu czyli jak widzisz można z komponentu z innego
przycisku z klasy sterować sobie tym menu czyli tu wchodząc
w interakcje z tym menu programistycznie jest to także możliwe
polecam tobie zajżeć do api i tutaj do dokumentacji i
jeśli potrzebujesz więcej tutaj informacji czy jakieś specjalistyczne nietypowe
zachowanie tego menu przejrzyj te opcję prawdopodobnie jest tam jakiś sposób żeby
osiągnąć to czego potrzebujesz okej to tyle jeśli chodzi
o menu nasz toolbar tutaj już jest dość skomplikowany
ma różne opcje więc na tym zakończymy i
do zobaczenia w kolejnych lekcjach