Automha
Die gesamte Vertriebsbibliothek eines Herstellers für Lagerautomation (Kataloge, Fotos, Videos, Fallstudien) in einer App.
- Rolle
- Flutter-Entwickler: die mobile App
- Auftraggeber
- Automha, über LC Solutions
- Zeitraum
- 2021
- Plattformen
- iOS und Android aus einer Codebasis
Das Produkt
Automha entwickelt automatisierte Lager: Shuttles, Regalbediengeräte und die Software, die sie steuert. Das Vertriebsmaterial ist umfangreich und wächst ständig: Kataloge, Fotos von Anlagen, Videos, Fallstudien, Pressespiegel, Zertifikate.
Die App bündelt alles an einem Ort: nach Bereichen stöbern, nach Lösung, Branche und Produkt eingrenzen, Dokumente öffnen, ohne die App zu verlassen, sie für Funklöcher auf dem Smartphone speichern, sie teilen und dem Unternehmen schreiben.
- 8
- Inhaltsarten, ein Muster aus Liste und Detailansicht
- 2
- Sprachen, im laufenden Betrieb umschaltbar: Italienisch und Englisch
- 4
- Anmeldewege: E-Mail, Google, Facebook, Apple
- 8,7k
- Zeilen Dart
Rundgang
Die App in Aktion
Wählen Sie eine Aufnahme oder springen Sie direkt zu einem Kapitel.
Aufgezeichnet aus dem ursprünglichen Code in Smartphone-Größe, auf einem Ersatz-Backend mit Beispielinhalten. Ohne Ton.
Funktionen
Eine Vertriebsbibliothek für die Hosentasche
01
Fünf Bereiche, ein Muster
Kataloge, Fotos, Videos, Fallstudien und Präsentationen liegen in der unteren Leiste. Jeder Bereich funktioniert gleich: oben das, was das Unternehmen hervorheben will, darunter die vollständige Liste mit Zähler, die beim Scrollen seitenweise nachlädt. Jeder Eintrag hat dieselben drei Aktionen: herunterladen, ansehen, teilen.
02
Filter und Suche
Ein Seitenpanel grenzt Fotos, Videos und Fallstudien nach Lösung, Branche und Produkttyp ein; die Auswahl lässt sich kombinieren, und der Zähler zieht mit. Jeder Bereich hat außerdem seine eigene Suche, die der Server übernimmt, sodass sie die gesamte Bibliothek abdeckt und nicht nur das, was schon auf dem Bildschirm ist.
03
Dokumente öffnen sich in der App
Stöbern ist frei; zum Öffnen oder Herunterladen braucht man ein Konto, per E-Mail oder mit Google, Facebook oder Apple. Danach öffnen sich PDFs in einem integrierten Viewer, Fotos im Vollbild und Produkte auf einer Seite mit Bild, Beschreibung und Datenblatt.
04
Auf dem Smartphone gespeichert
Ein Dokument lässt sich für später speichern: Es wird auf dem Gerät abgelegt, eine Benachrichtigung bestätigt das, das Download-Symbol verschwindet aus dem Eintrag, und die Datei landet unter „Downloaded resources“, nach Typ gruppiert und offline verfügbar. Beim Teilen geht dieselbe Datei an das Teilen-Menü des Systems.
05
Der Rest des Unternehmens, zwei Sprachen
Das Seitenmenü führt zur Produktpalette, zu Pressespiegeln, Zertifikaten und einem Kontaktformular für den Vertrieb. Italienisch und Englisch wechseln im laufenden Betrieb: Beschriftungen, Listen und sogar die Dokumente ziehen mit.
Unter der Haube
So wurde es entwickelt
Ein Muster, einmal geschrieben
Acht Inhaltstypen teilen sich ein Modell, einen Service und einen Satz Widgets: Ein Typname bestimmt den Endpunkt, die Beschriftungen und was das Öffnen eines Eintrags bedeutet (Viewer, Player oder Produktseite). Jeder Bildschirm hat seinen eigenen BLoC auf RxDart-Streams; Anmeldestatus und die Liste der gespeicherten Einträge werden über InheritedWidgets geteilt.
Vom Server gesteuert
Listen, hervorgehobene Einträge, Filter, sogar die Begrüßungsnachricht kommen aus der REST-API in der Sprache, die der Nutzer gewählt hat, sodass sich der Inhalt der App ohne neues Release ändert. Derselbe Einstellungsaufruf liefert die minimal unterstützte Version: Ein älterer Build wird zum Update aufgefordert, bevor er irgendetwas anderes tun kann.
Dateien, Tokens, Benachrichtigungen
Downloads werden mit ihren Metadaten in den Dokumentenordner der App geschrieben, sodass die Offline-Liste Neustarts übersteht. Tokens liegen im sicheren Speicher der Plattform, und ein abgelaufenes wird beim Start erneuert. Push-Benachrichtigungen kommen über Topics von Firebase Cloud Messaging, eines pro Sprache; eine lokale Benachrichtigung bestätigt jeden Download und öffnet beim Antippen die Datei.
Eine Live-App aufzeichnen
Die App ist echt. Der Katalog in diesen Aufnahmen nicht.
Dieses Produkt ist in Betrieb, mit echten Konten, echten Dokumenten und einem echten Posteingang hinter dem Kontaktformular. Nichts davon gehört in ein Portfolio, deshalb verwenden die Aufnahmen nichts davon.
- 1
Der Code von 2021, gebaut für den Browser
Der ursprüngliche Quellcode wird mit der Flutter-Version kompiliert, für die er geschrieben wurde, und läuft in Smartphone-Größe in Chrome. Was es nur auf einem Smartphone gibt (Push-Benachrichtigungen, sicherer Speicher, das Dateisystem, das Teilen-Menü), wird durch kleine Platzhalter ersetzt.
- 2
Ein Ersatz-Backend in der App
Die Netzwerkschicht übergibt jede Anfrage an ein kleines Backend, das in die Demo kompiliert ist. Es antwortet mit den Routen und JSON-Strukturen, die die App erwartet (seitenweise Listen, hervorgehobene Einträge, Filter und Suche als Header übergeben), sodass Modelle, BLoCs und Bildschirme unverändert laufen.
- 3
Ein Beispielkatalog, von Grund auf erstellt
Titel und Texte sind erfunden, die Bilder zeichnet ein Skript, die Dokumente sind Platzhalter-PDFs, die bei Bedarf erzeugt werden. Das sagt auch die Begrüßungsnachricht, die die App beim Start zeigt.
- 4
Per Skript aufgezeichnet, offline
Ein Storyboard steuert die App mit echten Touch-Events und zeichnet den Bildschirm auf. Das Aufnahmeskript blockiert jede Anfrage, die den Rechner verlassen würde, sodass keine Aufnahme den echten Dienst erreichen kann, nicht einmal versehentlich.
Logo und Farben stammen aus der App. Alles in den Listen (Titel, Bilder, Dokumente) ist Beispielinhalt und stammt nicht von Automha.
Ein Platzhalterkatalog aus den Beispielinhalten, geöffnet im PDF-Viewer der App.
Alle Bildschirme
Alle Screenshots im Überblick
BegrüßungsnachrichtEine auf dem Server festgelegte Nachricht begrüßt den Nutzer beim Start. In diesem Build erklärt sie, was die Demo ist. KatalogeStartseite: oben die hervorgehobenen Einträge, darunter die vollständige Liste mit Herunterladen, Ansehen und Teilen bei jedem Eintrag. FotosFotos von Anlagen in einem zweispaltigen Raster, seitenweise geladen. FilterFotos, Videos und Fallstudien lassen sich nach Lösung, Branche und Produkttyp eingrenzen. Gefilterte ListeDie Liste und ihr Zähler folgen den gewählten Filtern. VideosVideos öffnen sich im Player des Smartphones. FallstudienFallstudien von Kunden als PDF-Dokumente. SucheJeder Bereich hat seine eigene Suche. AnmeldungE-Mail und Passwort, Google, Facebook oder Apple. Wer ein Dokument öffnen oder herunterladen will, landet hier. PDF-ViewerKataloge, Fallstudien, Pressespiegel und Zertifikate öffnen sich in der App. FotoansichtFotos öffnen sich im Vollbild. ProdukteDie Produktpalette, erreichbar über das Seitenmenü. ProduktseiteBild, Beschreibung und das Datenblatt zum Herunterladen. HerunterladenDas Download-Symbol speichert das Dokument auf dem Smartphone und verschwindet danach aus dem Eintrag. SeitenmenüDie übrigen Bereiche und die Sprachauswahl. Heruntergeladene InhalteAlles Gespeicherte, nach Typ gruppiert und ohne Verbindung verfügbar. PressespiegelPressespiegel, ein Eintrag pro Ausgabe. Dokumente und ZertifikateZertifikate und Unternehmensdokumente. KontaktformularEine Anfrage an den Vertrieb, direkt aus der App. ItalienischOberfläche und Inhalte folgen der gewählten Sprache.
Nächste Fallstudie
Massage Mate →