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 pierwszej lekcji tego kursu nim zaczniemy
pracę już z kodem chciałbym poświęcić właśnie w tej lekcji chwilkę
na omówienie narzędzi z których będziemy korzystali oraz ich instalacji
i konfiguracji oczywiście do pracy z frontem tutaj z frontemendem
z javascriptem będzie nam potrzebny tutaj note i ja zainstaluję tutaj wersję 10
możesz zainstalować wersję wyższą powinno to także działać jeśli
masz tutaj lts przynajmniej w wersji 8 jeśli masz nowszą wersję node'a powinno
to także działać czyli tutaj w pobranych plikach wersję node
możesz już sprawdzić po prostu czy już masz node po prostu uruchamiając wiersz
poleceń przy starcie uruchom cmd i piszemy node myślnik
v powinna tu ci się wyświetlić wersja jeżeli masz błąd
jak tutaj to znaczy że tego node'a trzeba zainstalować tutaj pokażę ci jak szybko przez ten proces
przejść jak już pobierzesz tutaj wybierzesz od windows installer
no to tutaj po prostu uruchamiamy instalator pojawi
nam się takie okienko instalacji tutaj akceptujemy licencję
wybierasz ścieżkę w której chcesz go zainstalować proponuję wszystkie opcje tutaj zostawić tak
jak są ważne jest żeby w ścieżce path było dodane czyli to jest okej i
już minąłem zainstalowało npm czyli node package manager dalej instaluj
tutaj wyskoczy tutaj okienko windowsa które
musimy zgodzić na instalację tutaj to chwilę zajmie w tym czasie ja
tutaj już pobiorę sobie visual studio code tu
jest opcja także download for windows i tutaj też pobrał mi
się instalator zobaczmy w wynik tego instalatora
powinien mi się pojawić tutaj sukces okej jeśli to się udało
tutaj możemy także spróbować jeszcze raz node myślnik v trzeba oczywiście zrestartować
wiersz poleceń uruchomić go jeszcze raz aby ta nowa
ścieżka path o którym mówiłem tutaj jeszcze raz się zaczytała
żebyśmy zobaczyli node v mam tutaj 10
każda wersja 10 i wyżej będzie okej wersja 8 też powinna
być okej jeśli masz nowszą wersję tak to powinno działać bez problemu czyli
visual studio code to z którego ja będę korzystał możesz oczywiście korzystać
z dowolnego edytora najwygodniej będzie podążać ci za ćwiczeniami które
pokazuje sens tego samego edytora po prostu będziesz miał w te same opcje te same przyciski
w tym samym miejscu co ja nie będziesz musiał szukać więc
ja tutaj szybko zainstaluję także visual studio code także
wyskakuje okienko windowsowe do potwierdzenia tutaj mamy tylko
niestety angielski polskiego nie mamy i
tak samo creator akceptujemy licencję wybieramy ścieżkę gdzie
go zainstalować te ikony na pulpicie tutaj
polecam tak żeby dostać dodać do ścieżki path to się przyda możesz
też wybrać opcję dodaj uruchom z kodem do eksploratora
windows prawym kliknąć otwórz z kodem to też bardzo przydatna
opcja możesz też zarejestrować tutaj visual studio code żeby
korzystało z rozszerzeń żeby rozszerzenia pliku html css js
było otwierane domyślnie w tym edytorze i kolejną rzeczą
z której będziemy korzystać to jest angular cli mianowicie nie będziemy ręcznie skonfigurować całego
projektu tylko skorzystam jest dobrych praktyk struktury która jakby
jest sugerowana strukturą dla projektu angularowego czyli jak już mamy node
mamy npm dostępne w ścieżce no to wykonamy właśnie
to polecenie żeby zainstalować sobie no
właśnie angular cli czyli wyczyszczę tutaj npm
install global w skrócie g angular cli
będzie pobierało ja zobaczę jak w tym czasie z naszym visual
studio code zainstalował się możemy go uruchomić i
polecam do pracy z angularem zainstalować sobie tutaj na
pewno takie rozszerzenie jak angular
language service jest to rozszerzenie które dodaje tutaj opcję intellisense
czyli podpowiadania rozpoznawania obiektów elementów składni właśnie
szablonów angular i nie tylko bardzo przydatny tutaj w pisaniu
pozwala nam bardzo szybko wychwycić ewentualne błędy a także przyspiesza pisanie
przyspiesza kodowanie potem podpowiada wszystkie istotne
rzeczy okej jeśli będziesz chciał korzystać z
komponentów które zawierają w sobie szablony od razu nie osobno to
możemy także zainstalować angular 2 inline jest
to wtyczka która prostu uruchamia kolorowanie składni html
wewnątrz komponentów czyli tutaj mamy szablon właśnie w ten
sposób wewnątrz komponentu czy to style czy html to
jest on ładnie kolorowany ok zobaczymy w międzyczasie czy zainstalowało
się tutaj nam angular cli i jeśli wszystko poszło dobrze to
powinniśmy także mieć dostępne polecenie ng tu
mamy listę dostępnych poleceń i zrobimy ng v
czyli version w tym momencie zainstalowałem wersję angular cli 612
tutaj przykłady z tego kursu kolejne lekcje będą operowały na
wersji 6 czyli 6 i wyżej powinno tutaj działać
jeśli będziesz pracować na wersji niższej starszej angulara na piątce
to mogą być drobne różnice jednak koncepcje pozostają
te same przy wersji siódmej też mogą być drobne
takie kosmetyczne różnice jeśli chodzi o poszczególne nazwy funkcji czy
parametry nie mniej ta wersja 6 z której tu korzystam będzie wersją długoterminową
czyli wersją lts tak samo jak node lts czyli wersja która będzie długo wspierana
no i wersja 7 i te dane dalsze powinny być dalej kompatybilne z tą wersją więc polecam
szóstkę lub wyżej jeśli chcesz właśnie mieć pewne że nie będzie problemu z przykładami
z kodu i chcesz uruchomić przykłady dołączone do tego kursu
no to polecam tobie właśnie tą wersję 621 jeśli chcesz zainstalować
konkretną wersję to po prostu przy instalacji tu podajesz małpa 6.1.2
i to zainstaluje ci dokładnie tą wersję którą tutaj będę
wykorzystywał w lekcjach kursu to tyle jeśli chodzi o instalację
i konfigurację narzędzi jeśli chcesz możesz tutaj w rozszerzeniach
poszukać jeszcze jakieś wtyczek które tutaj cię interesują które uważasz
że ci pomogą ja tutaj nie będę już więcej instalował ewentualnie
jeszcze możesz spróbować zainstalować coś takiego jak
type script importer zobacz tu czy tutaj ten
visual studio code podpowiada sam importuje odpowiednie
pliki importuje moduły jeśli to sposób w jaki importuje
się nie podoba możesz tutaj aktywować lub nie aktywować wtyczkę pamiętać żeby po instalacji przeładować
cały edytor czyli reload który właśnie zrobiłem przed chwilą tutaj jeszcze git
okej czyli to tyle jeśli chodzi o konfigurację instalację
następnie zajmiemy się tutaj wygenerowaniem struktury pustego
projektu no i rozpoczniemy już ćwiczenia omówienie poszczególnych
tutaj treści tego kursu o tym wszystkim
już w kolejnej lekcji i tak więc do zobaczenia