Get best of the week

Anwendungsneugestaltung - Inside Look



Mobius Bike ist ein für Tallinn entwickelter Fahrrad- und Rollerverleih (eine geografische Erweiterung ist derzeit geplant).

Die erste Release-Hypothese lautet: „Ein Fahrradverleih wird auf dem europäischen Markt gefragt sein“. Im Dezember 2019 wurde die Haupthypothese überarbeitet und nun klang es so: „Kann der Fahrrad- und Roller-Verleih aufgrund der Bequemlichkeit für den Endbenutzer und den Franchisenehmer eine maximale Verteilung erhalten?“ Um diese Frage zu beantworten, war Folgendes erforderlich:

  • Arbeiten Sie an der Optimierung der Struktur der Anwendung (sowohl internes Backend als auch externes Design und Frontend), um in Zukunft eine neue Art des Transports und eine mögliche Skalierung einzuführen
  • Stellen Sie die Mietbedingungen im Admin-Bereich ein

Lyubov Nikiforuk - Projektmanager




Wichtige Bildschirme der Mobius-Fahrradanwendung vor der Neugestaltung.

Eine meiner ersten Aufgaben als Produktdesigner bestand darin, Layouts für die Einführung einer neuen Art von Transport vorzubereiten - Elektroroller. Nachdem ich mit den Layouts fertig war, beschloss ich, einige Änderungen an den Design- und UX-Anwendungen vorzunehmen und ein kleines Redesign-Konzept zu erstellen. Dem Team wurden neue Layouts angezeigt. Ich bekam ein Feedback: Die Jungs gaben Ratschläge und teilten ihre Meinungen. Infolgedessen wurden eine Reihe von Schlüsselbildschirmen eingegeben.

Das geplante zweimonatige Code-Refactoring rückte näher und wir beschlossen, dem Kunden das neue Design zu zeigen, um den Code für die neue Schnittstelle zu optimieren, es sei denn, der Kunde stimmt dem Redesign natürlich zu. Wir haben Layouts vorgestellt und erklärt, wie ein neues Design die Interaktion mit der Anwendung vereinfachen kann und welche Vorteile es für das Unternehmen bringt. Und bereits während der Präsentation haben wir festgestellt, dass das Design "ging". Das Redesign wurde genehmigt, und jetzt haben wir mit dem Refactoring mit einer neuen Benutzeroberfläche begonnen und UX neu gestaltet.



Varianten der Schlüsselbildschirme, die während des Redesign-Prozesses erstellt wurden

Arbeitsorganisation


Da wir keine klar definierte technische Aufgabe hatten und unser Service zusammen mit dem Geschäft entwickelt wurde, mussten wir entscheiden, wie wir die Arbeit ausführen würden: welche Aufgaben wir überhaupt übernehmen sollten, wie wir den Fortschritt verfolgen und das Ergebnis bewerten sollten. Vor allem die agile Methode passte zu unseren Aufgaben. Die Dauer jedes Sprints haben wir in zwei Wochen ermittelt. Jeden Tag hielten wir Stand-Ups ab - diskutierten aktuelle Probleme, tauschten Ideen aus, lösten Probleme. Am Ende jedes Sprints wurde eine Demo durchgeführt - sie zeigten dem Kunden die Ergebnisse der für den Sprint geleisteten Arbeit.



Agil in seiner ganzen Pracht



Test Roller in unserem Büro

Navigation


Das erste, was wir ändern wollten, war die Navigation durch die Anwendung. Anstelle eines „Burgers“ haben wir ein unteres Tab-Menü erstellt (untere Navigation). Sie haben wahrscheinlich bemerkt, dass viele Anwendungen auf diese Art der Navigation umsteigen. Dies ist verständlich, da das Registerkartenmenü den Zugriff auf die Hauptabschnitte der Anwendung vereinfacht, selbst wenn eine Person das Telefon mit einer Hand hält. Dies ist jedoch nicht der einzige Grund für die Verwendung dieser Art der Navigation. Die Anwendung wurde auf React Native entwickelt, daher mussten wir die Funktionen dieser Plattform berücksichtigen:

(). , , , , , , . . . ,

— front-end




— «». — (bottom navigation)

, , UI-kit


Zusätzlich zur Änderung der Navigation haben wir die Skalierungssteuerung auf dem Anwendungsbildschirm aufgegeben. Verließ den Zoom mit Gesten. Modale Fenster, Dialoge und Teile der Bildschirme wurden durch Wischbildschirme ersetzt. Wiederum, weil es bequemer ist, die Anwendung mit einer Hand zu verwenden - ein solcher Bildschirm kann einfach nach unten "gewischt" und geschlossen werden.



