HOSN-app/thesis/content/05-proof-of-concept/hybrid-osn.tex

% Login
When the user opens the app for the first time, the login page is displayed (see Figure \ref{fig:screenshot-login}). Clicking on the login button starts the process. The user is directed to the Twitter website, where he has to log in. Only once, the user has to grant the Hybrid \ac{OSN} app access to his Twitter account. This is the prerequisite to let the Hybrid \ac{OSN} app talk to the Twitter \ac{API} in the name of the user.

\begin{figure}[h!]
	\centering
	\begin{subfigure}[b]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/login}
		\caption{}
		\label{fig:screenshot-login}	
	\end{subfigure}
	\begin{subfigure}[b]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/home}
		\caption{}
		\label{fig:screenshot-home}
	\end{subfigure}
	\begin{subfigure}[b]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/menu}
		\caption{}
		\label{fig:screenshot-menu}
	\end{subfigure}
	\caption{Screenshots of the Hybrid \ac{OSN} app for the login page (a), the home feed (b) and the menu (c).}
\end{figure}

% Home + Menu
After a successful login, the user is forwarded to his home feed (see Figure \ref{fig:screenshot-home}) which is also the starting point if the user is already logged in when opening the app. The home feed consists of the recent public and private tweets in chronological order of the accounts that the user follows. Tapping on the hamburger icon opens the menu (see Figure \ref{fig:screenshot-menu}) where the user can access his profile, the home page, settings and search at any time. The user can also log out via the menu.

% Tweet Details
A tweet consists of information about the author and the time of the writing, the message itself and actions. Tapping on the arrow in the top right can be used to perform user-specific actions, such as blocking, muting and following the user. These actions are presented in an extra menu at the bottom of the screen (see Figure \ref{fig:user-actions}). Below the tweet message, icons allow direct interaction with the tweet, including replying, retweeting and public and private liking (see Figure \ref{fig:tweet}).

\begin{figure}[h!]
	\centering
	\begin{subfigure}[c]{0.5\textwidth}
		\includegraphics[width=\textwidth]{screenshots/tweet-actions}
		\caption{}
		\label{fig:tweet}	
	\end{subfigure}	
	\hspace{0.1\textwidth}
	\begin{subfigure}[c]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/user-actions}
		\caption{}
		\label{fig:user-actions}
	\end{subfigure}
	\caption{Screenshots of the Hybrid \ac{OSN} app for tweet and its actions (a) and the menu with user-specific actions (b)}
\end{figure}

\begin{figure}[h!]
	\centering
	\begin{subfigure}[c]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/settings-1}
		\caption{}
		\label{fig:screenshot-settings-1}	
	\end{subfigure}
	\begin{subfigure}[c]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/settings-2}
		\caption{}
		\label{fig:screenshot-settings-2}
	\end{subfigure}
	\begin{subfigure}[c]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/search-user}
		\caption{}
		\label{fig:screenshot-search}
	\end{subfigure}
	\caption{Screenshots of the Hybrid \ac{OSN} app for the settings page to configure keywords (a) and the encryption keys (b), and the search page with results for users (c).}
\end{figure}

% Settings
In the settings, keywords can be configured that are considered indicators of tweets that are particularly worthy of protection (see Figure \ref{fig:screenshot-settings-1}). When writing a new tweet, the user is warned accordingly if one of these words is part of the text. Also, private and public keys can be generated and stored on the settings page to encrypt and decrypt private tweets (see Figure \ref{fig:screenshot-settings-2}). The public key can be published by clicking on a respective button. For this purpose, the key is entered into the user's so-called public key history together with the start of validity, stored in \ac{IPFS} and the hash is posted in the user's profile. When logging out, all stored settings are automatically deleted.

% Search
With the search, tweets and users can be looked up for a specific keyword (see Figure \ref{fig:screenshot-search}). In the search results of the tweets, the most recent or the most popular tweets are shown, split into two tabs. However, private tweets are not included in this search.

% Write Tweet
The page for composing a new tweet is also used when replying to a tweet or retweeting a tweet. When replying and retweeting, the particular tweet is presented above the text field for the message (see Figure \ref{fig:screenshot-reply}). To keep an eye on the character limit when writing, the current number of characters is displayed below the text field. Next to it is an additional visualization of the progress in the form of a circle. A switch controls to which network the tweet is posted. By clicking on the \enquote{TWEET!}-button, the tweet is published. If the message contains one of the keywords defined in the settings, a yellow, pulsating warning triangle will appear next to the tweet button (see Figure \ref{fig:screenshot-alert}).

\begin{figure}[h!]
	\centering
	\begin{subfigure}[b]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/write-tweet-reply}
		\caption{}
		\label{fig:screenshot-reply}	
	\end{subfigure}
	\begin{subfigure}[b]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/write-tweet-alert}
		\caption{}
		\label{fig:screenshot-alert}
	\end{subfigure}
	\begin{subfigure}[b]{0.32\textwidth}
		\includegraphics[width=\textwidth]{screenshots/profile}
		\caption{}
		\label{fig:screenshot-profile}
	\end{subfigure}
	\caption{Screenshots of the Hybrid \ac{OSN} app for replying to a tweet (a), writing a tweet containing a keyword triggering the private mode (b) and a user profile (c).}
\end{figure}

% Profile
The upper part of the profile page displays information about the user (profile picture, name, Twitter handle, description, website, location) and the lower part displays a feed of his tweets (see Figure \ref{fig:screenshot-profile}). Furthermore, a button for following or unfollowing the user is placed in the upper part of the profile.