3.2 Requisiti e installazione

3.2.1 Requisiti

Per poter sviluppare sul proprio PC il web-app del sistema Stalker sono necessari i software e gli strumenti indicati in questa pagina. I software da installare saranno divisi in base al loro scopo.

Per scaricare il codice sorgente del web-app, è sufficiente andare nella pagina di GitHub che lo ospita, che si trova qui, cliccare su Clone or download e successivamente premere su Download ZIP.

Un'alternativa più efficace a questo procedimento è scaricare il progetto tramite Git. Se non si dispone di Git è possibile scaricarlo seguendo quanto indicato in Source Code Management. Per scaricare il progetto in questo modo, invocare il seguente comando tramite un terminale o prompt dei comandi nel sistema in uso:

git clone https://github.com/qb-team/Stalker-Admin.git

Di seguito vengono elencati i requisiti minimi per lo sviluppo e la manutenzione della web-app.

3.2.2 Prerequisiti hardware e software

Le tecnologie utilizzate per sviluppare l'applicazione web richiedono poche risorse, si consiglia comunque di soddisfare i seguenti requisiti minimi:

Info

• Sistema operativo
  • Windows 10 (64-bit);
  • MacOS 15.04 Catalina;
  • Ubuntu 18.04 LTS.
• Memoria RAM
  • 8GB.

Attention

È necessario avere una connessione Internet attiva.

3.2.3 Linguaggi utilizzati

Di seguito vengono illustrate quali linguaggi vengo utilizzati e come installarli.

3.2.3.1 TypeScript

Info

Per maggiori informazioni o per consultare la documentazione clicca qui.

Per installare Typescript sia per Windows, MacOS e Ubuntu si utilizza il seguente comando:

npm install -g typescript

Attention

È necessario aver prima installato npm.

3.2.4 Tecnologie utilizzate

Di seguito vengono illustrate quali tecnologie vengo utilizzate e come installarle.

3.2.4.1 Node.js

Runtime di JavaScript open source multipiattaforma orientato agli eventi per l'esecuzione di codice JavaScript, viene utilizzato per avviare l'applicazione in locale.

L'installazione di Node.js su Windows e MacOS si può fare attraverso degli installer scaricabili presso il sito dello strumento, disponibile qui.

Su sistemi Ubuntu, e al solito anche per distribuzioni derivate e distribuzioni derivate da Debian (con piccole differenze), si può installare con i seguenti comandi invocati da terminale:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

3.2.4.2 npm

È un gestore di pacchetti per il linguaggio di programmazione JavaScript. È il gestore di pacchetti predefinito per l'ambiente di runtime JavaScript Node.js. Perciò viene utilizzato per gestire le dipendenze di pacchetti che ha l'applicazione web.

Verificare che npm è già stato installato precede installato con il seguente comando:

npm -v

Se non fosse già installato, eseguire il seguente comando per farlo:

npm install npm@latest -g

3.2.4.3 Angular 2+

Per sviluppare l'applicazione web è stato utilizzato il framework Angular 2+.

Info

Per maggiori informazione consultare la documentazione di Angular 2+ qui.

Ora che è stato installato Node.js e npm è possibile installare Angular 2+ attraverso il comando:

npm install @angular/cli

3.2.4.4 Bootstrap

È una raccolta di strumenti liberi per la creazione di siti e applicazioni per il Web.

Info

Per maggiori informazione consultare la documentazione di Bootstrap qui.

Per installare Bootstrap occorre utilizzare il comando:

npm install bootstrap

Info

Viene utilizzato JSON come formato per lo scambio di dati tra web-app e backend.

3.2.4.5 Firebase

Il servizio Firebase viene utilizzato per gestire l'autenticazione dell'applicazione web.

Per poterlo configurare innanzitutto bisogna creare un progetto in Firebase al seguente link.

Si verrà indirizzati nella pagina mostrata della immagine qui sopra. Per continua si clicchi sul bottone Crea un progetto, si aprirà un pagina dove verrà richiesto di inserire il nome del progetto, che si vuole creare, e di accettare alcune condizioni d'uso.

Una volta concluso la creazione del progetto ci si troverà nella seguente schermata

Per continuare, occorre registrate l'applicazione Stalker-Admin al servizio Firebase, per farlo si clicchi sul bottone cerchiato di rosso nell'immagine precedente.

Si aprirà una nuova pagina dove chiederà di inserire un nickname. Successivamente verrà fornita le chiave dell'SDK di Firebase da copiare all'interno del applicazione web.

Copiare dunque l'SDK all'interno del file environment.ts come mostrato nella seguente immagine:

3.2.4.6 Cloudinary

Per permettere il salvataggio dell'immagine del logo di ogni organizzazione viene utilizzato Cloudinary, un cloud storage che offre il servizio di archiviazione di immagini nel proprio cloud e ritornare un link per accedere all'immagine, questo link successivamente sarà salvato nel database di Stalker.

Per poterlo configurare innanzitutto bisogna creare un account su Cloudinary.

Dopo di che, ci si troverà sulla dashboard di Cloudinary, come viene mostrato nella immagine qui sotto.

Deve venire il salvato il valore del Cloud name, che si trova dove c'è la linea rossa nell'immagine sopra (nell'immagine è nascosto per ragioni di sicurezza), che serve alla web-app per accedere a Cloudinary.

Successivamente si clicchi sulla rotellina cerchiata in rosso come mostra l'immagine qui sotto.

Dopo di che andate si clicchi sulla scritta Upload come mostrato nell'immagine sotto e scorrete verso il basso fino a quando si trova la sottosezione Upload presets.

Una volta arrivati nella sottosezione Upload presets va preso il nome di un upload preset, come mostrato nelle immagine qui sotto, che serve alla web-app per accedere a Cloudinary.

Attention

Va preso un upload preset che abbia come valore del campo mode Unsigned e non Signed.

Infine, va aperta la cartella che contiene i file della web-app, aperto il file config.ts e inseriti i valori del Cloud name e del Upload preset precedentemente salvati.

3.2.5 Reazione e configurazione dell'ambiente di sviluppo

Di seguito viene illustrato come creare e configurare l'ambiente di sviluppo in Angular.

Una volta installate tutte le tecnologie citate precedentemente, si apra il workspace del progetto precedentemente scaricato, si esegua il comando:

cd Stalker-Admin

Tale comando porterà all'interno della cartella del progetto, dopo di che per avviare un server locale dove poter vedere ciò che si è sviluppato, sarà necessario utilizzare il seguente comando:

ng serve 

Scrivere poi nella barra di navigazione del proprio browser http://localhost:4200.

3.2.6 Test

Gli unit test sono stati codificati servendosi di Jasmine. Per installare Jasmine, sempre tramite npm, basterà lanciare il seguente comando:

npm install --save-dev jasmine

Per eseguire i test si usa invece il comando:

ng test

volendo si può usare l'opzione --code-coverage per visualizzare statistiche in merito alla copertura del codice.
L'esecuzione del comando precedente avvia Karma che aprirà una finestra del browser per visualizzare l'esito dei test. Karma aprirà il browser definito nel file karma.conf.js.

3.2.7 Source code management

Per poter effettuare il versionamento del codice sorgente è richiesto di utilizzare Git.
Per poterlo installare è necessario recarsi a questa pagina.
Non è strettamente necessario, ma è consigliato per integrare le proprie modifiche nel repository.