2008 Video And Map Grzegorz Pieniążek Video And Map jest to projekt wykorzystujący Google Maps i Youtube API Grzegorz Pieniążek Politechnika Warszawska 1/7/2008
Spis treści 1. Wstęp... 3 2. Instrukcja dla użytkownika... 3 a. Video... 3 i. Wyszukiwanie... 3 ii. Stronicowanie... 4 iii. Oglądanie Video... 4 b. Mapa... 5 i. Wyszukiwanie miejscowości... 6 ii. Wyszukiwanie połączeń... 7 iii. Podpowiedzi... 9 3. Opis projektu... 9 a. Architektura MVP... 10 b. Prezenter... 10 c. Widok... 10 d. Task... 10 4. Wnioski końcowe... 10 Politechnika Warszawska 2
1. Wstęp Projekt Video And Map został napisany w technologii ASP.NET 2.0, z użyciem Javascript i AJAX 1.0, wykorzystuje on architekturę MVP ( Model-View-Presenter ). 2. Instrukcja dla użytkownika W podanej instrukcji przedstawię jak poruszać się po systemie. a. Video Video jest modułem wyszukiwania filmów, oglądania, najważniejszą cechą tego modułu jest fakt że można oglądać film i jednocześnie wyszukiwać video. i. Wyszukiwanie Wyszukiwanie polega na wpisaniu w textbox cześci hasła które chcemy wyszukać. Po wpisaniu hasła klikamy na Search Dla hasła kmn mamy wyniki wyszukiwania Politechnika Warszawska 3
ii. Stronicowanie Zawsze warto sprawdzić czy nie ma więcej wyników wyszukiwania, na jednej stronie wyświetlamy 5 wyników. Do przechodzenia między stronami służą przyciski Gdzie << - poprzednia strona >> - następna strona iii. Oglądanie Video Aby obejrzeć video należy kliknąć na view>>. Politechnika Warszawska 4
Każde wideo ma opis Oraz Rating użytkowników b. Mapa Moduł mapy służy do wyszukiwania miejscowości na mapie, wyszukiwania połączeń między miejscowościami, posiada trzy widoki mapa drogowa, mapa satelitarna i mapa hybrydowa Mapa drogowa pokazuje wszyskie drogi, nie zwraca uwagi na ukształtowanie powierzchni Mapa satelitarna pokazuje zdjęcia satelitarne Politechnika Warszawska 5
Mapa hybrydowa, pokazuje zdjęcia satelitarne, nałożona jest na to mapa drogowa i. Wyszukiwanie miejscowości Aby wyszukać miejscowość należy wpisać jej nazwę, można również wyszukiwać ulice, podając nazwę lub/oraz numer domu Po wpisaniu nazwy klikamy na Search Jeśli system znajdzie kilka podobnych miejscowości wyświetli listę wyboru Nasz wynik wyszukiwania zostanie oznaczony na mapie Politechnika Warszawska 6
ii. Wyszukiwanie połączeń W celu wyszukania połączenia należy wpisać miejscowość startową i miejscowość docelową Po wpisaniu należy wcisnąć przycisk Search Nasza trasa zostanie pokazana na mapie Politechnika Warszawska 7
Jak również zostaną wyświetlone poszczególne elementy trasy Politechnika Warszawska 8
Aby wyświetlić szczegółowe informacje na temat elementu trasy należy kliknąć na cyfrze przy tym elemencie Dodatkowo wyświetlana jest odległość drogowa w kilometrach jak również przybliżony czas podróży iii. Podpowiedzi Podpowiedzi pojawiają się gdy nie zawęziliśmy wystarczająco zapytania Np. Dla zapytania mickiewicza system znajduje miejscowości gdzie jest ulica Mickiewicza i wyświetla listę wyboru 3. Opis projektu Projekt został napisany w technologii ASP.NET, wykorzystuje AJAX, Javascript, Google Maps Api, Google GeoCoding, Youtube API Politechnika Warszawska 9
a. Architektura MVP Jako podstawowy wzorzec separacji warstw logiki i interfejsu użytkownika wybieramy wspomniany wcześniej wzorzec MVP. Jest on niemal identyczny z popularnym wzorcem MVC (Model-View-Controler) jednak jego zaletą jest większa testowalność. b. Prezenter Prezenter jest obiektem który ma dostęp do widoku oraz do modelu. Model może być dowolnie skomplikowany i najczęściej dzieli się na jeszcze więcej warstw. Prezenter posiada całą logikę wyświetlania na widoku, potrafi pobrać odpowiednie informacje z Modelu i włożyć je na widok. c. Widok Widok jest obiektem prezentującym dane, udostępnia on Property z których korzysta Presenter. Widok najczęściej jest tworzony przez grafików. d. Task W naszym projekcie task odpowiada za logikę biznesową, potrafi pobrać odpowiednie dane, które potem przekazuje do prezentera. 4. Wnioski końcowe Projekt Video And Map został udostępniony na licencji GNU 3 Politechnika Warszawska 10