customer success story · Extrem performante und stabile Plattform, ... › AngularJS –...

www.mountopia.comcustomer success story

Das Team der TechDivision stand vor der Herausforderung, eine interaktive Plattform für das Promoten von bergsteige-rischen Herausforderungen zu schaffen. Das Mountopia ge-taufte Projekt soll es einem sozialen Netzwerk erlauben, dass Nutzer ihre Fortschritte auf dem Weg zu ihrem ganz persön-lichen Alpin-Ziel, teilen und gegenseitig bewerten können. Durch einen chronologischen Verlauf erzählt so jeder Nutzer seine eigene Geschichte zum Erfolg in der Sportdisziplin ihrer/seiner Wahl.

Zusätzlich soll die Plattform spannende Stories vom Werde-gang bekannter Top-Athleten aus dem Bereich bieten, sowie über eine halbjährliche Siegerehrung weitere Anreize für die Nutzer bieten.

Die Top-Athleten promoten zudem Produkte von Dynafit, die Sie zum Erreichen des jeweilien Mountopias genutzt haben. Durch die Einbindung der Produkte in die Stories erhält die Community zusätzlich hochwertige Produktempfehlungen von Top-Athleten, die diese Produkte intensiv nutzen – Content Commerce par excellence.

Da sich die Community über den gesamten Globus spannen soll, war eine umfassende Internationalisierung der Anwen-dung Pflicht.

Produktvision

social engagement plattform für outdoor-freaks

www.mountopia.com

www.mountopia.com – Customer Success Story 2

ergebnis

Extrem performante und stabile Plattform, die einfach gewartet und weiterentwickelt werden kann

Technisch saubere und vom Shop entkoppelte App, die beispielsweise nach einem Shop-Relaunch wieder eingebunden werden kann.

Redakteure können Inhalte im hauseigenen Service-Portal pflegen und in die App syncen.

Optimale User-Experience durch Responsive Design sowie sehr kurze Ladezeiten

Größtmögliche Sicherheit durch gekapselte Softwarearchitektur

Sehr gutes Feedback aus der Community und hohe Akzeptanz

lösungen

Implementierung einer Individualentwicklung auf Basis von: › AngularJS – JavaScrip MVC Framwork (by Google)

› Meteor – Full Stack JavaScript Plattform

Kadira – Performance Management Plattform für Meteor

Elasticsearch als zentraler Index

Mongo DB als hochperformante, zentrale Datenbank

Isomorphic Java Script Ansatz für bestmögliche SEO-Tauglichkeit

Anbindung des bestehenden PIM-Systems sowie des CRM

anforderungen

Implementierung einer hoch skalierbaren Community-Plattform und nahtlose Integration in den bestehenden Magento-Shop von Dynafit

Bestmögliche Performance und jederzeitige Erweiterbarkeit sowie möglichst geringer Maintenance-Aufwand

Aufbau einer häufig wiederkehrenden Community durch die Plattform

Unterstützung eines internationalen Rollouts

Integration bzw. Anbindung der bestehenden IT-Infrastruktur

Straffer Zeitplan mit fixer Deadline aufgrund weit angelegter Marketingkampagnen


responsiVe design


cHallenge


stories

6

community

7

community

8

Javascript single page app

Bei der technischen Umsetzung haben wir uns für eine sog. Single-Page App auf Basis von Ja-vaScript entschieden. Hierbei verwenden wir eine Kombination aus AngularJS für das Frontend sowie Meteor für das Backend. Die Integration mit MeteorJS macht es möglich, den komplet-ten Code in JavaScript zu schreiben und die Daten live mit niedrigster Latenz an den User zu übertragen. Durch diese homogene Verwendung einer Skriptsprache auf allen Ebenen (Client, Backend, DB-Queries) wird die Wartung deutlich vereinfacht. Darüberhinaus können optimale Seitenladezeiten gewährleistet werden, da nur einzelne neue Daten übertragen werden und kein komplettes Markup vom Server beansprucht wird.

contentpflege

Die Contentpflege in der DYNAFIT Single-Page-App erfolgt ohne eigenes Backend durch die Anbindung des bestehenden Redaktionssystems über Elasticsearch.

single-sign-on

Durch den Einsatz von Single-Sign-On sowie einer optimierten Softwarearchitektur werden kei-ne kritischen personenbezogenen Daten in der Datenbank gespeichert. Die Unterstützung von Mehrsprachigkeit wird durch den Einsatz von angular translate gewährleistet.

seo

