AKADEMIA GÓRNICZO-HUTNICZA

AKADEMIA GÓRNICZO-HUTNICZA Wydział Elektrotechniki, Automatyki, Informatyki i Elektroniki KATEDRA INFORMATYKI Event Visualizator podręcznik programisty wersja 1.3 z dnia 12.06.2011 Kierunek, rok studiów: Informatyka, II rok Studia niestacjonarne SUM Przedmiot: Inżynieria oprogramowania Prowadzący zajęcia: mgr. Witold Rakoczy Autorzy: Michał Różycki michal.rozycki@gmail.com telefon +48 660 528 248 Rafał Sadłowski rafal.sadlowski@gmail.com Sebastian Falkus sebastian.falkus@gmail.com Jakub Wasiluk wasiu82@gmail.com Rok akademicki: 2010/2011 Semestr: letni Kraków, 12.06.2011

Niniejsze opracowanie powstało w trakcie i jako rezultat zajęć dydaktycznych z przedmiotu wymienionego na stronie tytułowej, prowadzonych w Akademii Górniczo-Hutniczej w Krakowie (AGH) przez osobę (osoby) wymienioną (wymienione) po słowach "Prowadzący zajęcia" i nie może być wykorzystywane w jakikolwiek sposób i do jakichkolwiek celów, w całości lub części, w szczególności publikowane w jakikolwiek sposób i w jakiejkolwiek formie, bez uzyskania uprzedniej, pisemnej zgody tej osoby (tych osób) lub odpowiednich władz AGH. Copyright 2011 Akademia Górniczo-Hutnicza (AGH) w Krakowie Spis treści 1. Wstęp... 3 2. Komponenty systemowe... 4 3. Instalacja bazy danych... 4 4. Konfiguracja komponentów... 6 4.1. Web service... 6 4.2. Map Adapter API... 8 4.3. Website... 9 5. Eksplantacja systemu... 12 5.1. Najczęstrze błędy... 12 6. Zakończenie... 13 7. Bibliografia... 14 Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 2

1. Wstęp Dokument ten zawiera szczegółowy opis instalacji, konfiguracji oraz eksplantacji systemu rozproszonego jakim jest Event Visualizator. Poszczególne rozdziały prezentują kroki jak przy pomocy bazowych komponentów zaimplementować własne rozwiązanie do wizualizacji zdarzeń, istotna jest kolejność poszczególnych kroków. Rozdział drugi opisuje podstawowe komponenty systemowe tzn. ich funkcję, w jaki sposób komunikują się między sobą, z jakich interfejsów korzystają. W rozdziale trzecim zaprezentowane są wymagania stawianie bazie danych oraz proces instalacji/konfiguracji bazy. Konfiguracja komponentów systemu przedstawiona jest w rozdziale czwartym, w jakim stopniu/zakresie należy konfigurować komponenty. Jak skorzystać z interfejsów komponentów, jak można owe komponenty rozszerzać dodając niestandardowe funkcjonalności. Rozdział piąty dotyczy eksplantacji systemu, jak i w jaki sposób przeprowadzać rutynowe kontrole działania stabilności systemu, pomiary wydajności systemu, naprawa błędów czy jak radzić sobie z nietypowymi problemami. Wszystkie kroki zawarte w dokumencie zostały zaprezentowane na bazie zaimplementowanego systemu EPharmacy, postępując zgodnie z przedstawionymi przykładami można w prosty sposób zbudować własne rozwiązanie do wizualizacji zdarzeń. Większość komponentów wymaga jedynie niewielkich zmian konfiguracyjnych do standardowego działania. Historia zmian Opis Wersja Opis Autor 6.06.2011 1.0 Szablon dokumentu, ogólny opis JW elementów składowych 6.06.2011 1.1 Dodanie rozdziału trzeci i piątego JW., RS 7.06.2011 1.2 Rozdział pierwszy, drugi MR 12.06.2011 1.3 Końcowe poprawki RS, SF Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 3

