Skip to content

Commit

Permalink
final touch :D
Browse files Browse the repository at this point in the history
  • Loading branch information
igor-lirussi committed Nov 13, 2021
1 parent c154e2e commit 5b8ce00
Show file tree
Hide file tree
Showing 17 changed files with 294 additions and 46 deletions.
Binary file added Images/Forecast3.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Forecast3days.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/ForecastIn.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Login.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Login1.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/PrivateProfile.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/about.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/feedback.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/feedbacks.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/homepage.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
133 changes: 125 additions & 8 deletions References.bib
Original file line number Diff line number Diff line change
@@ -1,13 +1,130 @@

@article{yolov3,
title={YOLOv3: An Incremental Improvement},
author={Redmon, Joseph and Farhadi, Ali},
journal = {arXiv},
url = {https://pjreddie.com/media/files/papers/YOLOv3.pdf},
year={2018},
}

@article{suaiv,
title={Stop using actions in Vuex},
author = {Stop using actions in Vuex},
url = {https://javascript.plainenglish.io/stop-using-actions-in-vuex-a14e23a7b0e6},
year = {2021},
}


@misc{node,
author = {NodeJs},
note = {\url{https://nodejs.org/en/}},
key = {nodeJs},
}


@misc{express,
author = {Express},
note = {\url{https://expressjs.com/}},
key = {express},
}

@misc{mongo,
author = {MongoDb},
note = {\url{https://www.mongodb.com/}},
key = {mongodb},
}


@misc{dock,
author = {Docker},
note = {\url{https://www.docker.com/}},
key = {docker},
}


@misc{vuetify,
author = {Vuetify},
note = {\url{https://vuetifyjs.com/en/}},
key = {vuetify},
}


@misc{json,
author = {Json Web Token},
note = {\url{https://jwt.io/}},
key = {json},
}


@misc{cha,
author = {ChaiJS},
note = {\url{https://www.chaijs.com/}},
key = {chai},
}


@misc{mocha,
author = {MochaJs},
note = {\url{https://mochajs.org/}},
key = {mocha},
}

@misc{sinon,
author = {SinonJs},
note = {\url{https://sinonjs.org/}},
key = {sinon},
}


@misc{socket,
author = {Socket.IO},
note = {\url{https://socket.io/}},
key = {socket},
}


@misc{vuehor,
author = {Vue Horizontal},
note = {\url{https://vue-horizontal.fuxing.dev/}},
key = {vuehorizontal},
}

@misc{vuero,
author = {Vue Router},
note = {\url{https://router.vuejs.org/}},
key = {vuerouter},
}


@misc{vuesimple,
author = {Vue Simple Alert},
note = {\url{https://www.npmjs.com/package/vue-simple-alert}},
key = {vuesimplealert},
}


@misc{mail,
author = {Node Mailer},
note = {\url{https://nodemailer.com/about/}},
key = {nodemailer},
}


@misc{bcript,
author = {Bycript},
note = {\url{https://www.npmjs.com/package/bcrypt}},
key = {bcrypt},
}


@misc{vcookies,
author = {Vue-cookies},
note = {\url{https://www.npmjs.com/package/vue-cookies}},
key = {vcookies},
}


@misc{parcookies,
author = {Cookie-parser},
note = {\url{https://www.npmjs.com/package/cookie-parser}},
key = {pcookies},
}


@misc{vuex,
author = {Vuex},
note = {\url{https://vuex.vuejs.org/}},
key = {vuex},
}
38 changes: 32 additions & 6 deletions Tex/Conclusion.tex
Original file line number Diff line number Diff line change
@@ -1,18 +1,44 @@
% -*- root: ../main.tex -*-

\chapter{Conclusioni}

\section{Commenti Finali}

\subsection{Daniele Tentoni}

Questo progetto mi ha sin da subito motivato moltissimo nel lavorare data la sua natura intrinseca e l'oggetto del sistema da sviluppare. Essendo scout, ho spesso provato un certo astio nei confronti dei differenti providers di previsioni che non si riescono mai a mettere d'accordo e, più ne vengono consultati, più le idee diventano confuse. Con questo progetto ho sperato di creare qualcosa che io possa usare anche in futuro e che possa essere conosciuto anche da altre persone.

L'inizio dello sviluppo, in estate, è andato bene e liscio per poi rallentare drasticamente nel momento in cui sono rincominciate le lezioni. Questo ha fatto calare la mia motivazione. L'uso di tecnologie che io già conoscevo per via del mio lavoro extra universitario e di progetti personali non ha certo aiutato a proseguire a passo spedito.

Penso tuttavia che questo progetto mi abbia aiutato ad avere una migliore visione di cosa voglia dire sviluppare dei sistemi applicativi web al giorno d'oggi, avendo utilizzato tecnologie che vengono tutti i giorni utilizzate da altri milioni di persone al mondo e che sono in costatnte sviluppo.

Il risultato finale del progetto secondo me è buono ma non ottimo. Avrei voluto avere più tempo per poter portare a termine tutte le funzionalità che avevamo avuto in mente, ma con il susseguirsi dello sviluppo, abbiamo notato che avevamo sovrastimato il carico complessivo.

\subsection{Silvia Zandoli}

Questo progetto mi ha dato la possibilità di approfondire le mie conoscenze riguardanti l’utilizzo di NodeJs, Express e MongoDb. Tutte le tecnologie che sono state usate erano per me completamente nuove, ma sono soddisfatta del mio apprendimento. Ho anche compreso come con Vue si riescono a realizzare velocemente e in modo non troppo complesso degli applicativi molto interessanti ed user-friendly.

Un aspetto importante, non tanto riguardante l’ambito dello Sviluppo Web, che ho potuto imparare è l’importanza dell’organizzazione: collaborare in questo team mi ha incentivato ad organizzare il lavoro, e questo mi ha insegnato un modo migliore di lavorare. A inizio progetto eravamo partiti con in mente qualche funzionalità in più. Poi per una questione di tempi, un membro ha avuto qualche difficoltà in più, non sono stati realizzati.
Sono comunque soddisfatta del progetto svolto e lo ritengo un'idea innovativa, magari da approfondire in futuro.

\subsection{Igor Lirussi}

Al termine del percorso di sviluppo del progetto ritengo di aver acquisito una discreta moltitudine di nuove conoscenze. Sono state impiegate e integrate diverse tecnologie e metodologie anche complesse con cui sono state affinate parecchio le mie competenze nell'ambito. Sicuramente c'è ancora spazio per approfondire molti argomenti, ma nel complesso reputo sia servito a formare una base di conoscenza a tutto tondo. Il lavoro di gruppo ha permesso, infatti, di scambiarci nozioni a vicenda e ne sono più che contento, seppur mi rincresce non essere stato presente a volte come avrei voluto. Molte tecnologie usate sono state per me una scoperte \emph{in-itinere}, in quanto completamente nuove. Ritengo comunque il progetto sia stato particolarmente ambizioso e il risultato ottenuto a mio parere è più che soddisfacente. Infine, spero questo lavoro possa rappresentare una buona base di partenza per un eventuale sviluppo futuro.

\section{Sviluppi Futuri}

In futuro, il progetto potrà essere migliorato nelle sue parti lasciando spazio a nuove tecnologie e, auspicabilmente, anche ad una commercializzazione.
Le aggiunte che abbiamo individuato sono sia di natura grafica che funzionale, ma, a causa delle tempistiche ridotte e del carico di lavoro, sono state demandate ad un'implementazione futura. \newline
Eventualmente la parte funzionale si può estendere creando nuove pagine per l'utente finale, con sezioni quali "notizie", "video degli utenti", "allerte meteo". Inoltre nuove funzioni possono sempre essere aggiunte al back-end per migliorare la parte di aggregazione delle varie previsioni con machine learning, ponderamento in base ai feedback o allo storico delle condizioni meteo reali. Può essere implementata una parte amministrativa del sito e integrata in maniera non invasiva della pubblicità. \newline
La parte grafica invece può essere ulteriormente migliorata con animazioni e elementi accattivanti, eventualmente che rispecchino le attuali condizioni meteo. Inoltre mappe interattive possono aiutare l'utente ad avere un'idea più chiara della situazione geografica. Eventualmente anche temi personalizzati possono essere sviluppati per rispecchiare i gusti degli utilizzatori. \newline
Negli sviluppi futuri includiamo anche un interfacciamento con i social maggiormente diffusi, oramai essenziali allo sviluppo di un business. In questo modo si potrebbe automatizzare la creazione di post, facilitare l'interazione tra gli utenti, lo sviluppo di una community e l'esposizione della piattaforma. \newline
Inoltre, come possibili spin-off sono state individuate delle aree tematiche spesso ignorate in cui le previsioni sono necessarie, ad esempio previsioni per lo sport, quali venti per i praticanti di parapendio o correnti marine per i surfisti. Anche qui è altamente necessario l'utilizzo di device IoT. \newline
A riguardo, in futuro si potrebbe pensare ad una commercializzazione di un device integrato "ready to use" per delle previsioni più personali. \newline
Le aggiunte che abbiamo individuato sono sia di natura grafica che funzionale, ma, a causa delle tempistiche ridotte e del carico di lavoro, sono state demandate ad un'implementazione futura.

Eventualmente la parte funzionale si può estendere creando nuove pagine per l'utente finale, con sezioni quali "notizie", "video degli utenti", "allerte meteo". Inoltre nuove funzioni possono sempre essere aggiunte al backend per migliorare la parte di aggregazione delle varie previsioni con machine learning, ponderamento in base ai feedback o allo storico delle condizioni meteo reali. Può essere implementata una parte amministrativa del sito e integrata in maniera non invasiva della pubblicità.

La parte grafica invece può essere ulteriormente migliorata con animazioni e elementi accattivanti, eventualmente che rispecchino le attuali condizioni meteo. Inoltre mappe interattive possono aiutare l'utente ad avere un'idea più chiara della situazione geografica. Eventualmente anche temi personalizzati possono essere sviluppati per rispecchiare i gusti degli utilizzatori.

Negli sviluppi futuri includiamo anche un interfacciamento con i social maggiormente diffusi, oramai essenziali allo sviluppo di un business. In questo modo si potrebbe automatizzare la creazione di post, facilitare l'interazione tra gli utenti, lo sviluppo di una community e l'esposizione della piattaforma.

Inoltre, come possibili spin-off sono state individuate delle aree tematiche spesso ignorate in cui le previsioni sono necessarie, ad esempio previsioni per lo sport, quali venti per i praticanti di parapendio o correnti marine per i surfisti. Anche qui è altamente necessario l'utilizzo di device IoT.

A riguardo, in futuro si potrebbe pensare ad una commercializzazione di un device integrato "ready to use" per delle previsioni più personali.

In conclusione in futuro il progetto offre numerose opportunità di ampliamento, con interessanti prospettive sia dal lato tecnologico che dal lato business.

2 changes: 1 addition & 1 deletion Tex/DetailDesign.tex
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
% -*- root: ../main.tex -*-
\chapter{Design di Dettaglio}
In questo capitolo verrà spiegato come si è giunti a realizzare l’applicativo,
confrontando poi i mockup con le effettive interfacce utente, descrivendone i componenti e infine mostrando lo schema della base di dati implementata.
confrontando poi i \href{https://github.com/Weather-Vortex/WeatherVortex-Report/raw/main/MockUps/WeatherVortex-Mockup.pdf}{mockup} con le effettive interfacce utente, descrivendone i componenti e infine mostrando lo schema della base di dati implementata.

Come tutti i programmi, il progetto è costituito da frontend e backend.
Questi denotano rispettivamente la parte visibile all'utente di un programma e con cui egli può interagire —tipicamente un'interfaccia utente— e la parte che permette l'effettivo funzionamento di queste interazioni. \newline
Expand Down
82 changes: 72 additions & 10 deletions Tex/Implementation.tex
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@

\chapter{Implementazione}
\section{Server}
\textit{Commento: questo secondo me è da fare insieme, ognuno può aggiungere qualcosa della propria parte. Magari scrive uno e l'altro se vuol dire qualcosa anche della sua parte la aggiunge.}

Per la parte backend ci si è avvalsi della tecnologia Node.js, Express e MongoDb per il database. Per l'invio delle email è stato utilizzato un modulo di Node.js chiamato Nodemailer.


Expand Down Expand Up @@ -163,13 +161,8 @@ \subsubsection{Dati sensibili}
\end{lstlisting}

\section{Client}
\textit{Commento:anche questo da completare come nel server, ci ho messo qualche spunto}\\
Per lo sviluppo del Client è stato usato Vuetify, un framework di componenti di Material Design per Vue. js che consente agli sviluppatori di creare incredibili applicazioni in modo rapido ed efficiente.
Si riportano ora alcuni aspetti implementativi del server che si ritiene oppurtuno evidenziare:
\subsection{Socket}
TODO

\subsection{Store}
Per gestire lo stato dell'applicazione, abbiamo avuto la necessità di sfruttare il framework Vuex. Esso fornisce un'interfaccia unica per tutta l'applicazione per interrrogare lo stato e modificarlo. Questo permette di avere un'unica fonte di verità dei dati e ne preserva maggiormente l'integrità.

Graficamente potremo delinearne così la struttura:
Expand Down Expand Up @@ -211,6 +204,75 @@ \section{Centralina}

\section{Prodotto Finale}
\label{prodottofinale}
Il prodotto finale ha subito delle evoluzioni rispetto al mockup ma segue le linee
guida imposte.
TODO: Screen di esempio dell'applicazione
Il prodotto finale ha subito delle evoluzioni rispetto al \href{https://github.com/Weather-Vortex/WeatherVortex-Report/raw/main/MockUps/WeatherVortex-Mockup.pdf}{mockup} ma segue comunque le linee
guida imposte. Nonostante la resa grafica sia stata rivoluzionata, la user experience e i meccanismi di navigazione del sito sono rimasti gli stessi. Il cambiamento più degno di nota è stato lo spostare le voci del menù dalla barra in alto all'apposito scomparto a sinistra. Qui di seguito sono riportati gli screenshot delle schermate più importanti.

\begin{figure}[H]
\caption{Pagina Home finale}
\label{fig:imHome}
\centering
\includegraphics[width=1\textwidth]{Images/homepage.PNG}
\end{figure}
La home del sito è la pagina visivamente più importante, in quanto sarà la prima che l'utente visualizza e quella che vedrà più spesso. Per facilitare l'esperienza, il primo box disponibile è quello delle previsioni. Questa scelta è stata fatta soprattutto per incentivare i nuovi utenti a provare le funzionalità del sito immediatamente, senza che debbano sforzarsi a cercarle. Oltre all'immediatezza intuitiva la scelta aiuta a velocizzare le operazioni per i visitatori assidui del sito, che vogliono raggiungere il risultato desiderato con il minore numero di click possibili.

Sotto all'elemento per le previsioni sono disposti due pulsanti di Login e Registrazione. Questo funge da incentivo a creare un account o a effettuarvici l'accesso. Qualora l'utente effettui il login e ritorni sulla home, i pulsanti non saranno più visualizzati.

\begin{figure}[H]
\caption{Pagina Login finale}
\label{fig:imLogin}
\centering
\includegraphics[width=1\textwidth]{Images/Login1.PNG}
\end{figure}
La schermata di login ha una resa molto funzionale e chiara. Questa scelta ha lo scopo di rendere semplice e intuitiva l'operazione chiave di collegarsi al proprio account, senza che l'utente possa cliccare altrove e non portarla a termine.

\begin{figure}[H]
\caption{Pagina Profilo Privato finale}
\label{fig:PrivProf}
\centering
\includegraphics[width=1\textwidth]{Images/PrivateProfile.PNG}
\end{figure}
Il profilo privato permette di gestire i propri dati. Un design tabulare è stato scelto per rendere chiare le varie operazioni possibili di modifica e cancellazione. Tramite le due tabelle l'utente può visionare immediatamente i feedback rilasciati e quali centraline siano collegate al suo profilo.

\begin{figure}[H]
\caption{Pagina Previsioni finale}
\label{fig:imForecast}
\centering
\includegraphics[width=1\textwidth]{Images/ForecastIn.PNG}
\end{figure}
La pagina delle previsioni permette di selezionare una posizione e scegliere tra la previsione corrente e quella futura fino a 3 giorni. Nella barra di ricerca è possibile scrivere il nome di una località o passare direttamente le coordinate. Qualora si volesse avere le previsioni nella posizione corrente è possibile chiedere la geolocalizzazione.

La pagina delle previsioni attuali permette di comparare facilmente le differenti previsioni dei provider. In alto è disponibile sempre la barra di ricerca geografica per cambiare località.
Un'ulteriore barra di ricerca fornisce la possibilità di ricercare uno specifico provider o centralina digitando il nome o parte di esso.

La card centrale fornisce i dati aggregati. La stima viene fatta prendendo la media dei valori e la previsione con frequenza maggiore.

\begin{figure}[H]
\caption{Pagina Previsioni attuali finale}
\label{fig:imForecast1}
\centering
\includegraphics[width=1\textwidth]{Images/Forecast3.PNG}
\end{figure}

\begin{figure}[H]
\caption{Pagina Previsioni per tre giorni finale}
\label{fig:imForecast2}
\centering
\includegraphics[width=1\textwidth]{Images/Forecast3days.PNG}
\end{figure}
La pagina con le previsioni future segue lo stesso schema della pagina delle previsioni attuali. La scelta è stata presa per facilitare l'utente per permettergli di decidere di scegliere la finestra temporale di cui sapere le previsioni. Inoltre, sono presenti dei pulsanti per poter selezionare le 3 giornate successive e uno slider per poter decidere anche l'orario.

\begin{figure}[H]
\caption{Pagina Feedback finale}
\label{fig:imFeedbacks}
\centering
\includegraphics[width=1\textwidth]{Images/feedback.PNG}
\end{figure}
La pagina dei feedback raccoglie tutte le recensioni lasciate dagli utenti divise per provider. Anche qui è possibile ricercarne uno con l'apposita barra. Cliccando sull'icona di un utente si viene indirizzati al suo profilo pubblico. Qualora si sia autenticati
è possibile lasciare una recensione direttamente dal pulsante sottostante.

\begin{figure}[H]
\caption{Pagina About finale}
\label{fig:imAbout}
\centering
\includegraphics[width=1\textwidth]{Images/about.PNG}
\end{figure}
Loading

0 comments on commit 5b8ce00

Please sign in to comment.