Die Entwicklung von Apps ist nicht einfach und jede "Systemwelt" hat ihre eigenen Tools und Anforderungen. Ob mit Java und Eclipse für Android, mit Objective-C und Xcode für iOS, oder mit den Microsoft-Tools für die Windows-Welt. Bei diesem Vortrag lernen Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen: HTML5 und JavaScript. Sie steigen mit den Grundlagen des kostenlosen Intel XDK und Apache Cordova ein und werden dann mit den wichtigsten Frameworks und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Plattform Entwickler auf.

1. Roadshow:
Einstieg in die Hybrid-App Entwicklung
Gregor Biswanger | CEO von CleverSocial.de, Freier Dozent, Berater, Trainer und Autor
about.me/gregor.biswanger

2. Über mich
 Gründer von CleverSocial.de
 Freier Dozent, Berater und Trainer
 Schwerpunkte .NET-Architektur, Agile Prozesse,
XAML, Web und Cloud
 Technologieberater für die Intel Developer Zone
 Sprecher auf Konferenzen und User Groups
 Freier Autor für heise.de, dotnetpro,
WindowsDeveloper und viele weitere Fachmagazine
 Video-Trainer bei video2brain und Microsoft
Gregor Biswanger
Microsoft MVP, Intel Black Belt &
Intel Software Innovator
dotnet-blog.net
about.me/gregor.biswanger

3. Verlosung am Ende der Show
Posten mit dem Hashtag #IntelXDKShow auf Facebook oder Twitter.

4. Unser Reiseplan
 Wieso ist Cross-Plattform Entwicklung wichtig
 Aktuelle Lösungen im Vergleich
 Einführung in das Intel XDK
 Das Intel App Framework
 Responsive Webdesign
 Sensoren
#IntelXDKShow

5. HTML5 liegt im Trend
#IntelXDKShow

6. HTML5 bietet Features aus der Desktop-Welt!
 Offline Lauffähig
 Multi-threading mit WebWorkers
 Effiziente Kommunikation mit WebSockets
 Persistente Datenspeicherung
 Zugriff auf lokale Geräte (z.B. Kamera, Webcam)
 Geolokalisierung
 3D Fähigkeiten (WebGL)
 Multimedia (Video und Audio)
 Zeichnen von 2D Bitmaps/Sprites (Canvas)

7. HTML5 läuft auf allen gängigen Geräten!
#IntelXDKShow

8. Wofür dann noch Apps entwickeln?
#IntelXDKShow

9. Der Unterschied von App und Web
 Mehr Performance
 Besseren Zugriff auf Hardware
 Bessere Interaktion
 …
Accelerometer Gyroscope GPS Ambient LightCompass NFC
#IntelXDKShow

10. Wir haben ein Problem: Der Markt ist zu groß!
#IntelXDKShow

11. JavaScript – The Good Parts ;)
Wenn nicht alle Plattformen benötigt werden, soll eine native App-Entwicklung bevorzugt werden!
#IntelXDKShow

12. Die Lösung: Xamarin für native Apps
#IntelXDKShow

13. Xamarin
Vorteile
 Die Entwicklungsumgebung ist
Visual Studio
 Entwicklungssprache ist C#
 Die Apps werden nativ kompiliert
 Einheitliches Frontend
Nachteile
 Ist nicht kostenlos
 Jede Plattform hat eine eigene API
 Die Apple-Plattform kann nur auf dem
Mac entwickelt werden
 Zu wenig Plattformen werden unterstützt
#IntelXDKShow

14. Die Lösung: Hybrid-Apps mit Apache Cordova
 Cordova ist ein JavaScript-Framework für lokal installierbare WebApps
auf mobilen Endgeräten
 Ist Open-Source und liegt auf GitHub
 Unterstützte Plattformen: iOS, Android, LG webOS, Symbian OS,
BlackBerry, Tizen, Firefox OS, Windows Phone, Windows 8
 Features
 Zugriff auf Sensoren
 Plattformspezifische Funktionen (Notifications)
 Zugriff auf Kontakte
 Zugriff auf lokale Dateien
 Cordova bietet kein UI Framework!
cordova.apache.org
#IntelXDKShow

15. Die Geschichte von Apache Cordova
#IntelXDKShow

16. Entwickelt von der Firma Nitobi
 2009: Erstmals wurde PhoneGap auf dem