2. Komponenty systemowe Na system rozproszony jakim jest Event Visualizator składa się zestaw komponentów bazowych odpowiedzialnych za podstawowe funkcjonalności. Komponentami systemu są: - baza danych (zawiera informacje o zdarzeniach użytkownikach, kategoriach itd.) - web serwis części serwerowej (komponent odpowiedzialny za logikę wyszukiwania, jak również stanowi nakładkę na bazę danych) - strona internetowa (cześć odpowiedzialna jest na wizualizacje formularzy, stanowi bezpośrednią część interakcji z użytkownikiem) - adapter mapy (służy do wizualizacji zdarzeń na mapie, prezentowania danych) Kanałami komunikacji pomiędzy komponentami są dwa interfejsy: - IMapAdapter (komunikacja pomiędzy Javascript na stornie z osadzonym adapterem mapy) - ServerInterface (komunikacja odbywa się poprzez protokół SOAP pomiędzy częścią kliencką a serwerową) Szczegółowy opis budowy oraz diagram komponentów przedstawiony został w dokumencie koncepcji systemu. 3. Instalacja bazy danych Struktura bazy danych, opis/przeznaczenie poszczególnych tabel zaprezentowany został w koncepcji systemu rozdział 4.1. System korzysta domyślnie z relacyjnej bazy danych MySql wersji 5.1, jednak nic nie stoi na przeszkodzie by wykorzystać inną relacyjną bazę danych np. Oracle, MSSQL, procedura jak tego dokonać znajduje się w końcowej części rozdziału. Rozdział ten opisuje proces instalacji, konfiguracji bazy danych do prawidłowego działania. By przeprowadzić proces instalacji bazy danych należy wykonać kolejno niżej przedstawione kroki: - skorzystać z pliku build.sql dołączonego do płyty oraz uruchomić skrypt na własnej bazie danych, skrypt ten zawiera podstawowe polecenia SQL które umożliwią stworzenie tabel czy relacji pomiędzy tabelami. Utworzona struktura będzie miała charakter na tyle ogólny by można ją było wykorzystywać w różnych rodzajach docelowej aplikacji. Opis tabel oraz schemat bazy danych znajduje się w dokumencie koncepcji systemu rozdział 4.1. W ramach przykładu do zaimportowania poleceń SQL posłużyłem się webowym klientem phpmyadmin rysunek 3.1. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 4

Rysunek 3.1 Import struktury tabel dla nowej bazy danych, widok phpmyadmin - kolejnym istotnym krokiem jest zdefiniowanie wartości dla tabel category oraz tag, o ile informacje o kategoriach czy słowach kluczowych są wykorzystywane w implementowanym systemie. Definicje te można również stworzyć z poziomu panelu administracyjnego użytkownika. W ramach przykładu EPharmacy dodane zostały wartości dla tabeli category oraz tag rysunek 3.2. Istotne jest to ze wraz z nową kategorią należy podać jej poziom level oraz kategorie rodzica, w ten sposób można budować wielopoziomowe listy kategorii rysunek 3.2 (po lewej stronie widzimy budowę kategorii od strony bazy danych, natomiast po prawej wygenerowaną strukturę na stronie internetowej). Tabele te są opcjonalne w przypadku braku definicji tabel system nie będzie korzystał z ich funkcjonalności. Rysunek 3.2 Definicja tabeli kategoria oraz odpowiadający jej struktura na stronie internetowej Są to podstawowe kroki przy instalacji bazy danych. Należy pamiętać iż w zależności od obciążenia systemu należy monitorować bazę danych. Dla najczęściej wyszukiwanych informacji w bazie zostały założone indeksy by szybciej zwracać wyniki, więcej na temat eksplantacji bazy znajduje się w rozdziale 5. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 5

4. Konfiguracja komponentów Sprawne działanie systemu wymaga poprawnej instalacji oraz konfiguracji komponentów, o ile instalacja bazy danych została objaśniona w poprzednim rozdziale w tym rozdziale zostanie opisane najbardziej specyficzna część aplikacji. Rozdział ten opisuje instalacje, konfiguracje komponentów takich jak web serwis, mapadapter (są one na ogólnym poziomie abstrakcji) oraz website (stanowi definicje najbardziej specyficznych wymagań systemu). 4.1. Web service Cześć serwerowa jest odpowiedzialna za podstawową logikę wyszukiwania czy połączenia z bazą danych. Jest ona zaimplementowana obiektowo w języku PHP, dlatego tez do instalacji koniecznie jest posiadanie serwera Apache oraz interpretera PHP w wersji co najmniej 5.x. Komponent ten do działania wymaga biblioteki NuSoap dołączonej na płycie instalacyjnej. Biblioteka NuSoap posiada zestaw klas dzięki którym możliwe było wykorzystanie technologii web serwisowej. Opis działania komponentu oraz niezbędnych do zrozumienia schematów UML znajduje się w dokumencie koncepcji systemu. Instalacja Instalacja części serowej polega na przekopiowaniu plików na miejsce docelowe na serwerze przy pomocy protokołu np. FTP. Pliki części serwerowej znajdują się w katalogu server dołączonego na płycie instalacyjnej. Po pomyślimy przekopiowaniu plików kolejnym korkiem jest konfiguracja systemu która odbywa się w poszczególnych niżej przedstawionych krokach. Konfiguracja bazy danych Plikiem dzięki którym możliwe jest skonfigurowanie połączenia z bazą danych jest DataBaseController.php znajdujący się z katalogu server/base. W pliku tym należy zdefiniować connectionstring zawierający nazwa bazy, adres, użytkownika oraz hasło. Definicja znajduje się w funkcji statycznej DataBaseController::connect. Kolejnym niezbędnym krokiem konfiguracji bazy jest definicja tabel z jakich korzystamy w systemie dzięki temu na jednej bazie możemy uruchomić wiele instancji systemu. Konfiguracja znajduje się w pliku Constans.php w katalogu server/include, dla poszczególnych tabel widzianych jako pola statyczne z punktu widzenia systemu mapujemy je na nazwy w bazie danych Listing 4.1. Jest to konfiguracja opcjonalna, system domyślcie korzysta z nazw tabel zdefiniowanych w pliku instalacyjnym build.sql. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 6

