Webanwendungen entwickeln

Mit dem Web-SDK der IBM MobileFirst Platform Foundation können Sie Webanwendungen mit MobileFirst-Funktionen, z. B. mit Sicherheitsfeatures und Funktionen für die Anwendungsveraltung, entwickeln.

Übersicht

Sie können mobile MobileFirst-Webanwendungen oder Desktopwebanwendungen in Ihrer bevorzugten Entwicklungsumgebung und mit Ihren bevorzugten Tools entwickeln. Wenn Sie MobileFirst-Features und Funktionen zu Ihrer Clientanwendung hinzufügen möchten, fügen Sie das Kernmodul des MobileFirst-Web-SDK (ibmmfpf.js) hinzu, über das Sie Zugriff auf die clientseitige JavaScript-API für die Entwicklung von Webanwendungen und plattformübergreifenden Cordova-Anwendungen haben. Um Funktionen von MobileFirst Analytics zu Ihrer Anwendung hinzufügen zu können, müssen Sie auch das Analysemodul des Web-SDK (ibmmfpfanalytics.js) hinzufügen, das den Zugriff auf die clientseitige JavaScript-API für Webanalysen ermöglicht. Sie können auch die bereitgestellten GUI- und CLI-Tools zum Konfigurieren, Verwalten und Schützen Ihrer Anwendung nutzen.

Entwicklungsschritte

Gehen Sie beim Entwickeln Ihrer Webanwendung wie folgt vor:

Wählen Sie die bevorzugten Entwicklungstools und die bevorzugte Topologie für die Entwicklung der Anwendung aus. Stellen Sie sicher, dass die ausgewählte Topologie die Anforderungen der Same-Origin-Policy sowie die unter SOP in Google Chrome genannten Anforderungen erfüllt.
Laden Sie die MobileFirst-Starterwebanwendung (MFPStarterWeb) herunter, die als Beispiel bereitgestellt wird, und verwenden Sie als Basis für Ihre eigene Anwendung oder als allgemeine Referenz für eine funktionierende anwendung (siehe Erste Schritte mit einer MobileFirst-Beispielanwendung). Die Beispielanwendung enthält bereits das Kern- und das Analysemodul des Web-SDK. Dieser Schritt ist optional.
Rufen Sie das MobileFirst-Web-SDK ab (siehe MobileFirst-Web-SDK anfordern).
Fügen Sie die erforderlichen SDK-Dateien zu Ihrer Webanwendung hinzu (siehe MobileFirst-SDK zu Webanwendungen hinzufügen). Sie können die Dateien zu einer vorhandenen Webanwendung hinzufügen oder eine neue Anwendung erstellen. Die Beispielanwendung MFPStarterWeb enthält bereits das Kern- und das Analysemodul des Web-SDK und demonostriert die Initialisierung des SDK sowie die Verwendung der APIs aus dem SDK.
Fügen Sie JavaScript-Code zum Initialisieren des Web-SDK hinzu (siehe MobileFirst-SDK initialisieren).
Entwickeln Sie Ihre Anwendung. Verwenden Sie die SDK-JavaScript-APIs, um die erforderlichen Features und Funktionen zu Ihrer Anwendung hinzuzufügen.
Registrieren Sie Ihre Anwendung bei einer Instanz von MobileFirst Server (siehe Webanwendungen bei MobileFirst Server registrieren).
Setzen Sie die Entwicklung Ihrer Anwendung fort und testen Sie Ihre Anwendung.
Anmerkung: Wenn Sie serverseitige Features wie Adapter und Sicherheit verwenden möchten, müssen Sie zunächst Ihre Anwendung bei einer aktiven Instanz von MobileFirst Server registrieren (siehe Schritt 7). Weitere Informationen zum Server und zur Installation des Servers finden Sie unter MobileFirst Server und Entwicklungsumgebung einrichten.

Same-Origin-Policy

