Roadshow:Einstieg in die Hybrid-App Entwicklung

Gregor Biswanger | CEO von CleverSocial.de, Freier Dozent, Berater, Trainer und Autorabout.me/gregor.biswanger

Ü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.netabout.me/gregor.biswanger

Verlosung am Ende der Show

Posten mit dem Hashtag #IntelXDKShow auf Facebook oder Twitter.

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

HTML5 liegt im Trend

#IntelXDKShow

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)

HTML5 läuft auf allen gängigen Geräten!

#IntelXDKShow

Wofür dann noch Apps entwickeln?

#IntelXDKShow

Der Unterschied von App und Web Mehr Performance

Besseren Zugriff auf Hardware

Bessere Interaktion

…

Accelerometer Gyroscope GPS Ambient LightCompass NFC

#IntelXDKShow

Wir haben ein Problem: Der Markt ist zu groß!

#IntelXDKShow

JavaScript – The Good Parts ;)

Wenn nicht alle Plattformen benötigt werden, soll eine native App-Entwicklung bevorzugt werden!

#IntelXDKShow

Die Lösung: Xamarin für native Apps

#IntelXDKShow

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

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

Die Geschichte von Apache Cordova

#IntelXDKShow

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

Nitobi wurde von Adobe gekauft

2011: Adobe verkündete offiziell die Übernahme von Nitobi Software

Gleichzeitig wurde PhoneGap der Apache Software Foundation gespendet

#IntelXDKShow

Wie Cordova funktioniert

PhoneGap Build

(Apache Cordova)

JSCSS

HTML

Cloud Compiler

AppsEin Projekt#IntelXDKShow

Das Cordova Projekt

JSCSS

HTML

#IntelXDKShow

Das BuildenNatives WP8 Package (APP)WP8 ProjektCordova Projekt

#IntelXDKShow

Die WebView im XAML (WP8 Projekt)

#IntelXDKShow

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

Die Lösung: Das Intel XDK

#IntelXDKShow

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

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

Kostenlos downloaden unter…

xdk.intel.com#IntelXDKShow

Die Entwicklungsumgebung

Code-Editor / Designer

Emulatoren / Debugger

Remote-Tools (Test / Debugger / Profiler)

Erstellen von Apps Cloud Dienste /Web Services

#IntelXDKShow

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

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

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

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

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

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

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

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

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

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

Responsive Webdesign

#IntelXDKShow

Das ist Responsive Webdesign

http://daserste.de

#IntelXDKShow

Das ist KEIN Responsive Design

http://www.rtl2.de oderhttp://Lingscars.com

#IntelXDKShow

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

Eine kleine Geschichte zum Thema Responsive

#IntelXDKShow

Das Web war schon immer Responsive!

Philadelphia 1955

#IntelXDKShow

Das Layout der Zeitung wird mit Tabellen gemacht

Layouten mit einer Desktop-Publishing (DTP) Software

Druck bei der Presse

Artikel

#IntelXDKShow

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

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

Media Queries@media all {

#content {text-align:center;

}}

@media screen and (max-width: 480px) {#content {

font-size:80%;color:#0000FF;

}}

http://cssmediaqueries.com#IntelXDKShow

Der Fluch von Responsive Webdesign

#IntelXDKShow

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

Twitter ging es genauso…

#IntelXDKShow

August 2011 war die Geburtsstunde von Bootstrap!

#IntelXDKShow

Die Eltern von Bootstrap

Jacob Thornton

#IntelXDKShow

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

Mit Bootstrap Responsive

Zurück zu Tabellen aber mit Div durch das Bootstrap Grid-System

Besteht aus 12 Spalten

#IntelXDKShow

Das Bootstrap Grid

#IntelXDKShow

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

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

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

Sensoren

Accelerometer Gyroscope GPS Ambient Light

Compass NFC

#IntelXDKShow

API´sIntel 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/492826http://cordova.apache.org/docs/en/2.9.0/guide_overview_index.md.html#Overview

#IntelXDKShow

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

Accelerometer

Auch bekannt als BeschleunigungssensorWird 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

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

Kostenloses Video-Training für alle!

http://goo.gl/BQb8ul#IntelXDKShow

FRAGEN?

#IntelXDKShow <- Letzte Chance ;)

Verlosung!

Vielen Dank!http://about.me/Gregor.Biswanger

Ich freue mich auf Feedback!

WICHTIG! Ich bin auch käuflich!