MobileFirst-Foundation-Entwicklung in Cordova-Anwendungen

Übersicht

http://cordova.apache.org/:

Apache Cordova ist ein Open-Source-Framework für mobile Entwicklung, das die Verwendung von Standardwebtechnologien wie HTML5, CSS3 und JavaScript für die plattformübergreifende Entwicklung unter Vermeidung der nativen Entwicklungssprachen der einzelnen mobilen Plattformen ermöglicht. Anwendungen werden innerhalb von Wrappern für die jeweilige Plattform ausgeführt und stützen sich auf standardkonforme API-Bindungen, um auf Sensoren, Daten und den Netzstatus der einzelnen Geräte zuzugreifen.

Die IBM Mobile Foundation stelt ein aus mehreren Cordova-Plug-ins bestehendes SDK bereit. Informieren Sie sich darüber, wie das SDK der Mobile Foundation zu Cordova-Anwendungen hinzugefügt wird.

Hinweis: Archiv- bzw. IPA-Dateien, die für die Übergabe von iOS-Apps an einen Store oder für die Validierung von iOS-Apps mit Test Flight oder iTunes Connect generiert werden, können zu Laufzeitfehlern oder zu einem Laufzeitabsturz führen. Weitere Informationen hierzu finden Sie im Blog Preparing iOS apps for App Store submission in IBM Mobile Foundation.

Fahren Sie mit folgenden Abschnitten fort:

• Cordova-Anwendungsentwicklung
• MobileFirst-APIs
• Startablauf für das MobileFirst-SDK
• Cordova-Anwendungssicherheit
• Cordova-Anwendungsressourcen
• Webressourcen einer Anwendung voranzeigen
• JavaScript-Code implementieren
• CrossWalk-Unterstützung für Android
• WKWebView-Unterstützung für iOS
• Weiterführende Informationen
• Nächste Lernprogramme

Cordova-Anwendungsentwicklung

Mit Cordova entwickelte Anwendungen können durch folgende Cordova-Entwicklungspfade und -Features erweitert werden:

Hooks

Cordova-Hooks sind Scripts, mit denen Entwickler Cordova-Befehle anpassen und so beispielsweise angepasste Buildabläufe erstellen können.
Mehr über Cordova-Hooks erfahren Sie hier.

Merges

In den Ordner “merges” können plattformspezifische Webressourcen (HTML-, CSS- und JavaScript-Dateien) gestellt werden. Diese Webressourcen werden dann im Schritt cordova prepare im entsprechenden nativen Verzeichnis implementiert. In den Ordner merges/ gestellte Dateien setzen die entsprechenden Dateien im Ordner www/ der betreffenden Plattform außer Kraft. Mehr über den Ordner “merges” erfahren Sie hier.

Cordova-Plug-ins

Wenn Sie Cordova-Plug-ins verwenden, stehen Funktionserweiterungen zur Verfügung. Sie können beispielsweise native Benutzerschnittstellenelemente (Dialoge, Registerleisten, Spinner usw.) hinzufügen. Zudem können Sie innovative Funktionen wie Karten und Geoortung nutzen, externe Inhalte laden, angepasste Tastaturen nutzen und Einheiten (wie Kameras, Berührungssensoren usw.) integrieren.

Sie finden Cordova-Plug-ins auf GitHub.com und auf bekannten Cordova-Plug-in-Websites wie Plugreg und NPM.

Beispiel-Plug-ins:

• cordova-plugin-dialogs
• cordova-plug-inprogress-indicator
• cordova-plugin-statusbar

Hinweis: Die Modifikation des Standardverhaltens einer Cordova-App (z. B. durch Außerkraftsetzen des Verhaltens der Schaltfläche “Back”) beim Hinzufügen des MobileFirst-Cordova-SDK zum Projekt, kann dazu führen, dass die App bei Übergabe an den Google Play Store zurückgewiesen wird. Sollte die Übergabe an den Google Play Store aus anderen Gründen fehlschlagen, wenden Sie sich an den Google-Support.

