Ta lekcja jest w bazie eduweb
Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.
Lekcja 7/ 33TestBed - uprząż testowa
Angular: TestBed - uprząż testowa
Czego się nauczysz
- Poznaj automatyczne testy jednostkowe
- Zastosuj komponenty Angular Material Design
- Dobre praktyki UX w projektach Angular
- Praktyczne wzorce budowania formularzy w stylu Material
- Nawigacja w praktyce i responsywny układ strony
- Dynamiczne tabele i konfigurowalne źródła danych
Angular - w Praktyce
Dla każdego kto pracował z Angularem przychodzi moment, w którym znajomość podstaw i pojedynczych technik to za mało. Gdy już poznasz mechanizmy Angulara następnym krokiem są dobre praktyki - właściwa struktura aplikacji, reguły UX / UI oraz dostępne narzędzia i biblioteki. Ponadto gdy aplikacja rośnie pojawiają się kwestie jakości kodu i wczesnego wykrywania błędów.
W kursie tym skupiam się więc na 3 najważniejszych zagadnieniach - jakości kodu, użytecznym interfejsie oraz sprawnym zarządzaniu źródłami danych i stanem aplikacji.
Testowanie zautomatyzowane w praktyce
Podstawą 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.
UX z Angular Material Design
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.
Komponenty Material oraz dobre praktyki
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.
Formularze w stylu Material
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.
Projektowanie przepływu ekranów i nawigacji
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.
Dla kogo jest ten kurs?
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.
Wersja oprogramowania: Angular 6, 7, 8+
Kurs Angular
7 rozdziałów33 lekcje7h 1min
Wprowadzenie
3min
- Wstęp3min(zablokowana)
Konfiguracja
18min
- Instalacja i konfiguracja7min(zablokowana)
- Przygotowanie projektu11min(zablokowana)
Testy jednostkowe
2h 47min
- Konfiguracja testów12min(zablokowana)
- Pokrycie linii kodu7min(zablokowana)
- Jasmine i asercje testowe12min(zablokowana)
- TestBed - uprząż testowa20min(zablokowana)
- Fixtura komponentu i DebugElement15min(zablokowana)
- Testowanie wiązań i wykrywanie zmian8min(zablokowana)
- Testowanie interakcji ze szpiegiem12min(zablokowana)
- Testowanie formularzy11min(zablokowana)
- Testowanie formularza z ngModel13min(zablokowana)
- Input i Output w testach komponentów25min(zablokowana)
- Mockowanie Usług i Observable32min(zablokowana)
Material Design
1h 52min
- Instalacja Material Design8min(zablokowana)
- Przykłady Angular Material11min(zablokowana)
- Ikony i wskaźniki13min(zablokowana)
- Interakcje - przyciski i linki14min(zablokowana)
- Paski nawigacji i przycisk FAB14min(zablokowana)
- Menu kontekstowe16min(zablokowana)
- Listy elementów, wiersze i kolumny13min(zablokowana)
- Listy szczegółów i akcji10min(zablokowana)
- Przykład praktyczny - Kontakty12min(zablokowana)
Formlarze Material Design
1h 29min
- Formularze w Material Design10min(zablokowana)
- Kontrolki w stylu Material17min(zablokowana)
- Walidacja i komunikaty błędów18min(zablokowana)
- Pola daty i okno kalendarza23min(zablokowana)
- Wybór i podpowiadanie - Autocomplete22min(zablokowana)
Stan aplikacji i nawigacja
1h 5min
- Nawigacja boczna i offcanvas17min(zablokowana)
- Dynamiczna tabela z danymi16min(zablokowana)
- Paginacja źródła tabeli19min(zablokowana)
- Sortowane kolumny tabeli13min(zablokowana)
Zakończenie
3min
- Zakończenie3min(zablokowana)
Ten kurs jest w bazie eduweb
Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.
Autor kursu
Bio
Senior Developer, Konsultant i Szkoleniowiec. Pracował z wieloma polskimi i zagranicznymi firmami nad projektami z sektorów E-Learning, Reklamy, E-Commerce, Transportu oraz Bankowości i Finansów. Z technologiami Internetowymi pracuje od ponad 10 lat. Pasjonat technologii Front-End, JavaScript'u a także Marketingu Internetowego i E-Commerce.