Newelska 6, 01-447 Warszawa
22 3486-531
rozwoj@wit.edu.pl

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

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łOpisCzas
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