Frameworks anderer Anbieter

Mit Frameworks wie Ionic, AngularJS, jQuery Mobile, Backbone und vielen anderen kann die Cordova-Anwendungsentwicklung noch reicher gestaltet werden.

Blogbeiträge zur Integration

• Best Practices for building AngularJS apps with MobileFirst Foundation 8.0
• Mobile Foundation in Ionic-Apps integrieren
• Mobile Foundation in Ionic-2-Apps integrieren

Pakete anderer Anbieter

Mit Paketen anderer Anbieter können Sie Anwendungen modifizieren und Ziele wie die Kompression und Verkettung der Anwendungswebressourcen erreichen. Gängige Pakete für solche Zwecke sind:

• uglify-js
• clean-css

MobileFirst-APIs

Nachdem Sie das MobileFirst-Cordova-SDK zu einer Cordova-Anwendung hinzugefügt haben, stehen die MobileFirst-API-Methoden zur Verfügung.

Eine vollständige Liste der verfügbaren API-Methoden finden Sie in den API-Referenzinformationen.

Startablauf für das MobileFirst-SDK

public class MainActivity extends CordovaActivity implements WLInitWebFrameworkListener {

@Overridepublic void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);

if (!((MFPApplication)this.getApplication()).hasCordovaSplashscreen()) {
           WL.getInstance().showSplashScreen(this);
       }
   init();
   WL.getInstance().initializeWebFramework(getApplicationContext(), this);
}

<activity android:name="com.ibm.MFPLoadUrlActivity" />

public void onInitWebFrameworkComplete(WLInitWebFrameworkResult result){
if (result.getStatusCode() == WLInitWebFrameworkResult.SUCCESS) {
super.loadUrl(WL.getInstance().getMainHtmlFilePath());
   } else {
      handleWebFrameworkInitFailure(result);
   }
}

[[WL sharedInstance] initializeWebFrameworkWithDelegate:self];

Cordova-Anwendungssicherheit

Die IBM Mobile Foundation stellt Sicherheitsfunktionen bereit, die Ihnen helfen, Ihre Cordova-Apps zu schützen.

Ein großer Teil des Inhalts einer plattformübergreifenden App kann einfacher als bei einer nativen App von einer unberechtigten Person modifiziert werden. Da viele allgemeine Inhalte einer plattformübergreifenden App in einem lesbaren Format vorliegen, stellt die IBM MobileFirst Foundation Features bereit, die ein höheres Maß an Sicherheit für Ihre plattformübergreifenden Cordova-Apps ermöglichen.

Machen Sie sich mit dem MobileFirst-Sicherheitsframework vertraut.

Verwenden Sie die folgenden Funktionen, um die Sicherheit für Ihre Cordova-Apps zu verbessern:

• Webressourcen Ihrer Cordova-Pakete verschlüsseln
  Verschlüsselt den Inhalt des Ordners www Ihrer Cordova-App und entschlüsselt ihn, wenn die App installiert und zum ersten Mal ausgeführt wird. Durch diese Verschlüsselung ist es schwieriger, den Inhalt dieses Ordners anzuzeigen oder zu modifizieren, während die App gepackt wird.
• Kontrollsummenfeature für Webressourcen aktivieren
  Stellt die Integrität der App beim Start sicher, indem der Inhalt mit dem Referenzkontrollsummenergebnis verglichen wird, das beim ersten Start der App erfasst wurde. Dieser Test hilft dabei, Modifizierungen einer App zu verhindern, die bereits installiert ist.
• FIPS 140-2 aktivieren
  Stellt sicher, dass die Verschlüsselungsalgorithmen zum Verschlüsseln ruhender und bewegter Daten mit dem Standard FIPS 140-2 (Federal Information Processing Standards) konform sind.
• Certificate Pinning
  Hilft Man-in-the-Middle-Attacken zu verhindern, indem enem Host sein erwarteter öffentlicher Schlüssel zugeordnet wird.

