Teil 3: Zugriff auf das Cordova-API, eigene Styles und eingebettete Browser-Engine mit Crosswalk

Ionic: Spezifikationen und Testen von Hybrid-Apps
Kommentare

Mithilfe des Ionic-Frameworks kann tatsächlich jeder Webentwickler zum App-Entwickler werden. Zudem bedient bei Hybrid-Apps eine Codebasis alle Plattformen, was den Aufwand für Entwickler verringert. Im dritten Teil dieser Serie zeige ich Ihnen, wie man die Beispiel-App um weitere Spezifikationen und eigene Styles erweitert. Außerdem lernen Sie, die erstellte App auf Nutzbarkeit zu prüfen.

Nachdem alle grundlegenden Elemente für die Beispiel-App festgelegt wurden, ist es nun an der Zeit, sich Gedanken um weitere Verwendungsmöglichkeiten zu machen.

Zugriff auf das Cordova-API

Zur Vervollständigung des Beispiels sollen die Listenelemente bei einem Tap die Vibration des Geräts in der konfigurierten Länge ausführen und währenddessen eine Alert-Box mit dem zugehörigen Namen anzeigen. Dementsprechend wird an dieser Stelle Zugriff auf ein Cordova-API benötigt. ngCordova ermöglicht die saubere Verwendung vieler Cordova-Schnittstellen mittels Dependency Injection in AngularJS. Beim Unit Testing kann die Schnittstelle dann auch ohne Hardware durch Mocking simuliert werden. Der Befehl ionic add ngCordova installiert ngCordova als Bower-Komponente nach www/lib/ngCordova. Anschließend kann die Einbindung in der index.html vor cordova.js erfolgen:

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Jetzt muss noch das benötigte Cordova-Plug-in installiert werden; für die Beispiel-App mit Zugriff auf die Vibrationsschnittstelle mit dem Befehl ionic plugin add org.apache.cordova.vibration. Ionic konfiguriert dabei automatisch die Zugriffsberechtigungen der verschiedenen App-Plattformen. In der app.js muss ngCordova als neue Abhängigkeit eingetragen werden:

angular.module('starter', ['ionic', 'ngCordova'])
// ...

Dank ngCordova kann der Service $cordovaVibration zur Steuerung der Vibrationsschnittstelle in den Controller injiziert werden. Eine Vibration kann durch $cordovaVibration.vibrate(millisecs) ausgeführt werden. Der Angular-Service $timeout hilft beim Ausblenden der Alert-Box (Listing 7).

Listing 7

.controller('VibrationsCtrl', function(…, $cordovaVibration, $timeout){
  // ...
  $scope.vibrate = function(vibration) {
    var duration = parseInt(vibration.duration); var alert = $ionicPopup.alert({
      title: 'Vibrations', template: vibration.name
    });
    $timeout(function(){ alert.close();
    }, duration);
    $cordovaVibration.vibrate(duration);
  };
});

Eigene Styles

Eigene Styles können in der Datei scss/ionic.app.scss definiert werden. Dort finden Sie auskommentiert auch die vordefinierten Ionic-Farbschemata wie light, stable oder energized. Die Beispiel-App verwendet in der ion-header-bar die CSS-Klasse bar-stable. Ein Überschreiben des Default-Werts der Variablen $stable vor dem Import der Ionic-Styles ändert die Hintergrundfarbe der Header-Bar (Abb. 8):

$stable: teal !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";
Abb. 8: Änderung der Header-Bar

Abb. 8: Änderung der Header-Bar

Die Beispiel-App konnte natürlich nur einen sehr kleinen Ausschnitt der Möglichkeiten von Ionic zeigen. Ein Blick in die weiteren App-Templates (ionic templates) und natürlich in die sehr gute Dokumentation vermitteln das ganze Spektrum der Möglichkeiten.

Ionic View

Mithilfe von Ionic View können Sie Ihre App zu Testzwecken ohne Installation auf einem beliebigen iOS- oder Android-Gerät testen. Um eine App für Ionic View verfügbar zu machen, benötigen Sie einen Ionic-Account. Innerhalb des Projektverzeichnisses führen Sie den Befehl ionic upload aus. Auf Ihrem mobilen Gerät installieren Sie die App „Ionic View“ aus dem Store. Darin können die Apps des eigenen Ionic-Accounts oder mit entsprechender Berechtigung auch die von anderen Nutzern innerhalb von Ionic View ausgeführt und getestet werden.

