Mobile Technologie. Praxis. Namics.ST.GALLEN, 13. MAI 2016

Johannes Waibel. Principal Consultant.

Agenda.

ERSTENS Mobile - Relevanz 5 MIN

ZWEITENS Namics 5 MIN

DRITTENS Projektenvorgehen & Technologie 20 MIN

VIERTENS Einblick in Kundenprojekte 20 MIN

FÜNFTENS Zusammenfassung 45 MIN

Namics.

Johannes Waibel.Principal Consultant.

Über mich.WILLKOMMEN 3

Der Digitale Wandel schreitet kontinuierlich voran. Die “Mobile Revolution” spielt dabei eine zentrale Rolle. Mit mobilen Innovationen und übergreifenden digital Lösungen versuche ich zusammen mit meinen Teams die relevanten Trends zu erkennen, zu konzipieren und erfolgreich umzusetzen. Ich verfüge über mehr 10 Jahre Erfahrung im Online Business - sowohl als Berater, Projektleiter wie auch in der Co-Leitung von Business Units und Aufbau eines Nearshoring Standorts in Belgrad.

Master Degree in Management & Economics an der Universität Zürich. Gründer und Redakteur des Geschäftsideen Blogs ideenstrom.com.

Namics.4WILLKOMMEN

Ziele.

1. Namics verstehen

2. Wie gehen wir in der Entwicklung von Mobile Projekten vor

3. Unterscheidung: Mobile Client & Mobile Middleware

4. Einblick in die Praxis

5. Fragen und Antworten

Mobile - Relevanz.ERSTENS

Namics.6

1995 – 2007

Web

2007 – 2012

Erste Touch Geräte und

das iPhone

2012 – Jetzt

Stark steigendeGeräte-

Fragmentierung

Treiber:

Ära: Desktop Mobile Optimierung Mobile First

Web / Browser SpezifischeMobile Websites

+ Standalone Apps

ResponsiveFrontends

Business AppsCrossplattform

Technologie:

MOBILE RELEVANZ

Mobile Zeitreise.

Jedes digitale Projekt sollte heutzutagemit einem „Mobile-Mindset“ starten, denn,

mobile Devices werde nicht mehr nur unterwegs genutzt, sondern sind auch im Geschäft und Zuhause DER zentrale Zugang zu digitalen Services.

Je kleiner der Screen, desto handlicher der Zugang (“Best Screen”)

Mobile ist der „Desktop“ der Zukunft und die „klassische“ Kanaltrennung Desktop, Tablet, Smallscreen löst sich auf.

MOBILE RELEVANZ

Mobile Mindset.

Namics.ZWEITENS

Namics.

Seit 1995. Nah dran. Namics.9

DIENSTLEISTER FÜR HOCHWERTIGEE-BUSINESS PROJEKTE

–1995 GEGRÜNDET

–480 MITARBEITER

–CHF 63.5 MIO. UMSATZ 2015

–ÜBER 2‘000 PROJEKTE REALISIERT

INHABERGEFÜHRTES UNTERNEHMEN

–27 PARTNER

PARTNERSCHAFT

–ÜBER 75% UNSERER KUNDEN SCHENKENUNS IHR VERTRAUEN LÄNGER ALS 3 JAHREAM STÜCK

Frankfurt

Hamburg

ZürichBelgrad

München

St. Gallen

Namics.10NAMICS VORGESTELLT

Unser Dienstleitungsangebot.

Website & Portals

Digital Workplace

E-CommerceDigital Communications

Mobile Business Solutions

Operation Services

Namics.NAMICS VORGESTELLT

Wir beraten, konzipieren, entwickeln und integrieren massgeschneiderte, komplexe Mobile Lösungen.

11

Consulting

Mobile Architect

Mobile Client

Project Management

Projektvorgehen.DRITTENS

Namics.

Vorgehensmodell.VORGEHEN 14

Anwender & Business Perspektive

Technologie Perspektive

Impl

emen

tieru

ng &

Tes

ting

Opt

imie

rung

Spez

ifika

tion

Verif

ikat

ion

Scop

e

Dig

ital S

trat

egie

Fachkonzeption

VisualDesign

Funktionalität&

Prozesse

Architektur Blueprint

FunktionalerPrototyp

Quelle: Namics Mobile

Anwender & Business Perspektive.

MOBILE BUSINESS APPS

Namics.

Anwender & Business Perspektive.16

Low-FidelityHand sketchings, mockups

Mid-FidelityWireframes, clickable

High-FidelityVisual design prototypes

Please visit http://ux.namics.com/ (German) for more information on our prototyping approach.

- Einbettung in digitale Gesamtstrategie

- B2B vs. B2C Lösung

- Fokus auf „User Experience“

- Kurze “Time to Market”

- Hohe Preissensitivität

- Funktionale Anforderungen

ANWENDER & BUSINESS PERSPEKTIVE

