Javascript, HTML, CSS e... !
0 commenti

Per sfruttare al meglio gli strumenti dell'interfaccia

Google Apps Script: conoscere il campo di battaglia, l'editor di script

Google Apps Script è una piattaforma di sviluppo basata su cloud per la creazione di applicazioni Web.
Il suo editor di script è accessibile da browser, con esso è possibile creare applicazioni web scalabili che si integrano facilmente con i prodotti della G Suite (Fogli di lavoro, Documenti, Moduli, Presentazioni). Con Google Apps Script è possibile accedere anche ad altri servizi Google, come Google Maps, YouTube, Google Analytics, BigQuery, Google Translator, ecc... nonché sfondare il muro dei prodotti del gigante della Mountain View consentendo alle tue applicazioni di comunicare con il mondo esterno e quindi con API di terze parti, database MySQL, ecc...

Apps Script utilizza un formato basato su JavaScript e, nonostante sia gestito tramite browser, il codice non viene eseguito lato client e non viene eseguito nel browser, il che significa che non c'è alcuna manipolazione del DOM. Il codice di Apps Script viene eseguito sugli stessi server e negli stessi data center che eseguono i servizi Google, come quelli citati poco fa, consentendo tuttavia, a differenza di altre piattaforme come ad esempio Node.js, l'accesso ai dati e ai servizi dei prodotti Google, facilitando il tutto grazie al completamento automatico del codice.

L'utilizzo del Javascript per il collegamento ai vari servizi, in termini di righe di codice da scrivere, è estremamente limitato se si pensa che è necessario focalizzarsi meno su come utilizzare le API e più sull'utilizzo di servizi che semplificano la programmazione avendo l'accesso alle API già integrato. Inoltre, fattore da non trascurare, la gestione dell'autorizzazione OAuth2 in lettura e scrittura è gestita in modo semplice ed automatico.

Google Apps Script mette inoltre a disposizione un servizio HTML con il quale possono essere creati modelli e layout per le applicazioni web facilmente pubblicabili come proprio servizio, tramite le librerie condivisibili, nonché rilasciabili rapidamente sul Chrome Web Store, dove chiunque può trovare, installare e utilizzare la tua applicazione web.

In linea generale esistono tre tipi di script:

- script autonomi (standalone) che si eseguono da soli (script per automatizzazioni, API eseguibili, ...);
componenti aggiuntivi o script associati a documenti quali ad esempio Google Docs o Google Sheets.
- semplici siti Web e gadget (widget) associati a Google Sites.

 

L'editor di script

Google fornisce il proprio Editor di script, in cui è possibile scrivere il codice delle proprie applicazioni in Google Apps Script e di conseguenza poterle eseguire ed effettuarne il debug.

L'Editor di script è accessibile in diversi modi:

- Dalla relativa home dei propri progetti, ovvero https://script.google.com/home, cliccando su '+ Nuovo script', Fig. 1:



accesso all'editor di script di google apps script dalla homepage dei propri progetti

Fig. 1 - Accesso all'editor di script di Google Apps Script dalla homepage dei propri progetti


- Dalla relativa pagina di presentazione su Google, ovvero https://www.google.com/script/start/, cliccando su 'Start Scripting', Fig. 2:



accesso all'editor di script di google apps script dalla relativa pagina di presentazione di google

Fig. 2 - Accesso all'editor di script di Google Apps Script dalla relativa pagina di presentazione di Google


- Da Google Drive, Fig. 3. Nel caso in cui la voce non fosse in elenco basterà aggiungere l'applicazione cliccando su '+ Collega altre applicazioni' e nella finestra che si aprirà cercare i termini 'google apps script' tramite il campo di ricerca per poi cliccare su '+ COLLEGA' in corrispondenza dell'omonima applicazione:



accesso all'editor di script di google apps script da google drive

Fig. 3 - Accesso all'editor di script di Google Apps Script da Google Drive


- Dall'interno dei prodotti della G Suite quali, Fogli Google (Sheets), Documenti Google (Docs), Moduli Google (Form) e Presentazioni Google (Slides), tramite la voce di menu 'Strumenti > Editor di script', Fig. 4 (esempio in uno Spreadsheet):