Beispiele für Swipe-up-Bildschirme in der Mobius-Fahrradanwendung nach der Neugestaltung

Wir haben auch den Registrierungsprozess in der Anwendung vereinfacht, indem wir uns über Google und Facebook angemeldet haben. Neben der Verknüpfung von Bankkarten wurde die Möglichkeit hinzugefügt, mit Apple Pay und Google Pay zu bezahlen.



Der Bildschirm für die Eingabe der Anwendung und die Zahlung mit Apple Pay

Um das Hinzufügen neuer Funktionen zur Anwendung in Zukunft zu vereinfachen, haben wir eine Bibliothek mit Komponenten erstellt und deren Anwendung und Interaktionsprinzipien beschrieben.



Mobius Bike UI-Kit-Anwendungen

Refactoring und Umstellung auf GraphQL


Die Hauptziele der Neugestaltung waren:

  • Erstellen Sie ein flexibleres und skalierbareres Komponentensystem, mit dem Sie problemlos neue Funktionen hinzufügen können, z. B. eine andere Art des Transports, ohne das Erscheinungsbild und die allgemeine Logik der Interaktion mit der Anwendung zu beeinträchtigen
  • Erleichtern und vereinfachen Sie die Schnittstelle
  • "Aktualisieren" Sie das Erscheinungsbild der Anwendung


Neben der Aktualisierung der Anwendungsoberfläche, der sichtbaren Seite des Redesigns, war der Übergang von der RESTful-API zu GraphQL ein sehr wichtiger Teil.

Einfach ausgedrückt ist GraphQL eine Syntax, die beschreibt, wie ein Client (Telefon / Anwendung) mithilfe spezieller Abfragen Daten von einem Server empfängt. Abhängig von der Anforderung gibt der Server diese oder jene Daten an.

Artyom Bukhtoyarov - DevOps / Backend-Entwickler


GraphQL hat drei Hauptmerkmale:

  • ermöglicht dem Kunden, genau anzugeben, welche Daten er benötigt
  • Erleichtert die Aggregation von Daten aus mehreren Quellen
  • verwendet ein Typsystem zur Beschreibung von Daten


GraphQL fungiert als Adapterschicht zwischen der Anwendungsschnittstelle und externen Diensten. Auf diese Weise können Sie die Verarbeitung vieler verschiedener Anforderungen auf die Rückseite übertragen. Das heißt, wenn Sie ein neues Transportprotokoll verbinden, müssen Sie es auf der Rückseite verbinden, und das Layout empfängt alle Daten in einer einheitlichen Form von GraphQL. So haben wir den Bedarf an zusätzlichen Satzarbeiten beim Hinzufügen eines neuen Transporttyps reduziert und die Anzahl der verarbeiteten Anforderungen in der Anwendung reduziert.

Darüber hinaus haben wir beim Refactoring die folgenden Vorteile der Verwendung von GraphQL hervorgehoben:

  • bequeme Dokumentation für den Entwickler
  • Eine gute Lösung für WebSocket, sowohl für das Backend als auch für das Frontend
  • GraphQL erleichtert Entwicklern das Navigieren in der Codestruktur
  • Eine flexiblere Entwicklung im Vergleich zur RESTful-API ermöglicht es Ihnen, schneller und einfacher etwas Neues hinzuzufügen (in unserem Fall handelt es sich um eine neue Art des Transports).


Es war lustig, als das allererste Fahrradschloss aus China seine geografische Lage in China bestimmte, obwohl es sich physisch in St. Petersburg befand. Die Software für diese Sperre wurde verschlüsselt und wir mussten nach einer Entschlüsselungsmethode suchen, um Änderungen an den Einstellungen vorzunehmen.

Anfangs, als wir nur eine Transportart hatten, arbeitete der Server zum Anschließen von Fahrrädern mit dem Haupt-Backend zusammen. Anschließend haben wir den Server für Fahrradschlösser als unabhängigen Dienst herausgenommen, der auf separaten Servern bereitgestellt werden kann. Dadurch konnten wir die Belastung des Hauptservers reduzieren und zusätzliche Skalierungsmöglichkeiten bereitstellen. Um Nachrichten zwischen Diensten zu übertragen, verwenden wir RabbitMQ. Und es war sehr praktisch, dass er ein Plugin für mqtt hat - das Protokoll, mit dem unsere Roller arbeiten, was es einfach machte, ein neues Transportmittel hinzuzufügen.

