Moduł oferowany także w ramach programów studiów:
Informacje ogólne:
Nazwa:
Wprowadzenie do aplikacji internetowych
Tok studiów:
2019/2020
Kod:
IINF-1-607-n
Wydział:
Informatyki, Elektroniki i Telekomunikacji
Poziom studiów:
Studia I stopnia
Specjalność:
-
Kierunek:
Informatyka
Semestr:
6
Profil:
Ogólnoakademicki (A)
Język wykładowy:
Polski
Forma studiów:
Niestacjonarne
Strona www:
 
Prowadzący moduł:
Rogus Grzegorz (rogus@agh.edu.pl)
Treści programowe zapewniające uzyskanie efektów uczenia się dla modułu zajęć

Celem modułu jest nabycie umiejętności tworzenia aplikacji webowych w oparciu o technologie HTML5, CSS3 oraz JavaScript. Zastosowanie stosu JS obejmującego zarówno część frontendową jak i backendową.

Opis efektów uczenia się dla modułu zajęć
Kod MEU Student, który zaliczył moduł zajęć zna i rozumie/potrafi/jest gotów do Powiązania z KEU Sposób weryfikacji i oceny efektów uczenia się osiągniętych przez studenta w ramach poszczególnych form zajęć i dla całego modułu zajęć
Wiedza: zna i rozumie
M_W001 Zna podstawowe technologie budowy współczesnych aplikacji internetowych (HTML 5, CSS3) INF1A_W04, INF1A_W03 Kolokwium,
Odpowiedź ustna,
Wykonanie ćwiczeń laboratoryjnych
M_W002 Zna język ECMAScript oraz rozumie wieloparadygmatową istotę tego języka INF1A_W03 Wykonanie ćwiczeń laboratoryjnych
M_W003 Zna i rozumie koncepcje komponentowych środowisk tworzenia współczesnych aplikacji internetowych opartych o język ECMAScript INF1A_W04, INF1A_W03 Odpowiedź ustna,
Wykonanie ćwiczeń laboratoryjnych
M_W004 Zna i rozumie architekturę aplikacji SPA i jej zastosowania do tworzenia nowoczesnych aplikacji webowych INF1A_W04 Odpowiedź ustna,
Wykonanie ćwiczeń laboratoryjnych
M_W005 Zna i rozumie koncepcję mikroserwisów oraz współczesnych technologii serwerowych INF1A_W04, INF1A_W03 Odpowiedź ustna,
Wykonanie ćwiczeń laboratoryjnych
Umiejętności: potrafi
M_U001 Potrafi samodzielnie projektować i tworzyć aplikacje WWW wykorzystując architekturę SPA oraz frameworki komponentowe. INF1A_U05, INF1A_U03, INF1A_U08 Odpowiedź ustna,
Wykonanie ćwiczeń laboratoryjnych
M_U002 Potrafi wykorzystywać techniki i technologie ( programowanie reaktywne, asynchroniczne, WebSockety) wspierające tworzenie aplikacji WWW. INF1A_U07, INF1A_U05, INF1A_U04, INF1A_U08 Wykonanie ćwiczeń laboratoryjnych
M_U003 Potrafi optymalizować wydajność istniejących aplikacji webowych INF1A_U07, INF1A_U05 Wykonanie ćwiczeń laboratoryjnych
Liczba godzin zajęć w ramach poszczególnych form zajęć:
SUMA (godz.)
Wykład
Ćwicz. aud
Ćwicz. lab
Ćw. proj.
Konw.
Zaj. sem.
Zaj. prakt
Zaj. terenowe
Zaj. warsztatowe
Prace kontr. przejść.
Lektorat
32 16 0 16 0 0 0 0 0 0 0 0
Matryca kierunkowych efektów uczenia się w odniesieniu do form zajęć i sposobu zaliczenia, które pozwalają na ich uzyskanie
Kod MEU Student, który zaliczył moduł zajęć zna i rozumie/potrafi/jest gotów do Forma zajęć dydaktycznych
Wykład
Ćwicz. aud
Ćwicz. lab
Ćw. proj.
Konw.
Zaj. sem.
Zaj. prakt
Zaj. terenowe
Zaj. warsztatowe
Prace kontr. przejść.
Lektorat
Wiedza
M_W001 Zna podstawowe technologie budowy współczesnych aplikacji internetowych (HTML 5, CSS3) + - - - - - - - - - -
M_W002 Zna język ECMAScript oraz rozumie wieloparadygmatową istotę tego języka + - - - - - - - - - -
M_W003 Zna i rozumie koncepcje komponentowych środowisk tworzenia współczesnych aplikacji internetowych opartych o język ECMAScript + - - - - - - - - - -
M_W004 Zna i rozumie architekturę aplikacji SPA i jej zastosowania do tworzenia nowoczesnych aplikacji webowych + - - - - - - - - - -
M_W005 Zna i rozumie koncepcję mikroserwisów oraz współczesnych technologii serwerowych + - - - - - - - - - -
Umiejętności
M_U001 Potrafi samodzielnie projektować i tworzyć aplikacje WWW wykorzystując architekturę SPA oraz frameworki komponentowe. - - + - - - - - - - -
M_U002 Potrafi wykorzystywać techniki i technologie ( programowanie reaktywne, asynchroniczne, WebSockety) wspierające tworzenie aplikacji WWW. - - + - - - - - - - -
M_U003 Potrafi optymalizować wydajność istniejących aplikacji webowych - - + - - - - - - - -
Nakład pracy studenta (bilans punktów ECTS)
Forma aktywności studenta Obciążenie studenta
Sumaryczne obciążenie pracą studenta 128 godz
Punkty ECTS za moduł 5 ECTS
Udział w zajęciach dydaktycznych/praktyka 32 godz
Przygotowanie do zajęć 56 godz
Samodzielne studiowanie tematyki zajęć 40 godz
Szczegółowe treści kształcenia w ramach poszczególnych form zajęć (szczegółowy program wykładów i pozostałych zajęć)
Wykład (16h):
  1. Wprowadzenie do technologii webowych

    Omówienie podstawowych składowych aplikacji Web: client, serwer, protokół http. Protokół http jako fundament aplikacji webowych. Pojęcie sesji http – głównego mechanizmu aplikacji webowej.
    Od prostej strony internetowej do aplikacji SPA ( Single Page Apliaction) – przegląd możliwych rozwiązań i technologii.
    Komunikacja z serwerem (wysyłanie i odbieranie danych za pomocą obiektu XMLHttpRequest – podstawa technologii AJAX i jej nowoczesne implementacje (Ajax w JQuery, Fetch API))
    Rola frontendu a backendu w nowoczesnych aplikacjach webowych.

  2. HTML5, CSS3, JavaScript jako fundament aplikacji web.

    Zrozumienie roli HTML, CSS, JavaScript w tworzeniu aplikacji webowych. Technologie podstawowe a frameworki.
    Nowe znaczniki i formularze w HTML5.
    Podstawy projektowania i ergonomii. Techniki budowy layout strony z zastosowaniem nowych wzorców: flex oraz grid.
    Tworzenie Interaktywnych stron przy użyciu API HTML5 (multimedia, geolokalizacja, praca z plikami itp.).
    CSS3 – sposób na rozdzielenie treści od wyglądu. Pojęcie kaskadowości, Model Pudełkowy, Selektory i pseudoklasy, Metodologia BEM.
    Animacja interfejsu użytkownika: przegląd nowych własności: przejścia, transformaty, animacje klatkowe, filtry.

  3. EMCS7, TypeScript

    JavaScript – jego rola w aplikacjach webowych.
    JavaScript – interaktywność na stronie ( obsługa modelu DOM + model zdarzeniowy)
    Omówienie nowych elementów języka – wersja EMCS7.
    TypeScript jako rozszerzenie JavaScript.

  4. Technologie warstwy Frontendu

    Responsive Web Design – Zasady projektowania stron responsywnych (media Query) z wykorzystaniem biblioteki Bootstrap 4
    Frameworki komponentowe we frontendzie: Angular, React, Vue. Omówienie najważniejszych konceptów.

  5. Angular w szczegółach

    Omówienie architektury i podstawowych konstrukcji frameworka Angular.

  6. Stos MEAN – realizacja backendu w oparciu o stos JavaScript

    Omówienie poszczególnych komponentów stosu MEAN ze szczególnym naciskiem na NodeJS oraz ExpressJS.
    Budowa własnego serwera aplikacyjnego.
    Zaznajomienie się z biblioteką Mangoose jako mechanizmem dostępowym do MangoDB.
    Odmówienie podstawowych konstrukcji CRUD z poziomu NodeJS.

  7. Zarządzanie stanem oraz programowanie reaktywne w aplikacjach webowych

    Biblioteka RxJS oraz architektura Flux (na przykładzie Redux) – nowoczesne sposoby radzenia sobie ze złożonością aplikacji webowych.
    Autoryzacja i autentykacja w kontekście architektury całego systemu.