accesso all'editor di script di google apps script da spreadsheet come script associato

Fig. 4 - Accesso all'editor di script di Google Apps Script da Spreadsheet come script associato


Una volta aperto l'editor di script ci troveremo di fronte ad un'interfaccia che, a partire dall'alto verso il basso, presenta uno spazio dove inserire il nome del progetto, Fig. 5.
Basta cliccare su 'Progetto senza titolo' ed inserire il nome identificativo dello script che vogliamo realizzare, nel caso specifico dell'esempio preso in considerazione ho inserito come nome 'Recuperare i valori di input in un Form in Google Apps Script'.



editor di google apps script - nome del progetto

Fig. 5 - Editor di Google Apps Script - Nome del progetto


Il nome del progetto è un dato obbligatorio, provando infatti ad eseguire uno script senza avergli prima assegnato un nome verrà mostrata da parte dell'editor una modal box con la richiesta di assegnazione del nome al progetto (attenzione che nella finestra in questione è presente di default il valore 'Progetto senza titolo' inteso come stringa di testo e salvando senza personalizzarlo creerà un progetto con quel valore come nome).
Una volta assegnato un nome più sensato al progetto rispetto a quello di default, questo verrà salvato e creato a tutti gli effetti. Ciò significa che, la prima volta che il progetto è stato creato con un nuovo nome, viene creato in modo automatico anche un progetto in Google Cloud Platform con quello stesso nome. Questo progetto predefinito, creato dietro le quinte senza bisogno di alcun intervento dello sviluppatore, ha lo scopo di gestire le autorizzazioni, i servizi avanzati ed altri dettagli (per maggiori informazioni riferirsi alla documentazione ufficiale relativa al Cloud Platform Projects: https://developers.google.com/apps-script/guides/cloud-platform-projects). In molti casi non è necessario preoccuparsi di vedere o modificare questo progetto in Google Cloud Platform a meno che non si eseguano determinate operazioni, tra le più comuni c'è sicuramente l'abilitazione delle API dei servizi avanzati (ad esempio per Google Sheets), ma come spiegato nell'articolo 'Abilitare l'uso delle API dei Servizi Avanzati nei progetti in Google Apps Script' la procedura è semplice e si completa in pochi clic guidati.

A seguire troviamo la barra dei menu, Fig. 6:



editor di google apps script - barra dei menu

Fig. 6 - Editor di Google Apps Script - Barra dei menu


Espandendo la voce di menu 'File', Fig. 7, è possibile, cliccando su 'Nuovo', creare un nuovo progetto Apps Script, inserire un nuovo file di script o un file HTML nel progetto corrente oppure aprire un nuovo documento come da lista proposta (Documento, Foglio di lavoro, Presentazione, Modulo, ...).



editor di google apps script - barra dei menu - file

Fig. 7 - Editor di Google Apps Script - Barra dei menu - File


In questo menu sono presenti, oltre agli intuibili 'Apri...', 'Rinomina...', 'Crea una copia...', 'Salva' e 'Salva tutto', l'opzione 'Vedi la cronologia delle versioni' (Fig. 8) che mostra uno storico del file di progetto che in quel momento si trova in primo piano. Ciascuna riga dello storico viene creata automaticamente ad ogni salvataggio del file e, nel caso ci fosse la necessità di ripristinare la situazione di tale file ad uno dei salvataggi precedenti sarà sufficiente selezionare l'elemento desiderato in cronologia (la data e l'ora aiutano ad identificare mnemonicamente il momento del salvataggio da ripristinare) e premere il tasto 'Ripristina'.
Attenzione, la cronologia ha un limite di record tenuti in memoria per cui salvando troppo frequentemente si limita la possibilità di recuperare versioni retroattive dei file qualora ne fosse necessario.



editor di google apps script - barra dei menu - file - cronologia

Fig. 8 - Editor di Google Apps Script - Barra dei menu - File - Cronologia


Altra opzione del menu 'File' è 'Gestisci versioni...', una versione è un'istantanea del progetto che può essere utilizzata come libreria in altri progetti. Le versioni possono essere create direttamente dalla modal che si apre selezionando l'opzione in questione oppure, ad esempio, distribuendo lo script come applicazione web dal menu 'Pubblica'.
Intuitiva è anche la funzionalità 'Condividi' per dare l'accesso al progetto in modalità di modifica o di sola visualizzazione con altri utenti (la condivisione del progetto è possibile anche tramite l'apposito bottone 'Condividi' presente in alto a destra dell'editor di script subito sotto il nome dell'account dell'utente corrente).

Le 'Proprietà del progetto' contengono informazioni riepilogative del progetto quali il nome, la descrizione, l'id dello script (lo stesso presente nell'URL dello script), l'ultima data e ora di salvataggio, il fuso orario, ecc... (Fig. 9).
Sono presenti inoltre alcune informazioni obsolete come il codice del progetto e deprecate come la chiave di progetto (chiave SDC). Qualora dovesse essere necessario utilizzare un identificativo del progetto è raccomandato riferirsi all'ID Script.



editor di google apps script - barra dei menu - file - proprietà del progetto

Fig. 9 - Editor di Google Apps Script - Barra dei menu - File - Proprietà del progetto


All'interno della schermata delle proprietà del progetto sono presenti altri tab tra i quali gli 'Ambiti' (quando un utente esegue uno script che richiede l'autorizzazione per la prima volta, l'interfaccia utente visualizza una richiesta per avviare il flusso di autorizzazione; durante questo flusso, l'interfaccia informa l'utente di quali permessi ha bisogno. Ad esempio, uno script potrebbe richiedere il permesso di leggere i messaggi e-mail dell'utente o creare eventi nel proprio calendario. Il progetto di script definisce queste autorizzazioni individuali come ambiti OAuth. Un esempio di ambito di autorizzazione OAuth per l'interrogazione di servizi esterni è presente nel codice mostrato di seguito).

Ambito OAuth richiesto dallo script:

https://www.googleapis.com/auth/script.external_request

Le tab 'Proprietà utente' e 'Proprietà script' permettono di inserire manualmente coppie chiave/valore rispettivamente a livello di utente e di script, e di visualizzare e gestire eventuali coppie chiave/valore inserite in modo programmatico tramite le 'Properties Service'.

La voce di menu 'Modifica' contiene, oltre agli intuibili 'Annulla' e 'Ripeti' (per annullare o ripristinare le ultime modifiche effettuate), 'Seleziona tutti' (per selezionare tutto il codice del file in primo piano) e 'Trova e sostituisci', ci sono alcune opzioni dedicate come 'Completamento parola' che, in base ad una parte di testo immesso, inserisce automaticamente il resto della parola in linea con i comandi utilizzabili (metodo, funzione, ...) oppure 'Assistenza contenuti' che mostra le opzioni di autocompletamento.

A parte l'opzione 'Attiva/disattiva commento', che non fa altro che aggiungere o togliere contestualmente i caratteri che definiscono un commento nella riga selezionata, degni di nota sono i trigger: 'Trigger del progetto corrente' e 'Tutti i trigger' (ovvero di tutti i progetti dell'utente). I trigger hanno la funzione di lanciare determinate funzioni del progetto in modo automatico basando l'avvio sul tempo (ad esempio mensilmente, settimanlmente, giornalmente o ad uno specifico orario), oppure in base all'aggiornamento di eventi da calendario Google o, in caso di script associati ad un prodotto della G Suite (come un Foglio di Google, Sheets), alle interazioni di apertura o di modifica del documento, quest'ultimo caso è mostrato nell'immagine seguente, Fig. 10:



