Add section for mobile app

1 files changed, 56 insertions, 0 deletions

diff --git a/docs/chapters/setup.tex b/docs/chapters/setup.tex
index e6a44d1..877a96a 100644
--- a/docs/chapters/setup.tex
+++ b/docs/chapters/setup.tex
@@ -75,3 +75,59 @@ Hash.Target......: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIj...AOqwds
 \end{lstlisting}
 
 Qui vediamo come sia riuscito a trovare il secret, ovvero la stringa \emph{hello}.
+
+\section{App mobile}
+Il codice dell'app è presente al link \underline{\url{https://git.dcariotti.me/m6-ie/tree/app}}.
+È una "banale" applicazione scritta usando Ionic \cite{IONIC} con 3 pagine:
+\begin{enumerate}
+    \item Home: ricorda cosa serve fare, ovvero il login;
+    \item Sign in: permette di fare il login mediante username e password;
+    \item Me: visualizza le informazioni dell'utente loggato.
+\end{enumerate}
+
+Sapendo ciò dovremo esaminare il file APK dell'applicazione per vedere come si comporta realmente.\\\\
+Dentro il codice sorgente è presente il codice in JavaScript, ma a noi serve usarlo nel nostro dispositivo Android. Quindi, come faremo realmente sviluppando un'app Ionic, lo andremo a compilare e visualizzare l'APK dentro Android Studio \cite{ANDROIDSTUDIO}.
+Questo passaggio lo ricreiamo per ricondurre a tutti i passaggi.
+
+
+\begin{lstlisting}
+$ git clone https://git.dcariotti.me/m6-ie
+$ cd m6-ie/app
+$ npm i
+$ ionic capacitor add android
+$ vi .env # Chi fa la build conosce effettivamente l'URL dell'API
+$ npm run build --production
+$ npx cap copy android
+$ npx cap sync android
+$ cd android
+$ export ANDROID_SDK_ROOT="<path all'sdk>"
+$ ./gradlew assembleDebug
+\end{lstlisting}
+
+L'ultimo comando creerà un APK valido dentro \emph{m6-ie/app/build/outputs/apk/debug/app-debug.apk}.
+Da non confondere quindi con la creazione di pacchetti AAB\cite{APKVSAAB:1} per le release.
+
+\subsection{Configurazione Android Studio}
+Scaricato e installato il pacchetto dal link ufficiale bisognerà inoltre installare anche l'SDK e un Device, ovvero un emulatore di un dispositivo Android.
+
+\begin{figure}[h]
+\centering
+\includegraphics[width=0.2\textwidth]{data/android-studio-screenshot}
+\caption{Screenshot di Android Studio in Ubuntu focal}
+\end{figure}
+
+
+Nell'esempio qui di seguito io userò SDK 30 su un Pixel 4.\\
+\\
+Procediamo quindi al profiling dell'applicazione come da \textbf{Figure 3.1}.
+
+
+Avviando l'emulatore attraverso \emph{Shift+F10} vedremo l'applicazione dentro il device Android, Google Pixel in questo caso.
+
+\begin{figure}[h]
+\centering
+\includegraphics[width=0.2\textwidth]{data/pixel-device}
+\caption{Screenshot dell'emulatore}
+\end{figure}
+
+Se provassimo ad intercettare il traffico usando il \emph{Network profiler} integrato non vedremmo nulla perché non vengono esaminate le richieste HTTP fatte in maniera ibrida, quindi useremo Wireshark per monitorare le richieste al server. 
\ No newline at end of file