Ćwiczenia laboratoryjne (16h):
  1. Tworzenie prostej responsywnej strony typu landing page – prezentacja swojego portfolio.

    Samodzielna budowa layout strony w oparciu o własność dipslay:grid,
    Projekt menu poziome w oparciu o własność display: flex.
    Tworzenie strony responsywnej z wykorzystaniem biblioteki Bootstrap4 .

  2. Zastosowanie wybranych elementów EMCS7 w frontowej aplikacji webowej

    Wykonywanie prostych ćwiczeń związanych z poznawaniem nowych elementów standardu EMCS7.
    Rozbudowa portfolio o elementy interaktywne zwiększające jej funkcjonalność.

  3. Wprowadzenie do Angular. Komponenty w Angular, Dyrektywy sterujące, komunikacja pomiędzy komponentami

    Poznanie wykorzystywanych narzędzi oraz struktury projektu tworzonego w Angular.
    Poznanie Angular CLI
    Projektowanie i implementacja komponentu.
    Dyrektywy sterujące, komunikacja pomiędzy komponentami

  4. Usługi w Angular. Biblioteka RxJS i jej możliwości. Obsługa strumieni.

    Wykonywanie ćwiczeń związanych z obsługa strumienie danych i pisaniem własnych usług.
    Samodzielne tworzenie usług w Angular

  5. Biblioteka httpClient. Zasilanie komponentu danymi zewnętrznymi w formacie JASON

    Wykonywanie prostych ćwiczeń związanych z tematyką zajęć

  6. NodeJS, Express JS i Mango

    Samodzielne tworzenie prostej aplikacja CRUD po stronie backendu. Realizacja usługi REST API dla frontendu.

  7. Powiadomienia z serwera – webSocket, Platforma FireBase

    Ćwiczenie z wykorzystaniem SocketIO do implementacji powiadomień
    Realizacja funkcjonalność backendu w oparciu o platformę Firebase