trigger installabili per pageview ed eventi avviati su azioni derivanti dal foglio di lavoro relative all'apertura o in caso di modifica

Fig. 10 -Trigger installabili, per pageview ed eventi, avviati su azioni derivanti dal foglio di lavoro relative all'apertura o in caso di modifica


La voce di menu 'Visualizza' contiene, oltre alle opzioni per la visualizzazione a schermo interno o con i controlli compattati, tutta una serie di funzionalità per effettuare il debug ('Trascrizione esecuzione', 'Log', 'Stackdriver Logging', 'Stackdriver Error Reporting' ed 'Esecuzioni') di cui ne ho descritto le modalità principali nell'articolo 'Identificare e risolvere gli errori in Google Apps Script con il debug e gli altri strumenti'.

L'opzione 'Ordina i file in ordine alfabetico' permette di posizionare in modo automatico i file presenti nella colonna sinistra del progetto corrente in base al loro nome. Per rendere più performante l'ordine di tali file, ho sviluppato un'estensione per Google Chrome che esercita la sua funzionalità in tutti i file di progetto di script.google.com, il suo nome è 'Apps Script Sortable List Files' e quello che permette di fare è modificare l'ordine dei files e delle tabs rispettivamente nella colonna laterale e nell'editor di script semplicemente con il mouse tramite il drag & drop.
Un'altra opzione del menu 'Visualizza' è 'Mostra il file Manifest' che, modificato a dovere, permette di avere un maggiore controllo sulle proprietà del progetto (per approfondimenti sull'argomento rimando all'articolo 'Il file Manifest in Google Apps Script: cos'è e come gestirlo').

