• Zespół projektowy
• Star Wars Quiz
  • Demo
  • Cel projektu
  • Działanie aplikacji
    • Ekran startowy
    • Menu Główne
      • Start
      • Rules
      • Highscores
    • Rozgrywka - Quiz
  • Zmiany wprowadzone w wymaganiach
  • Zrealizowane dodatkowe zadania
• Development aplikacji
  • Wykorzystywane technologie
  • Uruchomienie projektu
  • Uruchomienie testów
  • Organizacja pracy

Zespół pracował w ramach kursu CodersCamp. Aplikację wykonali uczestnicy kursu pod czujnym okiem mentora.

Mentor: Maja Jelenik

Uczestnicy:

• Łukasz Brzyski
• Dariusz Knysak
• Marlena Kruszewska
• Damian Kuczek
• Mateusz Leszniewski
• Adam Spinek

Wersja demonstracyjna aplikacji jest dostępna TUTAJ.

Celem projektu było napisanie aplikacji wykorzystującej dotychczas nabytą wiedzę z następujących technologi: html, css, javascript. Zespół projektowy zdecydował się na aplikację - quiz związaną z tematyką uniwersum Gwiezdnych Wojen. Aplikacja w formie testu jednokrotnego wyboru sprawdza czy użytkownik rozpoznaje, w zależności od wyboru kategorii - osoby, pojazdy lub statki kosmiczne.

Aplikacja została wykonana wg dostarczonych przez organizatorów CodersCamp wymagań. Szablon projektu dostępny jest TUTAJ.

Po uruchomieniu aplikacji wyświetlony zostaje przysik "Play" oraz "Credits" u dołu strony. Po kliknięciu przycisku Play zostajemy poproszeni o wpisanie nazwy gracza. Pole przyjmuje dowolną nazwę o długości 3 - 15 znaków. Imię zatwierdzamy enterem lub przyciskiem "Next".

W menu głównym gracz ma 3 opcje do wyboru:

• Start
• Rules
• Highscores

Z poziomu każdego ekranu jest możliwość powortu do menu głównego przy pomocy przycisku "Home" w lewym górnym rogu ekranu.

Przenosi nas na ekran wyboru kategorii i poziomu trudności. Wybór kategorii jest obowiązkowy przed rozpoczęciem gry.

Ekran zawierający krótkie wprowadzenie fabularne jak i opis zasad gry.

Ekran, na którym są wyświetlane najlepsze wyniki. Został podzielony na dwie sekcje: wyniki lokalne (Local Scores) zapisujące się w local storage oraz globalne (Global Scores) przechowywane w zewnętrznej bazie danych.

Rozgrywka polega na rozpoznawaniu przez użytkownika postaci, pojazdów lub statków kosmicznych (w zależności od wybranej kategorii). Graczowi przedstawiane jest zdjęcie oraz pytanie o to co się na nim znajduje. Do wyboru ma 4 odpowiedzi, z których tylko jedna jest prawidłowa. Po kliknięciu na wybranej odpowiedzi gracz otrzymuje odpowiedź w postaci zmiany koloru opcji na zielony w przypadku prawidłowej odpowiedzi lub czerwony w przypadku gdy odpowiedział błędnie. Prawidłowe odpowiedzi przybliżają statek gracza do głównego celu jakim jest Gwiazda Śmierci. Celem jest odpowiedź na 20 pytań przed upływem czasu. Jeżeli to się uda Gwiazda Śmierci zostaje zniszczona a gracz jest nagradzany miesjcem w tabeli wyników. Czas na ukończenie quizu zależy od wybranego poziomu trudności

• strona wizualna została przeprojektowana
• gracz ściga się z czasem, przeciwnik nie losuje swoich odpowiedzi

• wyniki gracza są zapisywane w zewnętrznej bazie danych
• istnieje opcja wyboru czasu gry

W trakcie developmentu wykorzystujemy:

• JavaScript
• Web APi dla JavaScript
• CSS
• HTML
• Firebase
• Jest.js
• Parcel
• Babel

Aby uruchomić aplikację na lokalnej maszynie, wykonaj następujące kroki:

1. Zainstaluj zależności za pomocą komendy: npm install
2. Wystartuj serwer developerski npm run start:dev

Aplikacja będzie dostępna pod adresem localhost:8765/index.html

Kod produkcyjny aplikacji znajduje się w katalogu src.

Uruchom testy, wykonując komendę: npm run test. Testy z raportem pokrycia uruchomisz za pomocą: npm run test:cov.

Kod testów umieszczamy w katalogu test.

Praca zespołu była organizowana przy użyciu narzędzia Trello. Zadania zostały podzielone na listy i karty, do których przydzielani byli poszczególni członkowie zespołu. Główne kanały komunikacji zespołu to Discord oraz Google Meet.