← Torna al mockup UX/UI

Analisi tecnica & documentazione

Come funziona il sistema Grenoble + GreenApp, come interagiscono le tre superfici (webapp, app cittadino, app operatore) e il flusso end-to-end del device dal conferimento alla ricollocazione.

Progetto · Grenoble / GreenApp
Versione · v1 — preparata per call 23/04/2026
Cliente · Cooperica
Deployment · Pôle R · Grenoble-Alpes Métropole

Indice

  1. Executive summary
  2. Obiettivi di progetto
  3. Architettura generale
  4. Le 3 superfici utente
  5. Flusso end-to-end del device
  6. Ciclo vita e stati del device
  7. Come interagiscono webapp e app
  8. Sincronizzazione e real-time
  9. Ruoli e permessi
  10. Integrazioni esterne (da valutare)
  11. Privacy, GDPR, sicurezza
  12. Stack tecnologico
  13. Roadmap e fasi
  14. Punti aperti per la call

1Executive summary

Il progetto Grenoble & GreenApp è un sistema digitale end-to-end per la gestione del riuso di dispositivi elettronici (device IT ed elettrodomestici) nella Métropole di Grenoble. È composto da tre superfici coordinate che insieme gestiscono il ciclo vita del device dal conferimento alla ricollocazione (o smaltimento certificato).

GrenobleWebapp gestionale

Il cuore del sistema: gestionale web per operatori del Pôle R. Single source of truth per tutti i dati. 13 aree funzionali.

React + Next.jsDesktop-firstMulti-Pôle R
GreenAppApp cittadino

App mobile per cittadini, aziende ed enti che vogliono donare device o richiederne ricondizionati. Focus su semplicità + gamification.

React NativeiOS + Android18 screen
Grenoble MobileCompanion operatore

App mobile per gli operatori Pôle R in mobilità: ritiri a domicilio, consegne, scansione QR, firme digitali.

React NativeOffline-first9 screen

In una frase: Grenoble gestisce e decide, GreenApp porta i cittadini nel flusso, Grenoble Mobile permette agli operatori di lavorare fuori ufficio. Tutte e tre condividono il backend.

2Obiettivi di progetto

Obiettivi funzionali

Obiettivi non-funzionali

3Architettura generale

Il sistema adotta un'architettura client-server a più superfici con backend unificato. Tutte e tre le app parlano con lo stesso set di API, sulla stessa base dati. Questo garantisce coerenza: quando un operatore registra un cambio di stato su Grenoble Mobile, l'utente su GreenApp vede l'aggiornamento in pochi secondi.

Diagramma concettuale:

┌──────────────┐   ┌─────────────────┐   ┌──────────────┐
│  GreenApp    │   │     Grenoble    │   │  Grenoble    │
│  (citoyen)   │   │     (webapp)    │   │  Mobile      │
│  📱 RN       │   │     🖥  Next    │   │  📱 RN       │
└──────┬───────┘   └────────┬────────┘   └──────┬───────┘
       │                    │                    │
       │      HTTPS / WSS   │      HTTPS / WSS   │
       └──────────┬─────────┴──────────┬─────────┘
                  │                    │
           ┌──────▼────────────────────▼──────┐
           │          API Gateway             │
           │    (REST + GraphQL + WebSocket)  │
           └──────┬─────────────────────┬─────┘
                  │                     │
         ┌────────▼──────┐    ┌─────────▼──────┐
         │   Core API    │    │  Auth Service  │
         │  (Node.js)    │    │  (JWT + 2FA)   │
         └────────┬──────┘    └────────────────┘
                  │
      ┌───────────┼───────────┬──────────┐
      │           │           │          │
  ┌───▼──┐  ┌─────▼────┐  ┌───▼────┐ ┌───▼────┐
  │Mongo │  │PostgreSQL│  │ Redis  │ │ S3     │
  │(dati)│  │ (audit)  │  │(cache) │ │(files) │
  └──────┘  └──────────┘  └────────┘ └────────┘
      

Perché questa architettura

4Le 3 superfici utente

4.1 Grenoble — Webapp gestionale

Chi la usa: operatori dei Pôle R, admin di centro, analisti, super admin Métropole.

Dove: browser desktop (Chrome/Firefox/Safari). Responsive ma ottimizzata per schermi ≥ 1280px.

Ruolo nel sistema: single source of truth. È qui che si decide: valutazione, routing a riparatore, assegnazione beneficiario, chiusura del ciclo. È anche il luogo della reportistica e dell'amministrazione.

4.2 GreenApp — App mobile cittadino

Chi la usa: cittadini privati, aziende (referenti CSR), enti (referenti tecnici).

Dove: iOS 16+ e Android 10+. Download da App Store / Play Store.

