Eine skalierbare Webanwendung mit einer anpassbaren UI
Beschreibung
Unser Kunde ist Transaction-Network, ein Start-up aus Deutschland, das eine B2B-Anwendung verwendet, um den After-Sales-Support digital zu transformieren. Ihr Ziel ist es, eine vollständige digitale Kundenplattform für Maschinenhersteller bereitzustellen, damit sie das Geschäft ausbauen und Erfolg im Verkauf und Kundenservice erzielen können.
Die Herausforderung
Das Start-up hatte Bedarf an einem Team erfahrener Entwickler, um eine digitale Plattform für Interaktionen zwischen Produzenten und Verbrauchern zu erstellen. Die am Markt verfügbare Software ermöglichte es nicht, ihre Geschäftsziele zu erreichen. Die Technologie war schwer zu skalieren und stellte eine Herausforderung für die Wachstumspläne des Unternehmens dar.
Zusätzlich hatten die vorhandenen Anwendungen eine schlechte UI. Hersteller, die mit ihren Kunden kommunizieren wollten, konnten ihre Portale nicht entsprechend ihren Bedürfnissen anpassen. Die Seiten jedes Kunden sahen in Bezug auf das Branding ähnlich genug aus, was sich negativ auf ihren Erfolg auswirkte.
Das Unternehmen benötigte eine neue richtig entwickelte App, die das Asset-Management, den E-Commerce, den Kundenservice und die Überwachung an einem Ort erreichbar machte. Sie waren auf der Suche nach einem Team von Angular-Experten, um eine völlig neue Webanwendung zu erstellen, die gleichzeitig ihren Kunden ein reichhaltiges Benutzererlebnis bietet und dem Unternehmen ermöglicht, seine Geschäftsziele zu erreichen.
Die Lösung
Unsere Entwickler begannen mit dem Aufbau einer zuverlässigen, skalierbaren und anpassbaren Anwendung mit einem reichhaltigen User Experience. Der erste Schritt war die UI. Das Team erstellte ein Designsystem und setzte es als wiederverwendbare UI-Komponentenbibliothek um, um Konsistenz sowohl jetzt als auch in der Zukunft sicherzustellen.
Die erste Version des Produkts war eine E-Commerce-Webanwendung, die einen Katalog von verfügbaren Maschinenteilen zum Kauf enthielt. Nachdem unsere Entwickler beobachtet hatten, wie Benutzer mit der Anwendung interagierten, kamen sie zu dem Schluss, dass tatsächlich zwei Anwendungen die beste Option sein würden – eine für Original Equipment Manufacturers (OEM) und eine für Kunden. Der Kunde stimmte zu, daher begannen unsere Entwickler damit, eine Anwendung in zwei Teile aufzuteilen.
In der Kundenanwendung können Benutzer Maschinen durchsuchen und Ersatzteile kaufen. Die App verfügt außerdem über mehrere Funktionen für den After-Sales-Support. Dazu gehören 3D-Modelle von Maschinen, Kundenrabatte sowie Maschinendokumente und -anleitungen. Kunden können außerdem Wartungsarbeiten direkt über die Anwendung planen.
Auf der anderen Seite ermöglicht die Anwendung für OEMs Benutzern, mit ihren Kunden zu korrespondieren. Sie können auf Serviceanfragen antworten, einen Nachrichtenfeed erstellen, über neue Nachrüstungen informieren und ihren Online-Shop gemäß ihrem Markenbuch anpassen.
Während der Arbeit an den Funktionen konzentrierte sich unser Team auch darauf, die Architektur der Apps zu verbessern, damit die Produkte in Zukunft skalierbar sind. Trotz unterschiedlicher Funktionen jeder Anwendung und der Anpassung der Portale jedes Maschinenherstellers teilen sie UI-Ähnlichkeiten dank eines Designsystems und einer Komponentenbibliothek, die verdeutlichen, dass sie zum selben Unternehmen, Transaction Network, gehören.
Das Ergebnis
Beide Anwendungen bieten jedem Benutzer eine reichhaltige, flexible und anpassbare UI. Die Anwendung für Maschinenhersteller ist eine White-Label-Anwendung. Sie bietet Unterstützung für eine individuelle Farbpalette und ausgewiesene Bereiche für Markenlogos, damit jeder seine Benutzeroberfläche gemäß seinem Markenbuch anpassen kann.
Zusätzlich verfügen viele der App-Funktionalitäten über integrierte Parameter. Sie verhalten sich unterschiedlich, abhängig von Faktoren z.B. der Anwendung, zu der sie gehören, den Berechtigungen eines bestimmten Benutzers und den Lizenzen, die sein Unternehmen erworben hat.
Die Apps sind auch kompatibel und weitgehend offen für die Integration mit anderen Tools und Systemen, je nach den Bedürfnissen des Benutzers. Maschinenhersteller und diejenigen, die die Maschinen kaufen, können innerhalb der Anwendung alle Aktionen durchführen und alle Informationen abrufen, die sie benötigen.
Das Skalieren und Durchführen anderer signifikanter Änderungen an den Anwendungen ist dank einiger Faktoren einfach:
- Unsere Entwickler haben auf die Monorepo-Strategie gesetzt, was bedeutet, dass der gesamte Code an einem Ort aufbewahrt wird.
- Die Architektur ist modular, sodass jede Funktion in einem separaten, lazy-loaded Modul abgeschlossen ist.
- Die Apps sind ganz anpassbar, sowohl auf Funktionalitätsebene als auch auf Integrationslevel. Dies ermöglicht einfache und präzise Anpassungen der Plattform an einen spezifischen Kunden sowie die Integration der Plattform mit externen Systemen zur Verwaltung von Dingen wie Vertrieb, Preisen und Produktverfügbarkeit.
- Das Team startete das Projekt mit einem Designsystem und erstellte einen Katalog wiederverwendbarer Komponenten.
All dies trug dazu bei, den Prozess der Aufteilung einer Anwendung in zwei schnell und effizient zu gestalten und wird es ermöglichen, zukünftige Änderungen mit derselben Leichtigkeit vorzunehmen
Darüber hinaus sind die Produkte sicher und zuverlässig, da sie mit Angular entwickelt wurden, dem von Google erstellten und gewarteten Framework. Das Team bei Google stellt sicher, dass das Framework regelmäßig aktualisiert wird und eventuelle Fehler oder Code-Sicherheitslücken sofort behoben werden. Dies macht jedes mit Angular erstellte Produkt sowie alle darauf gespeicherten Daten sicher.
Technologie
- Angular
- Nx monorepo
- Nx cloud
- Ngrx
- Storybook
- Chromatic
- Nest.js
- Cad Exchanger
- Mjml
- Bitbucket Pipelines
- Pactflow
- Sonarcloud
- Snyk
- AWS S3
Referenzen
House of Angular hat uns mit der Angular Entwicklungsqualität beeindruckt. Die hohe Fachkompetenz ist zu sehen. Sie haben alle unsere Erwartungen getroffen, sowohl bezüglich der Kreativität, der Kommunikation, wie auch der Offenheit für unsere Ideen.
- Gerd Bart, CEO bei Transaction Network
“Wir haben in ein paar Projekten mit House of Angular zusammengearbeitet und sie haben uns immer mit Top-Angular-Speziallisten unterstützt”
- Jan, CEO at NetInteractive
“Wir arbeiten seit einigen Jahren mit House of Angular zusammen und die Qualität der Developer ist hervorragend. Wir hatten das Gefühl, während des gesamten Prozesses einen echten Partner zu haben. Sie sind wirklich an unserem langfristigen Erfolg interessiert.”
- Bram, CEO at Equicty
“Wir haben eine langjährige Partnerschaft mit House of Angular. Sie sind die besten Angular-Spezialisten, mit denen ich je gearbeitet habe.”
- Norbert, Senior Manager at defacto realations GmbH
“Wir haben bei der Entwicklung unserer Hauptprodukte mit House of Angular zusammengearbeitet. Sie erwiesen sich als wirklich Profis in diesem Bereich.”
- Roger, Development Manager at Hatteland Technology
“Das Konzept, Planung und Implementierung der Softwareprojekte hat unsere hohen Erwartungen voll erfüllt. Das Fachwissen zeigte sich immer im sorgfältigen und zuverlässigen Arbeitsstil.”
- Tobias, CEO at Devlab
Gemeinsam mit House of Angular arbeiten wir an der Entwicklung unseres Produkts. Die Skills und die Qualität der Entwickler sind genau das, was wir gebraucht haben. Wir haben unschätzbares Wissen gewonnen und die Qualität unseres Produkts wurde deutlich erhöht.
- Martin Merkel, Senior Consultant Product Management, MEDiiO GmbHWir entwickeln Top-Lösungen in Angular
Wenn du Bedarf an einem hochwertigen Angular hast, bist du am richtigen Ort. Wir machen ihn seit Jahren für weltweite TOP-Marken.
Stelle uns ein