\chapter{Úvod}
Tento dokument popisuje návrh a implementaci aplikace pro interaktivní vizualizaci sociál\-ních kontaktů, kterou jsem nazval \textit{SGVis}. Zdrojové kódy aplikace lze stáhnout z webu projektu \href{http://dudka.cz/sgvis}{http://dudka.cz/sgvis}. Na tomto webu je rovněž umístěna vygenerovaná dokumentace API. V následující kapitole jsou uvedeny důležité pojmy, se kterými tento dokument pracuje. V kapitole \ref{design} je popsán návrh aplikace a v kapitole \ref{impl} je popsána aplikace z~implementačního hlediska včetně návodu k sestavení a spuštění.
\vfill\hfill {\footnotesize Tento dokument byl vysázen systémem \LaTeX.}
\chapter{Teoretická část}
\section{Social Graph API}\label{sga}
Veřejný web je tvořen propojenými stránkami, které reprezentují jak dokumenty, tak lidi\cite{sga}. Vyhledávač Google se snaží, aby tyto informace byly více přístupné a užitečné. Pokud si odmyslíte dokumenty, zůstanou vám propojení mezi lidmi. Informace o veřejných propojeních mezi lidmi mohou být užitečné -- jako uživatel budete chtít vědět, kdo je s vámi propojen a jako vývojář sociálních aplikací budete chtít poskytovat lepší služby pro uživatele, aby věděli, kdo jsou jejich přátelé. Dříve neexistoval rozumný způsob, jak se k těmto informacím dostat. \textit{Social Graph API} jednoduše zpřístupňuje vývojářům sociálních aplikací informace o veřejně deklarovaných vztazích mezi lidmi.
\section{Formát JSON a jeho zpracování}\label{json}
\textit{JSON} (\textit{JavaScript Object Notation}) je odlehčený formát pro výměnu dat\cite{json}. Tento formát může být snadno čten/zapisován lidmi, ale zároveň jej lze jednoduše parsovat/generovat stroji. Je založen na podmnožině jazyka JavaScript (\textit{Standard ECMA-262 3rd Edition -- December 1999}). JSON je textový formát, který je zcela nezávislý na konkrétním jazyku a~programovacích konvencí -- proto je vhodný pro výměnu dat mezi různými platformami.
\section{Vizualizační toolkit Prefuse}\label{prefuse}
\textit{Prefuse} je toolkit pro vytváření vysoce interaktivních vizualizací\cite{prefuse}. Originální Prefuse toolkit poskytuje vizualizační framework pro jazyk Java. \textit{Prefuse Flare} toolkit poskytuje vizualizační a animační nástroje pro ActionScript a Adobe Flash Player.
Prefuse disponuje bohatým sortimentem komponent pro modelování, vizualizaci a interakci. Poskytuje optimalizované datové struktury pro tabulky, grafy a stromy. Podporuje různá grafická rozložení, vizuálně kódovací techniky, animace, dynamické dotazy, integrované vyhledávání a propojení s databází. Prefuse je napsaný v jazyce Java, používá \textit{Java 2D graphics library} a je jednoduše integrovatelný do \textit{Java Swing} aplikací nebo webových appletů. Prefuse je vydávána pod BSD licencí a může být volně používána pro~komerční i~nekomerční účely.
\chapter{Návrh řešení}\label{design}
Při návrhu jsem vycházel z \cite{Sutter}\cite{Gamma}\cite{Stroustrup}\cite{AGH}\cite{ICP}\cite{Pecin}. Aplikaci lze z hlediska návrhu rozdělit do~několika částí:
\begin{itemize}
\item Komunikace se serverem Google
\item Datové úložiště pro stažená data
\item Interaktivní vizualizace stažených dat
\end{itemize}
Podle tohoto rozdělení jsou také děleny třídy do balíčků, jak znázorňuje obrázek \ref{packages}.
\begin{figure}[h]
\begin{center}\includegraphics[scale=0.5]{img/packages.png}\end{center}
\caption{Hierarchie balíčků}\label{packages}
\end{figure}
Celá aplikace je umístěna v balíčku \texttt{cz.vutbr.fit.dudka.SGVis}. V tomto balíčku jsou vnořeny ostatní balíčky. Kromě toho jsou na nejvyšší úrovni také třídy \texttt{Main} a \texttt{Config}. První z~nich obsahuje vstupní bod aplikace -- funkci \texttt{main} a druhá představuje společné úložiště pro~konfiguraci aplikace. Ve zbytku této kapitoly bude postupně popsán návrh jednotlivých balíčků.
\section{Komunikace se serverem Google}
Zdrojová data načítá aplikace za běhu ze serveru Google pomocí \textit{Social Graph API} -- viz. kapitola \ref{sga}. Rozhraní vyšší úrovně pro komunikaci se serverem představuje třída \texttt{Lookup} a její metoda \texttt{lookup}. Tato operace je blokující -- to znamená, že volající vlákno je pozastaveno, dokud nejsou data stažena a zpracována. Komunikace je zahájena zasláním požadavku ve vhodném tvaru na server. Následně je přečtena celá odpověď serveru a teprve potom zpracována.
Odpověď serveru je ve formátu \textit{JSON}, který byl představen v kapitole \ref{json}. Pro jedno\-duché zpracování toho formátu, používá aplikace stejnojmennou knihovnu, kterou lze stáh\-nout z~\href{http://www.json.org/java/}{http://www.json.org/java/} ve formě zdrojových kódů. Tato knihovna je volně šiři\-telná a~byla přidána přímo ke zdrojovým kódům aplikace.
\section{Datové úložiště}
Data načtená ze serveru je potřeba někam uložit. Vzhledem k interaktivní povaze aplikace byly zvoleny datové struktury s přímým přístupem jako jsou množina a mapa ze standardní knihovny. Jedinný vztah mezi dvěma umístěními je reprezentován třídou \texttt{Relation}. Jedná se o třídu hodnotového typu, která má přetížené metody \texttt{equals} a \texttt{hashCode}, aby její instance bylo možné umísťovat do zmíněných kontejnerů.
Pro tento typ jsou nadefinovány různé typy kontejnerů s přímým i sekvenčním přístupem. Komplexní úložiště pro stažená data představuje třída \texttt{RelationStorage}, jak znázorňuje náčrt na obrázku \ref{RelationStorage}.
\begin{figure}[h]
\begin{center}\includegraphics[scale=0.5]{img/RelationStorage.png}\end{center}
\caption{Datové úložiště - náčrt}\label{RelationStorage}
\end{figure}
Nad daty umístěné v tomto úložiště je potom možné se efektivně dotazovat -- např. je možné vyhledat všechny vztahy mezi weby z jednoho serveru nebo vyhledat všechny vztahy určitého typu apod.
\section{Vizualizace}
Interaktivní vizualizaci stažených dat zajišťuje knihovna \textit{Prefuse}, která byla uvedena v~kapitole \ref{prefuse}. Na úrovni aplikace je to pak balíček \texttt{Visual}. Třída \texttt{GraphView} tvoří abstrakci nad právě zobrazovanou vizualizací a obsahuje vizualizační data -- ty se obecně mohou lišit od~dat globálních, která jsou uložena v objektu třídy RelationStorage. Třída \texttt{GraphDisplay} představuje komponentu grafického uživatelského rozhraní, na které je pak vizualizace zobra\-zována.
Protože je operace stažení dat ze serveru blokující, není možné ji volat přímo z vlákna, které obsluhuje smyčku zpráv -- uživatelské rozhraní aplikace by se tak mohlo zcela zablokovat na delší dobu. Je tedy potřeba spouštět komunikaci v odděleném vlákně. Stažená data je následně potřeba zobrazit v kontextu GUI vlákna tak, aby nedošlo k problémům typu \textit{race condition}. Stahování na pozadí včetně synchronizace zajišťuje třída \texttt{LookupWorker} -- její graf spolupráce je zachycen na obrázku \ref{LookupWorker}.
\begin{figure}[h]
\begin{center}\includegraphics[scale=0.5]{img/LookupWorker.png}\end{center}
\caption{Digram spolupráce třídy \texttt{LookupWorker}}\label{LookupWorker}
\end{figure}
Třída je odvozena ze třídy \texttt{SwingWorker}, která byla uvedena v Java 1.6 -- tím je bohužel vynucena minimální požadovaná verze běhového prostředí pro spuštění aplikace.
\chapter{Implementace}\label{impl}
Po spuštění aplikace se objeví její hlavní okno a v pozadí se začne provádět první komunikace se serverem. Výchozí bod vizualizace po spuštění aplikace lze nastavit v třídě \texttt{Config} stejně jako adresu serveru, který na dotazy odpovídá. V současné verzi aplikace je možné konfiguraci měnit pouze uvnitř zdrojového kódu třídy \texttt{Config}, ale tato třída je připravena pro rozšíření o (de)serializaci nastavení z/do souboru.
Za běhu aplikace je potom možné vytvořit novou vizualizaci z nového výchozího bodu pomocí položky menu \textit{Visualization $\Rightarrow$ New visualization}. Se zobrazenou vizualizací je možné interaktivně pracovat -- přehled nejdůležitějších operací je shrnut v rychlé nápovědě, kterou lze vyvolat položkou menu \textit{Help $\Rightarrow$ Quick help}. V tabulce \ref{control} jsou shrnuty základní operace nad vizualizací.
\begin{table}[h]
\begin{center}
\begin{small}
\begin{tabular}{|l|l|}\hline
Uspořádání vizualizace&levý klik myši na uzel\\
Přesunutí uzlu&drag\&drop levým tlačítkem myši\\
Operace s uzlem -- kontextové menu&pravý klik myši na uzel\\\hline
Přesunutí vizualizace&drag\&drop levým tlačítkem myši mimo uzel\\
Lupa&kolečko myši\\
Přizpůsobení velikosti/umístění&pravý klik myši mimo uzel\\\hline
\end{tabular}
\end{small}
\end{center}
\caption{Operace nad vizualizací}\label{control}
\end{table}
Výchozí chování je takové, že jsou různé adresy v rámci jednoho serveru reprezentovány jedním uzlem. V grafu jsou pak vidět pouze jména serverů. Kterýkoliv takovýto uzel lze \textit{rozbalit} pomocí položky v kontextovém menu. Později lze uzly opět \textit{sbalit} pod jeden uzel -- to se hodí zejména, když je grafu hodně uzlů a stává se tak nepřehledný.
Jednotlivá umístění je možné zobrazit ve webovém prohlížeči, nebo je použít pro další vyhledání vztahů. Takhle lze inkrementálně doplňovat vizualizaci o nové vztahy, přičemž jednotlivé dotazy jsou zpracovávány na pozadí. Pokud je volba \textit{lookup} v kontextovém menu nepřístupná, znamená to, že se zpracovává příliš mnoho dotazů současně -- je tedy nutné počkat na dokončení nejméně jednoho z nich. Konkrétní hodnotu omezení současně probíhajících dotazů je možné opět nastavit ve třídě \texttt{Config}.
Pomocí položky menu \textit{Visualization $\Rightarrow$ Statistics} je možné zobrazit celkové statistiky, a to jak z hlediska globálních dat, tak z hlediska vizualizace a dotazování. Na obrázku \ref{screenshot} je screenshot aplikace -- jejího hlavního okna a okna statistik.
\begin{figure}[h]
\begin{center}\includegraphics[scale=0.3]{img/screenshot.png}\end{center}
\caption{Screenshot aplikace -- originální obrázek naleznete na~\href{http://dudka.cz/sgvis}{{\tt http://dudka.cz/sgvis}}}\label{screenshot}
\end{figure}
\section{Sestavení ze zdrojových kódů}
Aplikace byla původně vyvíjena v integrovaném vývojovém prostředí \textit{Eclipse} (\href{http://www.eclipse.org/}{http://www.\-eclipse.org/}). Pro sestavení a spuštění však není potřeba mít tohle vývojové prostředí k dispozici. Součástí zdrojových kódů je soubor \texttt{build.xml}, který obsahuje potřebná metadata pro automatický build-systém \textit{ANT} (\href{http://ant.apache.org/}{http://ant.apache.org/}). Součástí archivu jsou také volně šiřitelné knihovny, na kterých je aplikace závislá. V tabulce \ref{ant-targets} je přehled základních příkazů pro práci se zdrojovými kódy pomocí ANT.
\begin{table}[h]
\begin{center}
\begin{small}
\begin{tabular}{|l|l|}\hline
Příkaz&Význam\\\hline
\texttt{ant run}&Sestaví a spustí aplikaci.\\
\texttt{ant jar}&Sestaví aplikaci a vytvoří \texttt{JAR} archiv.\\
\texttt{ant jar-all}&Sestaví aplikaci a vytvoří \texttt{JAR} archiv zahrnující kód závislých knihoven.\\\hline
\end{tabular}
\end{small}
\end{center}
\caption{Práce se zdrojovými kódy pomocí ANT}\label{ant-targets}
\end{table}
K sestavení a spuštění aplikace je tedy nezbytné mít k dispozici ANT a vývojové/běhové prostředí Java 1.6. Pro linuxovou distribuci \textit{Gentoo Linux} byl vyvinut \textit{ebuild}, který automaticky stáhne zdrojové kódy z webu projektu, sestaví aplikaci a nainstaluje do systému včetně všech závislostí. Tento ebuild lze stáhnout rovněž z webu projektu \href{http://dudka.cz/sgvis}{http://dudka.cz/sgvis}.
\chapter{Závěr}
Díky vizualizačnímu toolkitu Prefuse bylo možné jednoduše vytvořit vysoce interaktivní aplikaci pro vizualizaci sociálních kontaktů. Hlavní problém při používání této aplikace je v~absenci veřejně deklarovaných vztahů na některých částech internetu. Další překážkou byla občasná delší odezva dotazovacího serveru Google.
Budování sociálních sítí je však teprve v počátcích a lze předpokládat, že zmíněné problémy budou v blízké budoucnosti vyřešeny. Užitečnost této aplikace by se tedy měla zvyšovat spolu s očekávaným postupným růstem sociální pavučiny. Nezanedbatelný je však můj osobní přínos -- seznámení se s vizualizačním toolkitem Prefuse.
% ----------------------------------------------
% Použitá literatura
\bibliographystyle{./czechiso}
\begin{flushleft}
\bibliography{proj_doc}
\end{flushleft}
\end{document}
Back to main page
proj_doc_content.tex [Download]