iPhoneDevCamp in San Francisco vorgestellt
 Bei O‘Reilly Media 2009 Web 2.0 Conference
gewann PhoneGap den People´s Choice Award
#IntelXDKShow

17. Nitobi wurde von Adobe gekauft
 2011: Adobe verkündete offiziell die Übernahme
von Nitobi Software
 Gleichzeitig wurde PhoneGap der Apache
Software Foundation gespendet
#IntelXDKShow

18. Wie Cordova funktioniert
PhoneGap Build
(Apache Cordova)
JS
CSS
HTML
Cloud Compiler
AppsEin Projekt
#IntelXDKShow

19. Das Cordova Projekt
JS
CSS
HTML
#IntelXDKShow

20. Das Builden
Natives WP8 Package (APP)WP8 ProjektCordova Projekt
#IntelXDKShow

21. Die WebView im XAML (WP8 Projekt)
#IntelXDKShow

22. Adobe PhoneGap
 Ein Code für alle gängige Plattformen
 Eine Vielzahl an Plattformen werden
unterstützt
 Einheitliche API für alle gängigen
Plattformen
 Sehr große Community
Nachteile
 Das Erstellen von Apps in der Cloud ist
nicht kostenfrei
 Die Apps sind nur teilweise nativ
 Für jede Plattform wird ein eigener
Emulator benötigt
 Für jede Plattform wird eine eigene
Datenstruktur benötigt
 Plattform spezifische Contracts müssen
mit zusätzlichen Aufwand implementiert
werden
 Hoher Lernaufwand
Vorteile
#IntelXDKShow

23. Die Lösung: Das Intel XDK
#IntelXDKShow

24. Intel XDK
 Ein Code für alle gängige Plattformen
 Eine Vielzahl an Plattformen wird unterstützt
 Einheitliche API für alle gängigen Plattformen
 Sehr große Community
 Kostenlose Entwicklungsumgebung
 Emulatoren für alle gängigen Geräte und
Plattformen
 Kostenloses Erstellen von Apps
 Interoperabilität zu anderen
Entwicklungsumgebungen
 Einige native Lösungen für schnellere Apps
 Rapid Application Development möglich
Nachteile
 Die Apps sind nur teilweise nativ
 Plattform spezifische Contracts müssen mit
zusätzlichen Aufwand implementiert werden
Vorteile
#IntelXDKShow

25. Das Intel XDK
 Komplett kostenlos
 Leichtgewichtig mit nur 130 MB
 Läuft unter Windows, OS X, Linux und weitere Linux-Derivaten
 Ist selbst in HTML und JavaScript entwickelt worden
 Besteht aus:
 Einer Entwicklungsumgebung (IDE)
 Ein JavaScript UI Framework (Intel App Framework)
 Kostenlosen App Builder in der Cloud (basierend auf Apache Cordova)
#IntelXDKShow

26. Kostenlos downloaden unter…
xdk.intel.com
#IntelXDKShow

27. Die Entwicklungsumgebung
Code-Editor /
Designer
Emulatoren /
Debugger
Remote-Tools
(Test / Debugger / Profiler)
Erstellen von Apps Cloud Dienste /
Web Services
#IntelXDKShow

28. Der Develop-Tab
 Code-Editor ist vom Adobes Open-Source HTML-Editor Brackets
 IntelliSense für JavaScript und viele weitere Features
 Unterstützung für die Versionsverwaltung Git
 App Designer
 Unterstützt unterschiedliche JavaScript UI Frameworks:
 Intel App Framework
 Bootstrap 3
 JQuery Mobile
 Topcoat
 Unterstützt Responsive Webdesign
#IntelXDKShow

29. Der Emulate-Tab
 Apache Ripple Integration simuliert Mobile Geräte
 Emulatoren für Smartphones, Tablets, E-Book-Reader und Ultrabooks
 Das Simulieren von Sensoren ist möglich
 Multi-Monitor Support
 Debugging mittels Google Chrome Developer Tools
#IntelXDKShow

30. Der Test-Tab
 Ermöglicht ein Ausführen der App auf dem eigenen Device
 Mobile (Über die Cloud)
 WiFi (WLAN)
 Per E-Mail (Via Project-Tab)
 App muss auf dem Zielgerät vorhanden sein
 Intel XDK App Preview
#IntelXDKShow

31. Der Build-Tab
 App wird vom Intel XDK Build
