summaryrefslogtreecommitdiff
path: root/docs/chapters
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-11-16 22:25:33 +0100
committerSanto Cariotti <santo@dcariotti.me>2022-11-16 22:25:33 +0100
commit423de304b92a6d1538fb7719ea5582b6d60545f3 (patch)
treef45f70e44fe54ea0234a82bc24dea65bbc102d96 /docs/chapters
parentd0870a6fcd7701b30ca2c433b1139b6fc18ac43d (diff)
Add section for mobile app
Diffstat (limited to 'docs/chapters')
-rw-r--r--docs/chapters/setup.tex56
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