Google Script & Kodular Read, Write, Update, Delete

gennaio 26, 2021

Google Script & Kodular Read, Write, Update, Delete

Benvenuti, Vi avviso che non sono un fenomeno a scrivere guide e che tutto è partito per gioco ma cercherò di essere quanto più chiaro possibile.

In questa guida vedremo come inviare dati ad un foglio Google e successivamente modificarli e cancellarli, attraverso Kodular con l’uso di Google Apps Script.

In Allegato troverete il foglio utilizzato per il test con l’aia di prova

In questa guida utilizzeremo

Un foglio con una tabella classica con 4 voci ID, Nome, Cognome, Numero
Google Script naturalmente
Come piattaforma utilizzeremo Kodular ma i componenti utilizzati sono gli stessi anche per App Inventor

Lets go..

Preparazione su Google Sheet

Apriamo Google Drive, e creiamo un nuovo foglio con 4, colonne nel nostro esempio,

ID, Nome, Cognome, Numero

Rinominiamo in nostro foglio e il nostro documento in “Rubrica” (quella che andremo a fare è proprio una rubrica.

A questo punto se non avete mai utilizzato Google script dovete installare il componente.

Per installare Google Apps Script sul nostro Google Drive, cliccate su Nuovo, Altro, Collega altre applicazioni, cerca Google App Script e infine installa.

Una volta terminata l'installazione o nel caso in cui aveste già utilizzato Google App Script, cliccate direttamente dal vostro foglio su Strumenti, Editor di script

“ da qualche giorno hanno aggiornato l’editor ma noi utilizzeremo per questioni di praticità il vecchio, quindi in alto a destra cliccare su Utilizza L’editor precedente, chiudete il questionario e poi ignora.”

Ci troviamo ora nella schermata di compilazione di Google Script

Inserite in alto a sinistra il nome del progetto e iniziamo a compilare il nostro script.

All’interno dello script inseriremo tutti i comandi che ci serviranno per leggere, inserire, modificare e cancellare la nostra rubrica.

Partiamo con lettura e scrittura

Incollate il seguente script così come l’ho scritto io inserendo

function doGet(e) {
return ManageSheet(e);}

function doPost(e) {
return ManageSheet(e);}

function ManageSheet(e) {

//Lettura Tabella

  if ( e.parameter.func == "ReadAll") {
    var ss = SpreadsheetApp.getActive();
    var sh = ss.getSheets()[0];
    var rg = sh.getDataRange().getValues();
    var outString = '';
      for(var row=0 ; row<rg.length ; ++row){
        outString += rg[row].join(',') + '\n';
      }
    return ContentService.createTextOutput(outString).setMimeType(ContentService.MimeType.TEXT);
  }

//Questo Appena scritto serve per la lettura di tutta la tabella e non di una singola Riga

         //Creazione di un nuovo record
  else if (e.parameter.func == "Create") {
    var ss = SpreadsheetApp.getActive();
    var sh = ss.getSheets()[0];
    var data = [ e.parameter.id, e.parameter.nome, e.parameter.cognome, e.parameter.numero];
    sh.appendRow(data);
    return ContentService.createTextOutput ("Success");
  }
} //questa parentesi verra aliminata nella parte 2

La procedura seguente verrà fatta solo la prima volta però prestate molta attenzione a tutti i passaggi ricordandoci di modificare il valore Project version con “Nuovo” ogni volta che si fa un aggiornamento allo script.

Aggiornamento 2023: Con l'aggiornamento dell'interfaccia di google script la procedura è stata un pò modificata ed è la seguente:

Salvate e cliccate prima su “Esegui Deployment” in altro a destra e poi su “Nuovo Deployment”.

Ora in alto a sinistra cliccate sulla rotellina di fianco a "Seleziona Tipo" e successivamente cliccate su "Applicazione Web" Spostatevi sulla destra e alla voce "Esegui Come" selezionate “Me: Vostro indirizzo” mentre sotto su utenti autorizzati ad accedere Selezionate “Chiunque” e infine "Esegui Deployment"

successivamente su “rivedi autorizzazioni”

Selezionate l’account Google Drive utilizzato per creare Foglio e lo Script

Clicca su avanzate, successivamente su apri "nome progetto",nel mio caso apri “test google script” e infine consenti

se tutto è andato per il verso giusto dovrebbe comparire una finestra con il nostro “Script Url”

Seleziona e copia questo link che servirà su Kodular o App inventor.

Esempio Mio Link:

https://script.google.com/macros/s/AKfycbxs4J5GBQiGpIZoi7nuvljorjkme5GQrkKtsptsH65KcSKKPFTi/exec

A questo punto abbiamo terminato la prima parte che riguarda Google Apps Script e il Foglio Excel.

Per testare se il nostro script inserisce i valori nella tabella ci basta aprire una nuova finestra nel nostro browser e incollare l’url dello script con i dati da inserire

il link che andremo a inserire questa volta ha un formato diverso dalla precedente guida, infatti è suddiviso in piu parti.

Il link dello script
L’id del nostro foglio excel
Il nome del foglio
La funzione da richiamare
Le varie colonne Colonna1

Colonna2

Colonna3

Colonna4

https://script.google.com/macros/s/AKfycbxs4J5GBQiGpIZoi7nuvljorjkme5GQrkKtsptsH65KcSKKPFTi/exec?ID=1-nWEJGW0FUqJKmPr0ZE06grGdiO5_Ggsc5WLZx2TYE4&SH=Rubrica&func=Create&id=1&nome=test1&cognome=test1A&numero=test1B

spero che i colori vi aiutino a capire la sintassi del link

Dopo aver dato Invio il risultato sarà il seguente in alto a sinistra

Se ottenete questo risultato lo script funziona perfettamente, se diverso non proseguite perché tanto non funzionerà (sotto lascio il mio account Telegram per maggiori informazioni)

Una volta inviata questa stringa e ottenuto il risultato del punto precedente nella nostra tabella compariranno i dati inseriti

A questo punto se tutto è andato per il verso giusto possiamo passare alla nostra piattaforma preferita e integrare quanto appena fatto.

Inserimento in Kodular

Diciamo che il tutto è molto minimale, io ho utilizzato Kodular ma anche con App Inventor o altre piattaforme simili i componenti sono più o meno gli stessi.

Nel Design ho inserito 1 Label, 4 textbox, 3 Button, 1 ListView, il componente web (che utilizzeremo per inviare i dati e un notifier perchè un notifier ci vuole sempre

I blocchi con il modulo web sono configurati in questo modo.

la prima parte comprende tutti i link e le variabili che ci servono nel progetto

mentre l’avvio e il web got text web servono per la lettura della tabella.

Creiamo 3 Variabili di cui 2 Variabili di lista e una Variabile di testo.

La Variabile Switch_WebComponent ci servirà ad effettuare diverse operazioni web utilizzando un solo componente.

a questo punto dobbiamo scrivere il nostro primo record da app, per farlo dobbiamo

creare 3 blocchi

l’istruzione al button Invia
il reset di tutti i campi dopo la compilazione
la conferma di avvenuta scrittura

seguendo i blocchi di seguito

visto che abbiamo creato un’altra procedura con la funzione “Create” dobbiamo aggiungere al componente web1.Got Text il blocco evidenziato per ottenere la conferma di effettiva scrittura in tabella

qui potete capire il funzionamento della variabile global switch_WebComponent

ovvero ogni volta che riceve dei dati a seconda del valore della variabile svolge determinate operazioni.

con il companion compilate i campi e inviate il vostro primo contatto.

se tutto è stato fatto per il verso giusto ci ritroveremo

con la notifica di conferma
con un record nel list view
e di conseguenza 1 record nella tabella

PARTE 2

Update e Delete

Fino ad ora abbiamo visto come leggere e inserire i valori all’interno di un foglio di calcolo, ma se volessimo modificare o cancellare un determinato contatto?

Vediamo come fare……

Ritorniamo sempre nella nostra pagina di google app script

rimuoviamo l’ultima parentesi graffa

per intenderci la riga che contiene il seguente testo

“ } //questa parentesi verra aliminata e inseriamo lo script per cancellare la riga “

e inseriamo il testo seguente

  //Modifica Singolo Record
   else if ( e.parameter.func == "Modifica") {
    var ss = SpreadsheetApp.getActive();
    var sh = ss.getSheets()[0];
    var data = [ [e.parameter.nome, e.parameter.cognome, e.parameter.numero] ];
     sh.getRange("B"+(parseInt(e.parameter.id)+1)+":D"+(parseInt(e.parameter.id)+1)).setValues(data);
    return ContentService.createTextOutput("Success");
   }

//questo script modifica i dati dalla colonna B alla colonna D prendendo come riferimento il parametro nella colonna A (ID) sempre con +1 per chi usa l’intestazione della tabella

//Già che ci siamo aggiungiamo anche lo script per la modifica

//Cancellare un singolo record
   else if (e.parameter.func == "Cancella") {
    var record = e.parameter.id;
    var ss = SpreadsheetApp.getActive();
    var sh = ss.getSheets()[0];
    sh.deleteRow(parseInt(record) +1 ); //Se avete il foglio con intestazione utilizzare il +1
    return ContentService.createTextOutput("Success, requested action completed");
   }
}