Ruolo nel sistema: porta d'ingresso e di uscita per il cittadino. Qui si avviano le donazioni, si prenotano i ritiri, si richiedono i device. È il canale che trasforma la passività ("porta la roba al cassonetto") in partecipazione attiva ("traccia dove va il tuo vecchio PC e vedi chi lo riceve").

4.3 Grenoble Mobile — Companion operatore

Chi la usa: operatori Pôle R in mobilità (stessi account della webapp).

Dove: iOS 16+ e Android 10+. Distribuzione interna (MDM / TestFlight / enterprise).

Ruolo nel sistema: estensione mobile del gestionale. Gli operatori non stanno solo in centro: fanno ritiri, consegne, conferimenti esterni. Serve uno strumento nativo con fotocamera, GPS, firma touch, operatività offline.

Decisione importante per la call: valutare se Grenoble Mobile è veramente necessaria come app separata o se una versione mobile responsive della webapp è sufficiente. La nostra raccomandazione: app separata per hardware access (fotocamera nativa, GPS, biometria) e per operatività offline, ma la decisione finale dipende dai volumi di ritiri a domicilio previsti.

5Flusso end-to-end del device

Un esempio concreto: un notebook Dell Latitude 5420 donato dal cittadino Marc Dubois, che finisce nelle mani di uno studente del Collège Olympique.

1

Donazione avviata

Marc apre GreenApp sul suo telefono. Scatta una foto del notebook; l'AI suggerisce "Notebook · Dell". Compila 3 campi guidati (modello, stato, accessori). Prenota un ritiro a casa per martedì 14–17.

GreenAppCittadino
2

Pianificazione operatore

La richiesta arriva automaticamente nel Calendario ritiri di Grenoble webapp. Il responsabile logistica la inserisce nel giro del martedì pomeriggio dell'operatore Luc.

GrenobleAdmin Pôle R
3

Ritiro a domicilio

Martedì, Luc apre Grenoble Mobile. Vede la lista ritiri, naviga fino a casa di Marc. Scansiona il device (già etichettato da una sessione precedente, oppure gli attacca un QR), scatta foto, raccoglie firma digitale di Marc.

Grenoble MobileOperatore
4

Presa in carico al centro

Al rientro al Pôle R, il device è sincronizzato nel Registro Grenoble. Codice assegnato: GR-2604-0891. Marc riceve una notifica su GreenApp: "Il tuo device è in valutazione".

GrenobleGreenApp (notif.)
5

Wipe dati + valutazione

Wipe dati + valutazione

Un operatore esegue wipe certificato (tool dedicato, report PDF). Poi valuta tecnicamente: stato B, riusabile dopo piccola riparazione (tastiera). Viene generato OL verso Envie Isère.

Grenoble
6

Riparazione presso partner

Il device viene consegnato a Envie Isère. Il loro tecnico (ruolo "Partner" sulla webapp) aggiorna lo stato dell'OL: intervento eseguito in 5 giorni. Marc vede "In riparazione" sulla sua GreenApp con ETA rientro.

Grenoble (portale partner)
7

Matching con beneficiario

Al rientro, il sistema propone automaticamente un matching: Fam. Bouchard, in lista d'attesa sul bando Écoles Numériques 2026, priorità alta (2 figli, QF basso). L'operatore approva il matching.

GrenobleMatching AI
8

Consegna al beneficiario

Luc usa Grenoble Mobile per la consegna: verifica ID del beneficiario, fa firmare il comodato d'uso 24 mesi, scatta foto di consegna. Il device esce ufficialmente da Grenoble.

Grenoble Mobile
9

Chiusura del ciclo

Marc riceve l'ultima notifica su GreenApp: "Il tuo notebook ora è usato da una famiglia del Collège Olympique. Grazie! +80 punti Green". Punti accumulati, badge sbloccato, posizione in classifica aggiornata.

GreenAppCittadino

6Ciclo vita e stati del device

Ogni device passa attraverso una sequenza ben definita di stati. Ciascuno stato ha precondizioni, azioni possibili, e app/ruolo responsabile.

#StatoDescrizioneSuperficie attiva
1ConferitoDevice registrato in sistema, anagrafica conferitore collegata, documento firmato.Grenoble + Mobile
2Wipe datiCancellazione certificata dati personali (GDPR). Report allegato.Grenoble
3ValutazioneClassificazione A/B/C o scarto. Decisione destinazione iniziale.Grenoble
4In riparazionePresso partner esterno. OL aperto, rientro previsto.Grenoble + portale partner
5RicondizionatoRientrato, collaudato, valore commerciale stimato.Grenoble
6ProntoIn magazzino, listato nel catalogo GreenApp, prenotabile.Grenoble + GreenApp (catalogo)
7AssegnatoMatching con beneficiario approvato. Riservato.Grenoble
8Consegnato / UscitaConsegna effettuata, comodato firmato, uscita registrata.Mobile + Grenoble
Smaltimento RAEEFork alternativo: device non riusabile, inviato a gestore autorizzato ADEME.Grenoble + gestore

