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: Hubert Kawałek
Uczestnicy:
Wersja demonstracyjna aplikacji jest dostępna TUTAJ.
Powodzenia, niech Moc będzie z Tobą!
Celem projektu było napisanie aplikacji wykorzystującej dotychczas nabytą wiedzę z następujących technologi: html, css, javascript. Zespół projektowy zdecydował się na aplikacje - 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.
W menu głównym należy wpisać imię gracza. Następnie wybrać kategorię rozgrywki (domyślnie jest to People). Możliwe Kategorie do wyboru:
- 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
Ostatni wybór dotyczy poziomu trudności przeciwnika. Możliwe kategorie do wyboru:
- Padawan - poziom trudności określony jako łatwy
- Jedi Knight - poziom trudności określony jako średni
- Jedi Master - poziom trudności określony jaki trudny
W zależności od poziomu trudności przeciwnik będzie uzyskiwał odpowiednią ilość punktów.
Zasady gry wyświetlane są w formie modalu po naciśnięciu przycisku RULES w menu głównym gry.
Rankin graczy wyświetlany jest po naciśnięciu przycisku RANKING w menu głównym gry. Istnieją trzy osobne rankingi dla każdej z kategori gry.
Rozgrywka polega na rozpoznawaniu przez użytkownika postaci, pojazdów lub statków kosmicznych (w zależności od wyboru opcji w menu głównym). Pytanie reprezentowane jest przez obrazek oraz zapytanie kto lub co znajduję się na obrazku. W środkowej części ekranu wyświetlane są 4 możliwe odpowiedzi z czego tylko jedna jest poprawna. Po zaznaczeniu (kliknięciu myszką) wybaranej odpowiedzi należy kliknąć przysisk NEXT w celu przejścia do kolejnego pytania. W momencie klikniącia przycisku NEXT aplikacja sprawdzi poprawność zaznaczonej odpowiedzi i poinformuje użytkownika poprzez podświetlenie wybranej odpowiedzi kolorem zielonym w przypadku gdy zaznaczono poprawną odpowiedź. W przypadku niepoprawnego wyboru odpowiedź zaznaczona przez użytkownika zostanie podświetlona na czerwono a prawidłowa odpowiedź na zielono. W każdym quizie losowanych jest 10 pytań.
Ustawienia aplikacji dostępne są w menu głównym. Uzytkownik może wybrać jedną z trzech kategori rozgrywki (postacie, pojazdy lub statki kosmiczne). Możliwy jest również wyboru poziomu trudności rozgrywki (Padawan - poziom łatwy, Jedi Knight - poziom średni, Jedi Master - poziom trudny). Ponadto w celu rozpoczęcia rozgrywki należy wypełnic pole z imieniem gracza.
Lekkim wizualnym zmianom uległ projekt dostarczony przez grafika.
Nasz zespół zrealizował także zadania dodatkowe, wykraczające poza zakres kursu
- Utowrzony został szablon graficzny aplikacji w programie Figma.
Jeśli chcesz pomóc, w dalszym rozwoju aplikacji, z chęcią przyjmiemy Twoje Pull Requesty.
W trakcie developmentu wykorzystujemy:
- JavaScript
- Web APi dla JavaScript (nie stosujemy żadnych frameworków, czy jQuery)
- CSS & SCSS, do stylowania aplikacji
- HTML, do definiowania struktury aplikacji
Pozostałe narzędzia wspomagające pracę:
- Lodash do pracy z tablicami/obiektami
- Jest.js do pisania tekstów jednostkowych
- LocalStorage, do zapisywania najlepszych wyników graczy
Aby uruchomić aplikację na lokalnej maszynie, wykonaj następujące kroki:
- Zainstaluj zależności za pomocą komendy:
npm install - Wystartuj serwer developerski
npm run start:dev
Aplikacja będzie dostępna pod adresem localhost:8765/index.html
Kod produkcyjny aplikacji umieszczamy w katalogu src.
Dodając swoje 5 groszy do naszej aplikacji, pamiętaj o pokryciu kodu testami. Aby uruchomić testy aplikacji, wykonaj następujące kroki:
- Zainstaluj zależności za pomocą komendy:
npm install(jeśli nie zrobiłeś już tego wcześniej). - 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.
Zmienne środowiskowe są określone w pliku .env.
Aby je nadpisać, utwórz lokalny plik .env.local i powtórz wpisy dla odpowiednich zmiennych.
Przykładowo, plik o zawartości:
SW_API_BASE_URL = http://localhost:3000/zmieni adres, z jakiego aplikacja będzie korzystać, aby łączyć się z SWApi. Domyślnie jest to zdefiniowane w pliku .env na wartość: https://swapi.dev/api.
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.