Teams è una delle piattaforme che recentemente hanno maggiormente brillato per crescita di utenti. La famosa app di collaborazione di Microsoft offre la possibilità di integrare le già numerose funzionalità interne creando delle app custom per offrire agli utenti della propria organizzazione applicazioni con una logica di business dedicata.
Diversi modi per creare una app Teams
Ci sono diversi modi e diverse tecnologie per creare una app Teams. Il programma di Teams è compatibile con molti ambienti di sviluppo, con cui è possibile creare una soluzione per la piattaforma: dai moderni superset di Javascript come React al più tradizionale Share Point Framework, che permette a chi è già familiare con quell’ambiente di sviluppo di continuare a impiegarlo proficuamente nel nuovo ecosistema di casa Microsoft.
Spesso, però, può capitare che in un’organizzazione esistano già delle app o dei siti web che i propri operatori utilizzano con soddisfazione. Effettuare il porting di queste applicazioni già esistenti sul nuovo ambiente Teams spesso rappresenta un notevole costo e impegno in termini di tempi e risorse.
Per questo motivo, gli ingegneri di Redmond hanno previsto la possibilità di adattare velocemente all’ambiente di Teams anche siti web già esistenti.
Visualizzare un sito web in Teams
Il punto di partenza per integrare una Web app già esistente dentro Teams è l’impiego delle Tab. Le Tab sono uno dei componenti fondamentali dell’ambiente Teams e permettono di visualizzare una Web app già esistente eseguendone il rendering dentro a un tag <iframe>.
Se da una parte il meccanismo dell’<iframe> semplifica il processo di integrazione, dall’altra introduce alcune particolarità di cui bisogna tenere conto. L’<iframe>, infatti, gestisce in modalità leggermente diversa alcuni processi come l’autenticazione da una schermata di login, soprattutto se questa prevede il redirect a un provider di autenticazione particolare. Ci sono tuttavia dei meccanismi basati su finestre pop-up o Active Directory che permettono di affrontare questa particolarità.
Una tab di Teams ha un ambito di visibilità ben definito, per cui prima di includere la Web app dobbiamo decidere se vogliamo renderla disponibile a livello globale, oppure limitarne l’uso dentro a una specifica chat o dentro a un unico team.
Bisogna avere ben chiaro il fatto che la Web app, anche se visualizzata dentro a una Tab, non è ospitata dalla piattaforma di Microsoft, ma fisicamente continua a risiedere sul server originale, e nessuno dei suoi file viene trasferito su Teams.
Per creare una Tab posso utilizzare il tool Teams Yeoman Generator, simile al generatore di app dell’ambiente Node.js. Il tool richiede di rispondere ad alcune domande che permettono di configurare correttamente la Tab e poi prepara il componente per essere caricato dall’app Studio di Teams.
App Studio è una app installabile in Teams che aiuta a configurare le nuove app, anche se si tratta di siti web già esistenti che vengono soltanto visualizzati in una tab. Il sito web viene considerato infatti come una app a tutti gli effetti, e richiede anche che venga compilato un file Manifest, in cui indicare le informazioni necessarie all’integrazione dell’app nell’ambiente di Teams.
Preparare il tenant per ospitare una app Teams
Prima di poter visualizzare il proprio sito web in una Tab di Teams, il tenant di Office365 deve essere configurato per permettere l’esecuzione di app custom. Bisogna effettuare il login al pannello di amministrazione del tenant con un utente che disponga di sufficienti permessi amministrativi, ed abilitare il caricamento di app custom. Per farlo bisogna navigare fino all’opzione Setup Policies del menu Teams app e abilitare nelle configurazioni globali il caricamento delle app esterne. Bisogna prestare attenzione al fatto che l’abilitazione sul tenant non è immediata, ma possono essere richieste fino a 24 ore prima che sul tenant venga concessa l’autorizzazione.
Accorgimenti per l’esperienza utente
Bisogna tenere presente che l’utente potrebbe non essere consapevole del fatto che l’app che sta visualizzando si tratti in realtà di un sito web esterno. Questo potrebbe causare delle aspettative diverse nella sua esperienza, che potrebbero compromettere l’apprezzamento dell’app.
Per esempio, uno dei problemi comuni di un simile setup, è che un sito web presenta dei tempi di caricamento delle pagine che, seppur usuali nella navigazione di un contenuto web, sono però più lunghi dei normali tempi di reazione di una app. L’utente potrebbe perciò trovarsi disorientato da tempi di attesa inaspettati che potrebbero manifestarsi durante la visualizzazione di controlli particolarmente densi di dati. Si potrebbe perciò valutare di adeguare leggermente l’esperienza utente sul sito web, magari aggiungendo degli spinner di caricamento che avvisino l’utente durante i tempi di attesa. Si potrebbe anche pensare di ridisegnare le interazioni più critiche, adeguandole alle aspettative di una interazione tipica della piattaforma Teams.
Un accorgimento apprezzabile è anche quello di valutare la possibilità di adeguare la grafica del sito al contesto di Teams, magari scegliendo un CSS con una palette che permetta al sito di integrarsi visivamente con l’estetica del proprio Teams aziendale.
Come accorgimento finale, ricordarsi che il sito web viene visualizzato dentro a un <iframe>: sarà perciò necessario gestire componenti del sito che potrebbero non supportare l’embedding dentro a questo tag.
