Zadanie z INF.04-02-22.06-SG

Część II. Aplikacja Web

Wykonaj aplikację internetową typu front-end obsługującą zapisy na kursy z zastosowaniem dostępnego na stanowisku egzaminacyjnym frameworka Angular lub biblioteki React. Zastosuj bibliotekę Bootstrap do zdefiniowania stylu formularza.

Na obrazach 1a i 1b przedstawiono działanie aplikacji przygotowanej w środowisku Angular i React.js, stan po wybraniu przycisku „Zapisz do kursu”. W konsoli widoczne wyświetlenie imienia i nazwiska oraz nazwy kursu na podstawie danych wprowadzonych do formularza

Założenia aplikacji:

• Aplikacja składa się z jednego komponentu
• Danymi komponentu jest tablica z nazwami kursów, o elementach: „Programowanie w C#”, „Angular dla początkujących”, „Kurs Django”. Dla uproszczenia tablica może być zdefiniowana jako pole komponentu. Należy założyć, że tablica w przyszłości może się zmienić, co będzie miało wpływ na zachowanie i wygląd aplikacji.
• Komponent wyświetla:
  • Nagłówek drugiego stopnia o treści: „Liczba kursów: <liczba>”, gdzie <liczba> oznacza wielkość tablicy z nazwami kursów
  • Listę numerowaną generowaną automatycznie dla wszystkich elementów tablicy, niezależnie od jej wymiaru
  • Formularz składający się z:
    • pola edycyjnego i jego etykiety o treści „Imię i nazwisko:”
    • edycyjnego pola numerycznego i jego etykiety o treści „Numer kursu:”
    • przycisku „Zapisz do kursu”
• Aplikacja w stanie początkowym wyświetla puste pola formularza
• Elementy formularza są formatowane zgodnie z obrazem 1a lub 1b za pomocą stylów biblioteki Bootstrap. Do budowy szablonu HTML należy wykorzystać pomoc zamieszczoną w Tabeli 1. Należy zastosować znaczące nazwy dla identyfikatorów pól formularza
• Po wybraniu przycisku formularza jest generowane zdarzenie zatwierdzenia formularza, które wyświetla w konsoli przeglądarki:
  • Wartość wpisaną w pierwszym polu formularza
  • Nazwę kursu odpowiadającą numerowi wpisanemu w drugie pole formularza, gdy kurs o takim numerze istnieje. W przeciwnym wypadku wyświetla komunikat „Nieprawidłowy numer kursu”
• Aplikacja powinna być zapisana czytelnie, z zachowaniem zasad czystego formatowania kodu, należy stosować znaczące nazwy zmiennych i funkcji
• Dokumentacja do programu wykonana zgodnie z wytycznymi z części III zadania egzaminacyjnego

Kod aplikacji przygotuj do nagrania na płytę. W podfolderze web powinno znaleźć się archiwum całego projektu o nazwie web.zip oraz pliki z kodem źródłowym, które były modyfikowane.

Część III. Testy utworzonych aplikacji (fragment)

Wykonaj testy aplikacji konsolowej oraz dokumentację do aplikacji utworzonych na egzaminie.

Wykonaj zrzuty ekranu dokumentujące uruchomienie aplikacji utworzonych podczas egzaminu. Zrzuty powinny obejmować cały obszar ekranu monitora z widocznym paskiem zadań.

Jeżeli aplikacja uruchamia się, na zrzucie należy umieścić okno z wynikiem działania programu oraz otwarte środowisko programistyczne z projektem lub okno terminala z kompilacją projektu.

Jeżeli aplikacja nie uruchamia się z powodu błędów kompilacji, należy na zrzucie umieścić okno ze spisem błędów i widocznym otwartym środowiskiem programistycznym.

Wykonać należy tyle zrzutów ile interakcji podejmuje aplikacja. Wymagane zrzuty ekranu:

• Aplikacja web – dowolna liczba zrzutów nazwanych web1, web2 … (np. stan początkowy, po wypełnieniu pól, po zatwierdzeniu konsola przeglądarki, gdy w drugim polu formularza jest prawidłowy numer oraz gdy jest nieprawidłowy numer kursu)

W edytorze tekstu pakietu biurowego utwórz plik z dokumentacją i nazwij go egzamin. Dokument powinien zawierać informacje:

• Nazwę systemu operacyjnego, na którym pracował zdający
• Nazwy środowisk programistycznych, z których zdający korzystał na egzaminie
• Nazwy języków programowania / frameworków / bibliotek użytych podczas tworzenia aplikacji

Zrzuty ekranu i dokument umieść w folderze o nazwie testy.

Ocenie będą podlegać 4 rezultaty:

• implementacja, kompilacja, uruchomienie programu
• aplikacja konsolowa
• aplikacja web
• testy aplikacji.

Wskazówki przygotowania środowiska

1. Zainstalować program Node.js. Dla macOS lub Windows pobrana najnowsza stabilna wersja z nodejs.org. Dla Linux zainstalować za pomocą managera pakietów
   sudo apt-get install nodejs npm
2. Za pomocą Node Package Manager zainstalować pakiet react poprzez wydanie komendy:
   npm i –g create-react-app
3. Zainstalować edytor Visual Studio Code (lub inny dowolny) jeżeli zostanie wybrany VSCode dodać ścieżki do zmiennej środowiskowej PATH:
   <użytkownik egzamin>\AppData\Roaming\npm;
   <użytkownik egzamin>\AppData\Local\Programs\Microsoft VS Code\bin
   lub za pomocą polecenia code: VS Code -> shift + command + p (macOS) lub shift + control + p (Windows) -> code
   Jeżeli został zainstalowany VS Code zaleca się zainstalowanie dodatku ułatwiającego programowanie w React: Simple React Snippets
4. Sprawdzić czy działa środowisko poprzez utworzenie aplikacji Hello-World
   • Utworzyć folder REACT na dysku C
   • W folderze REACT wydać komendę: create-react-app hello
   • Przejść do katalogu hello (nazwa projektu)
   • Komenda: npm start
   • W wyniku komendy uruchomi się przeglądarka z adresem localhost:3000 i wynikami działania aplikacji. Uwaga: projekt musi się znajdować na dysku C

Źródło: https://egzamin-programista.pl/arkusz-praktyczny-inf04-2022-06-02/