Schließlich ist der Kern Ihrer App nur eine Website, die auch innerhalb einer anderen App eingebunden werden kann. Um einen anderen Testuser für Ihre eigenen Apps zu autorisieren, senden Sie ihm eine Einladung mittels ionic share.

Eingebettete Browser-Engine mit Crosswalk

Die Browserfragmentierung auf Android-Devices ist problematisch. Sie wissen oft gar nicht, welche HTML5-Features auf den Benutzergeräten verfügbar sind, da alte Android-Stock-Browser limitiert sind. Mithilfe des Crosswalk-Projekts können Sie sicherstellen, dass eine App auf allen Geräten und Android-Versionen immer in einer bestimmten, modernen Chromium-Version ausgeführt wird, für die die App entwickelt wurde. Dabei wird die Browser-Engine für die WebView-Komponente mit in die App eingebettet und ausgeliefert. Das heißt, Sie entwickeln und testen die App in einer bestimmten Chromium-Version und packen sie gleich dazu. Dazu wird folgender Befehl ausgeführt:

$ ionic browser add crosswalk

Die App wird dabei logischerweise einige Megabytes schwerer. Allerdings können Sie nun sogar bis zurück zu Android 4.0 („Ice Cream Sandwich“) eine App in der neuesten Chromium-Version laufen lassen. Dadurch stehen Ihnen auch unter diesen Versionen Features wie Flexbox, SVG, Icon Fonts oder WebGL ohne Polyfills zur Verfügung. Die Chrome DevTools können außerdem auch schon vor Android 4.4 genutzt werden.

Fazit

Ionic ist das bislang fehlende Open-Source-Frontend-SDK zur Erstellung moderner mobiler HTML5-Hybrid-Apps. Ionic erfindet nicht die App neu, vielmehr ermöglicht es unter Verwendung von verfügbaren und etablierten Webtechnologien wie AngularJS, Apache Cordova, Sass, gulp, Bower u. a. den Bau von Apps nach heutigen Bedürfnissen und Möglichkeiten. Dabei bietet es neben zahlreichen Mobile-optimierten HTML-, CSS- und JavaScript-basierten UI-Komponenten, Touch-Gesten, sehr guter Performance und einem umfangreichen Ecosystem an Services auch Unterstützung für subtilere Details wie Multiple-History-Stacks, View- und Scroll-Position-Caching (z. B. in Listen), Lifecycle-Events oder Swipe-to-go-back, um das App-Erlebnis so nativ wie möglich zu gestalten. Webentwickler werden zu Multiple-Plattform-App-Entwicklern, die nichts grundlegend Neues lernen müssen und dank der verbreiteten Technologien weiterentwickeltes Wissen auch anderswo nützlich einsetzen können. Ionic erfreut sich als Top-50-GitHub-Projekt, durch tausende veröffentlichte Apps, viele Blogs und Literatur, IDE-Integrationen sowie einigen Featured Apps großer Beliebtheit und verfügt über eine stark wachsende Community, etwa bei weltweiten Meet-ups, im Ionic-Forum oder auf Twitter unter @ionicframework.

Der Start der Entwicklung von Ionic 2 auf Basis von AngularJS 2 zeigt, dass Ionic langfristig eine Rolle spielen wird und erlaubt bereits einen Blick in die Zukunft. Zu beobachten bleibt die Konkurrenz der neuen Cross-Compile-Tools wie Native Script oder React Native, die ebenfalls einen sehr interessanten Ansatz verfolgen: Sie übersetzen Webcode in komplett native Apps. Viele Projekte setzen auch verstärkt auf eine Mischung aus einer grundsätzlich nativen App, die aber große Teile an webbasierten Inhalten via WebView einbetten. Zum jetzigen Zeitpunkt bleibt auch noch offen, welche weiteren kommerziellen Services Ionic neben einem angekündigten Tool für App-Tracking und -Analytics anbieten wird.

Überblick zur Ionic-Artikelserie:

Teil 1: Einführung in das Erstellen von Hybrid-Apps
Teil 2: So erstellt man Hybrid-Apps
Teil 3: Spezifikationen und Testen von Hybrid-Apps

 

Auf der MobileTech Conference 2015 in Berlin gibt es vom 31. August bis 3. September jede Menge interessanter Sessions – auch zum Thema Cross-Plattform-Entwicklung mit Ionic:

 

 

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Aufmacherbild: Flat design concept via Shutterstock / Urheberrecht: PureSolution

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -