Automha
Toda la biblioteca comercial de un fabricante de automatización de almacenes (catálogos, fotos, videos, casos de estudio) en una sola app.
- Rol
- Desarrollador Flutter: la app móvil
- Cliente
- Automha, a través de LC Solutions
- Periodo
- 2021
- Plataformas
- iOS y Android desde una única base de código
El producto
Automha diseña almacenes automáticos: lanzaderas, transelevadores y el software que los gobierna. Su material comercial es amplio y no deja de crecer: catálogos, fotos de instalaciones, videos, casos de estudio, apariciones en prensa, certificados.
La app lo reúne todo en un solo lugar: explorar por sección, acotar por solución, sector y producto, abrir documentos sin salir de la app, guardarlos en el teléfono para cuando no hay cobertura, compartirlos y escribir a la empresa.
- 8
- tipos de contenido, un único patrón de lista y detalle
- 2
- idiomas, que se cambian al instante: italiano e inglés
- 4
- formas de iniciar sesión: correo electrónico, Google, Facebook, Apple
- 8,7k
- líneas de Dart
Recorrido
La app en acción
Elige una grabación o salta directamente a un capítulo.
Grabado a partir del código original en tamaño de teléfono, sobre un backend sustituto con contenido de ejemplo. Sin sonido.
Qué hace
Una biblioteca comercial que cabe en el bolsillo
01
Cinco secciones, un patrón
Catálogos, fotos, videos, casos de estudio y presentaciones están en la barra inferior. Cada sección funciona igual: arriba, lo que la empresa quiere destacar; después, la lista completa con un contador, cargada página a página a medida que te desplazas. Cada entrada tiene las mismas tres acciones: descargar, ver, compartir.
02
Filtros y búsqueda
Un panel lateral acota fotos, videos y casos de estudio por solución, sector y tipo de producto; las opciones se combinan y el contador las sigue. Cada sección tiene además su propia búsqueda, resuelta por el servidor para que abarque toda la biblioteca y no solo lo que ya está en pantalla.
03
Los documentos se abren dentro de la app
Explorar es libre; abrir o descargar requiere una cuenta, por correo electrónico o con Google, Facebook o Apple. A partir de ahí, los PDF se abren en un visor integrado, las fotos a pantalla completa y los productos en una página con imagen, descripción y ficha técnica.
04
Guardado en el teléfono
Un documento se puede guardar para más tarde: se almacena en el dispositivo, una notificación lo confirma, el icono de descarga desaparece de la entrada y el archivo pasa a «Downloaded resources», agrupado por tipo y disponible sin conexión. Compartir entrega ese mismo archivo al menú para compartir del sistema.
05
El resto de la empresa, en dos idiomas
El menú lateral lleva a la gama de productos, las apariciones en prensa, los certificados y un formulario de contacto con la oficina comercial. El cambio entre italiano e inglés es inmediato: las etiquetas, las listas y los propios documentos cambian con él.
Por dentro
Cómo se construyó
Un patrón, escrito una sola vez
Ocho tipos de contenido comparten un modelo, un servicio y un conjunto de widgets: el nombre de un tipo decide el endpoint, las etiquetas y qué significa abrir un elemento (visor, reproductor o página de producto). Cada pantalla tiene su propio BLoC sobre streams de RxDart; el estado de la sesión y la lista de elementos guardados se comparten mediante inherited widgets.
Gobernada por el servidor
Las listas, los destacados, los filtros e incluso el mensaje de bienvenida llegan de la API REST en el idioma que eligió el usuario, así que lo que muestra la app cambia sin publicar una nueva versión. La misma llamada de configuración incluye la versión mínima admitida: a una versión más antigua se le pide que se actualice antes de poder hacer nada más.
Archivos, tokens, notificaciones
Las descargas se escriben en la carpeta de documentos de la app con sus metadatos al lado, así que la lista sin conexión sobrevive a los reinicios. Los tokens se guardan en el almacenamiento seguro de la plataforma y uno caducado se renueva al arrancar. Las notificaciones push llegan a través de topics de Firebase Cloud Messaging, uno por idioma; una notificación local confirma cada descarga y abre el archivo al tocarla.
Grabar una app en producción
La app es real. El catálogo de estas grabaciones, no.
Este producto está vivo, con cuentas reales, documentos reales y una bandeja de entrada real detrás de su formulario de contacto. Nada de eso tiene cabida en un portfolio, así que las grabaciones no lo usan.
- 1
El código de 2021, compilado para el navegador
El código fuente original se compila con la versión de Flutter para la que se escribió y se ejecuta en Chrome en tamaño de teléfono. Lo que solo existe en un teléfono (notificaciones push, almacenamiento seguro, sistema de archivos, menú para compartir) se reemplaza por pequeños sustitutos.
- 2
Un backend sustituto dentro de la app
La capa de red entrega cada petición a un pequeño backend compilado dentro de la demo. Responde con las rutas y las estructuras JSON que espera la app (listas paginadas, destacados, filtros y búsqueda pasados como cabeceras), así que modelos, blocs y pantallas funcionan sin cambios.
- 3
Un catálogo de ejemplo, hecho desde cero
Los títulos y los textos son inventados, las imágenes las dibuja un script y los documentos son PDF de relleno generados al vuelo. El mensaje de bienvenida que muestra la app al arrancar lo explica.
- 4
Grabado por un script, sin conexión
Un storyboard maneja la app con eventos táctiles reales y graba la pantalla. La herramienta de grabación rechaza cualquier petición que salga de la máquina, así que una toma no puede llegar al servicio real ni siquiera por error.
El logotipo y los colores son los de la propia app. Todo lo que aparece en las listas (títulos, imágenes, documentos) es contenido de ejemplo y no procede de Automha.
Un catálogo de relleno del contenido de ejemplo, abierto en el visor de PDF de la app.
Todas las pantallas
La colección completa de capturas
Mensaje de bienvenidaUn mensaje configurado en el servidor recibe al usuario al arrancar. En esta compilación explica qué es la demo. CatálogosInicio: los destacados arriba y después la lista completa, con descargar, ver y compartir en cada entrada. FotosFotos de instalaciones en una cuadrícula de dos columnas, cargadas página a página. FiltrosLas fotos, los videos y los casos de estudio se pueden acotar por solución, sector y tipo de producto. Lista filtradaLa lista y su contador siguen los filtros seleccionados. VideosLos videos se abren en el reproductor del teléfono. Casos de estudioCasos de estudio de clientes en documentos PDF. BúsquedaCada sección tiene su propia búsqueda. Inicio de sesiónCorreo electrónico y contraseña, Google, Facebook o Apple. Abrir o descargar un documento trae aquí al visitante. Visor de PDFLos catálogos, los casos de estudio, las apariciones en prensa y los certificados se abren dentro de la app. Visor de fotosLas fotos se abren a pantalla completa. ProductosLa gama de productos, desde el menú lateral. Página de productoImagen, descripción y la ficha técnica para descargar. DescargaEl icono de descarga guarda el documento en el teléfono y desaparece de la entrada. Menú lateralLas demás secciones y el selector de idioma. Downloaded resourcesLo guardado, agrupado por tipo, disponible sin conexión. Apariciones en prensaApariciones en prensa, una entrada por número. Documentos y certificadosCertificados y documentos de la empresa. Formulario de contactoUna solicitud a la oficina comercial, desde dentro de la app. ItalianoLa interfaz y el contenido siguen el idioma elegido.
Siguiente caso de estudio
Massage Mate →