Le opzioni del menu 'Esegui' permettono di selezionare ed avviare una funzione del progetto corrente per eseguirla normalmente o in modalità debug.
Un'altra opzione della voce in questione è 'Testa come componente aggiuntivo...' che permette di configurare un test dell'applicativo relativo al progetto corrente selezionandone la versione, l'ambito di installazione (Installato per l'utente corrente, Attivato nel documento corrente oppure Installato e attivato) ed un documento nel quale effettuare il test in questione.

La voce di menu 'Pubblica' contiene le opzioni per la distribuzione dell'applicazione relativa al progetto in corso che può essere ditribuita come applicazione web (un esempio di una web app si trova nell'articolo 'Pagine Multiple in una Web App con Google Apps Script'), come API eseguibile (un esempio pratico è presente nell'articolo 'Interrogare una funzione in Google Apps Script da Remoto con le Execution API'), registrato nel Chrome Web Store oppure implementato come componente aggiuntivo web.
E' possibile creare una distribuzione dopo aver configurato il Manifest tramite l'opzione 'Implementa dal Manifest' inoltre con 'Gestisci componenti aggiuntivi Android' è possibile integrare le app di quella piattaforma con i Documenti ed i Fogli di Google.

Il menu 'Risorse' contiene l'opzione 'Librerie...' per poter inserire il codice del progetto di una o più librerie al fine di utilizzarne i relativi metodi messi a disposizione (questa funzionalità agevola senza ombra di dubbio la scrittura di codice in quanto permette di evitare di scrivere una stessa funzione ogni volta che in un progetto ne nasce la necessità, tuttavia l'uso delle librerie è sconsigliato dalle best practice per il miglioramento delle performance).
L'opzione 'Progetto Cloud Platform' mostra a quale progetto dell'omonimo tipo è associato lo script corrente ed eventualmente offre la possibilità di modificarlo, mentre l'opzione 'Servizi avanzati di Google ...' apre una finestra per l'attivazione degli opportuni servizi da abiliatre in base alle relative funzionalità utilizzate nel progetto, questi servizi devono essere abilitati anche nella Console API Google. Una descrizione più dettagliata su questo tema si trova nell'articolo 'Abilitare l'uso delle API dei Servizi Avanzati nei progetti in Google Apps Script', una schermata di esempio è la seguente, Fig. 11:



modal dei servizi avanzati di google in apps script

Fig. 11 - Modal per l'attivazione dei Servizi Avanzati di Google in Apps Script


