\begin{it}
	\usepackage[italian]{babel}
\end{it}
\begin{en}
	\usepackage[english]{babel}
\end{en}

\usepackage{blindtext}
\usepackage[utf8]{inputenc}
\usepackage[pdftex]{graphicx}
\usepackage{scrlayer-scrpage}
\usepackage{float}
\usepackage{hyperref}
\usepackage{tikz}
\usepackage[backend=biber]{biblatex}
\usepackage{pgfgantt}
\usepackage{pgffor}

\bibliography{bibliography}

% page margins
\usepackage[margin=3cm,head=15pt]{geometry}

% document metadata
\begin{it}
	\def\mdtitle{Alternanza scuola-lavoro estesa presso Agomir S.p.A.}
	\def\mdsubtitle{Sviluppo di applicazioni multipiattaforma per dispositivi mobili}
\end{it}
\begin{en}
	\def\mdtitle{Extended school internship at Agomir S.p.A.}
	\def\mdsubtitle{Multiplatform mobile application development}
\end{en}
\def\mdauthor{Claudio Maggioni}
\def\mddate{\today}
\def\mdrevision{5}

% header and footer style
\clearscrheadfoot
\pagestyle{scrheadings}
\makeatletter
\ohead[]{\mdauthor}
\ihead[]{\mdtitle}
\cfoot[\pagemark]{\pagemark}

\begin{document}

% first page
\begin{titlepage}
	\pagenumbering{gobble}
	\centering
	\includegraphics[width=0.15\textwidth]{images/logo.jpg}\par\vspace{1cm}
	{\scshape\LARGE Istituto di Istruzione Superiore \mbox{``A. Badoni''}\par}
	\vspace{1cm}
	{\scshape\Large Tesi di maturità\par}
	\vspace{1.5cm}
	{\huge\bfseries\mdtitle\par}
	\vspace{0.75cm}
	{\Large\bfseries\mdsubtitle\par}
	\vspace{2cm}
	{\Large\itshape\mdauthor\par}
	\vfill	
	% Bottom of the page
	{\large\mddate\par}
	\begin{it}
		\vspace{0.5cm}
		{\large\textsc{Traduzione in italiano}\par}
	\end{it}
	\vspace{0.5cm}
	{\large\color{red}\textsc{Revisione \mdrevision}\par}
\end{titlepage}

\newpage

\pagenumbering{Roman}
\tableofcontents

\newpage