public static $EVENTLOCATION = "eventlocation"; Listing 4.1 Mapowanie nazwy tabeli Konfiguracja logiki wyszukiwania Logika wyszukiwania komponentu znajduje się w pliku SearchController.php w katalogu server/include, jego konfiguracja polega na zdefiniowaniu warunków do wyszukiwania, domyślnie zdefiniowanych jest klika warunków wyszukiwania takich jak: słowa kluczowe, kategorie, nazwa zdarzenia, nazwa lokalizacji zdarzenia, wyszukiwanie po przedziale cenowym itd. Przykład wyszukiwania po nazwie zdarzenia zawiera kod przedstawiony w Listingu 4.2, na jego podstawie możliwe jest budowanie różnych kategorii wyszukiwania. //CONDICTION EVENT NAME $result = DataBaseController::execute("SELECT * FROM ".Constans::$EVENT." WHERE name LIKE '%$text%'"); while($data=mysql_fetch_assoc($result)){ $eventid = $data['event_id']; if(!searchcontroller::cheackarray($resultevent, $eventid)){ $resultevent[$resultcount] = $eventid; $resultcount++; } } Listing 4.2 Kod odpowiedzialny za wyszukiwanie po nazwie zdarzenia Zmienna $text zawiera szukany tekst wpisany do pola wyszukiwania. Następnie wynik zwrócony przez bazę danych zapisywany jest w zmiennej $eventid oraz dodawany do tablicy wynikowej. W ten sposób możliwe jest elastycznie dodawanie nowych warunków wyszukiwania w zależności od potrzeb docelowej aplikacji. Definicja nowej metody web serwisu W sytuacji gdy chcielibyśmy rozszerzyć cześć serwerową o nową funkcjonalność którą wykorzystujemy po stronie klienckiej, należy zdefiniować nową metodę web serwisu zwracającą interesujące nas dane. Definicja przykładowej metody znajduje się na listingu 4.3. $server->register(// register our WebMethod 'getcategory', // method name array(), // parameter list array('return'=>'xsd:string'), // return value $namespace, // namespace false, // soapaction: (use default) 'rpc', // style: rpc or document 'encoded', // use: encoded or literal 'getcategory.'); // description: documentation for the method Listing 4.3 Definicja nowej metody web serwisu NuSoap W ten sposób można zaimplementować nową funkcjonalność części serwerowej, metoda ta będzie widoczna globalnie oraz będzie można ją wywoływać z poziomu klienta aplikacji. Definicja metod znajduje się w pliku ServerInterface.php katalogu server. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 7

Struktura aplikacji części serwerowej napisana jest w na tyle elastyczny sposób by późniejsza rozbudowa tej części nie stanowiła większych problemów. Poszczególne elementy komponentu wydzielone zostały w osobne klasy realizujące swoją dziedzinę problemu. 4.2. Map Adapter API Komponent adaptera mapy jest odpowiedzialny za wizualizacje mapy, jeśli nie ma bezpośrednich przesłanek by rozszerzać jego API nie wymaga konfiguracji, a jedynie prostej instalacji. Instalacja Instalacja sprowadza się do skopiowania pliku MapAdapter.swf do katalogu mapadapter strony internetowej. Dokładny opis budowy oraz schematy UML komponentu znajdują się w dokumencie konspektu rozdział 5.1. Rysunek 4.1 Komponent mapadapter zaimplementowany w technologii Flex Konfiguracja, rozszerzanie API W przypadku gdy istnieje potrzeba skorzystania z mapadapter API, lub jest konieczność rozbudowy komponentu należy zaimportować kody źródłowe znajdujące się w katalogu mapadapter do dowolnego edytora Flash/Flex np. FlashDevelop. Adapter mapy korzysta z Google Maps API biblioteka map_1_20.swc katalogu mapadapter/library, oraz Flex SDK w wersji co najmniej 3.x. By rozszerzyć/zmienić funkcjonalność komponentu należy wy edytować klasę MapAdapter.as paczki agh.io.api oraz klasę JsController.as służącą do Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 8

