Automha
Tutto il materiale commerciale di un produttore di magazzini automatici (cataloghi, foto, video, casi di studio) in un’unica app.
- Ruolo
- Sviluppatore Flutter: l’app mobile
- Cliente
- Automha, tramite LC Solutions
- Periodo
- 2021
- Piattaforme
- iOS e Android da un’unica codebase
Il prodotto
Automha progetta magazzini automatici: shuttle, trasloelevatori e il software che li gestisce. Il suo materiale commerciale è vasto e continua a crescere: cataloghi, foto degli impianti, video, casi di studio, rassegne stampa, certificati.
L’app lo riunisce tutto in un solo posto: si sfoglia per sezione, si filtra per soluzione, settore e prodotto, si aprono i documenti senza uscire dall’app, li si conserva sul telefono per quando manca il segnale, li si condivide e si scrive all’azienda.
- 8
- tipi di contenuto, un unico schema elenco-dettaglio
- 2
- lingue, che si cambiano al volo: italiano e inglese
- 4
- modi per accedere: e-mail, Google, Facebook, Apple
- 8,7k
- righe di Dart
Tour guidato
L’app in azione
Scegli una registrazione, o salta direttamente a un capitolo.
Registrate dal codice originale in formato smartphone, su un backend sostitutivo con contenuti di esempio. Senza audio.
Cosa fa
Una libreria commerciale che sta in tasca
01
Cinque sezioni, un solo schema
Cataloghi, foto, video, casi di studio e presentazioni stanno nella barra in basso. Ogni sezione funziona allo stesso modo: in alto ciò che l’azienda vuole mettere in evidenza, poi l’elenco completo con un contatore, caricato una pagina alla volta mentre scorri. Ogni voce ha le stesse tre azioni: scarica, visualizza, condividi.
02
Filtri e ricerca
Un pannello laterale filtra foto, video e casi di studio per soluzione, settore e tipo di prodotto; le scelte si combinano e il contatore si aggiorna. Ogni sezione ha anche la sua ricerca, gestita dal server, così copre tutta la libreria e non solo ciò che è già sullo schermo.
03
I documenti si aprono nell’app
Sfogliare è libero; per aprire o scaricare serve un account, con e-mail oppure con Google, Facebook o Apple. Da lì i PDF si aprono in un visualizzatore integrato, le foto a schermo intero e i prodotti in una pagina con immagine, descrizione e scheda tecnica.
04
Conservati sul telefono
Un documento si può salvare per dopo: viene memorizzato sul dispositivo, una notifica lo conferma, l’icona di download sparisce dalla voce e il file finisce in “Downloaded resources”, raggruppato per tipo e disponibile offline. La condivisione passa lo stesso file al pannello di condivisione del sistema.
05
Il resto dell’azienda, in due lingue
Il menu laterale porta alla gamma di prodotti, alla rassegna stampa, ai certificati e a un modulo di contatto per l’ufficio commerciale. Italiano e inglese si cambiano al volo: etichette, elenchi e documenti si adeguano.
Sotto il cofano
Come è stato realizzato
Uno schema, scritto una volta sola
Otto tipi di contenuto condividono un solo modello, un solo servizio e un solo insieme di widget: il nome del tipo decide l’endpoint, le etichette e cosa significa aprire un elemento (visualizzatore, player o pagina prodotto). Ogni schermata ha il suo BLoC su stream RxDart; lo stato dell’accesso e l’elenco degli elementi salvati sono condivisi tramite inherited widget.
Guidata dal server
Elenchi, elementi in evidenza, filtri, persino il messaggio di benvenuto arrivano dall’API REST nella lingua scelta dall’utente, così ciò che l’app mostra cambia senza un nuovo rilascio. La stessa chiamata delle impostazioni riporta la versione minima supportata: a una build più vecchia viene chiesto di aggiornarsi prima di poter fare qualsiasi altra cosa.
File, token, notifiche
I download vengono scritti nella cartella documenti dell’app, con accanto i loro metadati, così l’elenco offline sopravvive ai riavvii. I token stanno nell’archivio sicuro della piattaforma e uno scaduto viene rinnovato all’avvio. Le notifiche push arrivano tramite topic di Firebase Cloud Messaging, uno per lingua; una notifica locale conferma ogni download e, se toccata, apre il file.
Registrare un’app in produzione
L’app è vera. Il catalogo di queste registrazioni no.
Questo prodotto è attivo, con account veri, documenti veri e una vera casella di posta dietro il modulo di contatto. Niente di tutto questo può finire in un portfolio, quindi le registrazioni non ne usano nulla.
- 1
Il codice del 2021, compilato per il browser
Il sorgente originale compila con la versione di Flutter per cui era stato scritto e gira in Chrome in formato smartphone. Ciò che esiste solo su un telefono (notifiche push, archivio sicuro, file system, pannello di condivisione) è sostituito da piccoli surrogati.
- 2
Un backend sostitutivo dentro l’app
Il livello di rete passa ogni richiesta a un piccolo backend compilato nella demo. Risponde con gli endpoint e le strutture JSON che l’app si aspetta (elenchi paginati, elementi in evidenza, filtri e ricerca passati come header), così modelli, BLoC e schermate girano senza modifiche.
- 3
Un catalogo di esempio, creato da zero
Titoli e testi sono inventati, le immagini sono disegnate da uno script, i documenti sono PDF segnaposto generati al volo. Lo dice anche il messaggio di benvenuto che l’app mostra all’avvio.
- 4
Registrata da uno script, offline
Uno storyboard pilota l’app con veri eventi touch e registra lo schermo. Lo script di registrazione blocca qualsiasi richiesta diretta fuori dalla macchina, così una ripresa non può raggiungere il servizio reale nemmeno per errore.
Logo e colori sono quelli dell’app. Tutto ciò che compare negli elenchi (titoli, immagini, documenti) è un contenuto di esempio e non proviene da Automha.
Un catalogo segnaposto preso dai contenuti di esempio, aperto nel visualizzatore PDF dell’app.
Ogni schermata
La raccolta completa degli screenshot
Messaggio di benvenutoAll’avvio, un messaggio impostato sul server accoglie l’utente. In questa build spiega cos’è la demo. CataloghiHome: in alto gli elementi in evidenza, poi l’elenco completo, con download, visualizzazione e condivisione su ogni voce. FotoFoto degli impianti in una griglia a due colonne, caricata una pagina alla volta. FiltriFoto, video e casi di studio si possono filtrare per soluzione, settore e tipo di prodotto. Elenco filtratoL’elenco e il suo contatore seguono i filtri selezionati. VideoI video si aprono nel player del telefono. Casi di studioI casi di studio dei clienti, in PDF. RicercaOgni sezione ha la sua ricerca. AccessoE-mail e password, Google, Facebook o Apple. Chi apre o scarica un documento arriva qui. Visualizzatore PDFCataloghi, casi di studio, rassegne stampa e certificati si aprono dentro l’app. Visualizzatore di fotoLe foto si aprono a schermo intero. ProdottiLa gamma di prodotti, dal menu laterale. Pagina prodottoImmagine, descrizione e la scheda tecnica da scaricare. DownloadL’icona di download salva il documento sul telefono e sparisce dalla voce. Menu lateraleLe altre sezioni e il cambio di lingua. Risorse scaricateCiò che è stato salvato, raggruppato per tipo, disponibile senza connessione. Rassegna stampaLa rassegna stampa, una voce per ogni uscita. Documenti e certificatiCertificati e documenti aziendali. Modulo di contattoUna richiesta all’ufficio commerciale, da dentro l’app. ItalianoInterfaccia e contenuti seguono la lingua scelta.
Prossimo caso di studio
Massage Mate →