\pagenumbering{arabic}
\begin{it}
	\section{Informazioni generali sul lavoro svolto}

	A partire dal giorno 19/10/2017, collaboro con l'azienda Agomir S.p.A\footnote{Agomir S.p.A.: \url{https://www.agomir.com/}}, che produce software, sistemi e servizi per
	piccole e medie imprese, svolgendo un'attività di alternanza scuola-lavoro estesa con cadenza settimanale (nello specifico giovedì e venerdì pomeriggio). Mi occupo di sviluppo software di tipo gestionale, nello specifico di applicazioni per smartphone
	multipiattaforma (cioè compatibili sia con Android che con iOS) utilizzando strumenti come \textit{Ionic Framework}\footnote{Ionic Framework: \url{https://ionicframework.com/}} e \textit{Apache
	Cordova}\footnote{Apache Cordova: \url{https://cordova.apache.org/}}.

	Tale approccio al mondo \textit{mobile} facilita lo sviluppo, perché al posto di usare API e meccanismi legati
	alla piattaforma \`e possibile utilizzare tecnologie note e standard come HTML e Javascript. Naturalmente tali
	applicazioni richiedono pi\`u risorse e tendono ad essere meno fluide, ma questo aspetto è meno rilevante in contesti gestionali come quelli affrontati da Agomir, non legati ad esempio al mondo dei videogiochi o all'elaborazione real-time.
\end{it}
\begin{en}
	\section{General information about the work done}
	
	\blindtext
\end{en}

\begin{it}
	\section{Gestione dei progetti}

	Non ho diretto controllo manageriale su ciò che sviluppo in azienda, in quanto ho un ruolo simile a quello di un
	dipendente. L'incarico di gestire l'andamento dei progetti spetta a Mario Goretti, A.D. dell'azienda e capo del settore
	di sviluppo software gestionale (\textsc{SWG}), e ai suoi collaboratori. 
	
	In generale sviluppo i progetti da solo. Collaboro con il collega Daniele Crippa per l'interfacciamento con i software
	aziendali esistenti e per l'organizzazione di nuovi progetti, nonché consigli e dritte varie.
	
	Nonostante non abbia controllo totale \`e comunque mia responsabilità fare stime orarie sul lavoro da svolgere nonché
	definire passi e \textit{milestone} per i vari progetti.
	
	Per aumentare la forza lavoro per lo sviluppo di applicazioni \textit{mobile} ho gestito momenti di formazione ad alcuni dipendenti nei quali ho mostrato il principale funzionamento delle tecnologie che uso.
\end{it}
\begin{en}
	\section{Projects management}
	
	\blindtext
\end{en}

\begin{it}
	\section{Il progetto principale: \textit{InteGRa Mobile}}
	
	Questa applicazione, una volta completata, dovrebbe permettere ad utenti in mobilità di interfacciarsi con alcune
	funzioni del prodotto ERP di punta di Agomir: il gestionale \textit{InteGRa}\footnote{InteGRa ERP: \url{https://integra.agomir.com/}}. Nel dettaglio, sarà possibile accedere alle seguenti sezioni:
	
	\begin{description}
	\item[Ordini cliente] per registrare ordini di prodotti a clienti;
	\item[Soggetti] per consultare informazioni anagrafiche di clienti e fornitori;
	\item[Agenda] per consultare e aggiungere eventi nel calendario presente nell'ERP, il quale si pu\`o integrare con \textit{Outlook}
	\footnote{Microsoft Outlook: \url{https://products.office.com/it-it/outlook}};
	\item[Magazzini] gestire e inventariare scorte in magazzino.
	\end{description}
	
	In aggiunta, sarà possibile anche registrare le ore per interventi in trasferta, funzione gi\`a implementata
	nell'applicazione \textit{InteGRa.Service}, sviluppata nei periodi di alternanza precedenti. Tale lavoro non \`e
	direttamente implementabile in \textit{InteGRa Mobile} a causa di differenze consistenti nelle architetture dei due prodotti.
	
	Inoltre, l'applicazione sarà in grado di funzionare in modo limitato anche senza connessione diretta ad
	\textit{InteGRa}, permettendo la sincronizzazione dei dati modificati con il gestionale in un momento futuro.
\end{it}
\begin{en}
	\section{The main project: \textit{InteGRa Mobile}}
	
	\blindtext
\end{en}

\begin{it}
	\subsection{Architettura software}
\end{it}
\begin{en}
	\subsection{Software architecture}
\end{en}

\begin{figure}[H]
	\centering
	\resizebox{\ifdim\width>\linewidth\linewidth\else\width\fi}{!}{\input{diagrams/itgmobile}}
	\begin{it}
		\caption{L'architettura di \textit{InteGRa Mobile} raffigurata con un diagramma}
	\end{it}
	\begin{en}
		\caption{The architecture of \textit{InteGRa Mobile} as a diagram}
	\end{en}
	\label{fig:itgmobliearch}
\end{figure}

\begin{it}
	Nella figura \ref{fig:itgmobliearch} si può notare come l'insieme dei componenti software all'interno del progetto siano organizzati e comunichino tra loro. Nel dettaglio:
	\begin{itemize}
	\item L'applicazione non comunica direttamente con il gestionale, ma tramite una serie di chiamate \textsc{REST}\cite{wiki:rest} ad un endpoint lato server (chiamato \textit{InteGRaREST}) che svolge il ruolo di intermediario.
	 Nello specifico, i dati in input vengono trasmessi come \texttt{application/x-www-form-urlencoded} mentre
	 i dati in output vengono trasmessi come \textsc{JSON}\cite{wiki:json}, e le sessioni vengono identificate con un token presente nella query string di ciascuna richiesta;
	\item Tale componente server è in grado di effettuare autonomamente query \textsc{SQL} al database del gestionale per recuperare velocemente informazioni aventi una struttura dati semplice;
	\item Nel caso sia necessario interagire con record complessi, \textit{InteGRaREST} comunica direttamente con \textit{InteGRa} attraverso chiamate \textsc{SOAP}\cite{wiki:soap};
	\item La comunicazione tra \textit{InteGRaREST} e \textit{InteGRa Mobile} avviene tramite \textit{restaurant}, libreria che implementa e rende standard il protocollo di comunicazione e sincronizzazione dati.
	\end{itemize}
\end{it}
\begin{en}
	\blindtext
\end{en}

\begin{it}
	\subsection{Stato del progetto}
\end{it}
\begin{en}
	\subsection{Project status}
\end{en}

\begin{figure}[H]
	\centering
	\resizebox{\ifdim\width>\linewidth\linewidth\else\width\fi}{!}{
		\begin{ganttchart}{1}{49}
			\gantttitle{2017}{28}
			\gantttitle{2018}{21} \\
			\gantttitle{6}{2}
			\gantttitle{7}{4}
			\gantttitle{8}{5}
			\gantttitle{9}{4}
			\gantttitle{10}{4}
			\gantttitle{11}{5}
			\gantttitle{12}{4}
			\gantttitle{1}{5}
			\gantttitle{2}{4}
			\gantttitle{3}{4}
			\gantttitle{4}{4}
			\gantttitle{5}{4} \\
			\gantttitlelist{25,...,52}{1}
			\gantttitlelist{1,...,21}{1} \\
			\ganttbar[name=prg]{Progettazione}{1}{1} \\
			\ganttlinkedbar[name=ir]{Impl. \textit{restaurant}}{2}{37} \\
			\ganttgroup[name=funz]{Impl. sezioni}{2}{13} \\
			\ganttbar{Inv. di magazzino}{2}{4} \\
			\ganttbar{Agenda}{5}{6} \\
			\ganttbar{Soggetti}{7}{8} \\
			\ganttbar{Ordini cliente}{11}{13} \\
			\ganttbar[name=tf]{Test per sezioni}{14}{16} \\
			\ganttlinkedgroup[name=tr]{Rifinim. \textit{restaurant}}{19}{46} \\
			\ganttbar{Adattam. architettura}{19}{37} \\
			\ganttbar[name=str]{Test}{38}{46} \\
			\ganttbar[name=ril]{Finalizzazione}{47}{49}
			\ganttlink{funz}{tf}
			\ganttlink{prg}{funz}
			\ganttlink{ir}{str}
			\ganttlink{tr}{ril}
		\end{ganttchart}
	}
	\begin{it}
		\caption{Il diagramma di Gantt del progetto
			\textit{InteGRa Mobile}}
	\end{it}
	\begin{en}
		\caption{\textit{InteGRa Mobile} Gantt diagram} 
	\end{en}
	\label{fig:ganttitgmob}
\end{figure}

\begin{it}
	Nella lettura del diagramma di Gantt in figura \ref{fig:ganttitgmob} \`e necessario tenere a mente che il completamento dell'intera applicazione non \`e certo per
	la fine di maggio. Ci\`o che dovr\`a essere necessariamente completato \`e la parte pi\`u importante del progetto:
	\textit{restaurant}, il motore di sincronizzazione online/offline e libreria generica che permette di implementare
	velocemente nuove sezioni dell'applicazione.
\end{it}
\begin{en}
	\blindtext
\end{en}
\begin{it}
	\subsection{Fasi del progetto}
	
	Le fasi del progetto, di cui date di inizio e fine sono state specificate nel diagramma in figura \ref{fig:ganttitgmob}, sono:
	
	\begin{description}
	\item[Progettazione] delineazione delle funzionalità da implementare nell'applicazione 
	e prime bozze dell'interfaccia utente;
//	\item[Implementazione \textit{restaurant}] implementazione della libreria, su cui si basano tutte le sezioni del programma. Vista l'importanza di questo componente, gli sviluppi vengono continuati in parallelo con l'implementazione delle sezioni;
	\item[Implementazione sezioni] creazione di interfaccia e logica per le funzionalit\'a previste, cio\'e: 
	\begin{itemize}
	\item Magazzini;
	\item Agenda;
	\item Soggetti;
	\item Ordini cliente;
	\end{itemize}
	\item[Test per le sezioni] messa alla prova degli algoritmi e della UI per efficacia ed efficienza, nonch\'e eventuali correzioni;
	\item[Rifinimento \textit{restaurant}] messa alla prova delle scelte architetturali e algoritmi usati nella libreria e rifinimento di essi; Fase divisa in:
	\begin{description}
	\item[Miglioramento architettura] analisi del protocollo per individuare punti di debolezza e possibili ottimizzazioni;
	\item[Test per \textit{restaurant}] messa alla prova dei cambiamenti fatti;
	\end{description}
	\item[Finalizzazione] task finali del progetto, tra cui branding, operazioni pre-rilascio, e gestione di eventuali personalizzazioni richieste dai clienti.
	\end{description}
\end{it}
\begin{en}
	\subsection{Project phases}
	
	\blindtext
\end{en}

\section{Il progetto secondario: \textit{Guac Remote}}
Questo progetto \`e destinato ad un'importante azienda del territorio, produttrice di macchine equilibratrici. Tale applicazione dovrebbe fungere da client di
desktop remoto (come \textit{TeamViewer}\footnote{TeamViewer: \url{https://www.teamviewer.com/it/}}) per il PC presente nel loro prodotto di punta, un sistema di calibrazione delle
ruote di autoveicoli funzionante mediante telecamere. Il programma dovrebbe permettere all'operatore di tale prodotto di interagire con il software presente nel macchinario, senza scendere dal veicolo.

A causa di urgenza del committente, lo sviluppo di questo progetto ha interrotto e attualmente interrompe gli sviluppi
per \textit{InteGRa Mobile}.

\subsection{Architettura software}

\begin{figure}[H]
	\centering
	\resizebox{\ifdim\width>\linewidth\linewidth\else\width\fi}{!}{\input{diagrams/guacremote}}
	\caption{L'architettura di \textit{Guac Remote}}
	\label{fig:argosarch}
\end{figure}

\textit{Guac Remote} è basata su un'applicativo e libreria per la connessione a computer remoto chiamato \textit{Apache Guacamole}\footnote{\textit{Apache Guacamole}: \url{https://guacamole.apache.org}}.
Tale software è costituito da due parti: \cite{guacdoc:arch}
\begin{description}
	\item[\textit{guacamole-server} (o \textit{guacd})] un servizio scritto in C che funge da adattatore tra il protocollo \textit{guacamole} e i protocolli VNC, RDP o SSH, utilizzando questi ultimi per stabilire connessioni con gli host remoti;
	\item[\textit{guacamole-client}] una WebApplication scritta tramite \textit{Java servlet} che fornisce un'interfaccia web per interagire con \textit{guacamole-server} e connettersi ai PC remoti.
\end{description} 
Data la natura open-source del progetto, sia \textit{guacamole-server} che \textit{guacamole-client} possono essere usati come libreria per la realizzazione di software derivati. In particolare, \textit{guacamole-client} può essere scomposto nelle librerie \textit{guacamole-common-js}, che contiene il codice Javascript per il client, e \textit{guacamole-common}, che fornisce classi Java per la connessione con \textit{guacamole-server}. \cite{guacdoc:api}

In \textit{Guac Remote}, \textit{Apache Guacamole} è usato per fornire accesso remoto al PC presente nel macchinario, che contiene l'applicativo per la calibrazione, all'applicazione installata sul tablet. Nel dettaglio, \textit{guacamole-common-js} è usato nell'applicazione \textit{mobile} fornire un'interfaccia touchscreen per interagire con l'host remoto, mentre \textit{guacamole-common}, tramite una piccola WebApplication, assieme a \textit{guacamole-server} sono installati sul PC.

In aggiunta, tablet e PC possono comunicare informazioni aggiuntive tramite una WebSocket creata al momento della connessione, necessaria per alcune estensioni al protocollo richieste dal cliente.

\subsection{Stato del progetto}

\begin{figure}[H]
	\centering
	\resizebox{\ifdim\width>\linewidth\linewidth\else\width\fi}{!}{
		\begin{ganttchart}{1}{22}
			\gantttitle{2018}{22} \\
			\gantttitle{2}{6}
			\gantttitle{3}{8}
			\gantttitle{4}{8} \\
			\gantttitlelist{7,...,17}{2} \\
			\foreach \n in {7,...,17}{
				\gantttitle{G}{1}
				\gantttitle{V}{1}	
			} \\
			\ganttbar[name=prg]{Incontro con il cliente}{1}{1} \\
			\ganttlinkedbar{Realizzazione primo prototipo}{2}{4} \\
			\ganttlinkedbar{Prima demo al cliente}{5}{5} \\
			\ganttlinkedbar{Stime orarie per sviluppi futuri}{6}{6} \\
			\ganttlinkedgroup[name=impl]{Implementazione richieste \ldots}{8}{12} \\
			\ganttbar{Apertura tastiera e zoom \ldots}{8}{9} \\
			\ganttbar{Input tramite tastiera nativa \ldots}{10}{10} \\
			\ganttbar{Scroll a due dita}{11}{11} \\
			\ganttbar{Interfaccia di configurazione}{12}{12} \\
			\ganttbar[name=demodef]{Demo al cliente}{13}{13} \\
			\ganttlinkedbar{Implementazione richieste agg\ldots}{14}{20} \\
			\ganttlinkedbar{Consegna}{21}{22}
			\ganttlink{impl}{demodef}
		\end{ganttchart}
	}
	\caption{Il diagramma di Gantt del progetto \textit{Guac Remote}}
	\label{fig:ganttargos}
\end{figure}

% TODO: cambiare quando diventa tesina vera e propria
Questo progetto, al giorno 06/04, non ha ritardi. L'applicazione \'e stata mostrata in demo il giorno 29/03, ed il cliente si ritiene soddisfatto del lavoro fatto fino ad ora.

\subsection{Fasi del progetto}

Le fasi del progetto, di cui le date di inizio e di fine sono indicate nel diagramma della figura \ref{fig:ganttargos}, sono:

\begin{description}
\item[Incontro con il cliente] primo scambio di informazioni per capire gli obiettivi del progetto;
\item[Realizzazione primo prototipo] dimostrazione dell'efficacia del protocollo \textit{guacamole} tramite un prototipo del prodotto;
\item[Prima demo al cliente] demo del prototipo al cliente;
\item[Stime orarie per sviluppi futuri] delineazione della tabella di marcia per gli sviluppi futuri;
\item[Implementazione richieste del cliente] sviluppo delle estensioni al protocollo richieste. Nel dettaglio, esse sono:
\begin{description}
\item[Apertura tastiera e zoom al ``focus'' di un input] alla pressione di un campo di testo, l'applicazione \textit{mobile} deve automaticamente ingrandire l'area selezionata e mostrare una tastiera;
\item[Input tramite tastiera nativa Android o iOS] sostituzione della tastiera su schermo di \textit{guacamole-common-js} con quella nativa;
\item[Scroll a due dita] supporto della gesture di scroll verticale a due dita;
\item[Interfaccia di configurazione] creazione di una piccola finestra di configurazione, in cui inserire IP e porta del PC;
\end{description}
\item[Demo al cliente] dimostrazione degli sviluppi fatti al cliente e eventuale definizione di richieste aggiuntive;
\item[Implementazione delle richieste aggiuntive del cliente]
\item[Consegna] operazioni finali del progetto, tra cui branding e compilazione per rilascio.
\end{description}

\newpage

\pagenumbering{gobble}

\listoffigures
\printbibliography

\end{document}