Service in der Cloud erzeugt
 Unterstützt werden die
Plattformen:
 Windows 8 Store Apps, Windows Phone 8
Apps
 Android, Crosswalk for Android
 Tizen
 Amazon
 Nook
 iOS Ad Hoc, iOS Production
 Firefox OS
 WebApp
 Chrome App
 Facebook App
#IntelXDKShow

32. Der Service-Tab
 Cloud-Dienste von Drittanbietern
 Teilweise kostenpflichtig
 Proxy-Generator für REST Web-Services mit JSON
 Ist vom Open-Source Projekt I/O Docs
 Unterstützung von AngularJS oder Backbone
#IntelXDKShow

33. Fazit
 Das Intel XDK bietet alle wichtigen Funktionen für die Cross-Plattform
Entwicklung
 Das Intel XDK ist eine Kombination aus unterschiedlichen Open-
Source-Projekten
 Interoperabilität zu jeder Phase
#IntelXDKShow

34. Das Intel App Framework
 Ist eine umfangreiche UI-JavaScript-Bibliothek, die auf drei Hauptmerkmale
aufbaut:
1. Es verfügt über eine Abfrage-Selektor-Bibliothek für die einfache DOM-Manipulation, deren
Syntax der von JQuery sehr ähnlich ist
2. Zusätzlich umfasst es ein UI/UX-Framework, das gestochen scharfe Animationen und flüssiges
Scrollen bietet (native Lösungen)
3. Zudem gibt es die Möglichkeit, hier für JavaScript Plug-ins zu erstellen
 Ist Open-Source unter MIT-X11-Lizenz
 Für mehr Performance
 http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
#IntelXDKShow

35. App-Framework-Query-Selector
Zugriff auf HTML-Elemente mit der $()-Funktion.
Dazu werden unterschiedliche Parameter zur Zuweisung unterstützt:
 String: Zugriff auf Elemente mit ID-Attributen, Elemente, die auf bestimmte CSS-Klassen verweisen, oder beides.
Auch ein direkter Verweis für alle HTML-Elemente vom gleichen Typ ist möglich
 Element: Das App-Framework erzeugt dynamisch ein HTML-Elementobjekt
 Array/Object: Das App-Framework erzeugt dynamisch ein HTML-Elementobjekt mit Kinder-Elementen
 Function: Führt eine Funktion aus, wenn DOMContentLoaded angetriggert wurde
#IntelXDKShow

36. App-Framework-UI
 Das App-Framework-UI wird abgekürzt im Code verwendet: AFUI
 Ermöglicht ein natives Theming der App
 Das Layout passt sich automatisch der darunterliegenden Plattform an
 Zahlreiche fertige Steuerelemente
 CSS3 bietet zahlreiche fertige Icons (Vektorbasiert) und Animationen
 Kompatibel mit anderen Frameworks (z.B. Backbone.js oder JQuery)
 Erweiterungen durch Plug-in-Support möglich
#IntelXDKShow

37. Fazit
 Große Ähnlichkeiten zu JQuery Mobile, Zepto.js oder Twitter
Bootstrap, konzentriert sich aber auf die wesentlichen Punkte wie
Einfachheit und Performance
 Es ist Open-Source
 Kompatibel zu anderen JavaScript Frameworks
#IntelXDKShow

38. Responsive Webdesign
#IntelXDKShow

39. Das ist Responsive Webdesign
http://daserste.de
#IntelXDKShow

40. Das ist KEIN Responsive Design
http://www.rtl2.de oder
http://Lingscars.com
#IntelXDKShow

41. Responsive Webdesign Regeln
 Oberfläche passt sich der Device-Größe an
 Oberfläche muss nicht zusätzlich gezoomt werden
 Oberfläche lässt sich passend zum Device mit Maus/Tastatur oder
Touch bedienen
#IntelXDKShow

42. Eine kleine Geschichte zum Thema Responsive
#IntelXDKShow

43. Das Web war schon immer Responsive!
Philadelphia 1955
#IntelXDKShow

44. Das Layout der Zeitung wird mit Tabellen gemacht
Layouten mit einer Desktop-Publishing (DTP)
Software
Druck bei der Presse
Artikel
#IntelXDKShow

45. Die Geschichte vom Layouten im Webdesign
 Frameset -> Tabellen -> Div -> Tabellen -> Div
 Standard Auflösung von
 800 x 600
 1024 x 768
