Node.js

Originariamente Node.js quindi era stato creato con lo scopo di gestire l’ambiente di back- end delle applicazioni.

Con il passare del tempo gli sviluppatori hanno riconosciuto il suo potenziale ed hanno iniziato ad usarlo per creare degli strumenti che possano aiutarli nell’automazione della ge- stione locale dei pacchetti. Per poter condividere, scaricare e installare tutti questi pacchetti, è nato npm.

4.7.1.2 package.json

Per poter utilizzare npm è necessario scaricare e installare Node.js. Una volta che l’inter- faccia da linea di comando è funzionante, è sufficiente digitare il comandonpm init il quale avvia una guida interattiva per la creazione del file package.json.

Questo file descrive il progetto e fa da file di configurazione.

In esso vengono definite le dipendenze/librerie che necessita il progetto per poter funzionare correttamente. Esso permette di definire degli script che facilitano l’esecuzione di comandi come building, testing, ecc. :

Figura 4.6: Esempio di package.json

Una volta creato e definito il package.json, per scaricare e installare le dipendenze è suffi- ciente eseguire il comandonpm install.

4.7.2

Webpack

Visto il potenziale di crescita di questa piattaforma e di conseguenza l’elevato numero di moduli da essa usati, è stato deciso di introdurre le funzionalità offerte da Wepback. Webpack è unmodule bundler, quali sono le funzionalità che fornisce?

Figura 4.7: Processo di boundling di webpack

Con l’avvento di Framework web come Vue.js, React.js, ecc., la popolarità di webpack è cresciuta. Il motivo di questa crescita è dovuto al fatto che tali framework comportano la creazione di molti moduli con una grande quantità di file javascript e css.

Per indicare a webpack qual’è il percorso in cui deve cercare le entries e qual’è il percorso in cui deve salvare l’output, è possibile definire un file di configurazione (solitamente chimato webpack.config.js):

Figura 4.8: Esempio di file di configurazione per webpack

Per impacchettare i moduli poi è sufficiente eseguire il seguente comando:

4.7.3

Vue.js

Vue.js è unprogressive framework12nato per sviluppare interfacce utente e SPAs13(Single- Page Applications). A differenza di altri framework monolitici14, Vue è pensato per essere adottato in maniera incrementale: la libreria principale alla base di questo framework si foca- lizza esclusivamente sul livello di view ed è facilmente integrabile con altre librerie o progetti già esistenti. ([23])

Il committente del progetto ha imposto quale requisito quello di utilizzare Vue.js poiché esso viene già utilizzato dai Team di sviluppo dell’istituto. In passato inoltre era già stato imple- mentato un prototipo della piattaforma realizzato completamente con questo framework. Vue.js è stato pensato per essere integrato con una grande semplicità in progetti esistenti. Questo è dovuto in parte anche grazie all’ottima curva di apprendimento, poiché l’utilizzo di Vue richiede conoscenze di base dei linguaggi HTML, CSS e Javascript.

Inoltre, come visto nella sezione 2.2, lo scopo della piattaforma è quello di estrarre gradual- mente tutti gli elementi di interfaccia dal back-end e di effettuare un refactoring basato sulla programmazione orientata ai componenti fino ad ottenere una netta separazione tra back- end e front-end.

Vue.js fornisce dei meccanismi che facilitano l’implementazione di componenti le cui funzio- nalità sono efficacemente isolabili e testabili. Questo permette di diminuire l’accoppiamento complessivo del codice, favorendo la riusabilità dei componenti grafici e diminuendo la pro- babilità di introdurre dei bug.

4.7.3.1 Vuetify e bootstrap-vue

Vuetify è un framework front-end realizzato appositamente per Vue.js, esso fornisce tutta una serie di componenti material design come bottoni, tabelle, input, ecc. Material Design è un linguaggio visuale creato da Google che denisce tutta una serie di principi per il design di interfacce con effetti e transizioni di profondità quali illuminazione e ombre. Si è deciso di utilizzare questo framework poichè fornisce un sistema di layout molto intuitivo che facilita il posizionamento dei componenti e favorisce la compatibilità con i dispositivi mobile.

I componenti realizzati da questo framework garantiscono grande flessibilità e possono es- sere modificati a piacere in base al contesto in cui li si usa. I componenti di Vuetify sono implementati rispettando i vincoli del Material Design.

Material Design è un linguaggio visuale creato da Google che definisce tutta una serie di principi per il design di interfacce con effetti e transizioni di profondità quali illiminazione e ombre. ([24])

Per non stravolgere il design e soprattutto per semplificare il processo di refactoring del- la piattaforma, alcuni degli elementi dell’interfaccia esistente verranno estratti e riprodotti con la libreria bootstrap-vue. Essa supporta gli stessi componenti di Bootstrap 4 e lo stesso sistema di layout. Inoltre integra tutte le funzionalità delle direttive Vue, questo permette di sfruttare tutti i vantaggi del suo eco-sistema.

I componenti di bootstrap-vue sono stati implementati per essere reattivi e forniscono tutta una serie di effetti grafici molto gradevoli che possono essere utilizzati per modernizzare la piattaforma e fornire un’esperienza utente più accattivante e interattiva.

4.7.4

Highcharts

Vista l’esigenza dell’istituto ISIN di estendere la piattaforma attraverso componenti grafici di carattere analitico, assieme al relatore Roberto Guidi, è stato deciso di integrare la libreria Highcharts.

Highcharts è una libreria scritta in Javascript la cui prima versione risale al 2009. Il suo scopo è quello di offrire un metodo semplice per arricchire le applicazioni web con grafici interattivi. Essa fornisce una grande varietà di diagrammi, curve, spline, grafici a torta, scatter plot, box plot, ecc., per ogni esigenza e complessità dei dati.

Npm espone un pacchetto che facilita l’utilizzo di Highcharts in applicazioni basate su Vue. Questo pacchetto è chiamato highcharts-vue, esso crea un’istanza di Highcharts utilizzabile sotto forma di elemento html in un qualsiasi componente Vue. Questo elemento html ha una prop chiamata options che aggetta un oggetto; all’interno di questo oggetto è possibile specificare molteplici opzioni che definiscono l’aspetto del grafico che si vuole utilizzare. ([25])

Capitolo 5

Il seguente capitolo illustra le funzionalità che sono state realizzate nel corso di questa tesi di Bachelor. Le varie sezioni cercano di descrivere quanto fatto e mettono a confronto le vecchie funzionalità con quelle nuove, in particolare per queste ultime vengono evidenziati i vantaggi che hanno arricchito la piattaforma. L’accento viene posto sull’impatto dei benefici che ha prodotto questo lavoro.

5.1

Configurazione CI/CD

La configurazione della pipeline di CI/CD sul server TeamCity è composta da sette step visibili in Figura 5.1.

Figura 5.1: Pipeline di CI/CD del progetto ISIN Planner

• Il processo di build inizia installando le dipendenze necessarie della parte di front-end.

• Il build agent esegue un passo di build che consiste nell’impacchettare tutti i moduli attraverso webpack al fine di ottenere un modulo unico.

• Viene eseguito il testing della parte di front-end.

• Build del back-end.

• Testing del back-end. Una volta completato questo passaggio si è sicuri che l’appli- cazione è stata testata e che non si sono presentati degli errori. Si passa quindi al

5.2

Nuove funzionalità