MatchApp Rezerwacja obiektów sportowych Dokumentacja projektu Patryk Tucki Dawid Lisiecki Jacek Galla Mateusz Żuchowski Wprowadzenie Celem projektu MatchApp jest wykorzystanie nowoczesnych technologii do zrzeszania miłośników gier zespołowych. Powszechnym problemem występującym wśród sportowców-amatorów jest znalezienie chętnych do wspólnej gry w przypadku piłki nożnej potrzebne jest zebranie aż 22 osób w jednym czasie na jednym boisku. Wspólnie zaprojektowaliśmy i zaimplementowaliśmy system, który umożliwia rezerwację obiektów sportowych poprzez wygodny interfejs zintegrowany z mapami Google dostępny na wielu urządzeniach oraz platformach. Zadbaliśmy również o wydajność naszych aplikacji oraz szczegóły, takie jak autoryzacja dostępu do lokacji i wydarzeń (prawa własności wewnątrz systemu) oraz wnikliwa walidacja przyjmowanych danych zgodna z zaprojektowanymi przez nas regułami. 1
Specyfikacja wymagań 1. Multiplatformowość Z funkcji aplikacji można korzystać zarówno z poziomu przeglądarki internetowej (pod adresem https://matchapp.pl ) jak i natywnej aplikacji na platformie android. Poprzez wykorzystanie usługi REST API, aplikacja po stronie serwera jest uniwersalna i umożliwia dalszy rozwój na innych platformach (np. ios lub Windows Phone). 2. Wygoda użytkowania/user experience Przeprowadzone wywiady z potencjalnymi użytkownikami, które dały wiarygodne wnioski i relacje osób, które mogą w przyszłości korzystać z naszej aplikacji. Polegały one na pogłębionej rozmowie programisty z osobą badaną. Dzięki takiej metodzie byliśmy w stanie poznać wzorce zachowań, przyzwyczajenia, a także bolączki potencjalnych użytkowników. 3. Integracja z mapami Google Wykorzystanie map w aplikacji Matchapp umożliwia lepszą wizualizację danych użytkownikowi. Aplikacja przeglądarkowa zważywszy na fakt, że geolokalizacja po ip użytkownika nie działa idealnie, aplikacja pracuje w trybie który zwraca w określonym promieniu od centrum mapy najbliższe boiska. Po wejściu w dane boisko użytkownik widzi wydarzenia, które mają na nim miejsce. Dodatkowo wykorzystując moduł GPS dostępny w telefonie aplikacja może prezentować dane uwzględniając obecną lokalizację użytkownika. 4. Import bazy danych obiektów sportowych Celem naszej aplikacji jest umożliwienie organizacji wydarzeń sportowych na terenie całego kraju. W związku z tym aplikacja jest wyposażona w rozległą bazę obiektów sportowych w największych miastach na terenie naszego kraju. Każdy obiekt sportowy jest reprezentowany w bazie danych poprzez następujące informacje - nazwa boiska, adres, lokalizacja za pomocą współrzędnych geograficznych na mapie, obiekty znajdujące się w pobliżu, zdjęcia, informacja, czy boisko jest obiektem typu orlik czy nie oraz dyscypliny sportowe, które można tam uprawiać. Z racji tego, że dostęp do tego typu informacji jest ograniczony, ponieważ nie istnieje żadna oficjalna lista kompleksów sportowych w Polsce, wszystkie informacje były przez nas skrzętnie zbierane i dokumentowane. Baza obiektów sportowych będzie w miarę możliwości rozbudowywana i aktualizowana. 2
5. Optymalizacja dla wyszukiwarek internetowych W związku z tym, że w przypadku naszego serwisu największym wyzwaniem będzie odpowiednia promocja projektu, zdecydowaliśmy się na użycie odpowiednich technik prowadzących do popularyzacji projektu. Pierwszym nasuwającym się na myśl procesem jest optymalizacja dla wyszukiwarek internetowych. Po dogłębnej analizie rynku stron internetowych tego typu postawiliśmy na optymalizację treści, tak aby nasz serwis zyskał wyższą pozycję w wynikach wyszukiwarek internetowych. Składa się na to przede wszystkim dobór odpowiednich tagów do tytułu czy opisu strony. 6. Integracja z dostawcami danych personalnych Liczba użytkowników mediów społecznościowych jest ogromna i rośnie z dnia na dzień. Większość z naszych znajomych posiada konto w serwisie Facebook lub konto pocztowe Google. Integracja tych usług z systemem uwierzytelniania MatchApp niesie za sobą wiele zalet: Brak haseł użytkowników w bazie danych większe bezpieczeństwo, mniejsza odpowiedzialność, większe zaufanie użytkowników, Błyskawiczna rejestracja i logowanie, Możliwość zintegrowania funkcjonalności kontaktowania się ze znajomymi w celu zaproszenia ich do systemu MatchApp. 7. Sprawna obsługa danych geograficznych Podstawową funkcjonalnością systemu MatchApp jest składowanie danych o boiskach wraz ze współrzędnymi geograficznymi oraz sprawne wyszukiwanie miejsc i wydarzeń w pobliżu lokalizacji użytkownika. Czas zwrócenia listy 20-50 boisk w promieniu 25km od lokacji użytkownika nie może przekraczać 2 sekund na serwerze o przeciętnej wydajności. 8. Sprawna obsługa danych czasowych Kolejnym ważnym aspektem systemu MatchApp jest szybkie znajdowanie nadchodzących wydarzeń oraz zapewnienie, aby tylko jedno wydarzenie miało miejsce w jednym czasie na jednym boisku wydarzenia nie mogą na siebie nachodzić. 3
Architektura systemu Serwer (Amazon AWS) Ubuntu 14.04 LTS system operacyjny oparty na jądrze Linux w wersji 3.13 z pięcioletnim wsparciem firmy Canonical Nginx wydajny serwer HTTP obsługujący żądania do aplikacji back-end oraz serwujący aplikację front-end PHP 7.0 skryptowy język programowania wykorzystywany do przetwarzania danych przez aplikację zaplecza MongoDB 3.2 nierelacyjny system bazodanowy służący za skład danych systemu MatchApp Certyfikat SSL organizacji Let s Encrypt zapewnia bezpieczeństwo wszystkich danych przesyłanych pomiędzy użytkownikami, a systemem MatchApp Aplikacja back-end Composer narzędzie do wygodnego zarządzania bibliotekami języka PHP 4
Web Laravel 5.2 framework do budowy aplikacji w języku PHP zawierający mnogość wysokiej jakości narzędzi gotowych do wykorzystania przy wielu aspektach typowych aplikacji serwerowych (routing, obsługa baz danych, internacjonalizacja etc.) REST API bezstanowy interfejs HTTP aplikacji back-end współpracujący z wieloma rodzajami klientów, oparty na zasobach i metodach interakcji z nimi reprezentowanych przez odpowiednie czasowniki (verbs) HTTP AngularJS - wspierany i firmowany przez Google, framework napisany w języku JavaScript. Jego głównym przeznaczeniem jest tworzenie aplikacji Internetowych, które nie wymagają odświeżenia strony w trakcie korzystania. jquery - biblioteka, która znacznie upraszcza pracę z językiem JavaScript. Less - język arkusza stylów rozszerzający możliwości standardowego języka CSS. Docelowo jest on kompilowany do języka CSS przy pomocy WinLess. Bootstrap - framework CSS, rozwijany przez programistów Twittera, wydawany na licencji MIT. Zawiera zestaw przydatnych narzędzi ułatwiających tworzenie interfejsu graficznego stron oraz aplikacji internetowych - bardzo przydatny przy tworzeniu responsywnej wersji strony. Android Aplikacja została napisana w środowisku Android Studio w języku Java Aplikacja działa na telefonach z systemem Android 4.0+ (sdk API 15) Do korzystania z REST API wykorzystano biblioteki Retrofit (1.9.0) oraz Gson (2.4) Do autoryzacji wykorzystano Facebook SDK oraz Google Play Services Zrealizowane funkcjonalności Logowanie Użytkownik może zalogować się do systemu korzystając ze swojego konta Facebook lub Google. W przypadku pierwszego logowania automatycznie zakładane jest konto MatchApp identyfikowane adresem email użytkownika. Przeglądanie lokacji Web Zalogowany użytkownik może przeglądać lokacje w swojej okolicy. Dodatkowo może zawęzić wynik poprzez wpisanie w polu search nazwy boiska, adresu lub dyscypliny. 5
Android Zalogowany użytkownik może przeglądać lokacje w swojej okolicy. Dodatkowo może zawęzić wynik poprzez wybranie interesującej go dyscypliny sportu. Dodawanie lokacji Zalogowany użytkownik może dodać nową lokację podając: Nazwę Lokalizację (współrzędne geograficzne) Adres Dyscypliny jakie można uprawiać na obiekcie Opcjonalnie może dodać zdjęcie lokacji Edycja lokacji Zalogowany użytkownik, który utworzył lokację może edytować jej parametry. Przeglądanie wydarzeń Web Zalogowany użytkownik może przeglądać listę wydarzeń: W których bierze udział Odbywające się na konkretnym boisku(z czego znajduje je na mapie wyświetlającej wszystkie boiska w jego pobliżu) Android Zalogowany użytkownik może przeglądać listę wydarzeń: W których bierze udział Odbywające się w jego okolicy (na podstawie ustalonej pozycji) Odbywające się na konkretnym boisku Dodawanie wydarzenia Zalogowany użytkownik może utworzyć nowe wydarzenie w interesującej go lokacji. Aby tego dokonać należy podać: Tytuł wydarzenia Opis wydarzenia Datę i godzinę rozpoczęcia Czas trwania wydarzenia Dyscyplinę sportu, która jest dostępna w danej lokacji Maksymalną liczbę graczy Informację o kosztach uczestnictwa w wydarzeniu 6
Edycja wydarzenia Zalogowany użytkownik, który utworzył dane wydarzenie, może edytować: Tytuł wydarzenia Opis wydarzenia Datę i godzinę rozpoczęcia Czas trwania wydarzenia Maksymalną liczbę graczy Informację o kosztach uczestnictwa w wydarzeniu Dołączanie do/opuszczanie wydarzenia Zalogowany użytkownik może dołączyć do wydarzenia, jeżeli są w nim wolne miejsca. Użytkownik, który dołączył już do wydarzenia może je opuścić. Udostępnianie wydarzenia Zalogowany użytkownik może udostępnić wydarzenie na portalach społecznościowych. Raportu z testów Serwer + backend Przypadek Data Tester Rezultat Konfiguracja repozytoriów git 5.01.2017 Tucki Ok Konfiguracja serwera nginx 5.01.2017 Tucki Ok Konfiguracja PHP 5.01.2017 Tucki Ok Konfiguracja bazy danych MongoDB 5.01.2017 Tucki Ok Konfiguracja środowiska aplikacji back-end 5.01.2017 Tucki Ok Konfiguracja certyfikatu SSL 5.01.2017 Tucki Ok Logowanie Google (web) 6.01.2017 Tucki Działa Logowanie Facebook (web) 6.01.2017 Tucki Działa Logowanie Google (mobilne) 6.01.2017 Tucki Działa Logowanie Facebook (mobilne) 6.01.2017 Tucki Działa Rejestracja Google (web) 6.01.2017 Tucki Działa Rejestracja Facebook (web) 6.01.2017 Tucki Działa 7
Rejestracja Google (mobilne) 6.01.2017 Tucki Działa Rejestracja Facebook (mobilne) 6.01.2017 Tucki Działa Złączenie konta Facebook przy uprzedniej rejestracji Google Złączenie konta Google przy uprzedniej rejestracji Facebook Poprawna interpretacja tokenu JWT z nagłówka HTTP Authorization 6.01.2017 Tucki Działa 6.01.2017 Tucki Działa 6.01.2017 Tucki Działa Transformacja obiektu Sport do json 7.01.2017 Tucki Działa Transformacja obiektu Event do json 7.01.2017 Tucki Działa Transformacja obiektu Location do json 7.01.2017 Tucki Działa Transformacja obiektu User do json 7.01.2017 Tucki Działa Transformacja obiektu Photo do json 7.01.2017 Tucki Działa Zwracanie listy sportów 7.01.2017 Tucki Działa Zwracanie danych zalogowanego użytkownika 7.01.2017 Tucki Działa Zapisywanie się do wydarzenia 7.01.2017 Tucki Działa Wypisywanie się z wydarzenia 7.01.2017 Tucki Działa Zwracanie listy wydarzeń zalogowanego użytkownika Zwracanie listy lokacji dla konkretnej lokalizacji użytkownika Zwracanie listy lokacji dla konkretnej lokalizacji użytkownika w żądanym promienu (do 25km) Zwracanie listy lokacji dla konkretnej lokalizacji użytkownika dla żądanego sportu Zwracanie konkretnej lokacji Tworzenie lokacji: walidacja nazwy Tworzenie lokacji: walidacja adresu Tworzenie lokacji: walidacja lokalizacji geograficznej Tworzenie lokacji: walidacja powiązanych sportów Tworzenie lokacji: walidacja dodanego zdjęcia Tworzenie lokacji - właściwa logika 8
Tworzenie lokacji - zapisywanie zdjęcia Aktualizacja lokacji: walidacja nazwy Aktualizacja lokacji: walidacja adresu Aktualizacja lokacji: walidacja lokalizacji geograficznej Aktualizacja lokacji: walidacja powiązanych sportów Aktualizacja nazwy lokacji Aktualizacja adresu lokacji Aktualizacja lokalizacji geograficznej lokacji Aktualizacja powiązanych sportów lokacji Zwracanie zdjęcia Zwracanie miniaturki zdjęcia Cache owanie miniaturki zdjęcia Zwracanie listy graczy w wydarzeniu Zwracanie listy wydarzeń w promieniu do 25km Zwracanie listy wydarzeń w konkretnej lokalizacji Zwracanie listy wydarzeń - filtr sportu Zwracanie konkretnego wydarzenia Tworzenie wydarzenia: walidacja lokacji Tworzenie wydarzenia: walidacja sportu Tworzenie wydarzenia: walidacja tytułu Tworzenie wydarzenia: walidacja opisu Tworzenie wydarzenia: walidacja limitu graczy Tworzenie wydarzenia: walidacja day rozpoczęcia Tworzenie wydarzenia: walidacja czasu trwania Tworzenie wydarzenia: walidacja ceny Tworzenie wydarzenia: walidacja nachodzenia na inne wydarzenia na jednym boisku (wszystkie możliwe przypadki) 9
Tworzenie wydarzenia: właściwa logika Aktualizacja wydarzenia: walidacja tytułu Aktualizacja wydarzenia: walidacja opisu Aktualizacja wydarzenia: walidacja limitu graczy Tworzenie wydarzenia: walidacja day rozpoczęcia Aktualizacja wydarzenia: walidacja czasu trwania Aktualizacja wydarzenia: walidacja ceny Aktualizacja wydarzenia: właściwa logika Skrypt importu boisk z pliku XML (+ pobieranie zdjęć z internetu) Web Wszystkie funkcjonalności oraz widoki zostały manualnie przetestowane na następujących przeglądarkach/urządzeniach: - WERSJA PRZEGLĄDARKOWA - Przeglądarki Chrome, Mozilla(explorer odpuszczony ze względu na małą popularność - okolice 2% użytkowników), - WERSJA MOBILNA(responsywność) - Samsung Galaxy S4 (android 5.1.1) oraz iphone 6s (IOS 10) Android Wszystkie funkcjonalności oraz widoki zostały manualnie przetestowane na następujących urządzeniach: Samsung Nexus S (android 4.3.1) Samsung Galaxy S 3 (android 4.4) Xiaomi Redmi 3 (android 5.1.1) One Plus X (android 6.0) Podział ról Patryk Tucki Projekt, implementacja i dokumentacja aplikacji back-end (uwierzytelnianie, REST API) Instalacja oraz konfiguracja oprogramowania na serwerze produkcyjnym (Git, Nginx, PHP, MongoDB, Certyfikat SSL) 10
Dawid Lisiecki Stworzenie przeglądarkowej wersji aplikacji (Frontend) Projekt GUI aplikacji przeglądarkowej Mateusz Żuchowski Stworzenie bazy danych obiektów sportowych (nazwa boiska, adres, lokalizacja za pomocą współrzędnych geograficznych na mapie, obiekty znajdujące się w pobliżu, zdjęcia, informacja, czy boisko jest obiektem typu orlik czy nie oraz dyscypliny sportowe, które można tam uprawiać) Optymalizacja dla wyszukiwarek internetowych Elementy graficzne Dokumentacja Jacek Galla Stworzenie mobilnej wersji aplikacji na platformę Android Projekt GUI aplikacji mobilnej Wdrożenie System internetowy System został udostępniony w publicznej domenie internetowej. Po szczegółowej analizie rynku aplikacji związanych z rezerwacją wydarzeń sportowych, zdecydowaliśmy się na opcję MatchApp.pl. Pod tym właśnie adresem internetowym dostępna jest finalna wersja aplikacji. Aplikacja jest gotowa do wykorzystania przez społeczność internetową. Aplikacja została zasilona danymi produkcyjnymi, tzn. z aplikacji mogą już korzystać zarejestrowani użytkownicy. Aplikacja mobilna Aplikacja mobilna została udostępniona w sklepie internetowym Google Play i oficjalnie oddana do użytku dla klientów urządzeń mobilnych. Kryteria akceptacji W dniu 04.01.2017 aplikacja została oficjalnie zaprezentowana na zajęciach Inżynierski projekt zespołowy przed prowadzącym zajęcia. Wszystkie funkcjonalności, które wcześniej były założone, zostały ostatecznie zrealizowane. Finalna wersja aplikacji została zaakceptowana przez prowadzącego. 11