370 lines
17 KiB
TeX
370 lines
17 KiB
TeX
\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}
|