|
@@ -1,4 +1,4 @@
|
|
-In this section, the context in which Hybrid OSN is located is first considered and then a breakdown into the individual components is carried out. The function of the respective blocks is then described in more detail. Finally, the function of certain components in interaction is explained using the examples of displaying the home timeline and posting a new tweet.
|
|
|
|
|
|
+In this section, the context in which Hybrid OSN is located is first considered, and then a breakdown into the individual components is carried out. The function of the respective blocks is then 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.
|
|
|
|
|
|
\subsection{Scope and Context}
|
|
\subsection{Scope and Context}
|
|
\label{sec:scope-and-context}
|
|
\label{sec:scope-and-context}
|
|
@@ -11,7 +11,7 @@ Figure \ref{fig:building-block-view} shows a black box view of which other syste
|
|
\item User
|
|
\item User
|
|
\end{itemize}
|
|
\end{itemize}
|
|
|
|
|
|
-Infura\footnote{https://infura.io/} is a service that provides access to Ethereum and IPFS via a simple interface. Communication with the API happens using simple HTTP requests. The connection of IPFS in hybrid OSN can thus be carried out in an uncomplicated way. The use of an additional system entails typically an additional risk. However, there is a JavaScript client for IPFS, which can be integrated into hybrid OSN and thus the dependency on Infura would be omitted. At the present time and for the development of the prototype, the decision was made to use Infura for reasons of simplicity. Infura can be used for IPFS free of charge and without registration.
|
|
|
|
|
|
+Infura\footnote{https://infura.io/} is a service that provides access to Ethereum and IPFS via a simple interface. Communication with the API happens using HTTP requests. The connection of IPFS in Hybrid OSN can thus be carried out in an uncomplicated way. The use of an additional system entails an additional risk typically. However, there is a JavaScript client for IPFS, which can be integrated into Hybrid OSN and thus the dependency on Infura would be omitted. At present and for the development of the prototype, the decision was made to use Infura for reasons of simplicity. Infura can be used for IPFS free of charge and without registration.
|
|
|
|
|
|
\begin{figure}[h!]
|
|
\begin{figure}[h!]
|
|
\centering
|
|
\centering
|
|
@@ -23,11 +23,11 @@ Infura\footnote{https://infura.io/} is a service that provides access to Ethereu
|
|
\subsection{White Box View}
|
|
\subsection{White Box View}
|
|
\label{sec:white-box}
|
|
\label{sec:white-box}
|
|
|
|
|
|
-The used Ionic Framework uses Angular in the core, in the concrete case of hybrid OSN Angular 5.2 is used. Accordingly, the hybrid OSN App is in principle an Angular application. The essential building blocks are components, pages and providers. In the following, these components are described in detail and examples are given of where they are used in hybrid OSN.
|
|
|
|
|
|
+The used Ionic framework uses Angular in the core, in the concrete case of Hybrid OSN Angular 5.2 is used. Accordingly, the Hybrid OSN app is in principle an Angular application. The essential building blocks are components, pages, and providers. In the following, these components are described in detail and examples are given of where they are used in Hybrid OSN.
|
|
|
|
|
|
\subsubsection{Providers}
|
|
\subsubsection{Providers}
|
|
\label{providers}
|
|
\label{providers}
|
|
-Data access is performed using providers (known as services in Angular). For the external services (Twitter API, P2P database, P2P storage), there is one provider each to handle the communication. In addition, providers are used as helper classes that provide a certain functionality that is used several times. This 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 OSN and their functional descriptions.
|
|
|
|
|
|
+Data access is performed using providers (known as services in Angular). For the external services (Twitter API, P2P database, P2P storage), there is one provider each to handle the communication. Besides, providers are used as helper classes that provide 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 OSN and their functional descriptions.
|
|
|
|
|
|
\begin{table}[h!]
|
|
\begin{table}[h!]
|
|
\begin{tabularx}{\textwidth}{|l|X|}
|
|
\begin{tabularx}{\textwidth}{|l|X|}
|
|
@@ -40,13 +40,13 @@ Data access is performed using providers (known as services in Angular). For the
|
|
P2P-Storage-IPFS & Interface for data exchange with IPFS via Infura \\ \hline
|
|
P2P-Storage-IPFS & Interface for data exchange with IPFS via Infura \\ \hline
|
|
Twitter-API & Interface to use the Twitter API using the Twit package \\ \hline
|
|
Twitter-API & Interface to use the Twitter API using the Twit package \\ \hline
|
|
\end{tabularx}
|
|
\end{tabularx}
|
|
- \caption{Providers used in the hybrid OSN app in alphabetical order with their purpose.}
|
|
|
|
|
|
+ \caption{Providers used in the Hybrid OSN app in alphabetical order with their purpose.}
|
|
\label{tab:providers}
|
|
\label{tab:providers}
|
|
\end{table}
|
|
\end{table}
|
|
|
|
|
|
\subsubsection{Components}
|
|
\subsubsection{Components}
|
|
\label{sec:components}
|
|
\label{sec:components}
|
|
-Components are the basic building blocks of a user interface. Figure \ref{fig:component-example} shows an example for the representation of a tweet in hybrid OSN using various components. A component consists of an HTML template, 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 is given the data it is supposed to visualize. Furthermore, components can process events or return them to parent components for handling.
|
|
|
|
|
|
+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 OSN using various components. A component consists of an HTML template, 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.
|
|
|
|
|
|
\begin{figure}[h!]
|
|
\begin{figure}[h!]
|
|
\centering
|
|
\centering
|
|
@@ -57,7 +57,7 @@ Components are the basic building blocks of a user interface. Figure \ref{fig:co
|
|
|
|
|
|
\subsubsection{Pages}
|
|
\subsubsection{Pages}
|
|
\label{pages}
|
|
\label{pages}
|
|
-Pages are special components that are used as a holistic view. A page is made up of several other components. The data to be displayed is 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.
|
|
|
|
|
|
+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 is 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.
|
|
|
|
|
|
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.
|
|
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.
|
|
|
|
|
|
@@ -77,10 +77,10 @@ Table \ref{tab:pages} lists all pages and their purpose. When the app is opened,
|
|
Settings & Configuration of keywords that trigger the private mode and settings regarding encryption \\ \hline
|
|
Settings & Configuration of keywords that trigger the private mode and settings regarding encryption \\ \hline
|
|
Write-Tweet & Form for writing a tweet \\ \hline
|
|
Write-Tweet & Form for writing a tweet \\ \hline
|
|
\end{tabularx}
|
|
\end{tabularx}
|
|
- \caption{Pages used in the hybrid OSN app in alphabetical order with their purpose.}
|
|
|
|
|
|
+ \caption{Pages used in the Hybrid OSN app in alphabetical order with their purpose.}
|
|
\label{tab:pages}
|
|
\label{tab:pages}
|
|
\end{table}
|
|
\end{table}
|
|
|
|
|
|
\subsubsection{Local Storage}
|
|
\subsubsection{Local Storage}
|
|
\label{sec:local-storage}
|
|
\label{sec:local-storage}
|
|
-As the name suggests, this is a local storage that the app has access to. With hybrid OSN, this memory is used to store the essential information for usage. These include the Twitter user id, the two tokens for accessing the Twitter API, the keywords that trigger the private mode, and private and public keys for encryption. Logout completely deletes the local storage.
|
|
|
|
|
|
+As the name suggests, this is a local storage that is accessible by the app. With Hybrid OSN, this memory is used to store essential information for usage. These include the Twitter user id, the two tokens for accessing the Twitter API, the keywords that trigger the private mode, and private and public keys for encryption. Log out completely deletes the local storage.
|