Cordova-Anwendungsressourcen

Bestimmte Ressourcen müssen Bestandteil einer Cordova-Anwendung sein. In meisten Fällen werden diese für Sie generiert, wenn Sie Ihre Cordova-App mit Ihren bevorzugten Cordova-Entwicklungstools erstellen. Wenn Sie die Schablone der Mobile Foundation verwenden, werden auch Begrüßungsanzeigen und Symbole bereitgestellt.

Sie können eine IBM Projektschablone für Cordova-Projekte verwenden, die MobileFirst-Features nutzen können. Wenn Sie die MobileFirst-Schablone verwenden, stehen Ihnen als Ausgangspunkt die folgenden Ressourcen zur Verfügung. Wenn Sie die MobileFirst-Schablone nicht verwenden, werden alle Ressourcen mit Ausnahme der Begrüßungsanzeigen und Symbole bereitgestellt. Sie können die Schablone hinzufügen, indem Sie bei der erstmaligen Erstellung Ihres Cordova-Projekts die Option --template und die MobileFirst-Schablone angeben.

Wenn Sie die Standarddateinamen und -pfade von Ressourcen ändern möchten, müssen Sie diese Änderungen auch in der Cordova-Konfigurationsdatei (config.xml) angeben. In einigen Fällen können Sie die Standardnamen und -pfade auch mit dem Befehl mfpdev app config ändern. In solchen Fällen finden Sie im Abschnitt zu den Ressourcen einen entsprechenden Hinweis.

Cordova-Konfigurationsdatei (config.xml)

Die Cordova-Konfigurationsdatei ist eine erforderliche XML-Datei, die Anwendungsmetadaten enthält und im Stammverzeichnis der App gespeichert wird. Die Datei wird automatisch generiert, wenn Sie eine Cordova-Anwendung erstellen. Sie können sie modifizieren, um benutzerdefinierte Eigenschaften mit dem Befehl mfpdev app config hinzuzufügen.

Hauptdatei (index.html)

Diese Hauptdatei ist eine HTML-5-Datei, die das Anwendungsgerüst enthält. Diese Datei lädt alle Webressourcen (Scripts und Style-Sheets), die erforderlich sind, um die allgemeinen Komponenten der Anwendung zu definieren und Anbindungen an erforderliche Dokumentereignisse zu erstellen. Sie finden diese Datei im Verzeichnis Ihr_Projektname/www. Sie können den Namen dieser Datei mit dem Befehl mfpdev app config ändern.

Piktogramm

Das Piktogramm ermöglicht eine grafisch orientierte Identifikation der Anwendung in der MobileFirst Operations Console. Es muss sich um ein quadratisches Bild, bevorzugt mit einer Größe von 90 x 90 Pixeln, handeln.
Ein Standardpiktogramm wird bereitgestellt, wenn Sie die Schablone verwenden. Sie können das Standardbild mit einem Ersatzbild überschreiben (indem Sie denselben Dateinamen verwenden). Sie finden die Datei thumbnail.png im Ornder Ihr_Projektname/www/img. Sie können den Namen oder Pfad dieser Datei mit dem Befehl mfpdev app config ändern.

Begrüßungsbild

Das Begrüßungsbild wird angezeigt, wenn die Anwendung initialisiert wird. Wenn Sie die MobileFirst-Standardschablone verwenden, werden Begrüßungsbilder bereitgestellt. Diese Standardbilder sind in folgenden Verzeichnissen gespeichert:

• iOS: /res/screen/ios/
• Android: /res/screen/android/
• Windows: /res/screen/windows/