Le transizioni di stato sono tracciate nel PostgreSQL audit log con timestamp, operatore, motivo, eventuali allegati (report wipe, ricevute, firme). Questo permette audit esterni (Métropole, ADEME) e ricostruzione storica completa.

7Come interagiscono webapp e app

Il modello di interazione è event-driven: ogni azione su una superficie può emettere eventi che altre superfici ascoltano. Esempi tipici:

7.1 Cittadino prenota ritiro → operatore vede

GreenApp → POST /api/pickup-requests { userId, address, devices:[...], preferredSlot } (server crea Pickup + emette evento) Backend ⇢ WebSocket "pickup:new" → room pole-r-centre Grenoble webapp (calendario) riceve evento e mostra badge Grenoble webapp (admin) trascina slot in calendario → PATCH /api/pickups/:id Backend ⇢ push "pickup:confirmed" → GreenApp di quell'utente GreenApp mostra notifica "Ritiro confermato martedì 14–17"

7.2 Operatore aggiorna stato → cittadino notificato

Grenoble Mobile → scansiona QR device, cambia stato "Consegnato" → PATCH /api/devices/:id/state { newState:"delivered", photo, signature } Backend scrive audit log, aggiorna device Backend ⇢ push "device:state-changed" al conferitore originale GreenApp (notifica push) "Il tuo device è stato consegnato" GreenApp (tracking) aggiorna timeline +80 punti Green

7.3 Matching AI propone, operatore decide

Grenoble (bandi) query "device pronti + richieste aperte" → POST /api/matching/suggest Backend (AI service) confronta attributi e restituisce score → risposta: [{ deviceId, beneficiaryId, score, reasons }] Grenoble UI mostra proposta con spiegazione Grenoble (operatore) approva → POST /api/assignments Backend sottopone consegna a pianificazione

Principio di design: la webapp è autoritativa, le app mobile sono esecutive. GreenApp può solo proporre richieste e vedere stati; non può cambiare direttamente i dati del device. Grenoble Mobile può cambiare stati, ma solo in quelli permessi al ruolo operatore (es. "consegnato", "wipe eseguito", "ritiro completato").

8Sincronizzazione e real-time

Real-time push (WebSocket)

Quando un utente è attivo in una delle app, mantiene una connessione WebSocket. Il backend pubblica eventi su "room" logiche: user:123, pole:grenoble-centre, role:operator. Gli eventi più frequenti:

Modalità offline (Grenoble Mobile)

Gli operatori possono lavorare senza connessione (es. ritiro in zona con copertura scarsa). L'app mantiene una coda di operazioni locale:

Caching

Redis ospita: sessioni utente, cache del catalogo device (TTL breve), contatori aggregati (KPI dashboard), risultati query matching.

9Ruoli e permessi (RBAC)

Il sistema usa un modello Role-Based Access Control con 5 ruoli predefiniti, più possibilità di override per utente singolo.

RuoloScopePuò fareNon può fare
👑 Super AdminMétropole interaTutto
🛡 Admin Pôle RUn centroGestione completa del proprio Pôle RVedere altri Pôle R, gestire utenti di sistema
🎯 OperatoreUn centroIntake, tracking, ritiri, consegne, stati deviceGestire bandi, anagrafiche non proprie, report
📊 AnalistaMétropole (lettura)Report, export, dashboardModificare dati
🔧 Partner riparatoreSolo i propri OLAggiornare stato propri OL, caricare ricevuteVedere altri device, accedere ad anagrafiche

I ruoli si applicano anche sulle app mobile: Grenoble Mobile accetta solo utenti operatore o admin. GreenApp è per "cittadino" (ruolo separato gestito via France Connect / social login).

10Integrazioni esterne ⚠ da valutare

Importante: le integrazioni qui elencate sono proposte aggiuntive non presenti nel progetto originale descritto nella mail. Sono tutte da valutare con il cliente in base a: budget, obblighi normativi francesi, priorità di roadmap, possibili alternative open-source o sostituzioni locali.

da valutare

🇫🇷 France Connect

SSO con identità digitale cittadini. Raccomandato per conformità e fiducia. Alternativa: login email/social.

da valutare

🏛 ADEME

Registro nazionale gestori RAEE. Necessario per rendicontazione smaltimento. Probabilmente obbligatorio.

da valutare

🗺 Google Maps / Mapbox

