Refaktorierung von mobilen Anwendungen
Die besten Ideen für neue Funktionen und andere Verbesserungen bestehender Softwareanwendungen kommen oft von begeisterten Nutzern. Die Implementierung neuer Funktionen bietet Möglichkeiten zur Optimierung von mobilen Anwendungen. Nach mehreren Jahren, in denen mein Freund Casey die App "MobileTogether Solar Data Tracking" zur Überwachung der Leistung einer Solaranlage auf einem Dach genutzt hat, hatte er einen Vorschlag.
Die App zeigte eine Seite mit Diagrammen und Tabellen, um die Produktion monatlich über ein Jahr darzustellen, sowie eine weitere Seite, um die tägliche Produktion der letzten 30 Tage anzuzeigen. Navigationsschaltflächen auf jeder Seite ermöglichten einen einfachen Wechsel zwischen den Ansichten. Casey schlug vor, die App so zu überarbeiten, dass alle Diagramme und Tabellen auf einer einzigen Seite angezeigt werden. Im Laufe der Zeit haben mobile Nutzer sich daran gewöhnt, dass mobile Apps Daten auf langen Seiten präsentieren, die sich mit einer einfachen Wischbewegung scrollen lassen. Eine App, die alle Informationen auf einer Seite anzeigt, würde sich flüssiger anfühlen und moderner wirken.
Der Solar Data Tracker ist eine plattformübergreifende App für Android, iOS und Windows, die aus einer einzigen Quelle mit dem Altova MobileTogether Designer erstellt wurde. Die Zusammenführung der Berichte auf einer Seite bot auch die Möglichkeit, die Implementierung zu überarbeiten, um die App zu vereinfachen. Der MobileTogether Designer ist ein Drag-and-Drop-Tool mit Unterstützung für Kopieren und Einfügen von App-Steuerelementen sowie Werkzeugen zur Überarbeitung mobiler Apps, indem Verwendungen von lokalen und globalen Variablen, Funktionen, Aktionsgruppen, Stylesheets, externen Datenquellen und mehr identifiziert werden. Diese Funktionen haben die Überarbeitung erheblich vereinfacht.
Hier ist ein Vergleich der Ansicht der Seite für den monatlichen Solarstromerzeugungsbericht und der Seite für den täglichen Bericht, wie sie auf einem Android-Smartphone angezeigt werden:
![[Pasted image 20250224145704.png]]
Und hier ist die neue Version auf einer einzigen Seite, mit allen Daten übersichtlich zusammengefasst, wie sie auf einem iPhone beim Scrollen angezeigt werden:
![[Pasted image 20250224145734.png]] Der Button "Neuen Rechnungsdatensatz hinzufügen" in der Mitte oben war früher das Ende der monatlichen Berichtseite. Jetzt fließt der Bericht kontinuierlich in die täglichen historischen Daten. Wir haben eine Regel am unteren Rand hinzugefügt, um das Ende der Seite zu kennzeichnen.
Die Schritte zur Erstellung der neuen Version im MobileTogether Designer waren einfach:
Kopieren Sie die Designelemente von der Seite des täglichen Berichts und fügen Sie sie am Ende der monatlichen Seite ein
Entfernen Sie die unnötigen Navigationsbuttons für die Seiten
Überarbeiten und vereinfachen Sie die Beschriftungen der Überschriften
Definieren Sie die Tabelle mit den täglichen Daten neu, um die Scrollfunktion zu entfernen
Löschen Sie die alte Seite für den täglichen Bericht aus der Workflow-Hierarchie
Der MobileTogether Designer enthält ein Validierungswerkzeug, mit dem logische Fehler oder Warnungen überprüft werden können, sowie eine "Rückgängig"-Funktion, mit der man jede Änderung einzeln rückgängig machen kann, um genau zu ermitteln, welche Änderung möglicherweise ein Problem verursacht hat.
Wir müssen auch eine Aktionsgruppe überarbeiten. Wenn der Benutzer einen neuen täglichen Wert oder Informationen, die auf einer Stromrechnung angegeben sind, hinzufügt, müssen die Diagramme ebenfalls mit den neuen Daten aktualisiert werden. Die ursprüngliche Implementierung verwendete separate Aktionsgruppen, um die Diagramme auf jeder Seite zu aktualisieren. Wir können den Dialog für die Aktionsgruppe öffnen und Aktionen zu einer bestehenden Aktionsgruppe hinzufügen, um auch die täglichen Diagramme zu aktualisieren.
Wir haben auch den Namen der Aktionsgruppe geändert, um ihre Funktionen besser zu beschreiben. Wenn wir den Namen der Aktionsgruppe im Dialogfenster "Aktionsgruppen" ändern, aktualisiert der Designer den Namen automatisch an allen Stellen, an denen die Aktionsgruppe verwendet wird.
Das integrierte Fenster des MobileTogether-Simulators führt die Lösung sofort aus, sodass wir die Logik testen, die Benutzeroberfläche so darstellen können, wie sie auf verschiedenen Android-, iOS-, Windows- und anderen Geräten angezeigt wird, und Änderungen an den Arbeitsablaufsdaten während der Ausführung überprüfen können. Der Simulator bietet außerdem umfangreiche Debugging-Funktionen für eine detaillierte Beobachtung und Nachverfolgung des Ausführungsverhaltens.
Das Menü "Refaktorieren" enthält Befehle, die die Verwendung verschiedener Designelemente auflisten oder Elemente anzeigen, die in der Anwendung nirgendwo verwendet werden.
Die Liste für Aktionsgruppen enthält die ursprüngliche Gruppe, die die täglichen Produktionsdiagramme aktualisiert hat. Da die Seite für den täglichen Bericht nicht mehr Teil der App ist, wird diese Aktionsgruppe nie benötigt und kann auch gelöscht werden.
Wir haben den neuen mobilen Datenerfassungstracker eingesetzt, und Casey präsentierte ihn begeistert auf einer Ausstellung für Elektrofahrzeuge in einem Park mit schlechter Mobilfunkabdeckung und ohne WLAN.
Testen Sie alle Funktionen von MobileTogether zur Refaktorierung von mobilen Anwendungen, indem Sie den kostenlosen MobileTogether Designer herunterladen.