Strumento open source per segnalare problemi del territorio al proprio Comune: buche stradali, rifiuti abbandonati, illuminazione pubblica guasta, verde incurato e molto altro.
Zero backend — gira interamente su GitHub Pages. I dati vengono salvati su Google Sheets tramite Google Apps Script e pubblicati come Open Data in formato CSV.
Wizard a 4 step guidato:
- Foto — scatta o carica un'immagine; il GPS viene estratto automaticamente dai metadati EXIF
- Posizione — marker trascinabile su mappa Leaflet/OpenStreetMap; geocoding inverso automatico con Nominatim
- Dettagli — categoria (13 tipologie), livello di urgenza, descrizione, nome ed e-mail obbligatori
- Invio — trasmette i dati a Google Sheets (Apps Script), apre i canali selezionati (email Comune, Polizia Locale, WhatsApp, Twitter/X, Facebook) e invia una e-mail di conferma automatica al segnalante
Ogni segnalazione riceve un ID univoco (SGN-<timestamp>) copiabile con un clic e un token segreto monouso usato per la risoluzione sicura.
- Visualizza tutte le segnalazioni su mappa interattiva con marker colorati per urgenza
- Tab Aperte / Risolte — alterna tra segnalazioni attive e già risolte
- Filtri per urgenza e stato nel pannello laterale
- Popup per ogni segnalazione con dettagli, foto (se disponibile) e badge di stato
- Ricerca/zoom automatico al click sulla lista laterale
La PA riceve nell'e-mail un link con token che apre un modal di conferma. La risoluzione:
- Aggiorna
Stato → RisoltaeData_Risoluzionedirettamente nel foglio Google Sheets tramite Apps Script - Ricarica automaticamente la mappa dopo 4 secondi
Il token di risoluzione non è mai esposto nel CSV pubblico (rimosso automaticamente dal workflow di sincronizzazione).
Le foto caricate vengono inviate in base64 ad Apps Script, che le scrive direttamente nella cartella img/ del repository tramite GitHub API. L'URL di GitHub Pages viene memorizzato in URL_Immagine e mostrato nel popup della mappa.
Dashboard con grafici interattivi aggiornati in tempo reale:
- Schede riepilogative — totale, aperte, alta urgenza, risolte (con filtro per categoria attivo)
- Filtro per categoria — chip interattivi per filtrare tutti i grafici simultaneamente
- Grafici — segnalazioni per categoria (barre orizzontali), per urgenza e per stato (doughnut), andamento nel tempo (barre verticali)
- Supporto dark mode con aggiornamento automatico dei colori degli assi
Tutti i dati sono pubblici e scaricabili liberamente in formato CSV:
- Tabella dati — visualizza in un'unica tabella le segnalazioni di entrambi i fogli (Segnalazioni e Risolte), con colonna
Foglioche indica la provenienza di ogni riga - Selezione colonne — menu a tendina con checkbox individuali e "Seleziona tutte"; le colonne non significative sono escluse di default
- Esporta CSV — scarica istantaneamente solo le colonne visibili, con encoding UTF-8 (BOM per compatibilità Excel)
- File CSV diretti —
dati/segnalazioni.csvedati/risolte.csvaggiornati automaticamente ogni 30 minuti da GitHub Actions
index.html ──── POST JSON ──▶ Apps Script ──▶ Google Sheets (foglio Segnalazioni)
└── Gmail (conferma al segnalante)
└── GitHub API (img/{ID}.jpg)
mappa.html ◀── fetch CSV ──┐
statistiche.html ◀── fetch CSV ──┤ dati/segnalazioni.csv
│ dati/risolte.csv
└── (sync ogni 30 min via GitHub Actions)
| File | Ruolo |
|---|---|
js/config.js |
Unico file da modificare al fork — tutte le costanti configurabili |
index.html |
Form wizard segnalazione — 4 step |
mappa.html |
Mappa pubblica segnalazioni interattiva |
statistiche.html |
Dashboard grafici + Open Data (tabella + export CSV) |
profilo.html |
Profilo utente — storico segnalazioni del dispositivo |
info.html |
Informazioni sul progetto, istruzioni download Open Data |
privacy.html |
Privacy Policy & Cookie Policy |
dati/apps-script.gs |
Google Apps Script (backend serverless) |
dati/template-google-sheets.csv |
Template intestazioni foglio (34 colonne) |
dati/segnalazioni.csv |
CSV segnalazioni aperte (generato da GitHub Actions) |
dati/risolte.csv |
CSV segnalazioni risolte (generato da GitHub Actions) |
.github/workflows/sync-sheets.yml |
Sincronizza entrambi i CSV ogni 30 minuti |
.github/workflows/sync-images.yml |
Scarica/ottimizza immagini (attivazione manuale) |
img/ |
Immagini delle segnalazioni caricate via GitHub API |
Guida dettagliata passo passo in
doc/guida-setup.md. Di seguito il riepilogo rapido.
Clicca Fork su GitHub e scegli il tuo account come destinazione.
- Crea un foglio con tre tab: Main, Aperte, Risolte
- Nel tab Aperte e Risolte incolla le formule
FILTERdescritte indoc/guida-setup.md - File → Pubblica sul Web → CSV per ciascun tab → copia i due URL CSV
- Vai su Estensioni → Apps Script dal tuo foglio
- Incolla il contenuto di
dati/apps-script.gs - Imposta
SHEET_ID,GITHUB_OWNER,GITHUB_REPOcon i tuoi valori - Distribuisci → Nuova distribuzione → App web — Esegui come: Me | Accesso: Chiunque
- Copia l'URL
/execgenerato
Apri js/config.js e inserisci i valori raccolti nei passi precedenti:
const APP_CONFIG = {
appsScriptUrl: 'https://script.google.com/macros/s/.../exec',
sheetsCsvAperte: 'https://docs.google.com/spreadsheets/d/e/.../pub?...&output=csv',
sheetsCsvRisolte: 'https://docs.google.com/spreadsheets/d/e/.../pub?...&output=csv',
app: {
nome: 'SegnalaOra',
siteUrl: 'https://TUO-USERNAME.github.io/Segnalazioni/',
hashtag: '#SegnalaOra',
// ...
},
pa: {
nome: 'Comune di [Nome Comune]',
sito: 'https://www.comune.[nome].it',
emailDefault: 'protocollo@comune.[nome].it',
},
mappa: {
lat: 38.1157, // latitudine centro comune
lng: 13.3615, // longitudine centro comune
// ...
},
destinatari: [
// modifica le email con quelle reali del tuo comune
{ id:'strade', nome:'Buche stradali', email:'lavori@comune.[nome].it', /* ... */ },
// ...
],
};Tutti gli altri file JS leggono da APP_CONFIG — non vanno toccati.
- Genera un GitHub Personal Access Token (Fine-grained, scope
Contents: Read and write) - In Apps Script → Impostazioni progetto → Proprietà script → aggiungi
GITHUB_TOKEN = <token> - Il token non va mai scritto nel codice sorgente
Apri .github/workflows/sync-sheets.yml e aggiorna le variabili CSV_APERTE, CSV_RISOLTE, CSV_MAIN con i tuoi URL CSV.
- Repository → Settings → Pages → Branch:
master/(root) - Il sito sarà disponibile su
https://TUO-USERNAME.github.io/Segnalazioni/
- Leaflet.js 1.9.4 — mappe OpenStreetMap
- Chart.js 4.4.0 + chartjs-plugin-datalabels — grafici statistiche
- exifr — estrazione GPS da EXIF foto
- Font Awesome 6.5.2 — icone
- Nominatim (OpenStreetMap) — geocoding inverso
- Google Fonts: Titillium Web
I dati e i contenuti sono rilasciati con licenza CC BY 4.0 — liberi di condividere e adattare citando la fonte.
Idea di Andrea Borruso, Salvatore Fiandaca, Ciro Spataro e Giovan Battista Vitrano By @opendatasicilia
Sviluppo tecnico: Web app progettata e sviluppata da @gbvitrano in collaborazione con Claude AI (Anthropic), che ha affiancato le scelte architetturali, l'ottimizzazione del codice e lo sviluppo delle funzionalità di visualizzazione geospaziale.