Es stehen verschiedene Standardbegrüßungsbilder zur Verfügung, die für unterschiedliche Anzeigen und für verschiedene Versionen der Betriebssysteme iOS und Windows passen. Sie können das Standardbild der Schablone durch ein eigenes Begrüßungsbild ersetzen oder - falls Sie die Schablone nicht nutzen - ein Bild hinzufügen. Wenn Sie Ihre App für die Android-Plattform mit der MobileFirst-Schablone erstellen, ist das Plug-in cordova-plugin-splashscreen installiert. Wenn dieses Plug-in integriert ist, werden anstelle der von Mobile Foundation verwendeten Bilder die von Cordova verwendeten Begrüßungsbilder angezeigt. Die Bilder im Ordner mit dem Bildformat screen.png sind die Cordova-Standardbegrüßungsbilder. Sie können angeben, welche Begrüßungsbilder angezeigt werden sollen, indem Sie die Einstellungen in der Cordova-Datei config.xml ändern.

Wenn Sie die MobileFirst-Schablone nicht verwenden, sind die angezeigten Standardbilder die vom Mobile Foundation-Plug-in verwendeten Bilder. Die Dateinamen der standardmäßigen MobileFirst-Quellenbegrüßungsbilder haben das Format splash-Zeichenfolge.9.png.

Weitere Informationen zur Verwendung eigener Begrüßungsbilder finden Sie unter Angepasste Begrüßungsanzeigen und Symbole zu Cordova-Apps hinzufügen.

Anwendungssymbole

Mit der Schablone werden Standardbilder für Anwendungssymbole bereitgestellt. Diese Standardbilder sind in folgenden Verzeichnissen gespeichert:

• iOS: /res/icon/ios/
• Android: /res/icon/android/
• Windows: /res/icon/windows/

Sie können das Standardbild durch ein eigenes Bild ersetzen. Ihr angepasstes Anwendungssymbol muss dieselbe Größe und denselben Dateinamen wie das zu ersetzende Standardanwendungssymbol haben. Es stehen verschiedene Standardbilder zur Verfügung, die für verschiedene Anzeigen und Betriebssystemversionen geeignet sind.

Weitere Informationen zur Verwendung eigener Begrüßungsbilder finden Sie unter Angepasste Begrüßungsanzeigen und Symbole zu Cordova-Apps hinzufügen.

Style-Sheets

Der App-Code kann CSS-Dateien enthalten, um die Anwendungsansicht zu definieren.

Die Style-Sheet-Dateien befinden sich im Verzeichnis /www/css und werden in die folgenden plattformspezifischen Ordner kopiert:

• iOS: /platforms/ios/www/css
• Android: /platforms/android/assets/www/css
• Windows: /platforms/windows/www/css

Scripts

Ihr App-Code kann JavaScript-Dateien umfassen, mit denen diverse Funktionen Ihrer App implementiert werden, z. B. interaktive Benutzerschnittstellenkomponenten, Geschäftslogik und die Integration von Back-End-Abfragen.

Die JavaScript-Datei index.js wird mit der Schablone bereitgestellt. Sie befindet sich im Ordner Ihr_Projektname/www/js. Die Datei wird in die folgenden plattformspezifischen Ordner kopiert:

• iOS: /platforms/ios/www/js
• Android: /platforms/android/assets/www/js
• Windows: /platforms/windows/assets/www/js

Webressourcen einer Anwendung voranzeigen

Die Webressourcen einer Cordova-Anwendung können im iOS-Simulator, im Android-Emulator, im Windows-Emulator oder auf physischen Geräten vorangezeigt werden. In der Mobile Foundation stehen zudem zwei Optionen für eine Livevorschau zur Verfügung: der IBM MobileFirst Foundation Mobile Browser Simulator und die einfache Darstellung in einem Browser.

Sicherheitseinschränkung: Sie können Ihre Webressourcen voranzeigen. Der Simulator unterstützt jedoch nicht alle MobileFirst-JavaScript-APIs. Insbesondere das OAuth-Protokoll wird nicht vollständig unterstützt. Sie können jedoch Adapteraufrufe mit WLResourceRequest testen. In diesem Fall gilt:

