Hybrid Apps Development

Siehe auch: App Entwicklung mit PhoneGap

Links

http://reapp.io/

http://ionicframework.com/getting-started/

Einleitung

Hybride Apps sind im Prinzip Webapps im Gewand einer Native App.

PhoneGap ermöglicht Web Apps den Zugriff auf Smartphone Funktionen indem es sie in einen nativen Wrapper packt. Nachteil ist aber das die Smartphone typischen Bedienung nicht genutzt wird, sondern i.d.R. über HTML nachgebildet werden müssen. Dazu gibt es verschiedene Frameworks. Früher war das z.B. jQuery Mobile, das allerdings keine besonders gute Perfomance hat. Oder Sencha, das eine große Einarbeitungszeit erfordet. Inzwischen gibt es einige Alternativen.

Wichtig für iOS - man sollte die Design Richtlinien beachten, sonst kann es sein, daß Apps zurückgewiesen werden. Also einfach eine Website kapseln klappt nicht.

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-phonegap-advice.html
http://phonegap.com/blog/build/new-apple-app-store-submittal-rules/

Hybrid Apps mit Ionic und PhoneGap Builder

Ionic basiert auf AngularJS, mit diesen Tools erstellen wir die Webapp, die dann mit PhoneGap Builder zu einer Hybrid App gebündelt wird.

AngularJS ist ein Framework zur WebApp Entwicklung mit hoher Performance. Ionic steuert viele Komponenten und in MobileApp übliche Bedienelemente bei.

Installation

• Node.js falls nicht installiert (evtl, PATH anpassen)
• im Terminal über npm cordova ionic und gulp installieren

sudo npm install -g cordova ionic gul

Erstes Projekt anlegen

Es gibt verschiedene Grundtemplates

• leer

$ ionic start myApp blank

• tab navigation

$ ionic start myApp tabs

• side navigation

$ ionic start myApp sidemenu

Quicktips für Projekte

• cd into your project:

 cd firstIonicAppOrAnotherName

• Setup this project to use Sass:

ionic setup sass

• Develop in the browser with live reload:

ionic serve

• Add a platform (ios or Android):

ionic platform add ios [android]

Note: iOS development requires OS X currently See the Android Platform Guide for full Android installation instructions: https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

• Build your app:

ionic build <PLATFORM>

• Simulate your app:

ionic emulate <PLATFORM>

• Run your app on a device:

ionic run <PLATFORM>

• Package an app using Ionic package service:

ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs Visit the Ionic docs: http://ionicframework.com/docs

Ionic Account

Create an ionic.io account to send Push Notifications and use the Ionic View app? (Y/n):

Verschiedene Frameworks

Links

Vergleiche:

Vergleich Hybrid Mobile App Frameworks

http://www.gajotres.net/the-top-5-angularjs-hybrid-mobile-app-frameworks-proscons/

http://www.gajotres.net/top-7-mobile-application-html5-frameworks/

Die Frameworks arbeiten oft mit darunterliegenden JavaScript Libs zusammen, z.B. React, AngularJS, jQuery...

Reapp

http://reapp.io/

Arbeitet mit ReactJS

TouchstoneJS

http://touchstonejs.io

Sieht laut Demo sehr vielversprechend aus. Arbeitet mit React.JS.

Ionic

Nutzt AngularJS, funktioniert mit PhoneGap, soll eine gute Performance haben. Verbreitung 2015 recht gut, soll ein gutes Forum haben.

Supersonic UI

Sieht auf den ersten Blick sehr schick aus. Fork von Ionic.

• Benötigt kein PhoneGap - eigener Wrapper (AppGyver) ohne den es aber auch nicht mehr so gut nutzbar ist. Dafür ist der Wrapper auch Cordova Kompatibel.
• Nutzt AngularJS und das CSS UI von Ionic
• Extrem nativer Look, gutes Zusammenspiel von UI und HTML5
• Gute Data-Sets

Intel App Framework

Sieht ein wenig eingeschlafen aus

Mobile Angular UI

Setzt auf Bootstrap 3 auf und ergänzt es mit einigen Komponenten wie switches, overlays, sidebars, scrollable areas, absolutely positioned top/bottom nav bars ohne Bouncing... Nicht von jQuery oder bootstrap.js abhängig. Nutzt stabile Libraries wie fastclick.js und overthrow.js

Gut geeignet, wenn eine Bootstrap Webapp besteht. Schlechte Doku, kleine Community (2015)

iUi

http://www.iui-js.org/demo

Sieht ein bischen Old-Fashioned aus.

app-UI

http://triceam.github.io/app-UI/

• Zu wenig Infos im Moment (2015)