2a:null 2b:["$","title",null,{"children":"Pubblicare un oggetto JavaScript su Google Sheets tramite un “ponte” Apps Script | voteofsilence | Observable"}] 30:T4a4,# Pubblicare un oggetto JavaScript su Google Sheets tramite un "ponte" Apps Script ## L'idea di fondo ``` Il tuo codice JS --POST JSON--> Web App Apps Script --> Google Sheet (nessun segreto) (gira con la TUA identità Google, non serve nessuna API key da nessuna parte) ``` Uno script Apps Script **legato al tuo Google Sheet** può leggere e scrivere sul foglio senza bisogno di alcuna API key o autenticazione OAuth lato client: eredita automaticamente i tuoi permessi personali nel momento in cui lo distribuisci ("deploy"). L'unico "segreto" è un codice condiviso (token) che lo script controlla, giusto per evitare che chiunque trovi l'URL possa scrivere a caso sul tuo foglio. Qui sotto trovi, in ordine: 1. **Passo 1** — il codice da incollare nell'editor Apps Script 2. **Passo 2** — come distribuirlo come applicazione web (e trovare l'URL `/exec`) 3. **Passo 3** — come richiamarlo dal tuo codice JavaScript 4. **Test dal vivo** — una cella interattiva per provarlo subito, qui nel notebook 5. **Risoluzione dei problemi** — le cause più comuni se qualcosa non torna 31:Tb83,## Passo 1 — Prepara lo script (`Code.gs`) 1. Apri (o crea) il tuo Google Sheet. 2. Vai su **Estensioni → Apps Script**. 3. Cancella il codice di default e incolla quello qui sotto. 4. **Cambia il valore di `SHARED_SECRET`** con una stringa lunga e a caso, solo tua (è la "password" che protegge il tuo endpoint). 5. Salva il progetto (icona 💾 o `Ctrl+S`). Questo script aggiunge ogni oggetto ricevuto come nuova riga, creando automaticamente l'intestazione (header) dalle chiavi dell'oggetto la prima volta. ```js // ---- CONFIGURAZIONE ---- const SHEET_NAME = "Sheet1"; // nome della scheda dove scrivere — attenzione al nome reale! (vedi sezione "Risoluzione problemi") const SHARED_SECRET = "metti-qui-una-stringa-lunga-e-casuale"; // cambiala! function doPost(e) { try { const body = JSON.parse(e.postData.contents); // controllo di sicurezza minimo: il token deve combaciare if (body.token !== SHARED_SECRET) { return jsonResponse({ ok: false, error: "non autorizzato" }); } const data = body.data; // l'oggetto JS che vuoi salvare const ss = SpreadsheetApp.getActiveSpreadsheet(); const sheet = ss.getSheetByName(SHEET_NAME) || ss.insertSheet(SHEET_NAME); appendRow(sheet, data); return jsonResponse({ ok: true }); } catch (err) { return jsonResponse({ ok: false, error: String(err) }); } } function appendRow(sheet, data) { const keys = Object.keys(data); // se la scheda è vuota, scrivi prima la riga di intestazione if (sheet.getLastRow() === 0) { sheet.appendRow(keys); } const header = sheet .getRange(1, 1, 1, sheet.getLastColumn()) .getValues()[0]; // allinea i valori all'ordine delle colonne esistenti const row = header.map((col) => (col in data ? data[col] : "")); // se l'oggetto ha chiavi nuove non ancora presenti, aggiungi colonne const newKeys = keys.filter((k) => !header.includes(k)); if (newKeys.length) { sheet .getRange(1, header.length + 1, 1, newKeys.length) .setValues([newKeys]); newKeys.forEach((k) => row.push(data[k])); } row.push(new Date()); // colonna con la data/ora di ricezione (opzionale) sheet.appendRow(row); } function jsonResponse(obj) { return ContentService .createTextOutput(JSON.stringify(obj)) .setMimeType(ContentService.MimeType.JSON); } ``` **Da sapere** - `doPost` è l'unico punto d'ingresso necessario — Apps Script espone automaticamente `doGet`/`doPost` una volta distribuito come Web App. - `SHARED_SECRET` resta *dentro lo script*, non viene mai restituito al chiamante — è questo che lo mantiene privato lato server. Per una gestione più pulita si può anche usare `PropertiesService.getScriptProperties()` invece di scriverlo direttamente nel codice. - Se vuoi vedere i log di ogni chiamata (utilissimo per capire eventuali errori), nell'editor Apps Script clicca sull'icona a orologio ⏱ nel menu a sinistra, **"Esecuzioni"**. 32:T7d8,## Passo 2 — Distribuisci come applicazione web (e trova l'URL `/exec`) L'URL non esiste finché non "distribuisci" (*deploy*) lo script. ### Distribuisci Nell'editor Apps Script, in alto a destra, clicca **Distribuisci** (*Deploy*) → **Nuova distribuzione** (*New deployment*). Clicca sull'icona a forma di ingranaggio ⚙️ vicino a "Seleziona tipo" e scegli **Applicazione web** (*Web app*). Imposta: - **Esegui come:** *Io* (il tuo indirizzo email) — così lo script userà i TUOI permessi per scrivere sul foglio - **Chi ha accesso:** *Chiunque* (*Anyone*) — necessario perché il notebook o la tua app possano chiamarlo dall'esterno Poi clicca **Distribuisci**. ### Autorizza l'accesso (solo la prima volta) Google chiederà di autorizzare lo script ad accedere al tuo foglio. Vedrai una schermata tipo "L'app non è verificata" — è normale, è un tuo script personale, non un'app pubblica registrata: 1. Clicca **Impostazioni avanzate** (in basso a sinistra) 2. Clicca **Vai a [nome del progetto] (non sicuro)** 3. Concedi i permessi richiesti ### Copia l'URL 🎉 Dopo l'autorizzazione, comparirà una finestra con **URL applicazione web**, un link che finisce in `/exec`, ad esempio: ``` https://script.google.com/macros/s/AKfycbz............./exec ``` Copialo: è quello da incollare nel campo "URL /exec" della cella di test più sotto. ### Come ritrovarlo in futuro **Distribuisci → Gestisci distribuzioni** (*Manage deployments*) mostra sempre la distribuzione attiva con lo stesso URL. ### ⚠️ Se modifichi il codice dopo L'URL `/exec` **non recepisce automaticamente** le modifiche al codice. Ogni volta che cambi qualcosa (es. `SHEET_NAME`, `SHARED_SECRET`, la logica) devi: **Distribuisci → Gestisci distribuzioni → (icona matita ✏️) → Versione: Nuova versione → Distribuisci** Se dimentichi questo passaggio, l'URL continuerà a eseguire la versione *vecchia* del codice — una causa molto comune di "perché non funziona più!" 33:T65e,## Passo 3 — Richiamalo dal tuo codice JavaScript ```js async function saveToSheet(data) { const res = await fetch("https://script.google.com/macros/s/XXXXX/exec", { method: "POST", headers: { "Content-Type": "text/plain;charset=utf-8" }, // evita il preflight CORS body: JSON.stringify({ token: "metti-qui-una-stringa-lunga-e-casuale", data }) }); return res.json(); // { ok: true } oppure { ok: false, error } } await saveToSheet({ nome: "Ada Lovelace", ruolo: "Matematica" }); ``` Un paio di cose da sapere: - **Usa `Content-Type: text/plain`, non `application/json`.** La gestione CORS di Apps Script è permalosa: inviare il JSON dichiarandolo come `text/plain` evita che il browser mandi prima una richiesta di preflight `OPTIONS`, che Apps Script non gestisce bene. Sul lato server, `e.postData.contents` restituisce comunque la stringa JSON grezza, quindi `JSON.parse` funziona senza problemi. - **Fidati del campo `ok` nel corpo della risposta**, non tanto dello stato HTTP: Apps Script può fare redirect (302) durante la richiesta, che il browser segue in automatico. - **Dove deve vivere il token segreto?** Se questo `fetch` gira in un **browser**, il token è visibile a chiunque tramite gli strumenti sviluppatore o il codice sorgente della pagina — scoraggia i tentativi casuali, ma non è un vero segreto. Se il codice gira **lato server** (Node.js, una funzione serverless, ecc.), il token non arriva mai al client ed è davvero privato. Per un modulo pubblico, meglio mettere un piccolo server/funzione in mezzo che tiene il token, e far parlare il browser con quello. 34:T664,postButton; // ri-esegue quando clicchi il bottone let postResult; let postState; // "inattivo" | "successo" | "errore" if (postButton > 0) { try { const data = JSON.parse(sampleObject); const res = await fetch("https://script.google.com/macros/s/AKfycbyAvbxBq0zVsrjmxqxYEFpQMuLvQ56vJMgKmvuHmPXDTk0Qiwv0ww32lftWCv286_qmNQ/exec", { method: "POST", mode: "no-cors", // Bypass del controllo CORS del browser cache: "no-cache", headers: { "Content-Type": "text/plain" // EVITA il pre-flight HTTP OPTIONS di Google }, body: JSON.stringify({token: secretToken, data}) }); //correzione di google gemini /*await fetch(scriptUrl, { method: "POST", headers: {"Content-Type": "text/plain;charset=utf-8"}, body: JSON.stringify({token: secretToken, data}), proxy: true })*/; const rawText = await res.text(); try { postResult = JSON.parse(rawText); postState = postResult.ok ? "successo" : "errore"; } catch { // La risposta non era JSON valido: spesso segno di pagina di login, // errore HTML, o URL sbagliato (es. /dev invece di /exec) postResult = { ok: false, error: "La risposta ricevuta non è JSON valido — probabile URL sbagliato, permessi di accesso non impostati su 'Chiunque', o pagina di login restituita da Google.", httpStatus: res.status, anteprimaRisposta: rawText.slice(0, 300) }; postState = "errore"; } } catch (err) { postResult = {ok: false, error: String(err)}; postState = "errore"; } } else { postResult = null; postState = "inattivo"; } 35:Tad6,## Risoluzione dei problemi — "ho premuto Invia ma non vedo niente" Se il banner sopra dice ✅ **successo** ma sul foglio non vedi nulla, il sospetto numero uno è questo: ### 🎯 Causa più probabile: il nome della scheda non combacia (`Sheet1` vs `Foglio1`) Lo script cerca una scheda chiamata **`Sheet1`** (impostato nella costante `SHEET_NAME`). Ma se il tuo Google account è in italiano, la prima scheda di un nuovo foglio si chiama di default **`Foglio1`**, non `Sheet1`! Cosa succede in questo caso: lo script *non trova* una scheda chiamata `Sheet1`, quindi **ne crea una nuova da zero con quel nome** (`ss.insertSheet(SHEET_NAME)`) e scrive lì. La chiamata quindi *riesce* (`{ ok: true }`), ma i dati finiscono in una scheda diversa da quella che stavi guardando! **Come verificare:** guarda in fondo al tuo Google Sheet, tra le linguette delle schede — se vedi sia "Foglio1" che una nuova "Sheet1" comparsa dopo il test, hai trovato il problema. 🎉 (in senso buono: ha funzionato, solo non dove pensavi) **Come risolverlo, due opzioni:** - **Opzione A** — cambia nello script `SHEET_NAME` da `"Sheet1"` a `"Foglio1"` (il nome reale della tua scheda), poi ricorda di **ridistribuire** (Distribuisci → Gestisci distribuzioni → ✏️ → Nuova versione). - **Opzione B** — rinomina tu la scheda in "Sheet1" (click destro sulla linguetta → Rinomina). --- ### Altre cause comuni - **Non hai ridistribuito dopo una modifica al codice.** Ogni modifica a `SHEET_NAME`, `SHARED_SECRET` o alla logica richiede **Distribuisci → Gestisci distribuzioni → ✏️ → Nuova versione → Distribuisci**, altrimenti l'URL continua a eseguire la versione vecchia. - **Il token non combacia esattamente.** Controlla spazi vuoti iniziali/finali o virgolette rimaste per errore quando l'hai incollato nel campo qui nel notebook o nello script. - **"Chi ha accesso" non è impostato su "Chiunque".** Se è impostato solo per te o per il tuo dominio, Google restituisce una pagina di login HTML invece del JSON — il banner rosso qui sopra ora te lo segnala esplicitamente ("La risposta ricevuta non è JSON valido..."). - **L'URL incollato è quello `/dev`, non `/exec`.** Controlla che finisca proprio in `/exec`. - **Errore di sintassi nell'oggetto JSON** nel campo di testo di prova (virgole o virgolette mancanti) — in tal caso vedrai l'errore di `JSON.parse` nel banner. ### Il modo più affidabile per capire cosa è successo davvero Nell'editor Apps Script, clicca sull'icona a orologio ⏱ nel menu a sinistra → **"Esecuzioni"** (*Executions*). Lì vedi ogni singola chiamata ricevuta dallo script, con lo stato (successo/errore) e, cliccandoci sopra, il dettaglio di eventuali eccezioni. È il log server-side più diretto per il debug.36:[] 2e:{"id":"6b76ef5d58da5a5f","slug":"postonsheets","title":"Pubblicare un oggetto JavaScript su Google Sheets tramite un “ponte” Apps Script","thumbnail":"ad608f226b6c0c00d7137d72a5e3620f3c0414d9241270ab4b9d278866f5464f","access_level":"public","create_time":"$D2026-09-03T16:08:49.681Z","update_time":"$D2026-09-05T10:20:15.044Z","view_time":null,"first_public_time":"$D2026-09-05T10:20:25.082Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"58953e69d68be0b2","login":"voteofsilence","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60f94f57b61e05ed3b443c9eac2e96cc2f2cc862852c8b2f6918f715a0b4c967","tier":"starter_2024"},"version":31,"publish_version":31,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a04fcc840c2d21e","login":"voteofsilence","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60f94f57b61e05ed3b443c9eac2e96cc2f2cc862852c8b2f6918f715a0b4c967","tier":null}],"members":[{"type":"team","id":"58953e69d68be0b2","login":"voteofsilence","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60f94f57b61e05ed3b443c9eac2e96cc2f2cc862852c8b2f6918f715a0b4c967","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pubblicare un oggetto JavaScript su Google Sheets tramite un “ponte” Apps Script","cells":[{"id":1,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## Test dal vivo\n\nIncolla qui sotto il tuo URL `/exec` distribuito e il token segreto, modifica l'oggetto di esempio se vuoi, poi clicca **Invia al foglio** per provare tutto il percorso davvero (parte una vera chiamata `fetch` dal notebook).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const scriptUrl = view(Inputs.text({label: \"URL /exec di Apps Script\", placeholder: \"https://script.google.com/macros/s/XXXXX/exec\", width: 500}));\nconst secretToken = view(Inputs.text({label: \"Token segreto condiviso\", placeholder: \"metti-qui-una-stringa-lunga-e-casuale\", width: 400}));\nconst sampleObject = view(Inputs.textarea({\n label: \"Oggetto JS da inviare (come JSON)\",\n value: JSON.stringify({nome: \"Ada Lovelace\", ruolo: \"Matematica\", visitato: new Date().toISOString()}, null, 2),\n rows: 6,\n width: 500\n}));\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const postButton = view(Inputs.button(\"Invia al foglio\", {reduce: () => Date.now()}));\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$34","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"const feedbackBanner = (() => {\n if (postState === \"inattivo\") {\n return html`