Konklusion.

Technologie Perspektive.MOBILE BUSINESS APPS

Namics.LÖSUNGSARCHITEKTUR

Lösungsarchitektur Blueprint.

Single Point of Contact for Application and Desktop version

(Mob

ileD

evic

esM

obile

M

iddl

ewar

eD

ata

Sou

rces

SAPERP

SAPCRM

Hybris EducationTool

Push & User

Mgmt.

Additional business intelligence

Authentication

REST API forclients

FrontendSites, loaded

by clients

WEB UIHTML/JS/CSS

Native UI elements(Signature, Docs, …)

Native UI Management, Offline Support, Local Data Handling, Communication Layer

Mobile versionHybrid Application

Desktop versionWeb client

WEB UIHTML/JS/CSS

Namics.LÖSUNGSARCHITEKTUR

Entwicklung Lösungsarchitektur: Verstehen (1/2).1. Funktionale-Perspektive

Funktionales Verständnis der Mobile Anwendungen kennen (Klickbarer Prototyp)

2. Prozess-PerspektiveProzessmodellierung (Login, Bestellung, Checkout,..)

3. NFR-PerspektiveNicht Funktionale Anforderungen in Erfahrung bringen

4. Bestandesaufnahme akuelle ArchtitekturEinbettung & Integration in die aktuelle Systemumgebung

Namics.LÖSUNGSARCHITEKTUR

Entwicklung Lösungsarchitektur: Verstehen & Entwickeln (2/2).1. Mobile Client

Welche Plattformen müssen abgedeckt werde und welcher Entwicklungsansatz deckt sich mit den Anforderungen aus Business und IT?

2. Mobile Middleware / BackendWerde neben dem Mobile Client neue Middleware-Services wie z.B. Push-Nachrichten Services, Content-Administration, Synchronisation, Einbindung bestehe Services, etc. benötigt?

Namics.LÖSUNGSARCHITEKTUR

Lösungsarchitektur Blueprint.

Single Point of Contact for Application and Desktop version

(Mob

ileD

evic

esM

obile

M

iddl

ewar

eD

ata

Sou

rces

SAPERP

SAPCRM

Hybris EducationTool

Push & User

Mgmt.

Additional business intelligence

Authentication

REST API forclients

FrontendSites, loaded

by clients

WEB UIHTML/JS/CSS

Native UI elements(Signature, Docs, …)

Native UI Management, Offline Support, Local Data Handling, Communication Layer

Mobile versionHybrid Application

Desktop versionWeb client

WEB UIHTML/JS/CSS

Plattform Unabhängigkeit

Offline Fähigkeit

Sicherheit

Responsive Design

Mehrsprachigkeit

Schnittstellen zu Backend Systemen

Mobile Client.MOBILE BUSINESS APPS

Namics.LÖSUNGSARCHITEKTUR

Lösungsarchitektur Mobile Client.

Single Point of Contact for Application and Desktop version

(Mob

ileD

evic

esM

obile

M

iddl

ewar

eD

ata

Sou

rces

SAPERP

SAPCRM

Hybris EducationTool

Push & User

Mgmt.

Additional business intelligence

Authentication

REST API forclients

FrontendSites, loaded

by clients

Desktop versionWeb client

WEB UIHTML/JS/CSS

WEB UIHTML/JS/CSS

Native UI elements(Signature, Docs, …)

Native UI Management, Offline Support, Local Data Handling, Communication Layer

Mobile versionHybrid Application

Namics.25MOBILE CLIENT

Mobile Client.Native Applikationen Hybrid Applikationen Web Applikationen

100%Nativ

100%Web

Device API Device API

Web Code

Namics.26MOBILE CLIENT

Mobile Client. Hybrid Applikation.

- Plattformunabhängigkeit

- Desktop Support

- UI WiederverwendbarkeitMultiplattform Support

Plattformspezifisch- Erweiterter Offline Support

- Security

- Push

- Proprietäre Datentypen

Device API

Native Container

Web Code

Namics.27MOBILE CLIENT

Mobile Client- Entscheidungsbaum.Grad der “Native” User

ExperienceOffline, Performance, Distribution, B2B vs. B2C

Web Applications

Hybrid Applications

Anzahl unterstützeMobile Plattformen Native „Singleplattform“

umsetzen

≥2Komplexität App Logik

(Datenbank, Kommunikation)

Native proPlattform umsetzen

hoch

niedrig

Cross Plattform Ansatz mit Tech. Lead

prüfenProduktivität, Portierungskosten, Kosten pro Plattform

Businesskritisch„must have“

NichtBusinesskritisch

„nice to have*

1

≥2

hoch

Quelle: Namics Mobile

Namics.28MOBILE CLIENT

Mobile Client – Fazit.

- Für B2C Lösungen teilen sich Android (80%) und iOS (15%) den Markt auf. Die Verteilung der Nutzer hängt stark von den Zielmärkten ab.

- Für B2B Lösungen gibt es keine klare Präferenz bei der Auswahl der Plattform

- Das Dilemma der redundanten Entwicklung pro Plattform wird mit verschiedenen Ansätzen angegangen (Crossplattform: Single Source) und Hybrid (Web + spezifischer Container)

Quelle: idc.com

Mobile Middleware.MOBILE BUSINESS APPS

Namics.LÖSUNGSARCHITEKTUR

Lösungsarchitektur Mobile Middleware.(M

obile

Dev

ices

Dat

a S

ourc

es

SAPERP

SAPCRM

Hybris EducationTool

WEB UIHTML/JS/CSS

Native UI elements(Signature, Docs, …)

Native UI Management, Offline Support, Local Data Handling, Communication Layer

Mobile versionHybrid Application

Desktop versionWeb client

WEB UIHTML/JS/CSS

Single Point of Contact for Application and Desktop versionM

obile

M

iddl

ewar

e

Push & User

Mgmt.

Additional business intelligence

Authentication

REST API forclients

FrontendSites, loaded

by clients

Namics.MOBILE MIDDLEWARE

Mobile Middleware.

- Mobile Anwendungen greifen häufig auf Daten in Unternehmenssystemen zu. Die heutigen Systemarchitekturen werden aber nicht den Anforderungen von mobile Clients gerecht

- Dies schafft eine Notwendigkeit für eine Zwischenschicht zwischen mobilen Frontends und Enterprise Backends (=Mobile Middleware)

- Lösungsansätze dazu sind- On-premise hosted mobile middleware- Cloud connectivity services (e.g.,MBaaS, back-end-as-a-service)

Namics.MOBILE MIDDLEWARE

Mobile Middleware.

- Mobile Middleware unterstützt in den Bereichen- Authentifizerung Benutzer- Offline Datensynchronisation- Integration: Anbindung an Backend. Bereitstellung Mobile

taugliche API’s und Datenformate (z.B. JSON)- Daten Aggreation und Business Logik

- Optional- Mobile App Distribution & Sicherheit (z.B. Interne Appstores)- Analytics

Namics.MOBILE MIDDLEWARE

Mobile Middleware – Anbieter.

Quelle: The Forrester WaveTM: Mobile Infrastructure Services, Q3 2015

Namics.MOBILE MIDDLEWARE

Mobile Middleware – Anbieter.

Quelle: The Forrester WaveTM: Mobile Infrastructure Services, Q3 2015

Namics.MOBILE MIDDLEWARE

Mobile Middleware – Diplomarbeit.

Quelle: Namics

Namics.36MOBILE MIDDLEWARE

Mobile Middleware – Fazit.

- Der Markt für Mobile Middleware ist noch jung und entwickelt sich sehr dymamisch. Parse.com als BaaS wird per Jan 2017 eingestellt.

- Cloudbasierte Applikations-Lösungen (MBaaS) sind stark am kommen haben aber einen schwiergen Stand sich in klassische IT-Architekturen einzugliedern (Datenhoheit, Sensitive Daten, Kontrolle).

- Eine umfangreiche Evaluation in den verschiedenen Dimensionen ist zentral.

- Für grössere und komplexere Vorhaben empfiehlt sich die Realisierung eines vorgelagerten PoC.

Einblick in Kundenprojekte.

VIERTENS

Namics.38NAMICS IN A NUTSHELL

Einblick in Kundenprojekte.

Namics.

Swisscom. Partner App.39

Vor Ort

Namics.

Post Mail. Mobile Apps.

Signatur

Namics.43

Medela. MyMedela.

Global

Namics.45

Phonak. Sales App.

Feldstudie

Namics.ERFAHRUNG

Viessmann. Ersatzteil App.

Callcenter

Namics.

ABB Connect.

Modular

Zusammenfassung.FÜNFTENS.

Namics.52

1995 – 2007

Web

2007 – 2012

Erste Touch Geräte und

das iPhone

2015 – Zukunft

Ablösung klassischer Denkmuster

2012 – Jetzt

Stark steigendeGeräte-

Fragmentierung

Treiber:

Ära: Desktop Mobile Optimierung Neue GeschäftsmodelleMobile First

Web SpezifischeMobile Websites

+ Standalone Apps

ResponsiveFrontends

Business Apps

Mobile MiddlewareIoT-Ökosysteme

ResponsiveFrontends

Business AppsCrossplattform

Technologie:

MOBILE RELEVANZ

Mobile Zeitreise. The next thing.

Namics.

Trend Scouting: Innovation Walk-In Labs.53

http://de.slideshare.net/jwaibel/namics-walkin-lab-wearables-und-apple-watch

Namics.54

Kontakt.

Johannes WaibelPrincipal Consultant

johannes.waibel@namics.com+ 41 79 521 96 87

Fertig.

55