Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache Cordova
-
Upload
gregor-biswanger -
Category
Software
-
view
713 -
download
0
Transcript of Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache Cordova
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
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!