!
Stesso procedimento per creare modal e sidebar
Crea una Web app in 3 minuti con Google Apps Script
Il servizio HTML di Google Apps Script consente di servire pagine web che possono interagire con le funzioni di Apps Script lato server. È particolarmente utile per creare applicazioni Web a sé stanti e che interagiscono con i prodotti della G Suite ma anche per aggiungere interfacce utente personalizzate all'interno dei Google Docs, Fogli e Moduli, mi riferisco a finestre modali o barre laterali. Il servizio permette persino di generare il contenuto del corpo di un'e-mail.
Ti mostro subito come creare una semplice applicazione Web poiché, ??una volta presa dimestichezza con la logica di funzionamento del servizio HTML diventerà automatica la capacità di creare veri e propri applicativi, con grafica accattivante, che possono essere utilizzati da sé stessi o messi a disposizione di altri utilizzatori.
Nell'editor di script dovrà essere presente inevitabilmente il file di script dal quale richiamare il contenuto di un file HTML. Per aggiungere al progetto un file HTML è sufficiente fare click sul simbolo + nella parte sinistra dell'editor e cliccare su HTML. Diamo un nome al file, chiamiamolo index e confermiamo. Verrà aggiunto nella colonna sinistra e il suo contenuto preimpostato è quello di un documento HTML base.
Al suo interno puoi scrivere la maggior parte degli standard HTML, CSS e JavaScript lato client, puoi anche includere quelle che prendono il nome di scriptlet, una funzionalità molto utile che sarà oggetto dei prossimi video e che ho ampiamente descritto nel mio libro "Punta in alto con... Google Apps Script". Per il momento, a scopo informativo, anticipo che queste permettono di inserire codice che viene elaborato sul server prima che la pagina venga inviata all'utente, in modo simile a come funziona PHP.
Tornando all'aspetto pratico del video, per creare una Web app con il servizio HTML, il codice deve includere una funzione doGet(), che sarà la prima funzione ad essere chiamata nel momento in cui l'URL dell'applicazione viene richiamato dal browser, e che indica allo script quale pagina HTML richiamare dal progetto e come servirla.
Lo fa con il metodo createHtmlOutputFromFile che crea un nuovo oggetto HtmlOutput in base al file richiamato nell’editor di script, nel nostro esempio il file index, che a scopo illustrativo gli facciamo contenere un banale codice per stampare a video la scritta "Ciao Mondo!".
Codice.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, World!
</body>
</html>Una volta che questi due elementi sono pronti, ovvero la funzione doGet() che richiama il file HTML di nostro interesse, sarà necessario pubblicare lo script come Applicazione Web.
Come curiosità, effettuato in modo del tutto trasparente, la pagina verrà pubblicata come HTML5, all'interno di una sandbox prevista per proteggere gli utenti dall'invio di HTML o JavaScript dannosi.
Da "Esegui il deployment" selezionare "Nuovo deployment" se è la prima volta che distribuiamo la nostra app (questo perché per le volte successive, come vedremo tra poco, passeremo da "Gestisci il deployment" incrementando il numero di versione, in questo modo l'URL della nostra app sarà mantenuto).
Nella finestra che si apre Selezionare come tipo "Applicazione web", inserire una descrizione a piacimento per la pubblicazione corrente (ad esempio, ciao mondo) e definire come l'applicazione deve essere eseguita, ovvero come se fossi io ad accedere (anche in caso di accesso da parte di altri utenti) in modo che possa eventualmente connettersi agli altri strumenti Google come se fossi io, oppure effettivamente come l'utente che accede in quel momento. Per spiegare velocemente la differenza, se volessi mostrare, agli utenti che accedono, una dashboard con gli account Analytics collegati al mio indirizzo email dovrei scegliere "Esegui come... Me" in modo che l'applicazione utilizzi le autorizzazioni del mio account per collegarsi a Google Analytics e fornire la risposta. Se invece la stessa app venisse pubblicata come l'utente che accede all’applicazione web, ognuno che apre l'URL vedrebbe una dashboard con i dati dei propri account Analytics collegati alla sua stessa email.
L'altra opzione da selezionare è se ad accedere all'app posso essere solo io, chiunque abbia un account Google oppure chiunque anche se non loggato con il proprio account.
Per semplicità lasciamo tutto come è, e clicchiamo su "Esegui il deployment". Una volta che l’operazione si è conclusa verrà fornito l'URL di produzione dell'app, riconoscibile da quello di sviluppo in quanto termina con exec.
Aprendo l'URL ecco che arriva il risultato della nostra prima applicazione Web che, per quanto poco utile a livello funzionale, ha permesso di prendere visione di tutti i passaggi necessari.
L'URL di sviluppo, utile per apportare modifiche e visualizzare il risultato in modo immediato senza bisogno di fare continuamente nuove pubblicazioni, si trova in "Esegui il deployment" →"Verifica il deployment", e termina con dev.
Accedendo a questo URL il risultato è il medesimo, tuttavia apportando modifiche e salvando posso visualizzarne subito il risultato aggiornando la pagina.
Le modifiche pertanto possono essere visualizzate solo da chi ha accesso al link di sviluppo, non dal link di produzione al quale possono avere accesso gli utenti. Se volessi validare queste modifiche e renderle di conseguenza visibili dall'URL di produzione (quello che termina con exec) devo recarmi in "Esegui il deployment" → "Gestisci deployment", cliccare sull'icona di modifica e selezionare una nuova versione. Prima di confermare posso assegnare un nome alla pubblicazione e variare le impostazioni dell'app. A questo punto cliccando su esegui il deployment all’interno della modal l'app sarà aggiornata e ricaricando la pagina dell'app questa mostrerà le modiche apportate.
Nel prossimo video sull'argomento integrerò questa applicazione per mostrarti come dialogare dalla pagina HTML a quella di script, per richiamare funzioni di Google Apps Script che elaborano il dato lato server e restituiscono il risultato in pagina.
ISCRIVITI AL MIO CANALE YOUTUBE PER RIMANERE AGGIORNATO SULL'USCITA DEI MIEI NUOVI VIDEO ;)
Tags
Non ci sono commenti
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
scrivi un commento