THE APP LAB
Laboratorio di innovazione e ottimizzazione dei processi
ITS MOVE Academy — Competenze digitali e tecnologie abilitanti 4.0/5.0 docente: Marcello Cenati
Osservare un processo aziendale, ripensarlo, e dargli forma in un'interfaccia — dall'idea allo sketch al prototipo funzionante da presentare.
L'App Lab è un laboratorio di innovazione di processo: si parte da un processo reale (spesso visto in tirocinio), se ne progetta la soluzione e la si realizza come interfaccia funzionante.
Attenzione
Oggi un agente (v0, Emergent, Manus, Claude, Gemini…) genera un'interfaccia bella in pochi minuti. Per questo qui si valuta il processo, non l'artefatto: l'analisi, le decisioni e la critica del risultato AI pesano più della apparenza del mockup. L'AI entra dopo che il processo è stato compreso e riprogettato.
I 5 step del laboratorio
Obiettivi
- Osservare processi organizzativi, di comunicazione, di servizio
- Rielaborare i processi: pulizia, ottimizzazione, innovazione in ottica 4.0 (chiarezza, efficienza, sincronizzazione, trasparenza, riduzione degli sprechi, sostenibilità)
- Organizzare informazioni complesse (controlli, immagini, collegamenti, interfacce, dati condivisi)
- Gestire complessità, accuratezza e completezza del risultato
- Vivere l'esperienza completa: ideazione → progettazione → realizzazione → test → presentazione
Il percorso in 5 step
1. FOCUSING → 2. DESIGN → 3. PROTOTIPO → 4. MOCKUP con AI → 5. PRESENTAZIONE il processo sketch a mano wireframe prototipo pitch + feedback e l'idea (Balsamiq) funzionante
Circa 12-16 ore. L'analisi del processo è il cuore; l'interfaccia ne è l'esito.
Focusing: una buona idea, messa a fuoco
Dal problema al progetto. Si osserva un processo reale, si individua un punto critico, si immagina la soluzione e se ne valuta la fattibilità.
- Mappa del processo attuale (chi fa cosa, dove si perde tempo, cosa non torna)
- Idea di soluzione e suo valore (anche sulla qualità del lavoro delle persone)
Risorse → slide Focusing online (Canva) · PDF · modulo di focusing · modello PDF · proposte inserite
Metodo
Metodo — dal Quaderno di processo: l'idea migliore nasce da un attrito visto davvero, non inventato al momento.
Design: progettare, immaginare, disegnare. Let's sketch!
← design & sketch →
- Sketch a mano con carta e matita (min 5-max 9 schermate): decidere prima di generare
- Rivedi interfaccia, funzionalità e user experience ; annota cosa cambiare. L’interazione la proverai nel wireframe Balsamiq (Step 3) o nel mockup AI (Step 4)
Risorse → slide Design online (Canva) · PDF
Metodo
Metodo — Wizard of Oz: prima di costruire, testa l'idea con un compagno che "fa finta" di essere il sistema. Se funziona con i bigliettini, vale la pena realizzarla.
Il prototipo: funzionale, completo (wireframe)
- Realizza il wireframe con lo strumento professionale Balsamiq (prova gratuita 14 giorni)
- Aggiungi bottoni, immagini, link e verifica col tasto play
- Esporta in PDF e in BMPR (per modificarlo dopo il periodo di prova); condividi con Allow public Reviews
Risorse → slide Prototipazione online (Canva) · PDF · carica il PDF/BMPR · aggiungi il link al prototipo
Esempi → VALSPED GO (ribalte) · TransitQuote · RESO track · Flightcheck · Check&Go · Check my parking · All in one · Where is my flight · Milano Cool Streets · GUIDAMI · My delivery
← prototipi realizzati dagli studenti →
Il mockup funzionante: con dati e AI
← mockup generati con AI →
Il salto: dal wireframe statico a un prototipo che gira davvero, generato con un agente AI. Il segreto non è lo strumento, è il prompt pensato bene.
A) Prepara il prompt (la parte che conta l'hai già messa in chiaro fin qui) — la scaletta è già il progetto:
- gli attori (categorie di utenti)
- le viste / schermate necessarie
- le funzionalità per ogni utente
- tutti i dati necessari e quelli opzionali
Poi si itera in poche mosse mirate ("aggiungi dati di prova", "sul monitor solo targa e baia", …).
B) Scegli UNA piattaforma (le consigliate):
- v0 (Vercel) — grafica ottima, nessun dato da configurare, link pubblico immediato. Punto di partenza consigliato.
- Claude — il miglior codice; pubblichi o scarichi.
- Gemini Canvas / AI Studio — link pubblico persistente.
▸ Confronto strumenti AI — 13 strumenti per prototipi e app (apri)
Tredici strumenti a confronto, ordinati per fase del lab, dall'idea al mockup fino all'app implementabile in azienda. Scorri la tabella di lato.
| Strumento | Cosa produce | Fase del lab | Livello tecnico | Parte da | Grafica / UX | DB reale | Deploy / pubblicazione | Integrazione azienda (API, gestionale, automazioni) | Codice / GitHub | Piano gratuito | Plus (piano a pagamento) |
|---|---|---|---|---|---|---|---|---|---|---|---|
| v0 (Vercel) | interfaccia / front-end (+ sandbox full-stack) | Mockup rapido | Basso | prompt | altissima | parziale (DB esterni) | ✓ 1-click su Vercel | via codice | ✓ (Git) | $5 crediti/mese | più crediti, progetti privati, team (~$20/mese) |
| Claude (Cowork / artifacts) | prototipo web o documento | Mockup rapido | Basso | prompt | alta | ✗ (in-memory) | link pubblico dell'artifact | no (nativo) | ✓ scaricabile | limiti sul piano free | più uso, artefatti lunghi, modelli migliori (Pro $20) |
| Gemini Canvas | prototipo / artefatto interattivo | Mockup rapido | Basso | prompt | buona | ✗ | ✓ link condiviso persistente | ecosistema Google | parziale | piano Google gratuito | modelli migliori e più uso (Google AI Pro/Ultra) |
| Lovable | app full-stack (React + Supabase) | Prototipo → app reale | Basso | prompt | alta | ✓ Supabase + auth | ✓ 1-click, hosting incluso | Stripe, API | ✓ | 5 crediti/giorno (trial) | più crediti, dominio, privati; +Supabase Pro per scala (Pro $25) |
| Replit (Agent) | app full-stack | Prototipo → app reale | Medio | prompt | buona | ✓ Postgres integrato | ✓ (autoscale/reserved a pagamento) | buona (API / DB) | ✓ | Starter: crediti/giorno, 1 app | DB in produzione, deploy scalabile, più crediti (Core $20) |
| Bolt.new | app full-stack (IDE nel browser) | Prototipo → app reale | Medio | prompt | buona | ✓ Supabase | ✓ Netlify | API / Supabase | ✓ | crediti limitati | più token/crediti, progetti privati (Pro) |
| Emergent | app full-stack autonoma (multi-agente) | Prototipo → app reale | Basso | prompt | buona | ✓ | ✓ (agente di deploy) | integrazioni + GitHub (Standard) | ✓ export, no lock-in | 10 crediti/mese | GitHub, più crediti, deploy e integrazioni avanzate (Standard) |
| Base44 | app no-code completa (front+back+DB+auth) | Prototipo → app reale | Basso | prompt | buona | ✓ | ✓ (dominio dal piano Builder) | Gmail/Slack/HubSpot/Salesforce (Builder) | ✓ (Builder) | 25 crediti msg/mese | dominio, integrazioni gestionali, export codice, più crediti (Builder $40) |
| Manus ⚠ | app full-stack + agente generalista | Prototipo → app reale | Basso | prompt / conversazione | buona | ✓ | ✓ | Stripe, ecc. | ✓ no lock-in | crediti limitati | più crediti/esecuzioni; offerta enterprise (dopo pivot Meta) |
| Google AI Studio (Build) | app no-code / low-code (più tecnica) | Prototipo → app reale | Medio | prompt + config | buona | parziale | ✓ pubblica / condividi | API Gemini / Google | ✓ esporta | quota API gratuita | quota API più alta, modelli e funzioni avanzate (a consumo) |
| Notion | tool interno (form, kanban, gallery) + automazioni | Tool interno (dati) | Basso | dati / foglio | media (stile Notion) | ✓ (database Notion) | pubblicazione web | automazioni + API (Zapier/Make) | no | buono (notifiche interne gratis) | automazioni avanzate, notifiche esterne, più spazio, API (Business) |
| Softr (o Glide / Airtable) | app / portale dai dati | Tool interno (dati) | Medio | dati (Airtable/Sheets) | buona (template) | ✓ via Airtable | ✓ pubblicazione (free) | Airtable / Sheets / API | no | sì (pubblicazione gratuita) | più utenti/app, dominio, funzioni avanzate (a pagamento) |
| Claude Code ⚙ | codice reale su repo (qualsiasi app) | Implementazione in azienda | Alto | prompt + progetto | dipende da te | ✓ qualsiasi | ✓ ovunque | massima (API, gestionale, tutto) | ✓ nativo | a consumo (API) | più budget token / modelli; uso intensivo (Max) |
Legenda: ✓ sì · parziale · ✗ no · livello tecnico Basso/Medio/Alto · ⚙ traccia tecnica avanzata · ⚠ disponibilità incerta. Ordinata per fase del lab. Dati verificati luglio 2026 (piani e limiti cambiano spesso).
Le quattro fasi
- Mockup rapido — presentare l'idea (Step 4): grafica ottima, nessun dato da gestire.
- Prototipo → app reale — un'app che gira davvero, con database.
- Tool interno (dati) — parti dai dati; collegamento col Flow Lab (automazioni).
- Implementazione in azienda — deploy, DB, integrazione col gestionale/ERP (serve un tecnico informatico e piani a pagamento).
C) Pubblica con link pubblico senza login
D) confronta i risultati di diverse piattaforme
E) test con Lighthouse
F) condividi il migliore con una valutazione tecnica.
Risorse → aggiungi qui i link (Balsamiq + mockup AI)
Metodo
critica del generato: una rubrica per valutare cosa l'AI ha prodotto (cosa è sbagliato, cosa manca, cosa finge di funzionare). Non accettare il risultato: itera e migliora.
Ponte → Flow Lab
Se dietro un bottone "deve succedere qualcosa" — parte una mail, si avvisa un collega, si registra una riga — quella è un'automazione: la costruisci nel Flow Lab. (Notion per esempio è il ponte naturale: viste + automazioni in un solo strumento.)
Altre piattaforme (facoltative)
Base44, Airtable Omnio, Softr, Glide, Lovable, ChatGPT Canvas; per pubblicare codice: Netlify, CodeSandbox; per un DB esterno: SheetDB; Notion (notion.so) per viste e automazioni.
Presentazione e feedback tra pari
Un elevator pitch (PowerPoint, Canva, video…) che contenga i link a prototipo e mockup. Durata: 3 min pitch + 3 min prototipo + 4 min domande.
Scaletta del pitch:
- Titolo, payoff, immagine — autori, corso, scuola, logo
- La situazione / la necessità / il problema
- L'app più simile già sugli store
- Il valore aggiunto della proposta
- Sintesi e funzioni principali
- Target e stima di download
- Budget, distribuzione e modello commerciale
- Immagini del prototipo, link Balsamiq live, link al mockup pubblico
- Conclusioni e grazie
Risorse → modello di presentazione · carica il materiale · modulo di feedback · rivedi i feedback
Cosa resta dopo il lab
- Il focusing: da un'idea generica a una proposta fattibile e comunicabile
- Uno sketch a mano per verificare completezza e interazione
- Un prototipo funzionante da presentare a un'agenzia, a investitori, al capo-progetto
- L'esperienza di un giro completo dall'idea al prototipo (metodo riusabile)
- Alcuni strumenti professionali in mano
- Il ponte al Flow Lab: quando l'app deve far succedere qualcosa, sai dove costruirlo
Un processo, tre lenti
Workshop 4.0
tecnologia abilitante
“conviene questa tecnologia?”
App Lab
interfaccia
“come si usa la soluzione?”
Flow Lab
automazione
“cosa succede da solo?”
L'App Lab è la lente dell'interfaccia. Il Flow Lab realizza l'automazione dietro; il Project Work le combina.
CC BY-SA — manibit.it — marcello.cenati@myitsmobilitasostenibile.eu — LinkedIn