Aplikacje webowe 2 (frontend) – React w praktyce II edycja 13.05.2020

W dniu 13.05.2020 w ramach Projektu nr. POWR.03.05.00-00-Z114/17-00 pt. „Zintegrowany Program Rozwoju Wyższej Szkoły Informatyki Stosowanej i Zarządzania” odbędą się zajęcia warsztatowe Aplikacje webowe 2 (frontend) – React w praktyce II edycja. Zajęcia realizowane będą zdalnie poprzez MS Teams w godzinach 14:00 – 20:15. Zajęć realizowanych w projekcie nie widać w Państwa kalendarzu w UBI. Logujecie się do Teams poprzez link otrzymany mailem.

Aby wziąć udział w warsztatach należy zalogować się do Uczelnianego Banku Informacji (UBI), a następnie przesłać formularz zgłoszeniowy (zakładka: ZAPISY ON- LINE > zakładka: Kursy, szkolenia i certyfikaty > wybieramy: Wizyty studyjne, praktyki i szkolenia). Ilość miejsc jest ograniczona jedynie do 12 osób!

UWAGA: ze względu na ograniczone możliwości osobistego podpisywania dokumentów zapisanie się na warsztat oznacza Państwa zgodę na przekazanie prowadzącemu Państwa danych osobowych (Imię, Nazwisko, mail). Jednocześnie należy w systemie UBI uzupełnić dane osobowe dotyczące zatrudnienia. Osoby nie pracujące zawodowo także proszone są o
zaznaczenie w systemie tej informacji.

O prowadzącym

Prowadzącym warsztat będzie Adrian Połubiński. Pan Połubiński jest Software Developerem. Specjalizuje się w technologiach związanych z pisaniem aplikacji webowych (React, Angular, Node). Ma za sobą wiele projektów komercyjnych dla klientów z Polski oraz zagranicznych. W
wolnych chwilach projektuje aplikacje, prowadzi szkolenia. Jako programista pracuje od czterech lat.

Opis i cel warsztatu

Celem warsztatu jest wykonanie funkcjonalności chatu razem z uczestnikami (frontend-ReactJS). Kursanci poznają podstawy technologii oraz opanują składnię HTML, CSS, JavaScript. Zrozumieją w jaki sposób tworzone są funkcjonalności w codziennej pracy developera.

Forma warsztatu ma za zadanie dać pogląd całościowy, w jaki sposób pisane są aplikacje webowe. Poświęcony czas ma przygotować uczestników do „prawidłowej” nauki programowania oraz dać solidny wstęp do ekosystemu wspomnianych technologii.

Przebieg warsztatu

1.  Przedstawienie przykładu – wstęp, opisanie funkcjonalności, uruchomienie środowiska (30 minut)
2.  Wprowadzenie teoretyczne – React ( 1h )
3.  Implementacja zaproponowanej funkcjonalności – (1.5h)
4. Zdefiniowanie mini zadań dla grupy (30 minut)
5. Ćwiczenie – praca grupy (2h)
6. Prezentacja rozwiązania – uczestnicy prezentują zaimplementowane zadania (1h +)
7. Podsumowanie, dalsze kroki w nauce, udostępnienie materiałów, ukierunkowanie, pytania (30 minut)

Wszystko co potrzebne

• Aplikacja Microsoft Teams
• Visual Studio Code – https://code.visualstudio.com
• Node JS 12.16.2 – https://nodej.org/en/download
• Wtyczka do Visual Studio Code o nazwie – knisterpeter.vscode-github
• Konto github

Moduły

Pomiędzy modułami lub co 45 minut przewidziane są krótkie przerwy.
Podany czas ma charakter orientacyjny i może zostać dostosowany do
preferencji uczestników.

Moduł	Opis	Czas
1.      Przedstawienie przykładu – wstęp, opisanie funkcjonalności, uruchomienie środowiska	Przedstawienie funkcjonalności – pokazanie designu. Omówienie warsztatów i sposobu pracy.  Uruchomienie środowiska pracy, podstawowa konfiguracja, pokazanie IDE, stworzenie projektu w React od podstaw. Rozpoczęcie pracy.	30 minut
2.     Wprowadzenie teoretyczne – React	Prezentacja wyjaśniająca podstawy Reacta. Jaki był powód powstania, co daje, w czym jest lepszy od pisania aplikacji w czystym JavaScript.  Jakie są jego wady oraz zalety. Jak bardzo przyśpiesza pracę. Omówienie podstawowych pojęć Virtual DOM, metody cyklu życia, cykl życia komponentów, Wprowadzenie do zaawansowanych technik.	1h + 10min przerwy
3.     Implementacja przykładu	Implementacja funkcjonalności zaproponowanej przez uczestników, omówienie napisanego kodu, pokazanie alternatywnej implementacji.	1.5h
4.     Zdefiniowanie mini zadań dla grupy	Przedstawienie zestawu zadań oraz pomoc w rozpoczęciu pracy.	30min + 10 min przerwy
5.     Ćwiczenie praca grupy	Uczestnicy warsztatów rozwiązują zadania przygotowane przez prowadzącego.  Każde z zadań pozwoli na opanowanie podstaw Reacta.	2h + 30min przerwy
6.     Prezentacja rozwiązania – uczestnicy prezentują zaimplementowane przez siebie funkcjonalności	Omówienie rozwiązań kursantów. Przedstawienie gotowych rozwiązań przez prowadzącego. Omówienie błędów i rzeczy które można ulepszyć.	1h
7.     Podsumowanie, dalsze kroki w nauce, udostępnienie materiałów, ukierunkowanie, pytania	Z racji tego, że pisanie aplikacji webowych to temat bardzo szeroki to postanowiłem pozostawić trochę czasu na omówienie ścieżki jaką powinni podążać kursanci, aby nauczyć się tego co potrzeba do pierwszej pracy jak najszybciej. Zostaną udostępnione materiały i przedstawione dalsze kroki w nauce.	30 min