• Auf der Serverseite werden keine Sicherheitsüberprüfungen ausgeführt und an den im Mobile Browser Simulator ausgeführten Client werden keine Sicherhetisabfragen gesendet.
• Wenn Sie MobileFirst Server in einer Entwicklungsumgebung nicht verwenden, registrieren Sie einen vertraulichen Client, in dessen Liste erlaubter Bereiche der Bereich des Adapters enthalten ist. Sie können einen vertraulichen Client in der MobileFirst Operations Console über das Menü “Laufzeit -> Einstellungen” definieren. Weitere Informationen zu vertraulichen Clients finden Sie unter Vertrauliche Clients.

Hinweis: In einer Entwicklungsumgebung enthält der MobileFirst Server einen vertraulichen Client mit dem Namen “test” und einem uneingeschränkten Bereich (“*”). Dieser vertrauliche Client wird standardmäßig von mfpdev app preview verwendet.

Einfacher Browser

Bei der einfachen Darstellung in einem Browser werden die Webressourcen der Anwendung im Desktop-Browser dargestellt, ohne als App betrachtet zu werden. Auf diese Weise ist es möglich, nur die Webressourcen zu debuggen.

Mobile Browser Simulator

Der Mobile Browser Simulator ist eine Webanwendung zum Testen von Cordova-Anwendungen. Der Simulator simuliert Gerätefeatures, ohne dass die App in einem Emulator oder auf einem physischen Gerät installiert werden muss.

Unterstützte Browser:

• Firefox ab Version 38
• Chrome ab Version 49
• Safari ab Version 9

Vorschau

1. Führen Sie in einem Befehlszeilenfenster den folgenden Befehl aus:

    mfpdev app preview
   

2. Wählen Sie eine Vorschauoption aus:

    ? Select how to preview your app: (Use arrow keys)
    ❯ browser: Simple browser rendering
    mbs: Mobile Browser Simulator
   

3. Wählen Sie eine Plattform für die Vorschau aus (angezeigt werden nur hinzugefügte Plattformen):

    ❯◯ android
    ◯ ios
   

Tipp: Weitere Informationen zu den verschiedenen CLI-Befehlen enthält das Lernprogramm MobileFirst-Artefakte über die CLI verwalten.

Livevorschau

Der applikative Code (HTML, CSS und JS) kann jetzt in Echtzeit in einer Livevorschau bearbeitet werden.

Wenn Sie eine Ressource ändern und die Änderung speichern, spiegelt sie sich sofort im Browser wider.

Livereload

Wenn Sie für die Voranzeige auf physischen Geräten oder in Simulatoren/Emulatoren einen ähnlichen Effekt wünschen, fügen Sie das Plug-in cordova-plugin-livereload hinzu. Verwendungsanweisungen finden Sie auf der GitHub-Seite zu Plug-ins.

Anwendung in einem Emulator oder auf einem physischen Gerät ausführen

Führen Sie den Cordova-CLI-Befehl cordova emulate ios|android|windows aus, um die Anwendung zu emulieren. Beispiel:

cordova emulate ios

Wenn sie die Anwendung auf einem physischen Gerät, das mit der Entwicklungsworkstation verbunden ist, ausführen möchten, verwenden Sie den Cordova-CLI-Befehl cordova run ios|android|windows. Beispiel:

cordova run ios

JavaScript-Code implementieren

WebView-Ressourcen lassen sich besser in einer IDE mit automatischer Vervollständigung für JavaScript bearbeiten.

In Xcode, Android Studio und Visual Studio gibt es umfassende Bearbeitungsfunktionen für Objective-C, Swift, C# und and Java. Hinsichtlich der Unterstützung für die Bearbeitung von JavaScript kann es jedoch Einschränkungen geben. Zur Vereinfachung der JavaScript-Berabeitung enthält das MobileFirst-Cordova-Projekt eine Definitionsdatei für die automatische Vervollständigung von MobileFirst-API-Elementen.