La voce di menu 'Guide' contiene riferimenti alla documentazione ufficiale ed esercitazioni. Degne di nota sono le opzioni 'Note sulla versione' che portano ad una pagina relativa alle note di rilascio la quale elenca le principali modifiche in ogni versione di Google Apps Script e 'Quota' che porta ad una dashboard dei limiti di quota di utilizzo di connessioni, chiamate URLFetch, ecc... suddivise tra quelle riferite all'edizione gratuita di Google Apps Script e quella Business.

La barra degli strumenti (Fig. 12):



editor di google apps script - barra degli strumenti

Fig. 12 - Editor di Google Apps Script - Barra degli strumenti


Le funzionalità presenti nella barra degli strumenti non sono ne più ne meno un estratto di quelle già presentate nella descrizione della barra dei menu.
Rispetto all'immagine di cui sopra, andando da sinistra verso destra, troviamo le due freccie per annullare o ripristinare le ultime modifiche effettuate, l'icona del rientro (non presente nei menu), se selezionata, fa in modo che ad ogni a capo venga interpretata automaticamente la necessità di inserire un'indentazione del codice. L'icona del dischetto è associata alla classica funzione di salvataggio del file corrente mentre quella dell'orologio apre la schermata dei trigger del progetto corrente.

Il tasto play e quello debug (lo scarabeo) eseguono la funzione selezionata nel combobox immediatamente alla loro destra. Con l'avvio del debug, come descritto nell'articolo 'Identificare e risolvere gli errori in Google Apps Script con il debug e gli altri strumenti', compariranno nella barra degli strumenti altre icone dedicate allo scopo.

Nella barra laterale di sinistra dell'editor, Fig. 13, è presente di default alla creazione di un nuovo progetto un unico file di script chiamato 'Codice.gs', tuttavia è possibile aggiungere più file al progetto che possono essere di script (.gs) o HTML (.html).



editor di google apps script - barra laterale dei file

Fig. 13 - Editor di Google Apps Script - Barra laterale dei file


Cliccando sul piccolo triangolo sulla destra del nome del file, si aprirà un menu contestuale, Fig. 14, che dà la possibilità di rinominare, eliminare o creare una copia del file.



editor di google apps script - barra laterale dei file - menu contestuale

Fig. 14 - Editor di Google Apps Script - Barra laterale dei file - menu contestuale


Infine è la volta di descrivere l'area di lavoro (Fig. 15) con aperto il contenuto del file selezionato in base a quelli presenti.



editor di google apps script - area di lavoro

Fig. 15 - Editor di Google Apps Script - Area di lavoro


Questa è la parte dell'editor dedicata alla scrittura del codice. Ci sono un po' di informazioni a riguardo che può far comodo conoscere in anticipo, anche se con un po' di pratica si deducono facilmente.

I file con estensione .gs sono quelli che contengono il codice Javascript, l'editor interpreta ciò che viene scritto, colorandolo in modo diverso in caso di stringa, variabile, comando, ..., e si comporta contestualmente per fornire informazioni all'utente, ad esempio cliccando a fianco di una parentesi graffa di una funzione o di un ciclo, l'editor di script evidenzierà la parentesi associata ad essa (di apertura o di chiusura) in verde. Un errore comune si ha quando le parentesi non sono abbinate correttamente o c'è una parentesi in più o in meno, in questo caso il colore della parentesi evidenziata sarà rosso ad indicare che c'è un problema da risolvere.

Come nei comuni editor di Javascript è possibile inserire i commenti nel codice, per annotarsi informazioni o per comunicare alcuni dettagli ad altri sviluppatori che metteranno mano allo script, su una riga aggiungendo un doppio slash (//) all'inizio della riga stessa, oppure è possibile commentare una porzione più ampia di codice utilizzando una combinazione di /* e */ tra la riga di inizio e quella di fine del codice che si intende commentare (le righe di codice commentate assumono una colorazione marrone/arancione).

L'indentazione è una pratica molto importante per mantenere il codice leggibile e più facilmente manutenibile, nel caso in cui un file .gs dovesse non essere indentato in modo corretto è possibile selezionare tutto il codice (o la parte di interesse) e premere Shift + Tab, questo farà rientrare automaticamente il codice selezionato.

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

scrivi un commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web