GOOGLE SCRIPT & KODULAR READ, WRITE, UPDATE, DELETE

Benvenuti, prima di tutto ringrazio Raffaele per avermi dato la possibilità di pubblicare nel suo blog.

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

Raffaele: E io ringrazio te per averci condiviso il tuo lavoro che sicuramente sarà utile a tanti. Vai con la guida 💪

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

1. 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.

2. 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

3. 3. 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

4. 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

5. 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

6. 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.

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

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

2. 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"

3. successivamente su “rivedi autorizzazioni”

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

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

7. 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.

8. 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.

1. Il link dello script     

2. L’id del nostro foglio excel  

3. Il nome del foglio  

4. La funzione da richiamare      

5. 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)

9. 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.

10. 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

11. 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 

1. l’istruzione al button Invia

2. il reset di tutti i campi dopo la compilazione

3. 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 

1. con la notifica di conferma 

2. con un record nel list view 

3. 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……

12. 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

13. 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

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

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

14. 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

Per finire, se una persona ci sta antipatica utilizzeremo il comando Cancella che andremo a programmare in questo modo,

sempre dopo aver selezionato il contatto da cancellare come da punto 14

alla pressione del tasto cancella chiediamo conferma dell’eliminazione

    andiamo ad  aggiungere un’istruzione al blocco notifier after choosing

e infine l’aggiunta al web1 got text della conferma di cancellazione

Spero di essere stato chiaro e di non aver commesso errori.

per qualsiasi informazione, suggerimenti o dubbi scrivetemi

Link Foglio: Rubrica

Link Aia: Rubrica.aia

Telegram: https://t.me/VinkoVi

Canale Telegram: https://t.me/appinventoritaly 

Gruppo Telegram: https://t.me/mitappinventor 

Blog: https://vinkodev.blogspot.com