building-block-view.tex 8.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. In this section, the context in which Hybrid \ac{OSN} is located is first considered, and then a breakdown into the individual components is carried out. Furthermore, the function of the respective blocks is described in more detail. Finally, the function of individual components in interaction is explained using the examples of displaying the home timeline and posting a new tweet.
  2. \subsection{Scope and Context}
  3. \label{sec:scope-and-context}
  4. Figure \ref{fig:building-block-view} shows a black box view of which other systems Hybrid \ac{OSN} communicates with via interfaces. The systems are:
  5. \begin{itemize}
  6. \item Twitter \ac{API}
  7. \item GUN
  8. \item \ac{IPFS} via Infura
  9. \item User
  10. \end{itemize}
  11. Infura\footnote{https://infura.io/} is a service that provides access to Ethereum and \ac{IPFS} via a simple interface. Communication with the \ac{API} happens using \ac{HTTP} requests. The connection of \ac{IPFS} in Hybrid \ac{OSN} can thus be carried out in a simple way. The use of an additional system entails an extra risk typically. However, there is a JavaScript client for \ac{IPFS}, which can be integrated into Hybrid \ac{OSN} and thus the dependency on Infura would be omitted. For the creation of the prototype, the decision was made to use Infura for reasons of simplicity. Infura can be used for \ac{IPFS} free of charge and without registration.
  12. \begin{figure}[h!]
  13. \centering
  14. \includegraphics[width=1.0\textwidth]{building-block-view}
  15. \caption{.}
  16. \label{fig:building-block-view}
  17. \end{figure}
  18. \subsection{White Box View}
  19. \label{sec:white-box}
  20. The Ionic framework uses Angular in the core. Accordingly, the Hybrid \ac{OSN} app is in principle an Angular application. The essential building blocks are components, pages, and providers (see Figure \ref{fig:building-block-view-level1}). In the following, these components are described in detail and examples are given of where they are used in Hybrid \ac{OSN}.
  21. \begin{figure}[h!]
  22. \centering
  23. \includegraphics[width=1.0\textwidth]{building-block-view-level1}
  24. \caption{.}
  25. \label{fig:building-block-view-level1}
  26. \end{figure}
  27. \subsubsection{Providers}
  28. \label{providers}
  29. Data access is performed using providers (known as services in Angular). For the external services (Twitter \ac{API}, \ac{P2P} database, \ac{P2P} storage), there is one provider each to handle the communication. Besides, providers are used as helper classes providing specific functionality that is used several times. This functionality includes, for example, encryption and decryption and the compilation of aggregated timelines. Providers are injected into components using the constructor. Table \ref{tab:providers} lists all providers used in Hybrid \ac{OSN} and their functional descriptions.
  30. \begin{table}[h!]
  31. \begin{tabularx}{\textwidth}{|l|X|}
  32. \hline
  33. \textbf{Provider} & \textbf{Purpose} \\ \hline
  34. Auth & Manage and perform authentication against the Twitter \ac{API}. Responsible for login and logout. \\ \hline
  35. Crypto & Provides methods for encryption, decryption, and key generation \\ \hline
  36. Feed & Aggregation of private (\ac{P2P}) and public (Twitter) tweets to compose a chronological timeline \\ \hline
  37. \ac{P2P}-Database-Gun & Interface for data exchange with GUN \\ \hline
  38. \ac{P2P}-Storage-IPFS & Interface for data exchange with \ac{IPFS} via Infura \\ \hline
  39. Twitter-API & Interface to use the Twitter \ac{API} using the Twit package \\ \hline
  40. \end{tabularx}
  41. \caption{Providers used in the Hybrid \ac{OSN} app in alphabetical order with their purpose.}
  42. \label{tab:providers}
  43. \end{table}
  44. \subsubsection{Components}
  45. \label{sec:components}
  46. Components are the basic building blocks of a user interface. Figure \ref{fig:component-example} shows an example of the representation of a tweet in Hybrid \ac{OSN} using various components. A component consists of an \ac{HTML} template, \ac{CSS} styling, and JavaScript logic, whereby the logic is typically limited to a minimum. Components can be used as elements in other components or pages. A component receives the data it is supposed to visualize. Furthermore, components can process events or return them to parent components for handling.
  47. \begin{figure}[h!]
  48. \centering
  49. \includegraphics[width=1.0\textwidth]{component-example}
  50. \caption{Composition of the tweet component from three other components. Several tweet components are in turn combined to form a feed component.}
  51. \label{fig:component-example}
  52. \end{figure}
  53. \subsubsection{Pages}
  54. \label{pages}
  55. Pages are specialized components that are used as a holistic view. A page is made up of several other components. The data to be displayed are loaded using providers. To be able to navigate between the individual pages within the app, the model of a stack is used (implemented by the NavController). The currently visible page is at the top of the stack. When another page is called, it is pushed onto the stack. Pressing \enquote{Back} removes the top page from the stack and displays the page below it.
  56. Table \ref{tab:pages} lists all pages and their purpose. When the app is opened, it checks whether the user is already logged in. Depending on this, the user starts with the Login Page or the Home Page.
  57. \begin{table}[h!]
  58. \begin{tabularx}{\textwidth}{|l|X|}
  59. \hline
  60. \textbf{Page} & \textbf{Purpose} \\ \hline
  61. About & Information about the app, which can be accessed via the login page to get basic information about the app before logging in \\ \hline
  62. Home & Chronological view of the latest tweets from Twitter and the private network \\ \hline
  63. Login & Authentication against Twitter to use the Twitter \ac{API} \\ \hline
  64. Profile & Presentation of a user profile consisting of the user data (profile picture, brief description, location, website) and the user timeline \\ \hline
  65. Search & Container page for searching for tweets and users, where tweets are also divided into popular and recent (see Search-Results-Tweets-Tab) \\ \hline
  66. Search-Results-Tweets-Popular & Search results of currently popular tweets for a given keyword \\ \hline
  67. Search-Results-Tweets-Recent & Search results of recent tweets for a given keyword \\ \hline
  68. Search-Results-Tweets-Tab & Container page for the search results for tweets (recent and popular) in tabs \\ \hline
  69. Search-Results-Users & Search results of users for a given keyword \\ \hline
  70. Settings & Configuration of keywords that trigger the private mode and settings regarding encryption \\ \hline
  71. Write-Tweet & Form for writing a tweet \\ \hline
  72. \end{tabularx}
  73. \caption{Pages used in the Hybrid \ac{OSN} app in alphabetical order with their purpose.}
  74. \label{tab:pages}
  75. \end{table}
  76. \subsubsection{Local Storage}
  77. \label{sec:local-storage}
  78. As the name suggests, this is a local storage that is accessible by the app. With Hybrid \ac{OSN}, this memory is used to store essential information for usage. These include the Twitter user id, the two tokens for accessing the Twitter \ac{API}, the keywords that trigger the private mode, and private and public keys for encryption. Log out completely deletes the local storage.