Ansätze und Trends in der Mobile Entwicklung. Fachvortrag an der FHS St.Gallen.

1. Mobile Technologie.
Praxis. Namics.
ST.GALLEN, 13. MAI 2016
Johannes Waibel. Principal Consultant.

2. Agenda.
ERSTENS Mobile - Relevanz 5 MIN
ZW EITENS Namics 5 MIN
DRITTENS Projektenvorgehen & Technologie 20 MIN
VIERTENS Einblick in Kundenprojekte 20 MIN
FÜNFTENS Zusammenfassung 45 MIN

3. 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.

4. 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

5. Mobile - Relevanz.
ERSTENS

6. Namics.6
1995 – 2007
Web
2007 – 2012
Erste
Touch Geräte und
das iPhone
2012 – Jetzt
Stark steigende
Geräte-
Fragmentierung
Treiber:
Ära: Desktop Mobile Optimierung Mobile First
Web / Browser Spezifische
Mobile Websites
+ Standalone Apps
Responsive
Frontends
Business Apps
Crossplattform
Technologie:
MOBILE RELEVANZ
Mobile Zeitreise.

7. Jedes digitale Projekt sollte heutzutage
mit 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.

8. Namics.
ZWEITENS

9. Namics.
Seit 1995. Nah dran. Namics.
9
Dienstleister für hochwertige
E-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 schenken
uns ihr Vertrauen länger als 3 Jahre
am Stück
Frankfurt
Hamburg
Zürich
Belgrad
München
St. Gallen

10. Namics.NAMICS VORGESTELLT
Unser Dienstleitungsangebot.
10
Website & Portals
Digital Workplace
E-CommerceDigital Communications
Mobile Business Solutions
Operation Services

11. Namics.NAMICS VORGESTELLT
Wir beraten, konzipieren, entwickeln und integrieren
massgeschneiderte, komplexe Mobile Lösungen.
11

12. Consulting
Mobile Architect
Mobile Client
Project Management

13. Projektvorgehen.
DRITTENS

14. Namics.
Vorgehensmodell.
VORGEHEN 14
Anwender & Business Perspektive
Technologie Perspektive
Implementierung&Testing
Optimierung
Spezifikation
VerifikationScope
DigitalStrategie
Fachkonzeption
Visual
Design
Funktionalität
&
Prozesse
Architektur Blueprint
Funktionaler
Prototyp
Quelle: Namics Mobile

15. Anwender & Business
Perspektive.
MOBILE BUSINESS APPS

16. Namics.
Anwender & Business Perspektive.
16
Low-Fidelity
Hand sketchings, mockups
Mid-Fidelity
Wireframes, clickable
High-Fidelity
Visual design prototypes
Please visit http://ux.namics.com/ (German) for more information on our prototyping approach.

17. - 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.

18. Technologie Perspektive.
MOBILE BUSINESS APPS