Mappe, geocoding, navigazione turn-by-turn. Costo per chiamata. Alternativa: OpenStreetMap + Leaflet.

da valutare

📲 Firebase Cloud Messaging

Push notifiche cross-platform (iOS + Android). Gratuito. Alternativa: OneSignal, APNS diretto.

da valutare

📄 DocuSign / Yousign

Firma digitale remota con valore legale (eIDAS). Yousign è FR, preferibile. Alternativa: firma elettronica semplice in-app.

da valutare

📧 SendGrid / Mailjet

Email transazionali affidabili. Mailjet è FR/EU. Alternativa: SMTP proprio.

da valutare

🤖 OpenAI / Azure Vision

Riconoscimento foto device (AI). Comodo per UX ma non essenziale. Alternativa: modello open-source (YOLO) on-prem.

da valutare

🏦 CAF / API ISEE

Verifica automatica QF (quotient familial) dei richiedenti bandi sociali. Utile ma richiede convenzione con CAF.

Priorizzazione suggerita

  1. Must-have fase 1: ADEME (obbligatorio per RAEE), mappe base, push notifiche base
  2. Nice-to-have fase 2: France Connect (aumenta adozione), firma digitale legale
  3. Optional fase 3: AI vision, CAF, integrazione social

11Privacy, GDPR, sicurezza

Dati personali trattati

Principi applicati

Sicurezza tecnica

12Stack tecnologico proposto

LayerTecnologiaNote
Webapp GrenobleReact 18 + Next.js 14 + TypeScriptSSR per SEO, ISR per dashboard pubbliche
App GreenApp + MobileReact Native + ExpoCodice condiviso tra iOS e Android (~85%)
Backend APINode.js + Express / FastifyPerformance, ecosistema JS coerente
Real-timeSocket.ioFallback a long-polling se WebSocket bloccati
Database primarioMongoDB 6+Dati applicativi (device, anagrafiche, richieste)
Database auditPostgreSQL 15+Audit log, report analytici
Cache & sessionRedis 7+Sessioni, cache query, contatori
Storage fileS3-compatible (MinIO on-prem possibile)Foto device, PDF documenti
Queue asyncBullMQ (su Redis)Wipe reports, matching AI, export
AutenticazioneJWT + bcrypt, opz. KeycloakKeycloak se si vuole SSO enterprise
MonitoraggioGrafana + Prometheus + SentryMetriche + error tracking
CI/CDGitHub Actions / GitLab CIDeploy automatizzato su staging/prod
InfraDocker + Kubernetes (o docker-compose per MVP)Scalabilità orizzontale se serve

13Roadmap e fasi

Proposta di suddivisione in 3 fasi per un MVP utile in 4–5 mesi e poi estensioni.

Fase 1 — MVP (3 mesi)

Fase 2 — Estensione (2 mesi)

Fase 3 — Maturità (2 mesi)

14Punti aperti per la call

Da discutere con il cliente nell'incontro del 23/04/2026 ore 15:00:

Scelte prodotto

  1. Grenoble Mobile operatore è necessaria come app separata? O basta una versione responsive della webapp ottimizzata mobile?
  2. Quali bandi sociali sono attivi oggi? Per tararci sui criteri reali di matching.
  3. Aziende conferitori: servono CSV massivi? Serve un portale B2B dedicato o l'app basta?
  4. Lingue: partire solo in FR e aggiungere IT/EN dopo? O multilingua da subito?
  5. Gamification GreenApp: livello di gamification desiderato? Classifica pubblica o privata?

Scelte tecniche

  1. Hosting: cloud UE (AWS eu-west-3 Parigi, OVH) o on-premise Métropole?
  2. Stack: conferma Node/React o sono preferite altre tecnologie (es. Django/Rails)?
  3. Integrazioni prioritarie: quali delle 8 proposte sono effettivamente in scope per la fase 1?
  4. Firma digitale: serve valore legale (eIDAS) o basta ricevuta di conferma?

Scelte operative

  1. Numero di Pôle R: quanti centri in fase 1, e quanti previsti a regime?
  2. Operatori: quanti per Pôle R? Hanno già dispositivi mobili aziendali?
  3. Riparatori partner: quale modello contrattuale? Accesso diretto alla webapp o invio via email/PDF?
  4. Rendicontazione: quali report sono prioritari per Métropole e ADEME?

Scelte strategiche

  1. Modello di adozione cittadini: come promuovere GreenApp (campagna Métropole, QR in ecocentri, partnership scuole)?
  2. Estensione geografica: progetto replicabile in altre Métropole FR? Vogliamo progettare multi-tenant da subito?
  3. Budget e tempi: scadenze di delivery? Milestone commerciali?