Pozostałe informacje
Metody i techniki kształcenia:
  • Wykład: Treści prezentowane na wykładzie są przekazywane w formie prezentacji multimedialnej w połączeniu z klasycznym wykładem tablicowym wzbogaconymi o pokazy odnoszące się do prezentowanych zagadnień.
  • Ćwiczenia laboratoryjne: W trakcie zajęć laboratoryjnych studenci samodzielnie rozwiązują zadany problem praktyczny, dobierając odpowiednie narzędzia. Prowadzący stymuluje grupę do refleksji nad problemem, tak by otrzymane wyniki miały wysoką wartość merytoryczną.
Warunki i sposób zaliczenia poszczególnych form zajęć, w tym zasady zaliczeń poprawkowych, a także warunki dopuszczenia do egzaminu:

Aby uzyskać pozytywną ocenę końcową niezbędne jest uzyskanie pozytywnej oceny z zaliczenia laboratorium – ocena końcowa jest taka jak ocena z zaliczenia laboratorium. Ocena z laboratorium jest wynikową z ocen cząstkowych uzyskiwanych podczas poszczególnych ćwiczeń laboratoryjnych, a do jej wyliczenia stosowana jest skala zawarta w regulaminie studiów.

Zasady udziału w zajęciach:
  • Wykład:
    – Obecność obowiązkowa: Nie
    – Zasady udziału w zajęciach: Studenci uczestniczą w zajęciach poznając kolejne treści nauczania zgodnie z syllabusem przedmiotu. Studenci winni na bieżąco zadawać pytania i wyjaśniać wątpliwości. Rejestracja audiowizualna wykładu wymaga zgody prowadzącego.
  • Ćwiczenia laboratoryjne:
    – Obecność obowiązkowa: Tak
    – Zasady udziału w zajęciach: Studenci wykonują ćwiczenia laboratoryjne zgodnie z materiałami udostępnionymi przez prowadzącego. Student jest zobowiązany do przygotowania się w przedmiocie wykonywanego ćwiczenia, co może zostać zweryfikowane kolokwium w formie ustnej lub pisemnej. Zaliczenie zajęć odbywa się na podstawie zaprezentowania rozwiązania postawionego problemu.
Sposób obliczania oceny końcowej:

Ocena końcowa jest taka jak ocena z zaliczenia laboratorium

Sposób i tryb wyrównywania zaległości powstałych wskutek nieobecności studenta na zajęciach:

Sposób i tryb wyrównania zaległości powstałych wskutek nieobecności studenta na zajęciach:
Nieobecność na ćwiczeniu laboratoryjnych wymaga od studenta samodzielnego opanowania przerabianego na tych zajęciach materiału.
Student który bez usprawiedliwienia opuścił laboratoria i jego cząstkowe wyniki w nauce były negatywne, może zostać pozbawiony, przez prowadzącego zajęcia, możliwości poprawkowego zaliczania zajęć. Od takiej decyzji prowadzącego zajęcia student może się odwołać do prowadzącego przedmiot (moduł) lub Dziekana.

Wymagania wstępne i dodatkowe, z uwzględnieniem sekwencyjności modułów :

brak

Zalecana literatura i pomoce naukowe:

1. Literatura podstawowa
1. HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End Developera. Jon Duckett
2. Nowoczesne aplikacje internetowe. MongoDB, Express, Angular, Node.js- Jeff Dickey
2. Literatura uzupełniająca
1. https://developer.mozilla.org/pl/docs/Web
2. https://angular.io
3. https://www.typescriptlang.org

Publikacje naukowe osób prowadzących zajęcia związane z tematyką modułu:

1. Assessment of software system presentation layers based on an ECORAM reference architecture model / Michał TUREK, Jan WEREWKA, Kamil Sztandera, Grzegorz ROGUS // W: FedCSIS : abstracts of the Federated Conference on Computer Science and Information Systems : September 13-16, 2015, Łódź, Poland. — [Piscataway : IEEE], 2015.

Informacje dodatkowe:

Brak