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+
Witaj w kolejnej lekcji dotyczącej formularzy w angular
material design w poprzednich lekcjach zrobiliśmy tutaj taki prosty formularz tworzenia
zadania mieliśmy tutaj tekstowe pola wyboru radio checkbox
i tak dalej w poprzednich lekcjach korzystałem z formularzy
tych podstawowych czyli forms module w tej lekcji pozwoliłem
sobie zamienić to na reactive forms module czyli jak widzisz tutaj już nie ma ng model
tutaj do formularzy odwołujemy się poprzez javascript no
i cały formularz tu jest ładnie zdefiniowany jako obiekty javascript'owe
więc widzimy tutaj o jego strukturę możemy też w każdej chwili do niego dostać
odczytać wartość wartość tego formularza w tej
lekcji dam jeszcze jedną kontrolkę będzie to kontrolka o tyle inna
zamiast tutaj tekst czy właśnie true false będzie zawierała tutaj datę
i mamy na to dwa sposoby możemy zrobić zwykły html5 date
a możemy użyć specjalnej kontrolki angular material czyli ja tu
pozwolę sobie dodać jeszcze jeden mat form field
jako że do pole nie będzie zbyt długie to ja to pole jeszcze
tutaj razem z kontrolkami w panelu options container
czyli tutaj dodam sobie jeszcze jeden div chodzi o to że jeśli to pole nie będzie zbyt długie
to możemy je umieścić w jednym wierszu z pozostałymi tutaj polami dodatkowymi
żeby nam ten formularz nie był zbyt długi
a jednocześnie żeby nie było pustego białego miejsca no i tu będzie powiedzmy select
date albo dokładniej
due date czy do kiedy nasze zadanie musi
być rozwiązane wykonane tu due date ustawię nazwę pola mat input
text i dodam pole tego typu do naszego formularza czyli
tutaj oprócz tych priority damy jeszcze due
date spróbujmy zacząć z dzisiejszą
aktualną datą zobaczymy co się stanie jak zrobimy to w ten sposób okej
jest formularz jak widzisz ta data nie wygląda zbyt elegancko
do tego że wyświetliła się jako pole tekstowe więc zmienie
to na type date mamy date datetime datetime-local
zobaczmy jak będzie wyglądała data czy to będzie lepiej wyglądało
dużo lepiej tutaj możemy sobie datę po prostu wpisać możemy
też użyć tego wbudowanego tutaj wybieracza date pickera z html5
jest okej on jak najbardziej działa jednak no nie jest
on tutaj w tym stylu material tak nie mamy też za bardzo możliwości tu jego stylowania
co można z tym zrobić możemy użyć takiego date pickera który
jest dostępny razem z angular material czyli
tak tutaj wrócę sobie do app module dodamy
odpowiedni import date
picker module okej
i teraz tutaj ja usunę ten typ date dlatego że chcemy
żeby to się wyświetlało jako zwykły tekst ale ten tekst będzie formatowany właśnie przez
angular material tutaj dodam pod spodem specjalny element mat datepicker
no właśnie datepicker toggle to będzie specjalny
przycisk właśnie takiego kalendarza dodamy go jako mat suffix
jak pamiętasz że pojawia się po prostu po prawej stronie naszej kontrolki jako ikonka okej
jeśli chodzi o rodzaj ikony to może za chwilkę zrobimy
tak że to pole sobie nazwę może
w ten sposób to będzie pole wyboru tu
będzie o właśnie sama wybieraczka
czyli picker i ten picker przypiszę
do zmiennej i powiedzmy due date lokalną referencję stworzę
i teraz tak tutaj żeby połączyć z tym
inputem ten mat datepicker to mamy specjalną dyrektywę mat
datepicker do której przypisujemy referencję właśnie do tej
wybieraczki ja spróbuję może na chwilkę może bez tej ikonki zobaczyć jak to zadziała mamy
jakiś błąd date
adapter no właśnie czyli sam z siebie materiał tak po prostu nie działa musimy
to zrobić no adapter daty dlatego że material tutaj ten date picker obsługuje
różne formaty dat możemy robić natywną datę możemy moment date czyli
biblioteka moment js możemy także skorzystać z biblioteki
moment js która pozwala na dużo wygodniejsze
dużo potężniejsze formatowanie tłumaczenie na inne języki różne formaty dat
my jednak na razie zaczniemy po prostu ze zwykłą datą czyli dodam jeszcze mat
native date module okej
czyli oprócz date pickera potrzebujemy native date module jest
zobaczmy teraz czy się uda wygląda
dobrze jest data i mogę tu wpisywać po prostu
datę w ten sposób czyli 11 11 zrobimy 0
2 05 drugi
piąty utwórz zobaczymy co się pojawi w polu tu
mamy piąty drugi czyli tutaj on to traktuje
jako piątyć styczeń
luty okej czyli
mamy tutaj amerykańską datę dlatego że czas automatyczny ustawił się do ustawień
systemowych czyli tak jak mam w systemie mam amerykańskie ustawienia więc pojawia nam się tutaj data
w formacie amerykańskim no to niestety
ja mogę tylko wpisywać to ręcznie lub stety jeśli to jest coś co co
wolisz żeby móc ustawić datę ręcznie jeśli chcemy ją wybierać no to masz takie datepicker
toggle czyli specjalne tutaj
opcje wybierania daty ona się tutaj pojawia w bardzo brzydki sposób
więc coś tu mam nie tak tu
muszę jeszcze powiedzieć for i
że chodzi o tą wybieraczkę
i tu mam właśnie suffix przez dwa f dlatego tak brzydko to wygląda
teraz powinno się załadować ładnie i ta ikonka właśnie
elegancko jest suffixem czyli dołącza się po prawej stronie i jak kliknę to
pojawiają się tu bardzo ładnie ekran material design w którym mogę wybrać sobie miesiąc
mogę wybrać sobie rok no i oczywiście dzień no
i tu automatycznie nam się to zmienia jeśli tutaj postanowię zmienić po pierwsze powiedzmy w ten
sposób to jest nieprawidłowa data bo jest po amerykańsku powiedzmy
07 12 no
to tutaj mamy lipiec czyli 7 12 bardzo fajnie to działa
tutaj jeśli chcemy możemy tą ikonkę
zmienić mianowicie tu możemy się tu podmienić treść i uzyć
na przykład mat icon
jakiś troszeczkę inny keyboard powiedzmy arrow down
jakoś i teraz musimy się oznaczyć jako specjalny mat date
picker toggle icon
czyli możemy sobie dodać własną
ikonkę lub dowolny inny element html zamiast tego kalendarza
coś pomyliłem mat icon mat
date picker toggle icon
okej zamiast kalendarza powinno się pojawić teraz
coś innego czemu to jeszcze nie działa keyboard arrow
down odświeżę tutaj z wyłączonym
cache'em zobaczmy czy mi się ta
ikonka załaduje prawidłowo mat icon
mat datepicker oczywiście
literówki toggle icon trzeba być bardzo dokładnie tutaj tego
mi nie podpowiada odświeżymy o i zamiast
kalendarza mogę sobie inną ikonkę w tym przypadku jest to ikonka strzałką w dół też
się pojawia kalendarz zwróć uwagę że tutaj te dialogi zachowują się zależnie
od tego jak jest ułożony ekran czyli jeśli jest miejsce na przykład
na dole czyli jest też miejsce żeby się gdzieś ten komunikat
na dole on się pojawia na dole jeśli jednakprzewinę troszeczkę okno i
spróbuję umieścić to gdy za mało miejsca od dołu
powiedzmy załania nam tutaj konsola to on się pojawia tak
żeby się zmieścić na ekranie więc w bardzo inteligentny sposób to okienko jest umieszczane jeśli jak widzisz
przewija no to z nami nie jeździ to tam się trzyma tego elementu
tutaj gdyby to okienko się nam przesuwało i skalowało tak
no to tu możesz się pogubić ale tak to sobie całkiem
nieźle właśnie tu pozycjonowanie tych okien radzi więc zachowuje się to bardzo podobnie
do tego oryginalnego wbudowanego pickera tylko że wygląda ładniej jest to material
możemy to też ostylować okej czyli wracając
do naszego tutaj do date pickera co tu jeszcze możemy w
nim ustawić i jeśli na przykład chcielibyśmy tutaj ustawić
powiedzmy coś zareagować coś zrobić jeśli ktoś wybierze pole to
możemy specjalne zdarzenie tutaj wybrać mianowicie zwykły
change zwykły input zadziałają tak jak pole tekstowe czyli już w trakcie pisania
po prostu będziemy wstawiać eventy jeśli chcemy widzieć że ktoś wpisał sobie
konkretną datę to mamy date input zdarzenie oczywiście event
oraz zdarzenie date change
i one właśnie odpalą się uruchomią się kiedy
tutaj powstanie prawdziwa data czyli jak tylko ktoś skończy ktoś ustawi datę
ja tu może stworzę specjalną funkcje handle date
change albo handle date i
zobaczymy co kiedy te eventy nam się pojawią dodatkowo nie
tylko na polu tekstowym możemy nasłuchiwać eventów możemy także nasłuchiwać tutaj eventów
na samym date pickerze czyli jeśli ktoś kliknie już na tym polu
na tym wybieraczu powiedzmy wybierze rok i już selected
lub wybierze konkretny miesiąc month selected
czy coś tu jeszcze mamy ciekawego możemy nasłuchiwać czy ktoś
otworzył zamknął możemy też przekazać czyli jak widzisz nawias kwadratowy
okrągłe czy możemy tą zmienną w
dwie strony zsynchronizować tak czyli jest zarówno emitter tutaj
open change jak i jest to zmienna do której możemy przypisać co
tu jeszcze się ciekawego znajduje tutaj możemy klasy css ustawić
to może za chwilkę spróbujmy zobaczyć to nasz event
czyli co jeśli ktoś wykona
jakąś akcję jakieś zdarzenie na naszym tutaj polu
formularza okej zobaczmy w przeglądarce
tu nic się nie dzieje jeśli pisze tak
mamy input jeśli kliknę z boku
jest nadal input jeśli wybiorę jakąś datę stąd też
dostaje zdarzenie jeśli wybiorę
rok tu dostaje wtedy ładnie datę okej
i jeśli zmienimy miesiąc to
tutaj coś nie tak pytanie czemu nie dostajemy miesiąca zobaczmy czy są jakieś przykładowe
zdarzenie mamy target target element i
value okej
mam selected czyli na te wszystkie tutaj elementy na te wszystkie
akcje możemy nasłuchiwać zdarzenie dostajemy datę w każdej
sytuacji kiedy zmienimy miesiąc zmieni rok kiedy ktoś wpisze
datę jeśli ktoś wybierze datę po prostu z tego panelu rozwijanego
co tu jeszcze możemy zrobić jeśli chodzi o walidacji ustawienia możemy
ustawić minimalną datę jakąś możemy ustalić też maksymalną
datę i to nam się pojawi jako specjalne tutaj komunikaty
błędów dodatkowo dodatkowo
co tu jeszcze możemy ustawić możemy też jakby odfiltrować dostępne
daty lub ostylować w pewien sposób konkretne daty ja tu
dodam do tego date pickera jeszcze dwa parametry te zmienne
nie mamy jeszcze zdefiniowanej więc sekundka okej
i nasz date filter tu jest spacjalna funkcja która ograniczy
jakie dostępne daty są w naszym wybieraczu tak że
nie muszę mu dowolnej daty wybrać tylko żeby określić które daty są
datami które są dozwolone których możemy użyć tu będzie sobie jakaś data
tak data którą po kolei chcemy sprawdzić i dla
każdej daty będziemy tutaj podejmowali decyzje powiedzmy pobiorę
sobie dzień to będzie data get day
czyli dzień tygodnia nie dzień miesiąca jeśli ten dzień
to jest powiedzmy pierwszy lub
zero to po amerykańsku będzie sobota
niedziela nie równa się
6 to proponuję sobota niedziela zaraz sprawdzimy i
tu wpinam tą funkcję i ona powinna dla każdego ekranu tutaj
wyświetlić nam dostępne daty jak widzisz tutaj z soboty
i niedzielę są szare nie można ich zaznaczyć
tak czyli filtr pozwala nam wykluczyć pewne daty z kalendarza mamy
też drugą możliwość oprócz wykluczania możemy
też inaczej ostylować czyli tutaj sobie wykluczamy daty zarówno te wpisywane jak i te
wybierane tutaj natomiast możemy dodać także coś takiego jak date
class date class
i date class to jest funkcja która będzie nam formatowała daty czy nie
filtrowała tylko formatowa poprzez po prostu dodanie
klasy css do naszego elementu więc
może tym razem pobierzemy sobie nie dzień tylko
dzień nie dzień tygodnia tylko dzień miesiąca może w ten
sposób i niektóre dni będziemy musieli dać specjalną klasę css czyli
powiedzmy jeśli data dzień miesiąca to jest powiedzmy nie
wiem właśnie pierwszy lub to jest powiedzmy 20
tu są jakieś specjalne daty na przykład koniec projektu początek projektu tego
typu właśnie istotne daty to
dodamy tutaj specjalną klasę css powiedzmy
date picker powiedzmy
review day jeśli
nie to zostawiamy po prostu undefined zobaczmy kate
date okej i
teraz pierwszy i dwudziesty powinien mieć dodatkową specjalną klasę css zobaczymy czy
się udało rozwinę i mamy
klasa date picker review day czyli dodam
tutaj sobie jakieś css jeśli taka klasa występuje
w komórce no to zrobimy powiedzmy kolor na
czerwone za mało spróbujmy mocniejszy important
coś jeszcze jest tutaj nie tak a bo to na div
w środku o i mam tutaj czerwone zaznaczone
specjalne dni kiedy mamy tutaj na przykład początek projektu
koniec projektu czy jakieś specjalne tego typu
zdarzenia zobaczmy sobie tutaj jeszcze w css ng deep
date picker review day
i właściwie tego typu style powinny znajdować się w głównym pliku styles css
niekoniecznie w komponencie żeby tu była
globalna informacja bo tak by było ciężko aby przełamać barierę tego komponentu
okej czyli mamy tutaj style mamy zdarzenia no
to jest jeszcze jedna rzecz o której warto pamiętać wszystkie tego
typu no właśnie własne kontrolki popup'y coś
tutaj też będzie na ekranie pytanie czy to prawidłowo będzie zachowywać się zarówno
na komputerze na desktopie i jak na urządzeniach mobilnych na przykład na telefonie
czy ktoś będzie w stanie na małym wyświetlaczu przy użyciu palca wybrać
tą datę i tutaj date picker ma fajną funkcję mamy ustawienie
czegoś takiego jak touch ui ustawić na true może
inaczej is mobile
sobie ustawimy tak i jeśli
jest mobilne mogę ustawić wersje touch ui
i teraz jak to lepiej dostosować miałbyś dwóch wariantów postaram się wykryć
czy mamy tryb mobilny czy nie zrobimy sobie break point observer
break point
observer takie coś sobie importuje tutaj z angular
cdk layout czyli component development kit layout i tu
powinien być w stanie zaobserwować sobie coś takiego tam mam
nazwę ją napiszę żeby było wiadomo o co chodzi i
możemy tutaj zaobserwować pewne to możemy raz sprawdzić czy mamy
tryb jakiś mobilny desktop rozmiar ekranu pozycję
orientację ekranu a możemy tutaj ustawić automatyczne śledzenie i
dodamy tutaj mamy zdefiniowane
gotowe wartości tak jak widzisz na przykład telefon duży
ekran mały tablet web czyli po prostu na przykład dla mniejszych
tutaj ekranów powiedzmy handset w obu przypadkach co
jeszcze tablet może też w obu
przypadkach ustawimy is mobile i to będzie observable oczywiście tu jest to
observable trzeba by to zasubskrybować najprościej jest to zrobić
po prostu tutaj operatorem async czyli on będzie obserwował i każde
zmiany nam zaktualizuje tutaj jako pole okej
tutaj jeszcze robimy pipe map i z tego
wyniku chcemy wyciągnąć tylko czy
dopasował to któryś z tych elementów map zaimportujemy
tutaj zobaczymy czy się uda nie operator trzeba zaimportować
z rx js operators
okej zobaczmy czy to się uda przy każdej zmianie tej rozdzielczości
ten obserwator tutaj powinien nas informować czy dopasowane mamy któryś
z tych dwóch wariantów i odpowiednio tutaj przestawić nam aplikacje
okej sprawdźmy jak to działa tu rozwijam jest to
taki wyskakujący popup jeśli przełączę tryb mobilny tu
mamy jakieś wąskie urządzenie nam się wszystko rozjeżdża nie szkodzi
klikam teraz jak widzisz pojawiają nam się takie duże okienko na cały ekran gdzie
przyciski mają dużo większy rozmiar dużo łatwiej je wybrać nawet tutaj palcem
wskazując tak więc możemy sobie wykryć tryb mobilny
i się przełączyć to zamknę włączę na dużym
ekranie wyskakuje to jako pop-up na małym ekranie na
tablecie powinno to wyskoczyć jako pełnoekranowe okienko
to tyle jeśli chodzi o date picker i jak widzisz
jest on tu dość rozbudowany ma dużo fajnych opcji jeśli chodzi o
właśnie filtrowanie tutaj dodawanie klas zmianę wyglądu
tutaj pewnie jeszcze jest troszkę argumentów które mogliśmy tutaj omówić
zdarzenia tutaj do tego elementu due date też się dostać zrobić
eventy automatycznie czy tam właśnie javascriptem robić open close zobaczy
właśnie czy otwarty zamknięty cokolwiek byś potrzebował potrzebowała
tutaj z tym date pickerem da się to dość prosto zrobić
on tu też ma dużo możliwości modyfikowania formatu
na przykład daty z tłumaczeń możemy też zmienić style zmienić
wygląd tego elementu ale już nie będę wchodził w tego typu szczegóły
jest to wszystko w dokumentacji i mam nadzieję po prostu że po tej lekcji wiesz
mniej więcej jak działa ten date picker i wiesz że on jest prosty de facto w
życiu można go tu łatwo konfigurować bez zwalczania z nim bez
modyfikowania kodu jest tu dużo dużo takich typowych opcji które
możemy sobie ustawić pozmieniać skonfigurować wedle wedle własnego
uznania okej to tyle w takim razie i do zobaczenia w kolejnej lekcji