Zahlung in der Anwendung. Ursprünglich wollten wir Bankkarten in den Antrag selbst einfügen, aber am Ende haben wir uns für eine Umleitungsoption zur Bankseite entschieden, und der gesamte Vorgang des Hinzufügens einer Karte findet dort bereits statt. Diese Methode erwies sich als viel einfacher zu implementieren.

Franchise und Verwaltung


Der Dienstbesitzer hatte bestimmte Anforderungen an das Admin-Panel der Anwendung. Da geplant ist, den Service als Franchise zu verkaufen, sollte jeder Franchisenehmer in der Lage sein, die Reisekosten, Tarifparameter, Abonnements usw. zu bearbeiten.

Aus diesem Grund haben wir das Admin-Panel neu gestaltet, um neue Parkbesitzer zu verbinden. Verschiedene Rollen hinzugefügt - der Eigentümer des Parks und der Eigentümer des Netzwerks. Wir haben einen ganzen Abschnitt zum Hinzufügen und Bearbeiten von zeitbasierten Tarifen, Abonnements und Bußgeldern erstellt. In jeder Stadt kann der Parkbesitzer seine eigenen Tarife festlegen und ändern. Sie ermöglichten es auch, die Änderungen durch den Netzwerkadministrator zu moderieren. Wir haben die Struktur des Admin-Panels erweitert, um neue Transportarten hinzuzufügen.

Probleme


Natürlich gab es einige Schwierigkeiten. Wir haben uns seitdem geweigert, die Route in der Geschichte der Reisen zu visualisieren. Das GPS-Modul im Fahrradschloss überträgt die Koordinaten nicht immer korrekt. Und anstelle einer schönen Routenlinie, wie bei einer Dribble-Aufnahme, haben wir Folgendes erhalten:



Warten auf VS-Realität

Es gab ein Problem bei der technischen Implementierung von Google Maps unter React Native. Die Markierung auf der Karte muss ständig neu gezeichnet werden, um seine Position auf der Karte zu ändern. Das Neuzeichnen von Vektorgrafiken in großen Mengen ist nicht optimiert und daher war bei bestimmten Einstellungen alles sehr langsam. Und wir haben uns entschlossen, Vektormarkierungen auf der Karte durch Rastermarkierungen im PNG-Format zu ersetzen. Dies führte zu einer signifikanten Erhöhung der Geschwindigkeit der Anwendung.

Viele Fragen betrafen die Einführung des Tarifsystems und des Abonnements. Wir haben versucht, verschiedene Fälle anzugeben: Was tun, wenn das Abonnement während der Reise endet, ob die Möglichkeit besteht, verschiedene Abonnements für eine Transportart zu kaufen, ob es sich lohnt, Abonnements automatisch zu verlängern, wie die Kosten der Reise berechnet werden usw.

Infolgedessen haben wir uns für die folgende Bewertungsoption entschieden: Die Reisezeit ist in ungleiche Segmente unterteilt und jedes Zeitintervall wird separat berechnet. Zum Beispiel kosten die ersten 15 Minuten der Reise 2 €. Wenn Sie länger als 15 Minuten, aber weniger als eine halbe Stunde fahren, betragen die Kosten für die Reise 3,5 €, von 30 Minuten bis zu einer Stunde - 5 € usw. Um dem Benutzer das Navigieren in den Tarifen zu erleichtern, haben wir uns entschlossen, die Kostenberechnung zu visualisieren und sie zu einem Fortschrittsbalken zu machen. Jetzt kann der Benutzer in Echtzeit sehen, wie sich die Kosten der Reise ändern.



Kostenvisualisierung in Form von Fortschrittsbalken



Bildschirme mit Tarifen und Abonnements

Einige Benutzer hatten die Möglichkeit, die Reise nicht zu bezahlen: Sie fügten eine Bankkarte hinzu, löschten sie und fuhren kostenlos. Als wir dies fanden, begannen wir, 1 € zu sperren, um unsere Zahlungsfähigkeit zu überprüfen, und entfernten die Möglichkeit, die Karte während der Reise oder bei unbezahlten Schulden zu entfernen.

Manchmal gab es auch Probleme beim Abschluss der Reise. Um die Radtour abzuschließen, müssen Sie das Schloss schließen, das Informationen an den Server überträgt. Die Burg übermittelte die Daten jedoch nicht immer pünktlich. Und am Ende könnten die Leute Schulden in Höhe von mehreren hundert Euro für vermeintlich unvollendete Reisen machen. Wir haben beschlossen, große Mengen manuell zu prüfen und die automatische Aufzeichnung für sie zu entfernen. Es gab fast keine Beschwerden, da in Europa nur wenige Menschen SMS-Benachrichtigungen haben. In Russland wäre das anders.

