single-image

Flutter für die Umsetzung einer nativen App

Wir sind regelrecht in Flutter verliebt, das ist kein Geheimnis mehr. Nun wollen wir einen etwas detaillierteren Einblick in die Arbeit mit dem Software Development Kit (SDK) geben und ein aktuelles Kundenprojekt vorstellen.

5 Gründe Apps mit Flutter zu entwickeln

Doch was genau macht Flutter für uns so besonders? Wir haben die fünf wichtigsten Gründe aus unserer Sicht zusammengefasst:

  1. Multi-Plattform-Entwicklung – Eine einzige App wird über die Projektlaufzeit für iOS und Android entwickelt. Eine ganz signifikante Kosten- und Zeiteinsparung.
  2. Schnelles Layouten – In Flutter geht das Erstellen von Layouts leicht von der Hand, ohne große Probleme arbeiten UX und Entwicklung zusammen.
  3. Hot-Reload – Kurz gesagt: Speichern und das Ergebnis sofort sehen. Das ist nicht nur effizient sondern spart obendrein noch Nerven.
  4. Community hinter Flutter – Die stetig wachsende Gemeinschaft hinter Flutter gefällt uns außerordentlich gut. So stehen bereits nach kurzer Zeit eine Menge Plugins zur Verfügung, die Qualität dieser kann sich zudem sehen lassen. Google selbst treibt darüber hinaus die Entwicklung mit umfangreichen Ressourcen voran.
  5. Nähe zur Web-Applikation – Die App-Logik auslagern und sie für ein Webprojekt nutzen? Mit Flutter gar nicht so weit entfernt! Für andere Dart-Projekte (bspw. Webseiten) ist die Grundlage die gleiche. Und auch hier: effizient für die Umsetzung von digitalen Projekten.

bytepark entwickelte native App für iOS und Android

Außendienstmitarbeiter und SHK-Installateure (Sanitär, Heizung, Klima) der Roth Werke haben ab sofort ein weiteres Tool in ihrem (digitalen) Werkzeugkasten. Die App „Roth Information Assistant“, kurz RIA, ist nicht nur ein hilfreiches Informationstool für die Produkt- und Systemanwendungen, sondern bietet auch einen direkten Draht zum technischen Verkauf von Roth.

bytepark hat die native App auf Flutter basierend umgesetzt und damit eine komplexe Anwendung für iOS und Android realisiert. Wie wir bereits in einem Beitrag schrieben, haben wir Flutter schon seit einiger Zeit im Einsatz und konnten mit der App für die Roth Werke den umfangreichen Funktionsumfang effizient implementieren.

Planung geht vor

Wie grundsätzlich in jedem Softwareprojekt, ist eine sorgfältige Planung ein zentraler, wenn nicht sogar der wichtigste Baustein des gesamten Vorhabens. Im Fall einer nativen App nimmt dieser Teil etwa 30 Prozent der gesamten Zeit in Anspruch. Es wird also nicht einfach drauflos entwickelt, sondern es stehen in erster Linie planerische und theoretische Aufgaben auf dem Plan. In einem verhältnismäßig kleinen – bytepark zählt etwas mehr als 25 feste Mitarbeiter – und interdisziplinären Team liegt uns viel am gemeinsamen Austausch. Ein Projekt kann nicht auf den Schultern einer einzigen Person entstehen. Die App der Roth Werke entstand im ständigen Austausch eines kleinen Teams, das ausschließlich Aufgaben dieses Projekts übernahm.

Nichts für Einzelkämpfer

Dabei wurden in der Planung zuerst Milestones und im nächsten Schritt einzelne Tickets mit User-Stories definiert, die dann frei von jedem Teammitglied proaktiv angenommen werden konnten. So entstand ganz automatisch eine gesunde und effiziente Zuordnung der einzelnen Features zu Personen. Fühlt sich ein Teammitglied am besten dafür geeignet, eine Aufgabe zu übernehmen, wird dies im Daily Meeting besprochen und zugeteilt. Jeder setzt somit das um, was seinen Fähigkeiten am besten entspricht.

Drei Hauptfunktionen

Die App für SHK-Installateure der Roth Werke umfasst in der ersten Version drei hauptsächliche Funktionen.

Der Systemfinder unterstützt bei der Auswahl des optimalen Systems für das jeweilige Bauvorhaben. Anhand eines intuitiven Filters können die wichtigsten Eckdaten eines Gebäudes eingegeben werden. Das Ergebnis zeigt dem Nutzer die perfekt passenden Optionen für einen möglichen Einbau eines Flächenheiz- und Flächenkühlsystems auf.

Über den Produktkatalog können zu allen Bauteilen Systeminformationen wie Installationsvideos, Montageanleitungen und technische Informationen abgerufen werden.

Für den Austausch von Nachrichten und Fotos zwischen Installateuren und Außendienstmitarbeitern gibt es einen 1-zu-1-Chat. Installateuren steht dabei ein zugeordneter Ansprechpartner aus ihrem Postleitzahlbereich zur Verfügung.

Nachrichten lesen und verfassen, auch offline

Neben allen Funktionen stand bei der Entwicklung der Cross-Plattform-Applikation vor allem der Chat im Vordergrund. Für den Installateur ist er ein hilfreiches Werkzeug, denn er kann ab sofort seinem Ansprechpartner beim technischen Verkauf von Roth eine Direktnachricht senden und in Echtzeit dessen Antwort erhalten. Gerade während der Arbeit vor Ort beim Kunden bietet das einen sehr hilfreiche Möglichkeit Support zu erhalten.

App mit Chat

Um das zu realisieren, wurde eine Reihe von technischen Bestandteilen umgesetzt. Zum Tragen kommt hier beispielsweise ein offenes Nachrichtenprotokoll namens MQTT (Message Queuing Telemetry Transport). Speziell für die App der Roth Werke wurde ein eigenes Tool für den Versand von Nachrichten entwickelt.

Eine der besonderen Anforderungen bestand im Versand von Nachrichten, auch wenn der Nutzer gerade keine Internetverbindung hat. Dies kann, je nach Baustelle und Lage, durchaus vorkommen: Der Installateur ist vor Ort, befindet sich direkt an der Stelle des verbauten Systems und kann die Nachricht nicht verfassen oder bereits erhaltene Informationen nicht abrufen. Für diese Anforderung steht auf dem Gerät des Benutzers eine eigene Datenbank zur Verfügung, die bei erneuter Verbindung für den Versand bestimmte Nachrichten versendet und neue Nachrichten empfängt.

API regelt Kommunikation zwischen Client und Backend

Für den Datenaustausch zwischen der Benutzeroberfläche (der nativen App für iOS und Android) und dem Backend wurde eine eigens dafür vorgesehene API entwickelt. Damit diese API besser konfiguriert werden kann, wurde eine Administrationsoberfläche auf Basis von Voyager – einer Administrationsoberfläche für Laravel – umgesetzt. Die API regelt unter anderem grundlegende Vorgänge wie Log-in und Registrierung und bietet somit die Grundlage dafür, dass ein Benutzer auch mehr als ein Gerät verwenden oder in Zukunft seine Daten auf ein anderes Gerät übertragen kann.

Das könnte dir gefallen