Mocniejsze urządzenia, którymi dysponują użytkownicy, pozwalają na tworzenie coraz bardziej zaawansowanych aplikacji w przeglądarce. Nikogo już nie dziwi w pełni funkcjonalna aplikacja, która swym zaawansowaniem nie odbiega od aplikacji instalowanej natywne na komputerze.

Zespół powołany do życia na Bootcampie C#/.NET od infoShare Academy stworzył grę przeglądarkową o wdzięcznej nazwie C_Bool

W skład zespołu weszli:

Gra miejska

C_Bool to aplikacja napisana w C#, która jest grą miejską. Gra polega na tym, aby zdobyć jak największą liczbę punktów, poprzez wykonywanie zadań, które znajdują się w realnych miejscach w danym mieście.

Ekran startowy gry miejskiej C_Bool

Po zalogowaniu się do aplikacji oczom ukazuje się Dashboard, w którym widzimy podstawowe informacje o użytkowniku, takie jak liczba punktów (w barwny sposób przedstawionych jako cebule), liczbę miejsc, które użytkownik ma do odwiedzenia oraz informacje o tym, ile zadań zostało do wykonania.

Dashboard z podsumowaniem punktów i zadań użytkownika

Poniżej znajduje się mapa, na której umieszczone są miejsca do odwiedzenia. Dodatkowo użytkownik ma możliwość pokazania tylko aktywnych zadań, oraz określenia obszaru, z którego mają się pokazywać dane zadania.

Mapa z zadaniami do wykonania w mieście

Zespół zaimplementował wyszukiwarkę, z której możemy skorzystać, aby wyszukać zadanie po nazwie, ulicy lub opisie.

Po kliknięciu w zadanie na mapie pojawia się modal, w którym są szczegółowe informacje o zadaniu, miejscu, gdzie się znajduje oraz istnieje możliwość przejścia na szczegółowy widok zadania.

Szczegóły zadania wraz z lokalizacją

Poniżej mapy znajduje się listing ze szczegółowym widokiem miejsc i zadań w okolicy użytkownika. Oprócz podstawowych informacji o miejscu jest także widoczna odległość miejsca od użytkownika (pobierana po geolokalizacji) oraz informacja ile punktów jest do zgarnięcia za wykonanie zadania. Z listingu możemy przejść do szczegółowego opisu zadania oraz miejsca.

Po prawej stronie widnieją najciekawsze nadchodzące wydarzenia oraz ranking użytkowników.

Baza miejsc

Każdy użytkownik może zobaczyć bazę dodanych  miejsc, poprzez wybranie opcji z menu. Każde miejsce może mieć przypisane zadania. Miejsca można wyświetlać zarówno w postaci kafelek jak i mapy. Dodatkowo miejsca można dodawać do ulubionych.

Baza miejsc w widoku kafelków

Zespół zaimplementował także wyszukiwarkę miejsc oraz udostępnił użytkownikom opcje filtrowania. Dostępna jest opcja filtrowania po odległości, daty dodania, statusie i typie miejsca.

Z poziomu listy można wyświetlić także popup z mapą, na której zaznaczone jest dane miejsce.

Popup z mapą wskazującą wybrane miejsce

Użytkownicy zalogowani w aplikacji mają możliwość dodania własnego miejsca na mapie. Zespół wykorzystał API Google Maps. Wystarczy zaznaczyć odpowiednie miejsce na mapie, a następnie podać więcej szczegółów w formularzu.

Formularz dodawania nowego miejsca na mapie

Programiści zintegrowali aplikację z API Google, co umożliwia wyszukiwanie i dodawanie miejsc z bazy Google według wybranych kategorii. Dzięki temu rozwiązaniu w bazie jest wiele miejsc z których użytkownicy mogą skorzystać w swojej grze.

Zadania

Do każdego miejsca w aplikacji użytkownicy mają możliwość utworzenia zadań. Istnieją 4 typy zadań. Każdy typ zadania ma inne kryteria zaliczenia takiego zadania i przyznawania punktów.

  • Wydarzenie - aby zadanie było zaliczone, należy pojawić się w określonym miejscu i czasie
  • Ustrzel fotkę - zadanie zostaje zaliczone jeśli użytkownik wrzuca zdjęcie z konkretnego miejsca, które było wskazane w zadaniu. Zdjęcie może załadować na stronę wydarzenia. Punkty przyznaje osoba, która stworzyła dane zadanie.
  • Podaj hasło - zadanie polega na podaniu hasła, które znajduje się w konkretnym miejscu, po weryfikacji przyznawane są punkty
  • Odwiedź miejsce - punkty przyznawane za odwiedzenie konkretnego miejsca

Przed dodaniem szczegółów zadania należy określić typ zadania.

Wybór typu zadania przy jego tworzeniu Formularz tworzenia zadania z tytułem, opisem i datami

Utworzenie zadania wymaga podanie tytułu, opisu, date startu i zakończenia zadania, liczby punktów przyznawanych za ukończenie zadania, zdjęcie zadania oraz opcjonalnie można ograniczyć liczbę uczestników zadania.

Ograniczenie liczby uczestników zadania

Informację o akceptacji zadania przez twórcę zadania użytkownik otrzymuje poprzez powiadomienia, które programiści zaimplementowali w aplikacji.

Administracja

Dodatkowo w systemie została stworzona rola Administratora, która umożliwia wgląd w listę użytkowników i statystyki serwisu.

Panel administratora z listą użytkowników i statystykami serwisu

Obejrzyj prezentację

▶ Obejrzyj wideo na YouTube

Bootcamp C#/.NET w infoShare Academy

Zacznij programować w jednym z najpopularniejszych i najbardziej lubianych przez programistów języków. Wszechstronny, prosty w nauce i mający wiele zastosowań. Poznaj język C#.

Dla kogo? Dla osób, które chcą sprawnie nauczyć się programowania od najlepszych trenerów-praktyków na rynku. Bootcamp jest przeznaczony dla osób, które myślą o podjęciu pracy jako C# Developer.

👉 Weekendowy bootcamp C#/.NET (przebranżowienie)

Zapisz się na newsletter o C#

Dowiedz się więcej o zarobkach i pracy programisty C# z naszego newslettera.

Zapisz się

Co możesz robić po bootcampie? Poznaj historie naszych absolwentów!

👉 Elektronikę zamienił na programowanie - historia Jarosława Witowskiego

👉 Zamiast zarządzać finansami rozwija zagraniczną aplikację - historia Magdy Kłopotek

👉 Architektka wnętrz, która została programistką - historia Julii Łojek

👉 Od tancerza do programisty - historia Wiktora Jagiełło