Layouten mit Framesets#IntelXDKShow

46. Mobile First Responsive Design
 So klein wie möglich anfangen
 Idee von Luke Wroblewski (lukew.com)
 Wird erfolgreich umgesetzt bei großen
Konzernen
 Google
 Facebook
 Adobe
 yelp
 Und viele weitere…
#IntelXDKShow

47. Media Queries
@media all {
#content {
text-align:center;
}
}
@media screen and (max-width: 480px) {
#content {
font-size:80%;
color:#0000FF;
}
}
http://cssmediaqueries.com
#IntelXDKShow

48. Der Fluch von Responsive Webdesign
#IntelXDKShow

49. Der Fluch von Responsive Webdesign
 Das aktuelle Design passt nicht dazu
 Wir sind gar keine Designer
 Ständige Seiteneffekte
 Cross-Browser Probleme
 Zu aufwändig
 Fazit: Ist es wirklich nötig?
#IntelXDKShow

50. Twitter ging es genauso…
#IntelXDKShow

51. August 2011 war die Geburtsstunde von Bootstrap!
#IntelXDKShow

52. Die Eltern von Bootstrap
Jacob Thornton
#IntelXDKShow

53. Bootstrap 3.3.2
 UI Framework fürs Web
 Open-Source auf GitHub
 Basiert auf CSS3 und JavaScript
 Bietet zahlreiche Steuerelemente und Icons
 Unterstützt alle gängigen Browser
#IntelXDKShow

54. Mit Bootstrap Responsive
 Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-System
 Besteht aus 12 Spalten
#IntelXDKShow

55. Das Bootstrap Grid
#IntelXDKShow

56. Das Bootstrap Grid
col-xx-6 col-xx-6
col-xx-4 col-xx-4 col-xx-4
col-xx-3 col-xx-3 col-xx-3 col-xx-3
col-xx-9 col-xx-3
col-xx-9 col-xx-offset-2
#IntelXDKShow

57. Das Intel XDK und das Intel App Framework
unterstützen das gleiche Prinzip!
 Der App Designer unterstützt unterschiedliche UI Frameworks
 Der App Designer bietet Responsive Webdesign ohne Programmieraufwand
 Das Intel App Framework selbst unterstützt auch das Grid-System
#IntelXDKShow

58. Fazit
 Wir wissen jetzt was Responsive Webdesign ist
 Wofür es wichtig ist
 Worauf man zu achten hat
 Und dass das Intel XDK durch den App Designer ein
ideales Tooling bietet
#IntelXDKShow

59. Sensoren
Accelerometer Gyroscope GPS Ambient LightCompass NFC
#IntelXDKShow

60. API´s
Intel XDK mit Simulator-Support
 Accelerometer, Geolocation, Camera, Vibration
Cordova (Nur per remote Debugging testbar)
 Compass, Accelerometer, Geolocation, Camera, Vibration
Öffentliche Plug-ins
 Unterstützung aller Sensoren
http://software.intel.com/en-us/node/492826
http://cordova.apache.org/docs/en/2.9.0/guide_overview_index.md.html#Overview
#IntelXDKShow

61. Einheitlicher Zugriff auf Funktionen
Aktuelle Abfrage
 Beginnt immer mit sensor.get…
Abfrage in einem bestimmten Intervall
 Beginnt immer mit sensor.watch…
 Intervall kann optional festgelegt werden
#IntelXDKShow

62. Accelerometer
Auch bekannt als Beschleunigungssensor
Wird nicht nur zur Messung von Geschwindigkeit verwendet:
 Erkennung von Vibration und Bewegung
 Messen von Kräften
intel.xdk.accelerometer
http://software.intel.com/en-us/node/492838
#IntelXDKShow

63. Fazit
 Simulator unterstützt „noch“ nicht alle Sensoren
 Zugriff auf Sensoren mittels Intel XDK, Cordova und weiteren
Plug-Ins möglich
 Einheitlicher Zugriff mit einfachem Standard
#IntelXDKShow

64. Kostenloses Video-Training für alle!
http://goo.gl/BQb8ul#IntelXDKShow

65. FRAGEN?
#IntelXDKShow <- Letzte Chance ;)

66. Verlosung!

67. Vielen Dank!
http://about.me/Gregor.Biswanger
Ich freue mich auf Feedback!