AMBIENTE DI SVILUPPO PROGETTO MY-WIDGET Essendo un progetto sviluppato usando Angular, sarà necessario:

1. Installare Node.js (facendo attenzione ad includere nell’installazione npm). Consiglio di installarlo utilizzando un package manager per poter gestire al meglio le versioni. Link: https://nodejs.org/en/download/package-manager/
2. Verificare la corretta esecuzione dell’installazione sulla macchina digitando nel prompt dei comandi npm –version (versione usata per lo sviluppo: 8.19.3 per npm, 16.19.0 per quanto riguarda node)
3. Installare l’Angular CLI digitando sul prompt dei comandi: npm install -g @angular/cli@16.2.11 (specifico la versione da me utilizzata direttamente nel comando)
4. Clonare il progetto dalla repository github utilizzando il comando : git clone url-della-repository
5. Aprire il progetto utilizzando un qualunque IDE (il progetto è stato sviluppato su Visual Studio Code)
6. Nel terminale dell’ide, partendo dalla cartella del progetto, utilizzare il comando: npm install Il quale istallerà tutte le librerie necessarie con le relative versioni presenti nel file package.json del progetto.
7. Per connettere il proprio broker mqtt, andare in C:\pathFinoAMyWidget\my-widget\src\app\environment.ts e modificare: export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = { hostname: '4c21cd7519174a2c8176d5d27c2b6bea.s1.eu.hivemq.cloud', port: 8884, protocol: "wss", path: '/mqtt', username: 'loreUni', password: 'ProgettoTesi1!'

}; 8) Per connettere il progetto al proprio DB Firebase, creare un account Firebase e creare un nuovo progetto. La creazione del progetto richiede diversi step:

1. Inserire nome del progetto

2. Abilitare o meno le Google Analytics (nel db usato per lo sviluppo sono abilitate)

3. Scegliere l'account Firebase di default e completare la creazione del progetto

4. Per ottenere le credenziali di accesso al db: selezionare nella sidebar a sinistra "Panoramica del progetto" e dovrebbe comparire una schermata con la scritta "Inizia aggiungendo Firebase alla tua app". Cliccare dunque sull'icona "</>" e creare un nickname per l'applicazione (nel caso di sviluppo, my-widget). NON selezionare la spunta "Configura Firebase Hosting" e premere su registra. A questo punto, verrà generato del codice tra cui una costante firebaseConfig di questo tipo: const firebaseConfig: { apiKey: "XXXXXXXXXXXXXXXXXXXXXX", authDomain: "YYYYYYYYYYYYYYY", projectId: "ZZZZZZZZZZZZZZZZZZ", storageBucket: "JJJJJJJJJJJJJJJJJJJJJJ", messagingSenderId: "BBBBBBBBBBBBBBBBB", appId: "UUUUUUUUUUUUUUUUUUUUUU", measurementId: "ZZZZZZZZZZZZZZZZZZZZZ" }
   Copiare il contenuto delle parentesi graffe all'interno della costante "firebase" presente nel file "src\app\environment.ts"

5. Per utilizzare il proprio DB, è necessario dalla sidebar laterale sinistra selezionare la voce "Creazione" e successivamente "Firestore Database". Cliccare su "crea Database", a questo punto si aprirà un form in cui chiede di selezionare la località (lasciare eur3 (Europe)) e successivamente selezionare come ambiente quello di produzione. Dopo che il DB è stato creato, andare sulla voce "Regole" situata sotto "Cloud FIrestore" e sostituire lo script attuale con il seguente: service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } } Cliccare su Pubblica per pubblicare le nuove regole di lettura e scrittura sul DB.

6. Andare sulla voce "Dati" (situata alla sinistra della voce "Regole" toccata in precedenza) e creare tramite la console una raccolta con ID 'impostazioni' contenente un documento con ID 'IMPOSTAZIONI' e con campi: carosello: boolean (inizializzare a false) views: array (inizializzare vuoto rimuovendo l'oggetto creato di default da Firebase cliccando sul "-") secondi: number (valore a piacimento)

E' necessario inoltre creare una raccolta con ID raccolta 'view' con all'interno un documento con ID "TEST" e con proprietà: nome: string (inizializzare a "TEST") isVisible: boolean (inizializzare true) sfondo: string (vuoto)

9. Creare delle credenziali di autenticazione: entrare nella console del proprio progetto Firebase e aggiungere l'autenticazione. Per farlo, andare su "creazione" nella sidebar laterale sinistra, selezionare authentication. Abilitare come metodo di accesso "Email/password" e successivamente abilitare solo il primo slider "Email/password" senza il secondo "Link via mail". Cliccare poi su "Utenti" in alto sotto "authentication" e cliccare su "Aggiungi utente" per creare le credenziali dell'utente amministratore. Le credenziali potranno da questo momento essere utilizzate per sbloccare i permessi di amministratore.

10. Nella sidebar laterale sinistra selezionare la voce "Creazione" e successivamente "Storage". Cliccare successivamente su "inizia" nella schermata dello storage, avviare i dati nella modalità di produzione e completare la creazione. A creazione ultimata, modificare le regole dello storage cancellando quelle di default e impostando queste regole:

service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if true; } } }

N.B: è NECESSARIO configurare il DB esattamente come descritto per garantire un corretto funzionamento. Rispettare pertanto alla lettera le indicazioni date facendo particolare attenzione a maiuscole e minuscole.

11. Digitare il comando: ng serve per avviare l’applicazione sulla porta 4200.

N.B. per avviare il server su una porta differente digitare il comando: ng serve --port <numero_porta>

12. Aprire il browser e digitare l'indirizzo: http://localhost:4200

INFO SUI MESSAGGI DA POTER INVIARE AL BROKER MQTT:

1. Inviando del testo semplice, esso sarà visualizzato nel widget connesso al topic su cui si scrive
2. Inviando l'indirizzo di un'immagine o di una gif, essa sarà visualizzata all'interno del widget come immagine della card.
3. Inviando un messaggio del tipo "URL http://xxxxxxxx" dove http://xxxxxxxx è un link a un qualunque sito web, o di un qualunque video su youtube, esso sarà visualizzato occupando tutto il widget. Nel pubblicare il messaggio stare attenti agli spazi seguendo esattamente il pattern inviato.