ℹ️ Compila i campi qui sopra e clicca Invia al foglio per testare.

`;\n }\n if (postState === \"successo\") {\n return html`

✅ Fatto! Il foglio ha risposto { ok: true }. Vai a controllare la tua spreadsheet — dovresti vedere una nuova riga (o una nuova scheda \"Sheet1\", vedi sotto se non la trovi!).

`;\n }\n return html`

❌ Qualcosa non ha funzionato.

${JSON.stringify(postResult, null, 2)}

`;\n})();\ndisplay(feedbackBanner);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"*(Nota: la cella di test usa `fetch(..., {proxy: true})`, che instrada la richiesta attraverso il server di Observable invece che direttamente dal tuo browser — comodo per evitare stranezze residue di CORS mentre provi, ma nella tua app reale un `fetch` lato client esporrebbe comunque il token nel browser, come spiegato al Passo 3.)*\n\n**Riepilogo di cosa mantiene le cose private:**\n- Non viene usata nessuna API key di Google Sheets — Apps Script sfrutta i permessi del tuo account per scrivere sul foglio.\n- L'unica credenziale è `SHARED_SECRET`, che vive dentro il codice dello script e non viene mai restituita a chi chiama.\n- La privacy reale di quel token dipende da *dove gira il codice che lo invia*: lato server è privato, lato browser/client è solo un piccolo deterrente.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2"}} 2f:"$2e:body"