Hybrid App Development
mit Intel XDK
Hansruedi Tremp
M.A., MAS, dipl. W’Informatiker
Lernziele
• Sie können:
– die Architektur von Hybrid-Apps aufzeichnen und erläutern.
– die Stärken und Schwächen von Hybrid-Apps aufzählen.
– die verwendeten Frameworks in der Cross-Plattform
Entwicklungsumgebung XDK nennen.
– die Schritte im Entwicklungsprozess mit XDK darlegen.
– die Elemente der Schulungs-App "Währungsrechner" im XDK IDE
nachvollziehen.
Architektur Hybrid-App
Mobile API’s
Nativer App-
Rahmen
Content mit
HTML 5
CSS 3
JavaScript
Server
Web-APIs
REST
Stärken und Schwächen von Hybrid-Apps
• Vorteile
– Hohe Portabilität
– Tiefe Entwicklungskosten
– Schnelles Time-to-Market
– Vertrieb über App-Stores
– Zugriff auf alle Gerätefunktionen
• Nachteile
– Performance
– Gewisse Einschränkungen im Look-and-Feel des User-Interfaces
– Abhängigkeiten zu mehreren Entwicklungs-Frameworks
Cross-Plattform Development mit Intel XDK IDE
• Multiplattform-Framework
– Apache Cordova
cordova.apache.org
• Content
– Seitenstruktur
• HTML5
– Eigenschaften
• CSS 3
– Funktionalität
• JavaScript
• Frameworks:
– App Framework 3 (Intel)
– jQuery Mobile
– …
Quelle: cordova.apache.org
Entwicklungsprozess mit Intel XDK
Codieren
HTML
CSS
JS
Editor
Designer
Testen
in IDE
Emulator
Debugger
Testen
in Device
Preview App
Build
Generieren
der
plattformsp.
Apps
Distribuieren
Upload in die
gewünschten
Stores
Schulungs App
• Währungskonverter
• Die aktuelle Währung ist über
ein Web API zu holen
apilayer.net/api
• Wichtige Dateien:
wwwindex.html
wwwjsindex_user_scripts.js
• gesamtes XDK-Projekt:
– CurrConvJQMobileFramework.zip
Demo in Intel XDK

Hybrid App Development mit Intel XDK

  • 1.
    Hybrid App Development mitIntel XDK Hansruedi Tremp M.A., MAS, dipl. W’Informatiker
  • 2.
    Lernziele • Sie können: –die Architektur von Hybrid-Apps aufzeichnen und erläutern. – die Stärken und Schwächen von Hybrid-Apps aufzählen. – die verwendeten Frameworks in der Cross-Plattform Entwicklungsumgebung XDK nennen. – die Schritte im Entwicklungsprozess mit XDK darlegen. – die Elemente der Schulungs-App "Währungsrechner" im XDK IDE nachvollziehen.
  • 3.
    Architektur Hybrid-App Mobile API’s NativerApp- Rahmen Content mit HTML 5 CSS 3 JavaScript Server Web-APIs REST
  • 4.
    Stärken und Schwächenvon Hybrid-Apps • Vorteile – Hohe Portabilität – Tiefe Entwicklungskosten – Schnelles Time-to-Market – Vertrieb über App-Stores – Zugriff auf alle Gerätefunktionen • Nachteile – Performance – Gewisse Einschränkungen im Look-and-Feel des User-Interfaces – Abhängigkeiten zu mehreren Entwicklungs-Frameworks
  • 5.
    Cross-Plattform Development mitIntel XDK IDE • Multiplattform-Framework – Apache Cordova cordova.apache.org • Content – Seitenstruktur • HTML5 – Eigenschaften • CSS 3 – Funktionalität • JavaScript • Frameworks: – App Framework 3 (Intel) – jQuery Mobile – …
  • 6.
  • 7.
    Entwicklungsprozess mit IntelXDK Codieren HTML CSS JS Editor Designer Testen in IDE Emulator Debugger Testen in Device Preview App Build Generieren der plattformsp. Apps Distribuieren Upload in die gewünschten Stores
  • 8.
    Schulungs App • Währungskonverter •Die aktuelle Währung ist über ein Web API zu holen apilayer.net/api • Wichtige Dateien: wwwindex.html wwwjsindex_user_scripts.js • gesamtes XDK-Projekt: – CurrConvJQMobileFramework.zip
  • 9.

Hinweis der Redaktion

  • #5 Einmal entwickelte App kann für alle gängigen Mobile Plattformen generiert werden