Es steht Ihnen frei, die Webressourcen Ihrer Anwendung auf Ihrem bevorzugten Web-Server bereitzustellen. Bei der Auswahl der Entwicklungs- und Produktionstopologie müssen Sie allerdings die Einschränkungen durch das SOP-Sicherheitsmodell (Same-Origin-Policy) berücksichtigen, das für den Schutz vor Sicherheitsbedrohungen durch nicht verifizierte Quellen konzipiert ist. Gemäß diesem Modell erlaubt ein Browser Webressourcen (wie Scripts) nur mit Ressourcen zu interagieren, die denselben Ursprung haben (der als eine Kombination aus URI-Schema, Hostname und Portnummer definiert ist). Weitere Informationen zu SOP (Same-Origin-Policy) finden Sie in der Spezifikation The Web Origin Concept unter 3. Principles of the Same-Origin Policy.

Da Ihr Web-Server und MobileFirst Server mit Ihrer Anwendung kommunizieren müssen, ist nach dem SOP-Modell für beide Server derselbe Webursprung erforderlich. Stellen Sie mit einer der folgenden Methoden einen einheitlichen Ursprung für Ihre Anwendung sicher:

Gemeinsamer Anwendungsserver: Bereitstellung Ihrer Webressourcen und der MobileFirst-Server-Laufzeit in demselben WebSphere Application Server.
Wenn Sie diese Methode wählen, erstellen Sie ein Maven-webapp-Projekt (mit dem Archetyp maven-archetype-webapp). Erstellen Sie dann ein Webanwendungsarchiv (.war-Datei) mit den Webressourcen Ihrer Anwendung. Informationen zur Ertellung von Maven-webapp-Projekten finden Sie unter Creating a webapp. Fügen Sie anschließend Ihre Maven-Webanwendung zu dem WebSphere Application Server hinzu, der Ihren MobileFirst Server bereitstellt. Bearbeiten Sie dazu die Konfigurationsdatei des Anwendungsservers (server.xml). Eine ausführliche schrittweise Anleitung finden Sie unter Using WebSphere Liberty Profile to serve the Web Application Resources.
Reverse-Proxy: Richten Sie zwischen Ihrer Clientanwendung und Ihren Servern einen Reverse-Proxy ein und implementieren Sie ihn so, dass er Anwendungsanforderungen zum MobileFirst Server umleitet. Der Proxy fungiert in dem Fall als einheitlicher Ursprung für alle Interaktionen mit dem Webbrowsser der Anwendung.
Die MobileFirst-Starterwebanwendung (MFPStarterWeb), die als Beispiel bereitgestellt wird, enthält einen Node.js-Reverse-Proxy-Server, den Sie mit Node Package Manager (npm) installieren können. Entsprechende Anweisungen finden Sie in der Datei README.md zu dem Beispiel.
Ausführliche Informationen zur Erstellung eines angepassten Node.js-Servers, der als einheitlicher Ursprung für Ihre MobileFirst-Webanwendung agiert, finden Sie unter Using Node.js.

SOP in Google Chrome

In der Produktion sollten Sie für die Netzkommunikation mit Ihrem Web-Server und mit MobileFirst Server das HTTPS-Protokoll (HTTP über SSL) verwenden. Während der Entwicklung können Sie bei Bedarf auch die nicht sichere HTTP-Kommunikation nutzen. In Google Chrome kann die HTTP-Kommunikation mit einem fernen Server (nicht localhost) wegen der Chrome-Richtlinie zum sicheren Ursprung zu einem Fehler führen. Weitere Informationen zu dieser Richtlinie finden Sie unter Prefer Secure Origins For Powerful New Features. Sie können diesen Fehler beheben, indem Sie beim Start von Chrome das Flag --unsafely-treat-insecure-origin-as-secure auf die IP-Adresse Ihres HTTP-Servers setzen. Außerdem müssen Sie das Flag --user-data-dir auf ein Sitzungsprofilverzeichnis setzen. Das folgende Beispiel setzt die Richtlinie zum sicheren Ursprung für die IP-Adresse http://9.148.225.123:3000 außer Kraft und verwendet /tmp/profle als Browsersitzungsprofil.

--args --unsafely-treat-insecure-origin-as-secure=http://9.148.225.123:3000 --user-data-dir=/tmp/profile