//questo script cancella la riga con l’index selezionato + 1 per chi ha il foglio con intestazione

Salvate e cliccate prima su “Pubblica” nella barra in altro e poi su “Distribuisci come applicazione web” ricordiamoci di modificare il valore Project version con “Nuovo” e infine su aggiorna.

questa è la stringa che abbiamo usato per l’invio

andiamo ora a modificare la stessa riga sostituendo la funzione da “Create” a “Modifica” e il testo delle variabili nome, cognome e numero.

L’id è riferito appunto al valore della colonna A

quindi in questo caso andremo a modificare il valore nella colonna A con id 1

https://script.google.com/macros/s/AKfycbxs4J5GBQiGpIZoi7nuvljorjkme5GQrkKtsptsH65KcSKKPFTi/exec?ID=1-nWEJGW0FUqJKmPr0ZE06grGdiO5_Ggsc5WLZx2TYE4&SH=Rubrica&func=Modifica&id=1&nome=testmodificato&cognome=test1AModificato&numero=test1BModificato

Inserimento in Kodular Parte 2

Torniamo su Kodular e creiamo i blocchi utili a cancellare un record e modificarlo

per fare ciò ci servirà un notifier (giusto per fare scena) 😂

Andiamo prima di tutto a selezionare il record da modificare e quindi diciamo alla nostra app che quando io clicco sul contatto scelto devi inserire all’interno delle textbox i valori dello stesso.

andando in coda ad abilitare il tasto Modifica e Cancella.

Utilizzando il nostro notifier per confermare l’operazione, quando clicchiamo sul button Modifica settiamo la variabile Global Switch_webComponent con il testo “Modifica” e visualizziamo la conferma

infine alla pressione del tasto conferma verrà eseguito lo script per modificare il valore selezionato.

avendo aggiunto un nuovo comando al componente web dobbiamo aggiungere il blocco per la ricezione della conferma quindi riprendiamo il blocco web got text e aggiungiamo