JavaScript, HTML, CSS e... !
1 commento

Script asincroni in sequenza con jQuery in Google Apps Script

Utilizzare jQuery e Promise in Google Apps Script

In un precedente tutorial ho mostrato un codice funzionante di come poter utilizzare le promise in Google Apps Script al fine di eseguire determinate funzioni asincrone nell'ordine desiderato evitando il fenomeno del callback hell. L'articolo in questione è il seguente 'Utilizzare Promise per sincronizzare le funzioni in Google Apps Script', rimando allo stesso la parte teorica dell'operazione promise.

L'obiettivo del codice che seguirà è quello di replicare lo stesso esempio, discusso poco sopra, avvalendosi della libreria jQuery considerando che la stessa documentazione di Apps Script evidenzia l'attenzione posta da Google nel garantire la compatibilità con questa libreria consigliandone l'uso:

"jQuery is a popular JavaScript library that simplifies many common tasks in web development. We take special care to ensure that jQuery works with our Caja sanitization and encourage developers to leverage it in their applications."
Take advantage of jQuery

Passando direttamente all'aspetto pratico, e andando a modificare direttamente il codice presente all'interno del tutorial linkato ad inizio articolo, troviamo che il file .gs è rimasto invariato:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index'); 
}

function recuperaThreadsDaGmail() {
  var threads = GmailApp.getInboxThreads();
  return threads.length;
}

...mentre il file .html, oltre ad includere la libreria jQuery (inserita in fondo al body del codice HTML):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

...vede variare contestualmente la sintassi con quella offerta dalla libreria in oggetto:

<!DOCTYPE html>
<html>
  <head>
     <base target="_top">
  </head>
  <body>
    <button id='button1'>Mostra il numero di Threads</button>
    <div id='text1'></div>
  </body>
  <script>
    function getThreads() {
        var d=$.Deferred();
        google.script.run.withSuccessHandler(
            function(res) {
                d.resolve(res);
            }
        ).recuperaThreadsDaGmail();
        return d.promise();
    }

    button1.addEventListener('click',
        function(event){
            getThreads().then(function(res) {
                $("#text1").text(res.toString());
            });
    });
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</html>

Da notare che non è possibile utilizzare jQuery all'interno dello script che effettua la chiamata lato server in quanto, a differenza delle classiche web app, non esiste un DOM nelle applicazioni in Google Apps Script al quale jQuery può riferirsi.

Il risultato è lo stesso dell'esempio che utilizza Javascript nativo tuttavia in questo caso, avendo incluso il codice di jQuery, sarà possibile sfruttarne le altre potenzialità e le agevolazioni nella scrittura del codice.

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

1 Commento

  1. Thursday, February 23, 2023 alle ore 08:36 Agostinsa


    Tutti su dicono solo Voltare

    Rispondi a questo 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]https://www.appsscript.it[/url] se devi riferirti ad un indirizzo web