Add section for mobile app

5 files changed, 68 insertions, 2 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
diff --git a/docs/data/android-studio-screenshot.png b/docs/data/android-studio-screenshot.png
new file mode 100644
index 0000000..fc6279a
--- /dev/null
+++ b/docs/data/android-studio-screenshot.png
diff --git a/docs/data/pixel-device.png b/docs/data/pixel-device.png
new file mode 100644
index 0000000..f17cd4c
--- /dev/null
+++ b/docs/data/pixel-device.png
diff --git a/docs/m6.tex b/docs/m6.tex
index 1469f4a..242ae26 100644
--- a/docs/m6.tex
+++ b/docs/m6.tex
@@ -28,8 +28,6 @@
 \input{chapters/setup}
 
 
-
-
 \bibliography{refs}
 \bibliographystyle{ieeetr}
 
diff --git a/docs/refs.bib b/docs/refs.bib
index 60ad0ff..9ba13ac 100644
--- a/docs/refs.bib
+++ b/docs/refs.bib
@@ -59,3 +59,15 @@
 @MISC{HASHCAT,
     HOWPUBLISHED="\url{https://hashcat.net/hashcat/}"
 }
+@MISC{IONIC,
+    HOWPUBLISHED="\url{https://ionicframework.com/}"
+}
+@MISC{ANDROIDSTUDIO,
+    HOWPUBLISHED="\url{https://developer.android.com/studio/}"
+}
+@MISC{APKVSAAB:1,
+    HOWPUBLISHED="\url{https://beebom.com/apk-vs-aab/}"
+    AUTHOR="Arjun Sha",
+    TITLE="APK vs AAB",
+    YEAR=2021,
+}