Ergebnisse


Vorderes Ende


Eines der Hauptmerkmale der Entwicklung von React Native ist die Verfolgung der Komponentenleistung. Um eine Verringerung der fps zu verhindern, lohnt es sich:
  • Überwachen Sie die Anzahl der Renderer (Neuzeichnungen). Eine Komponente sollte nur neu gezeichnet werden, wenn die neuen Daten, die in sie eingehen, den Status der Schnittstelle wirklich ändern müssen
  • Verwenden Sie native animierte Animationen aus dem Standardpaket React Native mit dem Schlüssel useNativeDrive in der Animationskonfiguration oder dem Paket Reanimated
  • Überprüfen Sie den JS-Code der Pakete oder Komponenten, die dem Projekt hinzugefügt wurden. Möglicherweise werden nicht alle verfügbaren Pakete optimiert oder verwenden die Funktionen von React Native korrekt. Auch bei der Entwicklung von React Native sollten Unterschiede zwischen den Plattformen berücksichtigt werden. Ein und derselbe Code unter iOS und Android kann auf völlig unterschiedliche Weise funktionieren

Die Stärke von React Native kann als Vielseitigkeit bezeichnet werden. Es sind keine zwei verschiedenen Entwicklungsteams für iOS und Android erforderlich. Außerdem können Sie häufig Entwurfskonzepte implementieren, die auf nativen Plattformen schwieriger zu entwickeln sind.

Die Schwäche von React Native ist nicht seine volle Ursprünglichkeit. Sie müssen ständig sicherstellen, dass Sie JS-Thread nicht überladen. Die Schmerzen beim Aktualisieren und Installieren nativer Pakete bis zur Version 0.60 bis zur Einführung des Autolinkers.

Backend


Die Umstellung auf GraphQL vereinfachte in den meisten Fällen die Entwicklung der API. Dies ist sowohl für den Entwickler als auch für den Kunden klarer geworden.

GraphQL-Vorteile:
  • Es ist möglich, die API automatisch zu dokumentieren, und dies ist sehr praktisch
  • ermöglicht flexibleres Arbeiten mit der API. Der Kunde wählt nur die Daten aus, die er gerade benötigt
  • Out-of-the-Box-Unterstützung für Web-Sockets, was sehr wichtig war, da wir häufig Echtzeitdaten aktualisieren
  • Bei Bedarf können wir problemlos Skalartypen schreiben und später wiederverwenden


GraphQL-Schwächen:
  • Es ist schwieriger, Features nach Art der Paginierung zu erstellen. Ich muss zusätzliche Technologien anwenden
  • Standardmäßig gibt es keinen Namespace. Sie müssen sich selbst um die Trennung der API kümmern. Gleichzeitig werden veraltete Felder unterstützt, was die Lebensdauer des Entwicklers weiter vereinfacht
  • Sie müssen die Verschachtelungsebenen auf Abfragen überwachen. Sie können eine Anfrage mit viel Verschachtelung schreiben und dann lange auf eine Antwort warten


Schnittstelle


Wenn Sie an einem Redesign arbeiten, müssen Sie bedenken, dass Sie nicht aus Designgründen entwerfen sollten. In unserem Fall ermöglichte die neue Benutzeroberfläche die Vereinfachung der Benutzerinteraktion mit der Anwendung, auch wenn eine Person das Telefon mit einer Hand hält. Wir haben die Funktionen von React Native berücksichtigt und zur Reduzierung der Verschachtelung von einem „Burger“ zur unteren Navigation gewechselt. Es ist auch notwendig, die Möglichkeit der Skalierung der Struktur der Anwendung festzulegen. Hier können Sie eine Komponentenbibliothek erstellen und Atomic Design anwenden.

Wir planen die Einführung von Gamification (erhalten Sie schöne Boni für zurückgelegte Kilometer), einem dunklen Thema, der Verbindung zu Telefonkontakten und der Benachrichtigung von Freunden, die in der Nähe reisen, sowie der Einführung neuer Transportmittel. Vor allem aber muss die Neugestaltung gerechtfertigt sein: um dem Unternehmen zu helfen und die Arbeit mit der Anwendung für den Benutzer zu vereinfachen.

More articles:


All Articles