Das Thema SEO wird bei diesem Projekt durch den Einsatz von sog. Isomorphic JavaScript gelöst. Hierbei geht es darum, eine Applikation zu schaffen, deren Code sowohl auf dem Server als auch auf dem Client identisch ist. Das ermöglicht das Ausliefern von fertigem HTML durch den Server für die Crawlbarkeit und die Nutzbarkeit im Stile einer Applikation im Client.

die tecHniscHe lösung für das dynafit-proJekt


proJekt-setup / infrastruktur

www.creaton.de – Customer Success Story 10

Build & deployment framework

www.creaton.de – Customer Success Story 11

Eine große Herausforderungen bestand bei diesem Projekt darin, die lebendige Community die sich entwickelt auch als solche sichtbar zu machen und einem vielseitig interessierten, interna-tionalen, Publikum als Mittelpunkt ihres sportlichen Lebens zu dienen.

Um die Lebendigkeit des Projektes hervorzuheben, war man sich schnell einig, dass hierzu clientseitiges Rendering notwendig sein wird. Diese Kerneigenschaft von vor allem Javascript basierten Single-Page-Anwendungen erlaubt es, Daten dezentral und nach Bedarf der Anwendung zuzuführen und diese dann anzuzeigen.

Da hierbei das typische Neuladen der Seite entfällt, erlebt der Nutzer eine vollkommen neue User-Experience, die zusammen mit dem geschickten Einsatz von Statusanzeigen die empfun-dene Verzögerung deutlich minimiert. Um dieses Erlebnis noch zu verstärken, entschied man sich zudem für die Nutzung von sog. Data-Push Technologien. Diese verhindert nicht nur das Neuladen einer Seite, sondern zeigt Änderungen der Datenbasis direkt beim Nutzer an, ohne dass dieser selbst handeln muss.

Im Zusammenspiel mit dem sozialen Gedanken der Plattform gibt es dem Nutzer das Gefühl, Teil einer lebendigen Community zu sein, da er die Interaktion anderer Nutzer mit der Plattform sofort und ohne eigenes Zutun nachverfolgen kann. Weitere Features wie der Upload von Bildern inkl. Zuschnittsfunktion, die Timeline, das optimierte Sharen von Inhalten auf Facebook, Twitter und Google Plus, eine PictureWall, sowie eine zentrale Voting-Funktion inkl. dazugehöriger Ranking bilden die Basis für den Aufbau einer aktiven Community.

Die Plattform läuft vom ersten Tag an extrem performant und stabil. Zwischenzeitlich hat sich bereits eine „eingeschworene“ Community gebildet und für ihr persönliches Mountopia ange-meldet – und es werden täglich mehr …

Den aktuellen Stand kann man unter https://www.mountopia.com/community live mitverfolgen!

ergeBnis



projektmanagement

Für das Oberalp-Projekt war ein Team mit drei Entwicklern und einem Software-Architekten im Einsatz. Das Projekt wurde komplett agil mittels Scrum realisiert, um größtmögiche Flexibilität und Effzienz bei gleichzeitig bestmöglicher Qualität gewährleisten zu können. Die Steuerung erfolgte über einen Product Owner (PO), der von TechDivision gestellt wurde. Dieser kommunizierte direkt mit einem Projektverantwortlichen auf Kundenseite. Durch tägliche Standups sowie einen laufenden Austausch zwischen Team und Kunde konnte das Projekt trotz enormen Zeitdruck fristgerecht fertiggestellt werden!

proJektlaufzeit

tecHnologie

komponenten

BesonderHeiten

06.06.2016 – 26.09.2016

Individualentwicklung, vollständig auf Basis von JavaScript

› AngularJS – JavaScrip MVW Framework (by Google) › Meteor – Full Stack JavaScript Plattform › Kadira – Performance Management Plattform für Meteor › Elasticsearch – Enterprise Index- und Suchtechnologie

› Nahtloses Laden von neuen Daten/Änderungen, d.h. nahezu Echtzeit-Kommunikation zwischen Clients und Server

› Anbindung der bestehenden Infrastruktur (insbes. CRM) über Single-Sign-On

› Automatische Generierung von statischen Seiten für Suchmaschinen

› Einfache und kostengünstige Wartung und Weiterentwicklung durch homogene Verwendung einer Skriptsprache auf allen Ebenen

› Größtmögliche Datensicherheit durch Kapselung von personen-bezogenen Daten

D a t e n & F a k t e n

F a z i t

it rocks!

„Liebes Mountopia Launch-team, ich möchte mich herzlich bei euch allen für eure super arbeit von der erstellung bis zur absolut punktgenauen Umsetzung der Mountopia Seite bedanken!

Sehr gut gemacht. Jetzt müssen wir die Seite nur noch mit lebenden Mountopias füllen.“

Benedikt Böhm, Geschäftsführer Dynafit


techdivision

