go-digital & Digitalbonus.Bayern: Bei Ihrem nächsten Projekt können bis zu 50 % der Kosten durch staatliche Förderprogramme übernommen werden.

Siemens MMVS

Frontend & Backend Entwicklung ⦁ Content Management ⦁ UI / UX
2022

Die Challenge

Die Siemens AG, mit der wir schon seit langem zusammenarbeiten, kam mit der Anforderung, ein eigenes Content Management System (CMS) zu entwickeln, mit dessen Hilfe man unkompliziert Lern- und Informations-Websites, sogenannte Mediensysteme, erstellen kann. Dabei müssen alle Sicherheitsanforderungen und CI-Vorgaben eingehalten werden. Die Aufgabe lautete, die Seiten mit Inhalten in verschiedenen Sprachen anzureichern, darunter Videos, interaktive Erlebnisse, Infografiken, Videos, Accordeons und vielem mehr.

Backend Login
Backend Seiten Übersicht
Backend Seiten Editor
Services: KI & AI Beratung und Entwicklung​

Die Umsetzung

Mit dem Content Management System (CMS) können Nutzer ein intuitiv bedienbares Backend-System nutzen, das über ein eigenes Asset-Management-System zur Verwaltung aller Bilder, Videos und Dateien verfügt. Es wurde ein komplexes Benutzer- und Rechtesystem implementiert, wodurch Seiten schnell erstellt, verwaltet und bearbeitet werden können. Der eingebaute intuitiv bedienbare Editor ermöglicht es dem Nutzer, die Seiten, Sprachen, Einstellungen und Inhalte nach seinen Vorlieben direkt im Editor zu gestalten.

Das Ergebnis

ist ein benutzerfreundliches und responsives Frontend und Backend mit dutzenden Features und interaktiven Elementen die in mehreren Sprachen ermöglicht spannende Lern- und Informationsinhalte zu erstellen. Neben individuellen Unterseiten, einem Dark und Light-Mode, zusätzlich spannenden Inhalten wie Lottie Animationen, einem interaktiven HTML5 Kapitel Know-How Videoplayer. Bietet das System noch die Möglichkeit MedienSysteme als selbstlaufendes Offline Paket zu exportieren. Die gewählten Lerninhalte, können über öffentliche URLs, als ZIP-Paket zum hosten auf einem anderen Server oder werden in eine ausführbare EXE-Datei gepackt, die eine Chromium Laufzeitumgebung enthält und ohne Installation sofort einsetzbar ist. Das System ist vollständig voneinander getrennt und besteht aus drei Komponenten: Frontend, Backend und API-Server.Für jeden Bestandteil des Projekts wurde TypeScript in eine Monorepo-Struktur implementiert, was das Definieren und Teilen von Interfaces zwischen den Komponenten ermöglicht. Ein DBAL (Database Abstraction Layer) wurde eingebunden, um Flexibilität beim Einsatz verschiedener Datenbanken zu gewährleisten. In diesem Fall wurde MySQL ausgewählt, aber auch Postgres oder CouchDB sind verfügbar. Um den Deployment-Prozess zu vereinfachen, wurde eine Docker Compose-Umgebung erstellt, die das System flexibel reproduzierbar, erweiterbar und spiegelbar macht.

Frontend Hero und Seiten Navigation
Frontend Testimonial, Anhänge und Quicklinks
Frontend Videoplayer
Frontend Gallerie

Dark- und Light-Mode

Ein Dark Mode bietet mehr als nur ein cooles Aussehen. Er verbessert die Benutzererfahrung, indem er die Augen entlastet und Energie spart. Eine dunklere Farbpalette reduziert den Blauschimmer, der das Einschlafen verhindert, und schont die Akkulaufzeit von Geräten mit OLED-Displays. Mit einem Dark Mode werden die Nutzer auch länger auf der Website verweilen und möglicherweise weniger abgelenkt sein. Für die Inhalte im MediaSystem (MMVS) bedeutet das, dass die Nutzer mehr Zeit haben, um sich besser mit den Inhalten auseinanderzusetzen.

 

Für jeden Lerninhalt besteht die Möglichkeit, den Darkmode einzuschalten oder auszuschalten. Es ist auch möglich, eine bestimmte Optik als Standardvorgabe festzulegen oder eine komplett andere einzustellen.

MMVS_frontend_dark_mode MMVS_frontend_light_mode