Evolution DECOUPLED CMS MICROSERVICES MITARBEITER-APP - DAS NEW MEDIA MAGAZIN DER CS2 AG
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
DAS NEW MEDIA MAGAZIN DER CS2 AG
#27 2021
SOMMER
CHF 4.90
*
Evolution
DECOUPLED CMS MICROSERVICES MITARBEITER-APP
THEMA
#27 Sei du selbst die
INHALT Veränderung
04 Decoupeled CMS
06 TechTrend Microservices
08 Welches System passt zu uns?
10 Evolution of CMS
12 Native Apps aus dem Web raus
14 Beekeeper & Co:
Vergleich der herkömmlichen Mitarbeiter-Apps
15 Stichwort Investitionen: Best of Monster-Serie
16 Referenz ERNE App
18 Referenz Valyo Kreative Lösungen erarbeiten wir seit über zwan- Eine weitere Entwicklung im Anwendungs-
19 Referenz Girsberger zig Jahren mit unserem Kunden zusammen. Bei bereich von CMS ist höchst spannend für grosse
einem Blick zurück wird mir bewusst, wie ra- Unternehmen mit einem starken Kommunikati-
sant sich in dieser Zeit alles entwickelt hat: Un- onsbedarf auf den verschiedensten Plattformen:
sere Kunden, wir selbst – und natürlich die Tech- Native Apps direkt aus dem Web. Sie werden stau-
nologie. nen, was mit dieser Neuerung alles möglich ist!
Ganz zu Beginn musste die Kundin bei uns
*
einen Änderungswunsch anbringen, den wir di-
rekt im HTML-Code anpassten. Etwas später ent-
wickelten wir Admin-Webs, die dem Kunden die
Möglichkeit gaben, selbständig einzelne Con-
Cover tent-Elemente zu erfassen.
Wir Menschen haben rund 70 Prozent (!) Kurz darauf kamen die ersten Content Ma-
unserer Gene mit einem am Meeresboden nagement Systeme. Diese Entwicklung haben wir
lebenden Wurm gemeinsam, dem mit TYPO3 seit Anfang mitgestaltet. Alles dreht
sogenannten Ptychodera flava. sich dabei um das Zusammenspiel von Backend
Die mit unseren wurmartigen Verwand-
und Frontend. In jüngerer Zeit drängt sich das
ten geteilten Gene liefern Hinweise über
unsere eigene Evolution. Diese Ver- Thema «Headless» auf. Responsive allein reicht
wandtschaft geht auf einen Vorfahren vor schon lange nicht mehr bei der Vielfalt an Aus-
über einer halben Milliarde Jahren zurück, gabegeräten. Wir gehen in der Evolution noch ei-
wie Wissenschaftler durch genetische nen Schritt weiter: Decoupled CMS. Was das be-
Vergleiche herausgefunden haben.
deutet, erfahren Sie in diesem Magazin. Dani Kalt und das ganze CS2-Team
VALYO Seite 16 Evolution of CMS Heftmitte ERNE Seite 18
Traditional CMS Headless CMS
Decoupled CMS
Database Database Database
Webserver Webserver Webserver
Backend Interface Backend Interface Backend Interface
Application Application
Frontend Interface Programming Interface Frontend Interface Programming Interface
IMPRESSUM
Frontend Frontend Frontend Frontend Frontend Frontend
Interface Interface Interface Interface Interface Interface
Herausgeberin: CS2 AG Telefon: +41 61 333 22 22 Redaktion: Stephan Graf Gedruckt in der Schweiz bei
Responsive Webdesign APP Responsive Webdesign Wearables Responsive Webdesign APP Responsive Webdesign Wearables
powered by
Gerbegässlein 1, 4450 Sissach Website: www.CS2.ch Grafik und Layout: Brogle Druck, Gipf-Oberfrick
1 2 3
Mainaustrasse 21, 8008 Zürich Twitter: @cs2switzerland Joël Veuve Auflage: 5000 Ex.
4 CS2 AM|START #27 CMS CMS CS2 AM|START #27 5
Weiterentwicklung CMS Ein Decoupled CMS ist ein Content Management Sys- wünschte Ergebnis zu erzielen. Es funktionierte, al-
tem, das das Front-End-Liefersystem vom Back-End- lerdings konnte es den Test der sich entwickelnden
Was ist
Business-Modul entkoppelt hat. In der Vergangenheit Landschaft nicht überstehen.
waren CMS eng zwischen dem Front- und Back-End Mit dem Aufkommen von immer mehr digitalen Gerä-
gekoppelt. In den meisten Fällen war das Front-End ten entstand die Notwendigkeit, Websites mit ande-
die Präsentationsschicht, die für die Bereitstellung ren Kanälen zu verbinden. Die veralteten Lösungen
von Inhalten auf einer Website oder einem anderen (monolithisches Modell), die es gab, waren effektiv,
Decoupled CMS?
Front-End-Präsentationskanal verantwortlich war. wenn man minimale digitale Touchpoints hatte. Für
Auf der anderen Seite war das Back-End der Ort, an die Dienstleister ist es heute die Norm, ihre Marke
dem alle Berechnungen gespeichert wurden und an über mehrere Geräte hinweg hervorzuheben.
dem die Benutzer Inhalte erstellen, bearbeiten und
allgemein verwalten konnten.
Diese traditionelle Architektur war lange Zeit Die Anforderung der Zeit
das vorherrschende System, da die Back-End-Spra-
chen für die Verarbeitung grosser Informationsmen- In einem Decoupled-Szenario wird das Back-End für
In der heutigen Multi-Channel-Umgebung, in der Inhalte über ver- gen, nicht aber für die Erstellung von Front-End-Er- die Erstellung und Speicherung von Inhalten ver-
schiedene digitale Touchpoints konsumiert werden, ist das traditi- lebnissen ausgelegt waren. wendet. Das Frontend dient dazu, Daten zu konsu-
onelle CMS nicht mehr die einzige Option. Stattdessen sind Begrif- Mit der Entwicklung neuer Systeme wurden je- mieren und sie dem Benutzer über eine Schnittstel-
fe wie «Headless CMS», «Decoupled CMS», «Agile CMS», «Hybrid doch neue Front-End-Frameworks entwickelt, die die le zu präsentieren. In einem Decoupled CMS bleiben
CMS» und mehr in aller Munde, da immer neue CMS-Architekturen verbesserten Browser-Funktionen nutzten. Dies führ- die beiden Systeme voneinander getrennt.
entwickelt werden und Unternehmen die Qual der Wahl haben. In te dazu, dass das Front-End mehr Fähigkeiten benö- Decoupled wird auch als das Beste aus beiden
diesem Artikel tauchen wir in das Thema Decoupled CMS ein und tigte, um ein optimales Benutzererlebnis zu schaffen. Welten bezeichnet, bei dem man zwar den Kopf «ab-
erklären, was es ist, und werden vor allem die Unterschiede zwi- gehackt» hat, aber den Kopf nicht vom «Körper» ab-
schen Headless und Decoupled Architekturen hervorheben. getrennt hat. In einer Headless-Architektur bräuchte
Technische Herausforderungen man nach der Aufbereitung der Inhalte über die Re-
daktionstools einen API-Aufruf, um sie zu veröffent-
Lösungen müssen am Ende des Tages Eleganz bie- lichen. Es wird davon ausgegangen, dass das Team
ten, ein Begriff, der im Geschäftsalltag vielleicht un- der Frontend-Entwickler in der Lage ist, den Inhalt
angebracht wirkt- ein Wunsch, der Bequemlichkeit mit dem Toolset zu bearbeiten.
für den Administrator und eine nahtlose Sitzung für Wohingegen in einer Decoupled Architektur durch
den Endbenutzer bringt. Das Ergebnis muss Agilität, die Verfügbarkeit von Templates das Content Manage-
Effizienz und Anpassungsfähigkeit auf der gesamten ment einfacher wird, da man irgendwo anfangen
Oberfläche vereinen. kann. Ein Decoupled CMS wird daher als proaktiver
Um sich zu differenzieren und auf höchstem Ni- angesehen, da es die Inhalte vorbereitet und ausgibt.
veau konkurrieren zu können, wollten Top-Marken Im Gegensatz dazu ist ein Headless-System eher reak-
die beste Art von Architekturleistung. Sie wollten tiv, da es darauf wartet, dass ein Prozess es anfordert.
eine Architektur, die dem Zweck eines hohen organi-
schen Traffics, erhöhter Verkäufe und damit besserer
Einnahmen dient - durch die Integration von Content
Management und eCommerce-Plattformen.
Die Anfänge
In den Anfangstagen waren alle Plattformen von Un- Ausblick
ternehmen auf Computer-Browser ausgelegt, die von
der Mehrheit des Publikums genutzt wurden. Ande- Auf den folgenden Seiten werden wir Ihnen aufzei-
re Touchpoints wie Mobile, Social Media und Weara- gen, welches System am besten zu Ihrem Web-Projekt
ble Tech wurden nicht als Kundenkontakt in Betracht passt. Zudem beleuchten wir ein wichtiges Element
gezogen oder existierten überhaupt nicht. der aktuellen Entwicklung, nämlich die die Microser-
Alle Unternehmen erstellten ihre Seiten mit um- vices. Und zur Veranschaulichung finden Sie in der
fangreichem, manuell codiertem HTML, um das ge- Mitte des Hefts die Grafik: Evolution of CMS.
6 CS2 AM|START #27 CMS CMS CS2 AM|START #27 7
TechTrend
Die Vorteile von
Microservices
Microservices
Es steht ausser Frage, dass eine Microservices-Archi-
tektur der beste Weg für Enterprise-Marketing-Or-
ganisationen ist, die der Integration ihres CMS mit
modernen Erweiterungen für Lokalisierung, Perso-
nalisierung und darüber hinaus Priorität einräumen.
Heutzutage ist monolithische Digital-Marketing- Allerdings führt diese Integrationsebene oft
Software für moderne Organisationen ungeeig- zu Komplikationen, wenn die Software nicht da-
net - Organisationen, die mit Verbrauchern Schritt für ausgelegt ist - nicht so bei Microservices. Dank
halten müssen, die sich rund um die Uhr über ver- des flexiblen Ansatzes, den Microservices bieten,
schiedene Kanäle, Geräte und Plattformen mit In- hindert es die anderen Dienste nicht daran, wie ge-
Die überwiegende Mehrheit der Marketing- halten beschäftigen. Die Skalierung traditionel- plant zu funktionieren, wenn ein einzelner Dienst
und Online-Software wurde nach einem mo- ler, monolithischer Marketingsoftware, um mit Rückschläge erleidet oder aus irgendeinem Grund
nolithischen Architekturansatz erstellt. Das der Nachfrage Schritt zu halten, ist kompliziert, entfernt oder aktualisiert werden muss.
heisst, das Frontend, das Backend und alle teuer und, offen gesagt, unnötig, wenn man die Da Microservices nicht aneinander gebunden sind
verschiedenen Funktionen der Software sind fortschrittlichere moderne Marketingsoftware be- und stattdessen über APIs kommunizieren und ar- MACH
untrennbar miteinander verbunden und teilen trachtet, die es heute gibt. beiten, ist es relativ einfach, bestimmte Teile Ihrer
sich eine einzige Codebasis. Keine grosse Sa- Als Marketing- oder IT-Führungskraft in einem Microservices-basierten Marketingplattform nach Der Begriff «MACH» wurde von einer Gruppe un-
che, oder? Vielleicht nicht in der Vergangen- Unternehmen suchen Sie nach einer Webtechno- Bedarf zu skalieren (oder zu reduzieren). Das be- abhängiger moderner Technologieunternehmen
heit, als das meiste Marketing, das ein Un- logie, die mit Ihren Anforderungen wachsen kann deutet, dass Sie bei geschäftskritischen Diensten geprägt und durch die hohe Geschwindigkeit ins-
ternehmen machen musste, darin bestand, - und nicht mit Ihrem Bedarf an mehr Personal, eine kontinuierliche Betriebszeit und einwandfreie piriert, mit der Software-Ökosysteme die heutigen
statische Inhalte auf einer einzigen, statischen mehr Serverplatz und mehr Ausgaben. Was Sie su- Leistung geniessen können, ohne sich Sorgen ma- Unternehmenskunden bedienen müssen.
Website zu veröffentlichen. chen, sind Microservices. chen zu müssen, dass das gesamte System - oder MACH ist ein Akronym, das Technologien be-
das verworrene Netz von Add-Ons, die an das Sys- schreibt, die auf vier modernen Prinzipien aufbau-
tem geschraubt werden, um es auf Vordermann zu en: Microservices, API-Konnektivität, Cloud-Nati-
bringen - kaputt geht, wie es bei einer monolithi- vität und Headless Infrastructure.
schen Plattform der Fall wäre. Microservices sind schlanke Dienste, die be-
Zusätzlich zu der Zeit und den Kopfschmerzen, stimmte Aufgaben ausführen und über eine API
Was sind Microservices und wie Microservices sind ein grundlegendes Element die dies den Technologie-Teams erspart, kann es verbunden sind, um unabhängig bereitgestellt, ge-
der MACH-Technologie. MACH ist ein bahnbrechen- Ihrem Unternehmen auch Geld sparen, da Sie nur wartet und skaliert zu werden und so unendliche
funktionieren sie? der Ansatz für Software, der auf vier Grundprinzipien die Dienste skalieren müssen, die im Moment für Benutzererfahrungen zu ermöglichen.
aufbaut: Microservices, API-Konnektivität, Cloud-Na- Sie wichtig sind, und nicht die gesamte teure An- Die Application Programming Interface (API)-
Microservices mögen klein sein, aber gerade die- tivität und Headless Infrastructure. Die MACH-Tech- wendung. Technologie verbindet Module, um ein unendlich
se Grösse verleiht ihnen ihre Stärke. Microservices nologie definiert sich durch ihre Integrierbarkeit, Da Microservices, wie oben beschrieben, un- flexibles Ökosystem zu schaffen, das neu konstru-
können als leichtgewichtige Einzweckanwendun- Skalierbarkeit und einfache Evolution. abhängig voneinander einsetzbar und skalierbar iert werden kann, um vollständig kundenorientiert
gen definiert werden. In einer Microservice-basier- Mit einem Microservices-Ansatz für Marketing- sind, macht sie das so flexibel, dass sie in verschie- zu sein, auch wenn sich Trends und Technologien
ten Softwarearchitektur können diese Microservices Software können Unternehmen Strukturen aufbau- denen Sprachen geschrieben und von verschiede- ändern.
jederzeit einfach hinzugefügt, neu angeordnet und en, die immer auf dem neuesten Stand der moder- nen Abteilungen verwaltet werden können. Cloud-native Software wird in der Regel als
entfernt werden, um benutzerdefinierte Tools zu er- nen Software- und Marketing-Best-Practices sind. Bei Microservices stellen hochspezifische Dienste Service von einem Drittanbieter bereitgestellt, so
stellen, die jederzeit bereit sind, jede Geschäftsfunk- monolithischer Marketingsoftware hingegen hat die bereit, an denen Geschäftsanwender in Unterneh- dass sie immer auf dem neuesten Stand ist und mit
tion zu erfüllen. Aktualisierung des Codes zur Anpassung auch nur men interessiert sind. Denken Sie an Geschäfts- weniger Kosten und Zeitaufwand skaliert werden
Die benutzerdefinierten Tools, die aus Microser- eines einzigen Dienstes Auswirkungen auf die ge- funktionen wie das Compliance-Management oder kann als Software vor Ort.
vices bestehen, werden als „entkoppelt“ (decoupled) samte Plattform. Wenn etwas schief geht, können Marketingfunktionen wie die Personalisierung. Die Headless-Architektur entkoppelt die Front-
oder „kopflos“ (headless) bezeichnet, da ihnen ein zen- kritische Marketingsysteme ausfallen, während Ihr Und aufgrund ihrer individuell einsetzbaren und End-Präsentation von der Back-End-Logik, was die
tralisierter Workflow fehlt. Microservices können mitei- Team krampfhaft versucht, die gesamte Plattform verwaltbaren Natur, die hier beschrieben wurden, Zusammenarbeit optimiert und einen kanalunab-
nander kommunizieren und auf ein gemeinsames Ziel neu zu erstellen und zu implementieren. Im Ver- können Microservices, die diese Funktionen bereit- hängigen und rahmenunabhängigen Betrieb von
hinarbeiten, und zwar mit einer API-Technologie (Ap- gleich zu einer monolithischen Struktur, in der alles stellen, sehr zeitnah zum Einsatz gebracht werden. Inhalten ermöglicht.
plication Programming Interface), die es den Anwen- miteinander verbunden ist, bieten Microservices die
dungen ermöglicht, eine Schnittstelle zu bilden. Flexibilität, die moderne Marketer brauchen.
8 CS2 AM|START #27 CMS CMS CS2 AM|START #27 9
Technologische Entwicklung
CMS
Welches System Ein Blick zurück 1990 - 1996: Das statische Zeitalter (Web 1.0)
Dieser Zeitraum war geprägt von flachen HTML-Textdateien. 1993 gab es die
erste Unterstützung für Bilder. 1995 wurde das World Wide Web Consortium
für den Blick in die
(W3C) ins Leben gerufen. 1996 wurde der Browser Internet Explorer einge-
passt zu uns?
führt, der als erster CSS unterstützte.
1997 - 1999: Die dynamische HTML-Revolution
Ein wichtiger Wendepunkt kam 1997, als dynamische Inhalte mit der Einfüh-
Zukunft
rung des Document Object Model (DOM) zum Tragen kamen. Das DOM defi-
niert die logische Struktur, mit der Sie Teile eines Dokuments identifizieren
und programmatisch steuern können.
Dynamisches HTML unter Verwendung von Asynchronous JavaScript und
XML, allgemein Ajax genannt, war ein revolutionärer Durchbruch. Denn es
ermöglichte Entwicklern, Daten zur Aktualisierung einer Webseite anzufor-
dern und zu empfangen, ohne die Seite neu laden zu müssen.
Wenn Sie ein neues Webprojekt lancieren, wer- von Plattformen oder Betriebssystemen kompatibel Um zu verstehen,
den Sie sich für eine passende Software-Ar- ist“. Auch hier handelt es sich um einen synonymen wie sich das 2000er Jahre: Die Ära des monolithischen CMS (Web 2.0)
chitektur entscheiden müssen. Wir haben auf Begriff für ein headless, decoupled oder API-first Content Manage- Die CMS der frühen bis mittleren 2000er Jahre begannen, die Bedürfnisse von
den letzten Seiten viel über die Entwicklung CMS. Da APIs involviert sind, kann die Front-End- ment System Unternehmen professioneller zu bedienen. Gleichzeitig kamen in dieser Zeit
des Content Management Systeme gelesen, Auslieferungsschicht alles sein, was Sie wünschen, entwickelt hat Open-Source-CMS-Plattformen wie Drupal oder WordPress auf, TYPO3 bereits
mit einem Fokus auf Headless und Decoupled. von einem Smartwatch-Bildschirm bis hin zu einem und wo wir heute seit 1997. Die meisten von ihnen enthielten sowohl die Back-End- als auch die
Nach welchen Kriterien suchen Sie das System Virtual-Reality-Headset, wodurch Ihr Content-Front- stehen, hilft es, Front-End-Technologie einer Website und konnten Texte, Bilder und andere
aus? Die genaue Definition und unsere Dif- End agnostisch wird. zu betrachten, Dateien speichern, anzeigen und herunterladen.
ferenzierung der Begriffe wird Ihnen bei der Bei einem Headless CMS erstellen die Entwickler wie sich die
Recherche helfen. ihre eigenen Front-End-Präsentationsschichten, die gesamte Web- 2007- 2010 Going Mobile mit Web 3.0
auf das jeweilige Gerät abgestimmt sind, an das sie Industrie im Im Jahr 2010 kamen smarte Tablets auf den Plan. Dieser Megatrend der Aus-
die Inhalte senden möchten. Laufe der Zeit lieferung von Inhalten an mobile Geräte läutete die Ära des mobilen Webs ein.
Was ist API-first und was ist ein Headless API? Ein Decoupled CMS ist ebenfalls Front-End-ag- verändert hat. Die Ära wurde als Web 3.0 bekannt, um die Verlagerung von Computern und
nostisch. Sie stellen zwar eine Reihe von Front-End- Der folgende Laptops auf die mobile Bereitstellung von Inhalten zu kennzeichnen.
Wenn ein CMS damit wirbt, API-first oder API-gesteu- Vorlagen und Bearbeitungswerkzeugen für die Erstel- Artiekl hebt
ert zu sein, bezieht es sich auf die Tatsache, dass es lung von Webanwendungen bereit, aber Sie haben die wichtigsten Mitte der 2010er Jahre: Die Digital Experience Platform
APIs zur Bereitstellung von Inhalten verwendet. Ein auch die Möglichkeit, Ihre eigenen Front-End-Präsen- Momente in der Eine Digital Experience Platform (DXP) ist eine Softwareplattform, die es er-
API-first CMS ist im Wesentlichen ein Synonym für ein tationsebenen zu erstellen, um ausserhalb des vom Webentwicklung möglicht, integrierte, optimierte Benutzererlebnisse über alle digitalen Ka-
Headless oder Decoupled CMS. Anbieter vorgegebenen Rahmens zu arbeiten. hervor, näle, alle Zielgruppen (allerdings mit dem Kunden im Mittelpunkt) und alle
Headless-APIs (manchmal auch Content-API einschliesslich Phasen des Benutzer-/Kundenlebenszyklus zu erstellen und bereitzustellen.
oder REST-API genannt) sind besonders nützlich, um Was ist ein hybrides CMS, und was ist ein hybrides der Frage, wie
Inhalte an eine native App, wie z. B. eine Android- Headless CMS? diese Verände- Gegenwart - Trends
oder iOS-App, weiterzugeben. Sie kann sogar verwen- rungen das Web Die Wichtigkeit der Personalisierung
det werden, um Inhalte an Commerce-Systeme, wie z. Lassen Sie sich durch die Begriffsvielfalt nicht ver- im Allgemeinen Personalisierung ist der Schlüssel zum Aufbau einer effektiven Digital Expe-
B. einen POS (Point of Sale), und sprachaktivierte An- unsichern: Diese beiden Begriffe sind synonym mit und den CMS- rience Platform. Personalisierung bedeutet, die Interessen Ihrer Besucher zu
wendungen wie Alexa und Siri zu liefern. Mit einer dem Begriff „entkoppeltes CMS“ respektive Decoup- Markt im Beson- verstehen und Inhalte auf ihre Bedürfnisse und Vorlieben zuzuschneiden, um
Headless-API können Sie Inhaltstypen und Fragmen- led CMS. deren beeinflusst ihnen ein Erlebnis zu bieten, das sie als relevant empfinden.
te festlegen, die Sie an das Gerät oder den Touchpoint Ein hybrides CMS zielt darauf ab, das Headless haben.
Ihrer Wahl pushen möchten. Content Management System mit den Redaktions- CMS-Architektur
werkzeugen eines traditionellen CMS zu kombinie- Im Laufe der Evolution von CMS-Systemen wurden drei Hauptarchitekturan-
Was bedeutet Front-End-agnostisch? ren. Ein hybrides CMS ist also nichts anderes als ein sätze entwickelt. Diese waren monolithisches (gekoppeltes) CMS, Headless
entkoppeltes CMS mit einem anderen Namen. (API-first) CMS und entkoppeltes/decoupled (hybrides) CMS. Die Bedeutung
Der Begriff agnostisch bezieht sich in der Welt der In- und Unterscheidung der einzelnen Typen haben wir uns bereits auf den vor-
formatik auf ein Stück Software, das „mit vielen Arten angegangenen Seiten genauer angeschaut.
10 CS2 AM|START #27 WWW.CS2.CH
Traditional CMS Headless CMS Decoupled CMS
Database Database Database
Webserver Webserver Webserver
Backend Interface Backend Interface Backend Interface
Application Application
Frontend Interface Programming Interface Frontend Interface Programming Interface
Frontend Frontend Frontend Frontend Frontend Frontend
Interface Interface Interface Interface Interface Interface
powered by
Responsive Webdesign APP Responsive Webdesign Wearables Responsive Webdesign APP Responsive Webdesign Wearables
1 2 3
12 CS2 AM|START #27 CMS CMS CS2 AM|START #27 13
•
Die Zukunft der App Bestechende Funktionalität • Internet, Intranet, Extranet – alle Bereiche wer-
den aus dem gleichen Universum gespiesen.
Native Apps direkt
Nachdem wir kurz umrissen haben, wie das techni- So entstehen keine Parallelwelten, die
sche Konzept funktioniert, können wir nun noch ge- permanent abgeglichen werden müssen.
nauer auf die damit verbundenen Vorteile eingehen: • Die Entwicklung ist als Investition zu sehen.
Sie mag auf den ersten Blick grösser scheinen
• Das System ist mit Sinlge Sign-On zu erreichen, als die marktüblichen sechs Franken pro
aus dem Web
die Daten werden dabei direkt aus dem Active Mitarbeiter und Monat. Der grosse Aufwand
Directory gezogen. muss nur einmal betrieben werden, da das
• Content lässt sich mehrfach nutzen, muss aber System integrativ und skalierbar realisiert wird.
nur einmal erfasst werden. Genau so, wie Sie
es bereits von einem hochwertigen CMS
gewohnt sind.
• Mitarbeitende können selbstverständlich mit
Push-Nachrichten informiert werden –
eine der Grundanforderungen im Bereich Bei dieser technischen Lösung handelt es sich
Mitarbeiter-App. nicht um einen CS2-Alleingang. Viele weite-
Das Projekt mit unserer langjährigen Kundin se fördert. Wir haben deshalb unter anderem folgen- • Posts, wie wir das aus den sozialen Medien ken- re Apps setzen umfassend (SRF News, Media
ERNE hat uns dazu gebracht, innovative Wege de Parameter festgelegt: nen, lassen sich kommentieren, egal ob man Markt Schweiz) oder zumindest für bestimmte
zu gehen und in neue Bereiche vorzudringen. sich am Computer im Büro befindet oder unter- Teilbereiche (Migros, Coop) auf einen ähnlichen
Im hinteren Teil dieses Magazins können Sie • Die Lösung muss «hybrid» sein und sich nahtlos wegs am Smartphone eingeloggt ist. Alle Ansatz à la «App Grundgerüst mit Mobile-opti-
mehr über diese Referenz erfahren. In diesem in eine Microservices-Architektur einfügen Informationen sind immer einmalig vorhanden mierten Web-Seiten als Inhalt kombiniert mit
Artikel beschreiben wir wichtige Hintergründe, • Sie muss die Wiederverwendung von Inhalten und müssen deswegen auch nicht erst weiteren Schnittstellen».
unsere Herangehensweise und spannende fördern synchronisiert werden.
Aspekte rund um das Thema Mitarbeiter-App. • Sie muss Geräte- und Branchen-unabhängig sein
• Sie muss den Workflow von Inhalten intelligent
verwalten
Was muss eine Mitarbeiter-App • Sie muss skalierbar sein.
können? Wie funktioniert die Architektur?
TYPO3-to-App
Der naheliegendste Anwendungsfall einer Mitarbei- Diese Grafik verschafft Ihnen einen Überblick über die Verknüpfungen und Prozesse,
ter-App ist die interne Kommunikation. Unterneh- Mit dieser Herangehensweise dient die Mobile App die notwendig sind, um ein CMS in eine App «umzuwandeln».
men sollten deshalb nach Funktionen Ausschau hal- als Grundgerüst, in der das Mobile-optimierte Fron-
ten, die nicht nur eine einfache Veröffentlichung und tend aus TYPO3 geladen wird. Inhalte, Funktionen
Wiederverwendung bestehender Bausteine App-Grundgerüst mit Anbindung
Zusammenführung von Unternehmens-News, son- und Aussehen der Seiten aus TYPO3 können so wei-
mit App-spezifischen Anpassungen externer App-spezifischer Bausteine
dern auch Interaktivität und den Austausch mit den terverwendet und mit ausgewählten Mobile-spezifi-
Mitarbeitern fördern. schen Merkmalen ergänzt werden.
Absturz-
Die meisten Mitarbeiter-Apps am Markt sind Was bedeutet das konkret? Bis auf eine Ausnah- meldung
App-Schnittstellen
Stand-Alone-Lösungen. Eine Übersicht über das Ange- me wird damit die TYPO3-Web-Ansicht 1:1 weiterver- Authentifizierung, «Over the air»
bot in diesem Bereich finden Sie im folgenden Artikel. wendet. Header und Footer der Web-Ansicht werden Navigation, Code Updates
Inhalte
Für uns war jedoch wichtig, auf bestehende Strukturen nicht angezeigt, wenn die TYPO3-Seite von der Mo- Benutzerinformation,
Frontend Entfernte
aufzubauen. Da lag auf der Hand, mit dem bewährten bile App aus aufgerufen wird. Beim Einbetten der Suche TYPO3-Screen
Funktionen (u.v.m)
Konfiguration
Content Management System TYPO3 zu arbeiten. TYPO3-Web-Ansicht werden auch keine Browser-ty- &
pischen Elemente wie Adresszeile, Aktualisieren- integrierte Analytics
Screens und
Button oder ähnliches angezeigt.
Funktionen
Komplexe Anforderungen So hat der Benutzer weiterhin den Eindruck, in
Mobile-App-
App
Verteilung
der Mobile App zu sein, obwohl ihm eigentlich An- optimiertes
Wir wollten eine flexible Lösung, die über alle Gerä- sichten aus der Mobile-Website angezeigt werden. Frontend
«Over the air»
Text Updates
te und Kanäle hinweg funktioniert. Etwas, das sich Dieses Konzept ermöglicht es, Mobile-App-Technolo- Mobile-Ansicht
nahtlos in eine Microservices-Architektur einfügt gien zu nutzen (wie Push-Benachrichtigungen) und ohne Web-Header Push-
und -Footer Benachrichtigung
und die Effizienz und Zusammenarbeit in jeder Pha- trotzdem flexibel und wirtschaftlich zu bleiben.
14 CS2 AM|START #27 CMS CMS CS2 AM|START #27 15
Beekeeper & Co. Investition ein zentraler Punkt spielt hier schon eine Rolle, der
von vielen erst umgesetzt wird, wenn die Website
Mitarbeiter Apps Stell dich
schon fast fertig ist: Suchmaschinenoptimierung.
Hochwertiges Design hat seinen Preis. Vertrauen Sie
deshalb auf die Expertise der Entwickler, Program-
mierer und Frontend-Designer. Unzählige dieser es-
senziellen Entscheidungen haben weniger mit Ge-
im Vergleich dem
schmack, als vielmehr mit Benutzerfreundlichkeit
und Funktionalität zu tun.
Effizienz
Mitarbeiter-Apps sind der angesagteste Trend in
der Corporate Welt. Da schiessen Produkte und
Skalierbarkeit
Damit ist gemeint, dass die Mitarbeiter-App zuver-
Monster
«Wir wollen doch nur eine einfache Website»,
Die konsequente Definition der Ziele gleich zu Be-
ginn des Projekts (mit fortlaufendem Abgleich wäh-
rend der Umsetzung) ermöglicht einen ersten Beitrag
zur angestrebten Effizienz: Optimale Leistung bei
überschaubarem finanziellem und zeitlichem Auf-
Services wie Pilze aus dem Boden. Unsere lässig funktioniert, sicher ist und mit dem Unterneh- hören wir regelmässig im Austausch mit po- wand. Jede einzelne Funktionalität muss dabei ein-
Eigenentwicklung stellen wir in diesem Heft men wachsen kann. Grundlagen dafür sind eine in- tenziellen Kunden. Das Gespräch nimmt einen mal komplett durchdacht werden, erst nur für sich
vor. Und in aller Munde ist ebenfalls eine Soft- telligente Navigation, Analytics, Integrationen und monströsen Verlauf, weil wir die unbequemen und anschliessend im Kontext mit den damit verbun-
ware aus der Schweiz: Beekeeper. Doch welches Erweiterungen. Fragen stellen. Aus diesem Grund haben wir eine denen Anforderungen.
ist die richtige App für Sie? Welche Alternativen Blog-Serie entwickelt, in der wir einen Einblick Integrieren Sie wo immer möglich bestehen-
gibt es und wie kann man sie vergleichen? Einfachheit der Bereitstellung in diesen manchmal unangenehmen, aber ent- de Lösungen. Kein Enterprise CMS verfügt über eine
Die Einfachheit der Bereitstellung ist ein wichtiger scheidenden Prozess gewähren. Hier verraten Vielzahl an Modulen direkt ab Stange. Deshalb sind
Im deutschsprachigen Raum stehen vier Apps im Faktor bei der Entscheidung, die digitale Arbeit mit wir Ihnen die Quintessenz aus diesen Artikeln. Sie auf eine Agentur angewiesen, die Plugins und
Vordergrund, die immer wieder verglichen werden: einer App in Unternehmensqualität zu verbessern. Tools konsequent integriert. Kein Enterprise CMS ver-
Beekeeper, Quiply, Speakap und Staffbase. Doch Im Gegensatz zu vielen anderen Unternehmenslö- fügt über eine Mehrheit an Modulen direkt ab Stan-
Experten zählen inzwischen über 60 Produkte. Der sungen kann eine App relativ schnell implementiert Ihre Website ist alles ge. Integrieren Sie wo immer möglich, mit Hilfe einer
Markt für Mitarbeiter-Apps ist ein weitgehend uner- werden, so dass sich bei der Einführung alles um die erfahrenen Agentur, bestehende Lösungen: Domain-
forschter Bereich, der sich viel schneller verändert Roll-out-Strategie und die Kommunikation der Verän- Ihre Website verkörpert Ihre Marke. Ihre Website sagt strategie, Länderpages, Newsletter, CRM, APIs, etc.
und wächst als andere Enterprise-Tech-Themen. derungen dreht. Es ist allerdings eine ziemliche He- der Welt, wer Sie sind, was Sie tun und warum sie sich
rausforderung, wenn alle involvierten Stakeholder, für Sie interessieren sollten. Ihre Website ist der im-
auch unter Berücksichtigung spezieller Sicherheits- mer aktive Ort der digitalen Autorität Ihres Unterneh- Betrieb und Unterhalt
oder gesetzlicher Anforderungen konsultiert werden mens. Deshalb lohnt es sich, bedingungslos ehrlich
– Human Resources, Operations, Kommunikation, IT- in diese Website zu investieren: Zeit, Geld und Auf- Nicht nur Ihr Content muss ständig aktualisiert wer-
Für eine differenzierte Abteilung und natürlich die Geschäftsleitung. wand – unter Berücksichtigung der richtigen Fragen. den, auch Ihr CMS muss regelmässig auf den neusten
Stand gebracht werden. Nur so kann sichergestellt
Betrachtung der verschiedenen Soft Facts werden, dass Ihre Website tadellos läuft. Deshalb
Lösungen sind folgende Abgesehen von den Vorteilen für das Engagement Konzept und Design muss Ihr CMS regelmässig mit Sicherheitsupdates
und die Kommunikation, die sich daraus ergeben, und Upgrades versorgt werden. Zudem muss ein Sup-
Kriterien zu berücksichtigen: dass die Mitarbeiter an der Frontlinie erreicht wer- Kundin und Agentur müssen zusammenarbeiten, um port-Team die verwendete Software in- und auswen-
den, erweitern diese Apps den digitalen Arbeitsplatz das gewünschte Ergebnis zu erzielen. Wenn Sie nicht dig kennen, um sofort aktiv werden zu können, falls
Kernfunktionen in die Hosentaschen der Mitarbeiter und ermögli- auf das Aussehen der Website achten, dann spielt es ein gröberes Problem entsteht. In diesem Zusammen-
In diesem Bereich entscheiden ein flexibler Nutzer- chen es Menschen, die sich selten an einen Compu- keine Rolle, wie grossartig Ihr Inhalt ist. Wenn Sie hang empfiehlt sich auch eine Schulung für Ihre Mit-
zugang, Individualität des Produkts und die Perso- ter setzen, Dinge zu erledigen, wann und wo sie wol- die Sicherheit der Daten Ihrer Besucher vernachläs- arbeitenden, die die Seite betreuen. Ein Service Level
nalisierung über den Erfolg. len. Mitarbeiter-Apps sind Produktivitäts-Apps, die sigen, werden diese nicht wiederkommen, egal wie Agreement regelt, wer in Ausnahmesituation wie in
Einzelpersonen und Teams dabei helfen, ihre Arbeit hilfreich Ihre Website für sie sein mag. der Verantwortung steht.
Inhaltsfunktionen in einer professionellen und dennoch sozialen Um- Zwei Aspekte stehen bereits in der Konzeptions- Last but not least ist ein leistungsfähiges und si-
Von zentraler Bedeutung sind interaktive Kommuni- gebung zu erledigen. Es ist deshalb von zentraler Be- phase im Vordergrund: Strategie und Sicherheit. Sie cheres Hosting unerlässlich. Dazu gehört neben einem
kation, eine clevere Informationsstruktur, Chat und deutung, dass die App in die bestehende Struktur benötigen eine verlässliche Anforderungsdokumen- modernen Datacenter für die Server auch ein dedizier-
ein ganzes Funktionalitäts-Set, das die Mitarbeiten- integriert werden kann, damit sie von den Mitarbei- tation und Wireframes, damit alle beteiligten Stake- tes Team, welches 24/7 für das Monitoring und – falls
den verbinden und befähigen lässt. tenden auch wirklich akzeptiert und verwendet wird. holder konkrete Entscheidungen fällen können. Und nötig – entsprechende Massnahmen bereitsteht.
16 CS2 AM|START #26 REFERENZEN VALYO GIRSBERGER REFERENZEN CS2 AM|START #27 17
Plattform Relaunch Website Relaunch
VALYO Girsberger
valyo.com girsberger.com
Die CS2 entwickelt mit einem massgeschneider- Umsetzung Neuer Webauftritt für den namhaften • TYPO3 Setup customized by CS2:
ten TYPO3-Setup die Webpage für die digitale CS2 hat für Valyo ein TYPO3-Setup erstellt und ganz Sitzmöbelhersteller. • Integration des von Girsberger entwickelten,
Kapitalmarkt-Plattform Valyo. Das Fintech-Star- den Anforderungen entsprechend konfiguriert. Zahl- pixelgenauen Designs
tup schafft es auf die Shortlist der Best of Swiss reiche Content-Elemente und Keyvisuals wurden kre- Ausgangslage • Optimiert für Smartphones und Tablets
Web 2021 Awards. iert, um ein modulares Baukastensystem zu erstellen. Das Traditionsunternehmen Girsberger aus der Re- (Responsive)
Sämtliche Informationen mussten bedürfnisori- gion Bern setzt auf einzigartiges Design. Dieser äs- • Mega-Menü Navigation für den
entiert strukturiert und die dafür nötigen Funktiona- thetische Anspruch diente als treibende Kraft beim direkten Einstieg
Ausgangslage litäten bereitgestellt werden: Relaunch, unter anderem mit Mobile-Optimierung, • Multi-Domain und Mehrsprachigkeit
Die Valyo AG wurde 2019 mit Sitz in Baden als schlanker Navigation, plakativem Bildmaterial, Pro- • Produktfilter für schnelleres Finden
100%ige Tochtergesellschaft der Raiffeisen Schweiz • TYPO3 Setup customized by CS2 dukte-Konfiguration und hoher Usability. • SOLR-Suche mit Anzeige von Ergebnissen
Genossenschaft gegründet. Sie betreibt einen inno- • Frontend, optimiert für Smartphones nach Bereichen
vativen Marktplatz für Kapitalmarkt-Transaktionen (Responsive) Umsetzung • Fachhändler- und Bezugsquellenfinder
mit Fokus auf den Schweizer Bondmarkt. Durch das • Vollintegriertes Übersetzungsmanagement für Gemeinsam mit dem Design- und Marketing-Team • CS2 Translation Manager
Verbinden von persönlicher und professioneller Be- Fremdsprachen von Girsberger wurden die Anforderungen an den • CS2 Focuspoint für automatische
ratung mit einem effizienten und vollständig digitali- • Contentelemente: Slider, Video, News, neuen Webauftritt gebündelt sowie das neue Fron- Bildausschnittgenerierung
sierten Emissionsprozess, generiert Valyo einen öko- diverse Keyvisuals u.a. Storytelling, Teaserbox, tend entwickelt. Visuell setzt man dabei auf ein prä- • Tools (u.a. Yoast) für optimierte
nomischen und emotionalen Mehrwert. FAQ, u.v.m. gnantes, aufgeräumtes und eher schlichtes Design. SEO-Umsetzung
Die damalige Onepager-Website war redaktio- • Navigation für den schnellen und Die dafür ausgewählten Bilder geben den eigentli- • Cookie-Banner (DSGVO)
nell sehr aufwändig zu bewirtschaften. Auch war sie direkten Einstieg chen Charakter der Website wieder. • Leistungsfähiger Betrieb dank dem
schlecht skalierbar, unflexibel und nicht modular • SOLR-Suche mit Anzeige von Ergebnissen Hosting von CS2
aufgebaut, um den heutigen Anforderungen von In- aus Seiteninhalten
teressenten, Kunden sowie Unternehmungen gerecht • SEO Tools (Yoast) für optimierte Speziell erwähnenswert:
zu werden. SEO-Umsetzung Ein 3D-Konfigurator soll helfen, Produkte individu-
• Anbindung Newslettersystem ell zu gestalten und möglichst realistisch abzubil-
• hohe Flexibilität für die Bewirtschaftung den. Dabei wird die Softwarelösung der Firma Eas-
der Seiteninhalte tern Graphics verwendet, welche als Plugin in die
• CS2 Focuspoint für optimale Website eingebunden ist.
Bildausschnittgenerierung Mit Girsberger Massivholz wird ein weiterer Be-
• CS2 Responsive Check direkt im Backend triebszweig bewirtschaftet. Dieser wurde im beste-
• Leistungsfähiger Betrieb dank dem henden TYPO3 als weiterer Seitenbaum vorbereitet
Hosting von CS2. und kann nun mit sämtlichen, bereits zur Verfügung
stehenden Bordmitteln, gestaltet werden.
18 CS2 AM|START #27 REFERENZEN ERNE
mobile Website, aber APP
Website ohne Header/Footer native
weitere
erne.ch Inhalte,
Funktionen,
Aussehen
Echte Innovation
Chancen
ERNE MOBILE APP ab
embe
Sept 1
202
r
Mobile-spezifische Funktionen
Mit diesem Ansatz lassen sich Funktionen wie zum
Zukunftssicherheit
Sollte in ein paar Jahren PWA eine reale Alternative
Von TYPO3 zur eigenen Mobile App – Beispiel den Empfang von Push-Benachrichtigungen zu Mobile Apps werden, so könnte man das TYPO3-
skalierbar, flexibel, wirtschaftlich und zukunftssicher. auch auf iOS-Geräten umsetzen, die mit einer reinen Frontend mit PWA-Funktionen ausrüsten und auf die
Website oder PWA aktuell nicht möglich sind. Mobile App verzichten.
Ausgangslage Wiederverwendbarkeit Duplizierbarkeit
Eine funktionsreiche TYPO3 Website ist bereits vor- TYPO3-Mobile-App. Dabei wird, grob gesagt, zu- Bereits getätigte Investitionen in das TYPO3-Setup Die neu programmierte App kann einfacher für wei-
handen, die auch als Grundlage für das neue Intranet nächst ein Mobile App Grundgerüst programmiert. und die TYPO3-Funktionalität/-Inhalte/-Aussehen tere TYPO3-Seitenbäume / -Installationen kopiert,
verwendet wird. Zusätzlich wird eine mobile Lösung Dieses Grundgerüst erlaubt es, einzelne Seiten der können auch in der Mobile App verwendet werden, und es müssen nicht alle Funktionen 1:1 nachgebaut
gesucht, um die «Self-Service»-Nutzung durch Mit- Website in einem «TYPO3-Screen» zu integrieren. Im ohne dass sie nachgebaut werden müssen. werden.
arbeiter zu fördern, Push-Benachrichtigungen ver- Prinzip wird die mobile Responsive-Ansicht der je-
schicken zu können und das Mitarbeiter-Branding weiligen TYPO3-Seite eingebettet. So können sowohl Flexibilität
zu stärken. Inhalte als auch Funktionen und sogar das Aussehen Die meisten Funktionen finden im TYPO3 statt, wes-
ohne Mehraufwand weiterverwendet werden. halb flexibler neue Funktionen in das Intranet ein-
Umsetzung In der Schweiz gibt es schon einige Unternehmen, fügt werden können.
Diese Varianten haben sich anerboten: Mobile Web- die auf diesen oder einen ähnlichen Ansatz à la «App
site, Progressive Web App (PWA) oder Mobile App. Grundgerüst mit Mobile-optimierten Web-Seiten als Wirtschaftlichkeit
Doch unter Berücksichtigung aller Faktoren und Inhalt kombiniert mit weiteren Schnittstellen» set- Dank des geringen Programmieraufwandes – bezo-
des enormen Potentials, hat man etwas Neues ge- zen. Wir haben also nicht das Rad neu erfunden, aber gen auf die Gesamtstruktur – wird eine grosse Kos-
wagt. Die Lösung ist eine echte CS2-Entwicklung: wir haben ihm ein richtig gutes Radlager verpasst. teneffizienz erreicht.Deine Chefin will wissen, weshalb der Webshop nicht
mit einer Schnittstelle ans ERP angebunden ist?
Stell dich dem Monster.
Wir stellen die unbequemen Fragen.
WWW.CS2.CHSie können auch lesen