In jedem MobileFirst-Cordova-Plug-in gibt es eine Konfigurationsdatei d.ts für jede MobileFirst-JavaScript-Datei. Der Dateiname von d.ts passt zum Namen der entsprechenden JavaScript-Datei. Die Konfigurationsdatei befindet sich im Plug-in-Ordner. Die Datei für das MobileFirst-Haupt-SDK befindet sich beispielsweise an folgender Position: [myapp]\plugins\cordova-plugin-mfp\typings\worklight.d.ts.

Die Konfigurationsdatei d.ts stellt für alle IDEs mit TypeScript-Unterstützung (TypeScript Playground, Visual Studio Code, WebStorm, WebEssentials, Eclipse) die automatische Vervollständigung bereit.

Die Ressourcen (HTML- und JavaScript-Dateien) für WebView befinden sich im Ordner [myapp]\www. Wenn das Projekt mit dem Befehl cordova build erstellt oder der Befehl cordova prepare ausgeführt wird, werden diese Ressourcen in den entsprechenden Ordner www, d. h. in [myapp]\platforms\ios\www, [myapp]\platforms\android\assets\www oder [myapp]\platforms\windows\www, kopiert.

Wenn Sie den App-Hauptordner in einer der vorgenannten IDEs öffnen, bleibt der Kontext erhalten. Der IDE-Editor ist jetzt mit den relevanten d.ts-Dateien verlinkt und kann die MobileFirst-API-Elemente während Ihrer Eingabe automatisch vervollständigen.

CrossWalk-Unterstützung für Android

In Cordova-Anwendungen für die Android-Plattform kann das standardmäßig verwendete WebView durch CrossWalk WebView ersetzt werden.

Hinweis: Das CrossWalk-Projekt wird von der Community und ihren Verwaltern nicht mehr gepflegt. Es ist daher möglich, dass sich Programmfehler oder Probleme in CrossWalk auf die MobileFirst-SDKs in CrossWalk WebView auswirken. Aus diesem Grund wird davon abgeraten, CrossWalk WebView in Ihren Anwendungen zu nutzen.

Gehen Sie zum Hinzufügen von CrossWalk WebView wie folgt vor:

1. Führen Sie in einer Befehlszeile den folgenden Befehl aus:

   cordova plugin add cordova-plugin-crosswalk-webview
   

   Der Befehl fügt CrossWalk WebView zu der Anwendung hinzu.

Im Hintergrund passt das MobileFirst-Cordova-SDK die Android-Projektaktivitäten so an, dass CrossWalk WebView verwendet werden kann.

1. Erstellen Sie das Projekt mit folgendem Befehl:

   cordova build
   

WKWebView-Unterstützung für iOS

In Cordova-iOS-Anwendungen kann das standardmäßig verwendete UIWebView durch WKWebView von Apple ersetzt werden.

Führen Sie in einem Befehlszeilenfenster den folgenden Befehl aus, um WKWebView hinzuzufügen: cordova plugin add cordova-plugin-wkwebview-engine.

Machen Sie sich mit dem Cordova-WKWebView-Plug-in vertraut.

Aktualisierung: Wenn das Plug-in cordova-plugin-wkwebview-engine in einer Cordova-Anwendung verwendet wird, wird der Fehler Cross origin requests are only supported for HTTP ausgelöst, was zum Fehlschlagen der direkten Aktualisierung führt. Sie können dies vermeiden. Dafür benötigt Ihre Anwendung das zusätzliche Plug-in cordova-plugin-wkwebviewxhrfix. Den zugehörigen Defect finden Sie hier.

Weiterführende Informationen

Machen Sie sich mit Cordova vertraut:

• Cordova Overview
• Cordova best practices, testing, debugging, cosiderations and keeping up
• Get started with Cordova applications development

Nächste Lernprogramme

Beginnen Sie mit dem Hinzufügen des MobileFirst-SDK zu Ihrer Cordova-Anwendung. Sehen Sie sich dann die MobileFirst-Features im Abschnitt Alle Lernprogramme an.