Wykorzystanie asynchronicznego JavaScript oraz korzystanie z REST API.
Zespół pracował w ramach kursu CodersCamp. Aplikację wykonali uczestnicy kursu przy pomocy mentora. Zachęcamy do odwiedzenia profili członków zespołu, w celu zapoznania się z ich portfolio.
Mentor: João Kiakumbo Sebastião
Uczestnicy:
- Bartlomiej Kaminski
- Hubert Siewior
- Adrian Kotliński (Development Manager)
- Magdalena Socha (Product Owner)
- Mateusz Murat (Tech Lead)
- Tomasz Smolarski
W ramach drugiego projektu, zadaniem naszego zespołu było opracowanie quizu z popularnej serii filmów Star Wars. Jest to aplikacja webowa działająca w przeglądarce bez potrzeby instalacji. Językiem domyślnym aplikacji jest język angielski. Sama aplikacja oferuje rozgrywkę w 3 dostępnych kategoriach:
- People,
- Vehicles,
- Spaceships.
Wersja demonstracyjna aplikacji jest dostępna TUTAJ.
Powodzenia, niech Moc będzie z Tobą!
Celem projektu było dostarczenie aplikacji pozwalającej sprawdzić swoją wiedzę o postaciach, pojazdach oraz statkach kosmicznych występujących w Gwiezdnych Wojnach. Dodatkowo gracz rywalizował z komputerem w trakcie grania w quiz. Komputer — odpowiadający losowo na pytania
Aplikacja została wykonana wg dostarczonych przez organizatorów CodersCamp wymagań. Szablon projektu dostępny jest TUTAJ.
- Wybór trybu quizu (People, Vehicles, Spaceships) możliwy przed rozpoczciem rozgrywki.
- Opis zasad dla quizu. Obok zasad pokazuje się losowe zdjęcie z danego trybu (dostosowany opis, jeśli np. imię osoby ze zdjęcia jest w opisie zasad).
- Po rozpoczęciu gry rozpoczyna się odliczanie czasu (1 minuta).
- Zadaniem gracza jest odpowiedzieć na jak najwięcej pytań w ciągu ustalonego czasu (dodatkowo gracz konkuruje także z komputerem!).
- W trakcie trwania quizu miecz świetlny pokazuje, ile jeszcze czasu zostało. Po wybraniu odpowiedzi zostaje ukazane przez sekundę czy odpowiedź była dobra czy zła. Następnie pytanie zostaje zmienione na kolejne i tak do końca czasu.
- Pytania są generowane w następujący sposób:
- zostaje pobrany losowy zasób z danego trybu (np people o id 5)
- zostanie pobrane dla wylosowanego zasobu zdjęcie
- losowane są 3 pozostałe odpowiedzi z zapytania do StarWars API.
- Po ukończeniu czasu wynik gracza zapisywany jest w rankingu dla danej przeglądarki (LocalStorage) i pokazywany jest ranking 5 najlepszych wyników.
W trakcie developmentu wykorzystujemy:
- JavaScript
- Web APi dla JavaScript (nie stosujemy żadnych frameworków, czy jQuery)
- CSS, do stylowania aplikacji
- HTML, do definiowania struktury aplikacji
- LocalStorage, do zapisywania najlepszych wyników graczy
- Jest.js do pisania testów jednostkowych
- Fetch, do łączenia z SWApi i oraz pobierania obrazów z zasobów aplikacji
- JSON Server — do działania aplikacji lokalnie, jeśli zostanie wykorzystany limit na zapytania do SWApi
W menu głównym należy wybrać tryb gry (domyślnie jest to People):
- People — rozpoznawanie jaka postać z uniwersum Star Wars została wyświetlona
- Vehicles — rozpoznawanie jaki pojazd z uniwersum Star Wars został wyświetlony
- Starships — rozpoznawanie jaki statek kosmiczny z uniwersum Star Wars został wyświetlony
Zadaniem gracza jest odpowiedzieć na jak najwięcej pytań w określonym czasie (1m). Podczas quizu gracz po zaznaczeniu odpowiedzi dostaje informacje o poprawności swojej odpowiedzi poprzez zmianę koloru przycisku na zielony, w przypadku błędnego wyboru przycisk zmienia się na czerwony, natomiast pokazywana jest również poprawna odpowiedź w kolorze zielonym.
Przykładowa dobra odpowiedź na pytanie:
Przykładowa zła odpowiedź na pytanie:
Jednak gracz nie jest pozostawiony sam sobie! Równocześnie z graczem swoją grę rozgrywa komputer, który również zaznacza swoje odpowiedzi, które są wyświetlane pod odpowiedziami użytkownika. W przypadku udzielenia prawidłowej odpowiedzi przez komputer, wyświetlana jest odpowiedź w kolorze zielonym, jeżeli zostanie udzielona błędna odpowiedź wtedy odpowiedź będzie w kolorze czerwonym.
Po upływie zadanego czasu, lub wyczerpaniu puli pytań pokazywany jest ekran zakończenia gry, który zawiera podsumowanie gry i liczbę punktów uzyskanych przez gracza oraz komputer. Dostępny jest także pełny spis kolejno udzielanych odpowiedzi przez gracza i komputer wraz ze wskazaniem właściwej odpowiedzi.
W aplikacji dostępny jest także ranking, pokazujący wyniki 5 najlepszych graczy w danej przeglądarce:
Istnieje również możliwość przejścia do listy ze wszystkimi uzyskanymi wynikami w danej przeglądarce:
Jeśli gracz o podanym username istnieje już na liście rankingowej to jego wcześniejszy wynik jest porównywany z obecnym. W przypadku uzyskania lepszego wyniku, jest on nadpisywany.
W projekcie każdy z uczestników zaprezentował praktyczną znajomość poniższych zagadnień związanych z JavaScript:
- zmienne
- operatory porównania
- pętle
- obiekty, atrybuty
- warunki
- funkcje
- operatory logiczne
- tablice
- iteracja i/lub rekurencja
- console
- return
- "===" vs "=="
- integracja z zewnętrznym REST API
- interakcja z domem
- odwoływanie się do elementów DOM z JavaScript
- zmiana stylów z poziomu JSa
- zmiana zawartości HTML z poziomu JSa
- animacje
- async await i/lub Promise
- funkcje callback
- pisanie testów jednostkowych
Zadaniem projektu była realizacja wymagań klienta, z którym konsultowane były wprowadzane funkcjonalności. Utworzona aplikacja jest responsywna (dostosowana do wyświetlania na Tabletach i Telefonach). Wymogiem klienta było nie tylko działanie aplikacji, ale też napisanie testów, w tym celu aplikacja posiada napisanych kilka testżów jednostkowych sprawdzających poprawność napisanych funkcji.
Aby uruchomić aplikację na lokalnej maszynie, należy wykonać następujące kroki:
- Zainstalować zależności za pomocą komendy:
npm install
- Wystartować serwer developerski
npm run start:dev
Aplikacja będzie dostępna pod adresem localhost:8765/index.html
Kod produkcyjny aplikacji umieszczamy w katalogu src
.
Aby uruchomić testy aplikacji, należy wykonać następujące kroki:
- Zainstalować zależności za pomocą komendy:
npm install
(jeśli nie zostsało to zrobione wcześniej). - Uruchomić testy, wykonując komendę:
npm run test
. Testy z raportem pokrycia mogą być uruchomione za pomocą:npm run test:cov
.
Kod testów umieszczony został w katalogu test
.
- Do projektu poza wyświetlaniem 5 najlepszych wyników dodaliśmy także wyświetlanie listy wszystkich wyników uzyskanych przez graczy.
- Projekt został oddatkowo zabezpieczony w przypadku problemów z dostaniem się do Rest API, po zgłoszeniu błędu ze strony API, lub zbyt długim oczekiwaniu na odpowiedź, pytania zostają zaczerpnięte z lokalnych plików .json, aby zredukować czas oczekiwania użytkownika na rozpoczęcie gry.
Praca zespołu była organizowana przy użyciu narzędzi dostarczanych przez GitHub. Zadania opisywaliśmy za pomocą GitHub Issues i dzieliśmy czas ich wykonania na tygodnie za pomocą GitHub Projects. Każde z zadań było estymowane przez mentora, dzięki czemu staraliśmy się, aby liczba punktów przypadająca w danym tygodniu na każdą osobę w zespole była podobna. Jeśli chcesz zaproponować, jakąś zmianę w aplikacji, utwórz nowy Issue, wzorując się na poprzednich.