komunikacji z JavaScript osadzonym na stronie. By dodać nową metodę należy posłużyć definicją: var searchfunction : Function = search; ExternalInterface.addCallback("search", searchfunction); public function search(text:string, valuemin:string, valuemax:string):void { communicator.search(text, valuemin, valuemax); } Listing 4.4 Definicja nowej metody interfejsu IMapAdapter Aby odwołać się bezpośrednio do instancji mapy Google Maps należy korzystać z klasy MapContainer w celu dodania nowych funkcjonalności. 4.3. Website Najbardziej specyficzną częścią systemu jest komponent strony internetowej. Domyślnie zaimplementowany został w języku PHP wersji obiektowej 5.x, szczegółowy opis działania oraz budowy opisany jest w dokumencie koncepcji systemu rozdział 5.2. Wśród wykorzystanych biblioteka jest biblioteka jquery służąca do prasowania odpowiedzi XML. Instalacja Instalacja komponentu polega na skopiowaniu plików źródłowych na serwer Apache z obsługą języka PHP w wersje co najmniej 5.x (np. za pomocą klienta FTP), wszystkie pliki źródłowe znajduje się w katalogu clientservice. Podstawowa konfiguracja klienta Aby poprawnie skonfigurować stronę należy podać adres do web serwisu rozdział 4.1 oraz dla interfejsu IMapAdapter, konfiguracja ta znajduje się w pliku MapAdapter.php katalogu view listing 4.5. src="mapadapter/mapadapter.swf?wsurl=http://testphp.endq.eu/io/server/serveri nterface.php?wsdl" Listing 4.5 Deklaracja adresu web serwisu dla adaptera mapy Dzięki wyżej przedstawionej konfiguracji adapter mapy ma możliwość komunikowania się z częścią serwerową. W podobny sposób należy wprowadzić wygenerowanych klucz dostępu dla Google Maps API gdzie zamiast wsurl znajduje się wartość key a po znaku równości wartością owego klucza. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 9

Kolejnym elementem konfiguracji jest deklaracja dostępu web serwisu dla strony internetowej (listing 4.6), klasa Communicator.php lokalizacja katalogów model. protected static $url = "http://testphp.endq.eu/io/server/serverinterface.php?wsdl"; Listing 4.6 Deklaracja adresu web serwisu dla strony internetowej Rozszerzanie o nowe podstrony Strona zaimplementowana jest w oparciu o wzorzec MVC dlatego tez w prosty sposób można zdefiniować nowe widoki, czy kontrolery. Deklaracja nowych podstron systemu sprowadza się do wykonania kodu przedstawionego w listingu 4.7. if($page == "register"){ $title = "Rejestracja"; $onloadmethod = ""; $includemenu = "Menu"; $includeleftcolumn = "Register"; $includerightcolumn = ""; } Listing 4.7 Deklaracja adresu web serwisu dla strony internetowej Zamienna $title określa tytuł podstrony, zmienna $onloadmethod określa metodę JavaScript jaka ma zostać wywołana po załadowaniu postronny, zmienna $includemenu definiuje pole wyboru podstrony, dwie ostatnie zmiennie określają pliki (zlokalizowane w katalogu view) zawartości lewego oraz prawej części strony, pliki te określają formularze przedstawione poniżej. Rozszerzanie o nowe widoki Po zdefiniowaniu nowych podstron należy również zdefiniować ich zawartości np. wyświetlanego tekstu, formularzy itd. Budowanie nowych zawartości podstron odbywa się poprzez definicje elementów samego kodu HTML oraz odpowiadających im zdarzeniom JavaScript. By zdefiniować nowe widoki należy dane pliki zawartości zapisać w katalogu view w ten sposób główny kontroler strony może pobrać zawartość widoku rysunek 4.2. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 10