Als etablierter Webtechnologiedienstleister unterstützt TechDivision seit 1997 namhafte nationale und internationale Kunden bei der ganzheitlichen Planung, Konzeption und Umsetzung von webbasierten Technologien. Der Fokus liegt in der Realisierung von komplexen E-Commerce-Lösungen (sowohl B2C als auch B2B) basierend auf Magento, der Entwicklung von Unternehmenswebseiten und Intranetlösungen mit dem Content Management System TYPO3, sowie individuelle Webapplikationen auf Basis von PHP und JavaScript.

TechDivision ist Magento Enterprise Partner der ersten Stunde und kann zwischenzeitlich weit mehr als 100.000 Stunden Magento Projekterfahrung vorweisen. Zudem wurde die Onlineagentur mit dem Magento „Spirit of Excellence Award 2013“ ausge- zeichnet und gehört damit zu den führenden Magento Partnern in Europa.

Als „TYPO3 Association Gold Member“ verfügt TechDivision im Bereich TYPO3, TYPO3 Neos, TYPO3 Flow, Webentwicklung (PHP, JAVA, XHTML, CSS, Flash) und Webdesign ebenfalls über umfangreiches und langjähriges Know-how. Aktuell arbeitet bei TechDivision ein Team von rund 70 Mitarbeitern an zwei Standorten in Rosenheim/Kolbermoor sowie München.

www.techdivision.com

angularJs und meteor

AngularJS – oft einfach als Angular bezeichnet – ist ein clientseitiges JavaScript-Webframework zur Erstellung von Single-page-Webanwendungen nach einem Model-View-ViewModel-Muster. Die Softwareentwicklung und das Komponententesten können damit vereinfacht werden. Es wird als Open-Source-Framework vom US-amerikanischen Unternehmen Google Inc. Entwickelt. Mittlerweile gehört AngularJS zu den führenden JavaScript-Plattformen und erfreut sich aufgrund der permanent steigenden Leistungsfähigkeit und den damit einhergehenden Möglichkeiten zunehmender Beliebtheit.

Bei Meteor handelt es sich um das derzeit mit Abstand führenden Full-Stack-Framework für JavaScript. Darunter versteht man integrierte Lösungen, um Web-Applikationen vom Backend hin zum Frontend-Layer mit nur einer Sprache (in diesem Fall JavaScript) zu entwickeln.

TechDivision ist einer der wenigen offiziellen Meteor-Partner in der DACH-Region.

https://angularjs.org

www.meteor.com

oberalp

Die Oberalp Gruppe, gegründet 1981 von Heiner Oberrauch, beschäftigt gegenwärtig rund 600 Menschen und ist neben der Entwicklung und Produktion von Bergsportartikeln auch im Sporteinzelhandel sowie im Großhandel und Vertrieb sportbasierter Marken tätig. 1990 übernahm Oberalp die in München ansässige SALEWA. SALEWA ist heute Europas führender Multispezialist für Bergsportartikel. Auch in Asien, den USA und anderen Schlüsselregionen etablierte sich SALEWA erfolgreich. Dank fundierter Erfahrung auf Expeditionen und in der Vertikalen bietet die Marke innovative, hochfunktionelle und sichere Qualitätsprodukte für passionierte Bergsportler. Um das Angebot für den Bergsportsektor zu vervollständigen, wurden nach SALEWA im Laufe der Jahre die Marken DYNAFIT, POMOCA und WILD COUNTRY als eigenständige Marken der Oberalp Gruppe übernommen.

Oberalp fungiert auch als Generalvertreter und Importeur für namhafte Marken wie SPEEDO, FISCHER, SPYDER, LÖFFLER, HALTI, BARTS, ARMADA, RIP CURL, SILVA in verschiedenen Ländern.

Als Familienunternehmen, das in Generationen denkt, achtet die Oberalp Gruppe besonders darauf, ihre Mitarbeiter zu unterstützen, ein verlässliches Arbeitsklima zu gestalten und ein motivierendes Miteinander zu leben.

www.oberalp.com

http://www.techdivision.com


Spinnereiinsel 3a83059 Kolbermoor

Tel +49 8031 2210 55-0Fax +49 8031 2210 55-22

[email protected]

www.techdivision.com

techdivision gmbH

Balanstr. 73, Haus 8, 3 OG81541 München

Sie haben Fragen? Wir stehen ihnen telefonisch und per Mail gerne zur Verfügung und freuen uns auf eine

gemeinsame und erfolgreiche zusammenarbeit!

customer success story · Extrem performante und stabile Plattform, ... › AngularJS –...

Documents

Transcript of customer success story · Extrem performante und stabile Plattform, ... › AngularJS –...