19. Namics.LÖSUNGSARCHITEKTUR
Lösungsarchitektur Blueprint.
Single Point of Contact for Application
and Desktop version
(Mobile
Devices
Mobile
Middleware
DataSources
SAP
ERP
SAP
CRM
Hybris Education
Tool
Push &
User
Mgmt.
Additional business intelligence
Authentication
REST API for
clients
Frontend
Sites, loaded
by clients
WEB UI
HTML/JS/CSS
Native UI elements
(Signature, Docs, …)
Native UI Management, Offline Support, Local
Data Handling, Communication Layer
Mobile version
Hybrid Application
Desktop version
Web client
WEB UI
HTML/JS/CSS

20. Namics.LÖSUNGSARCHITEKTUR
Entwicklung Lösungsarchitektur:
Verstehen (1/2).
1. Funktionale-Perspektive
Funktionales Verständnis der Mobile Anwendungen kennen
(Klickbarer Prototyp)
2. Prozess-Perspektive
Prozessmodellierung (Login, Bestellung, Checkout,..)
3. NFR-Perspektive
Nicht Funktionale Anforderungen in Erfahrung bringen
4. Bestandesaufnahme akuelle Archtitektur
Einbettung & Integration in die aktuelle Systemumgebung

21. 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 / Backend
Werde neben dem Mobile Client neue Middleware-Services
wie z.B. Push-Nachrichten Services, Content-Administration,
Synchronisation, Einbindung bestehe Services, etc. benötigt?

22. Namics.LÖSUNGSARCHITEKTUR
Lösungsarchitektur Blueprint.
Single Point of Contact for Application
and Desktop version
(Mobile
Devices
Mobile
Middleware
DataSources
SAP
ERP
SAP
CRM
Hybris Education
Tool
Push &
User
Mgmt.
Additional business intelligence
Authentication
REST API for
clients
Frontend
Sites, loaded
by clients
WEB UI
HTML/JS/CSS
Native UI elements
(Signature, Docs, …)
Native UI Management, Offline Support, Local
Data Handling, Communication Layer
Mobile version
Hybrid Application
Desktop version
Web client
WEB UI
HTML/JS/CSS
Plattform Unabhängigkeit
Offline Fähigkeit
Sicherheit
Responsive Design
Mehrsprachigkeit
Schnittstellen zu Backend Systemen

23. Mobile Client.
MOBILE BUSINESS APPS

24. Namics.LÖSUNGSARCHITEKTUR
Lösungsarchitektur Mobile Client.
Single Point of Contact for Application
and Desktop version
(Mobile
Devices
Mobile
Middleware
DataSources
SAP
ERP
SAP
CRM
Hybris Education
Tool
Push &
User
Mgmt.
Additional business intelligence
Authentication
REST API for
clients
Frontend
Sites, loaded
by clients
Desktop version
Web client
WEB UI
HTML/JS/CSS
WEB UI
HTML/JS/CSS
Native UI elements
(Signature, Docs, …)
Native UI Management, Offline Support, Local
Data Handling, Communication Layer
Mobile version
Hybrid Application

25. Namics.25MOBILE CLIENT
Mobile Client.
Native Applikationen Hybrid Applikationen Web Applikationen
100%
Nativ
100%
Web
Device API Device API
Web Code

26. 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

27. Namics.27MOBILE CLIENT
Mobile Client- Entscheidungsbaum.
Grad der “Native” User
Experience
Offline, Performance, Distribution, B2B vs. B2C
Web Applications
Hybrid Applications
Anzahl unterstütze
Mobile Plattformen Native „Singleplattform“
umsetzen
≥2
Komplexität App Logik
(Datenbank, Kommunikation)
Native pro
Plattform umsetzen
hoch
niedrig
Cross Plattform
Ansatz mit Tech. Lead
prüfen
Produktivität, Portierungskosten, Kosten pro Plattform
Businesskritisch
„must have“
Nicht
Businesskritisch
„nice to have*
1
≥2
hoch
Quelle: Namics Mobile

28. 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

29. Mobile Middleware.
MOBILE BUSINESS APPS

30. Namics.LÖSUNGSARCHITEKTUR
Lösungsarchitektur Mobile Middleware.
(Mobile
Devices
DataSources
SAP
ERP
SAP
CRM
Hybris Education
Tool
WEB UI
HTML/JS/CSS
Native UI elements
(Signature, Docs, …)
Native UI Management, Offline Support, Local
Data Handling, Communication Layer
Mobile version
Hybrid Application
Desktop version
Web client
WEB UI
HTML/JS/CSS
Single Point of Contact for Application
and Desktop version
Mobile
Middleware
Push &
User
Mgmt.
Additional business intelligence
Authentication
REST API for
clients
Frontend
Sites, loaded
by clients

31. 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)

32. 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

33. Namics.MOBILE MIDDLEWARE
Mobile Middleware – Anbieter.
Quelle: The Forrester WaveTM: Mobile Infrastructure Services, Q3 2015

34. Namics.MOBILE MIDDLEWARE
Mobile Middleware – Anbieter.
Quelle: The Forrester WaveTM: Mobile Infrastructure Services, Q3 2015

35. Namics.MOBILE MIDDLEWARE
Mobile Middleware – Diplomarbeit.
Quelle: Namics

36. 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.

37. Einblick in
Kundenprojekte.
VIERTENS

38. Namics.NAMICS IN A NUTSHELL
Einblick in Kundenprojekte.
38

39. Namics.
Swisscom. Partner App.
39

40. Vor Ort

41. Namics.
Post Mail. Mobile Apps.

42. Signatur

43. Namics.43
Medela. MyMedela.

44. Global

45. Namics.45
Phonak. Sales App.

46. Feldstudie

47. Namics.ERFAHRUNG
Viessmann. Ersatzteil App.

48. Callcenter

49. Namics.
ABB Connect.

50. Modular

51. Zusammenfassung.
FÜNFTENS.

52. Namics.52
1995 – 2007
Web
2007 – 2012
Erste
Touch Geräte und
das iPhone
2015 – Zukunft
Ablösung
klassischer
Denkmuster
2012 – Jetzt
Stark steigende
Geräte-
Fragmentierung
Treiber:
Ära: Desktop Mobile Optimierung Neue GeschäftsmodelleMobile First
Web Spezifische
Mobile Websites
+ Standalone Apps
Responsive
Frontends
Business Apps
Mobile Middleware
IoT-Ökosysteme
Responsive
Frontends
Business Apps
Crossplattform
Technologie:
MOBILE RELEVANZ
Mobile Zeitreise. The next thing.

53. Namics.
Trend Scouting: Innovation Walk-In Labs.
53
http://de.slideshare.net/jwaibel/namics-walkin-lab-wearables-und-apple-watch

54. Namics.54
Kontakt.
Johannes Waibel
Principal Consultant
johannes.waibel@namics.com
+ 41 79 521 96 87

55. Fertig.
5
5