Rysunek 4.2 Formularz widoku strony, dla przykładu implementacji EPharmacy Dzięki takiemu podejściu można w elastyczny sposób tworzyć nowe podstrony, zawartości podstrony oraz definiować zachowanie widoków poprzez wywołania funkcji JavaScript. Komunikacja z adapterem mapy By wywoływać metody bezpośrednio na adapterze mapy należy posłużyć się językiem JavaScript, rozszerzyć plik js/interfacescript.js listing 4.8. getmoviename("mapadapter").search(); function getmoviename(moviename) { if (navigator.appname.indexof("microsoft")!= -1) { return window[moviename] } else { return document[moviename] } } Listing 4.8 Wywoływanie metod na adapterze mapy poprzez JavaScript Opis wszystkich metod interfejsu IMapAdapter wraz z niezbędnymi parametrami znajduje się w pliku mapadapter\map\src\agh\io\api\imapadapter.as. Układ, cześć wizualna Bazowy układ strony zdefiniowany został w pliku szablonu view.body.php, by dostosować układ strony, widoki, elementy wizualne należy edytować pliki szablonów (katalog view) oraz kaskadowe arkusze stylów css/styles.css. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 11

5. Eksplantacja systemu Po poprawnej instalacji, konfiguracji komponentów systemu oraz jego uruchomianiem kolejnym etapem cyklu życia aplikacji jest eksplantacja. Rozdział ten opisuje rutynowe okresowe procedury postępowania w procesie eksplantacji systemu, jak radzić sobie z standardowymi/niestandardowymi błędami. Do poprawnego działania systemu wymagane jest połączenie Internetem oraz przeglądarka internetowa obsługująca JavaScript, Css oraz zainstalowany plugin Adabe Flash Player w wersji co najmniej 10.x. Po instalacji systemu domyślnie powinny wyświetlić się okna systemu przedstawione w dokumencie koncepcji rysunek 6.2. W trakcie działania systemu należy okresowo monitorować obciążenie bazy danych, w przypadku gdy obciążenie jest zbyt duże wykonywać procesy optymalizacyjne na bazie danych np. nadawać indeksy na najczęściej wyszukiwanych danych. 5.1. Najczęstsze błędy Poniżej zostały przedstawione najczęstsze błędy systemu oraz sposoby ich rozwiązywania. Informacja o błędzie Na mapie pojawiają się markery w punkcie 0.0, informacje o opisie są puste Mapa się nie wyświetla Żadne wyniki wyszukiwania nie są wyświetlane Rozwiązanie Być może w bazie danych znajdują się niepoprawne wartości tabeli zdarzeń, należy sprawdzić czy walidacja formularzy do wprowadzania danych jest poprawna. Sprawdź czy przy konfiguracja mapy zawiera wsurl oraz key, jeśli nie należy wykonać procedurę opisaną w podrozdziale 4.3. Sprawdź czy zainstalowany jest odtwarzacz Flash Player. Być może baza danych nie zawiera żadnych zdarzeń, jeśli tak nie jest należy sprawdzić czy wysyłany jest prawidłowy XML do klienta strony. Więcej w rozdziale 4.2 dokumentu koncepcja. W przypadku błędów nie występujących w tabeli (niestandardowych) dobrym pomysłem jest analiza komunikacji tzn. czy poprawne dane XML są przekazywane do poszczególnych komponentów systemu np. przy pomocy debugera JavaScript, Inaczej mówiąc należy sprawdzić czy interfejsy komponentów IMapAdapter, ServerInterface pobierają/zwracają poprawne dane. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 12

6. Zakończenie Dokument ten zawiera przodownik jak za pomocą bazowych komponentów systemu Event Visualizator budować własne rozwiązania. Instalacja i konfiguracja została uproszczona została do minimum dla domyślnej instalacji, dodatkowo zostały opisane przykłady jak można rozbudować system niestandardowe funkcjonalności, jak korzystać z API systemu. Wszystkie kody źródłowe znajdują się w załączonej płycie instalacyjnej w tym również przykład implementacji systemu do wyszukiwania leków EPharmacy. Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 13

7. Bibliografia [1] Rakoczy W., Żabińska M.: Redagowanie dokumentacji projektowej, opracowanie wewnętrzne Katedry Informatyki AGH, wersja 0.1-1, Kraków, 2000, (http://galaxy.uci.agh.edu.pl/~rakoczy/redagowaniedokproj.zip) [2] Google Map API for Flash (http://code.google.com/intl/pl/apis/maps/documentation/flash) Plik: Event Visualizator - koncepcja v.1.3 Wersja 1.3 z dnia 12.06.2011 14