MobileFirst-Foundation-SDK zu Webanwendungen hinzufügen

improve this page | report issue

Übersicht

Sie können mobile MobileFirst-Webanwendungen oder Desktopwebanwendungen in Ihrer bevorzugten Entwicklungsumgebung und mit Ihren bevorzugten Tools entwickeln.
In diesem Lernprogramm erfahren Sie, wie das MobileFirst-Web-SDK zu einer Webanwendung hinzugefügt und die Webanwendung bei MobileFirst Server registriert wird.

Das MobileFirst-Web-SDK wird in Form von JavaScript-Dateien bereitgestellt und ist über NPM verfügbar.
Das SDK enthält die folgenden Dateien:

  • ibmmfpf.js - Kern des SDK
  • ibmmfpfanalytics.js - Unterstützung für MobileFirst Analytics

Fahren Sie mit folgenden Abschnitten fort:

Voraussetzungen

  • Informieren Sie sich über die vorausgesetzten unterstützten Web-Browser zum Einrichten der Webentwicklungsumgebung.

  • Für die Ausführung von NPM-Befehlen müssen Sie Node.js installieren.

MobileFirst-Web-SDK hinzufügen

Wenn Sie das SDK zu Webanwendungen hinzufügen möchten, müssen Sie es zunächst auf Ihre Workstation herunterladen.

SDK herunterladen

  1. Navigieren Sie in einem Befehlszeilenfenster zum Stammverzeichnis Ihrer Webanwendung.
  2. Führen Sie den Befehl npm install ibm-mfp-web-sdk aus.

Dieser Befehl erstellt die folgende Verzeichnisstruktur:

SDK-Ordnerinhalt

SDK hinzufügen

Sie müssen das Web-SDK der Mobile Foundation mit Standardverfahren in der Webanwendung referenzieren, um es zur Anwendung hinzuzufügen.
Das SDK unterstützt auch AMD, sodass Sie das SDK mit Modulladeprogrammen wie RequireJS laden können.

Standard

Referenzieren Sie die Datei ibmmfpf.js im Element HEAD.

<head>
    ...
    ...
    <script type="text/javascript" src="node_modules/ibm-mfp-web-sdk/ibmmfpf.js"></script>
</head>

RequireJS

HTML

<script type="text/javascript" src="node_modules/requirejs/require.js" data-main="index"></script>

JavaScript

require.config({
	'paths': {
		'mfp': 'node_modules/ibm-mfp-web-sdk/ibmmfpf'
	}
});

require(['mfp'], function(WL) {
    // Anwendungslogik
});

Wichtiger Hinweis: Wenn Sie Analytics-Unterstützung hinzufügen möchten, platzieren Sie die Verweise auf die Datei ibmmfpfanalytics.js vor dem Verweis auf die Datei ibmmfpf.js.

MobileFirst-Web-SDK initialisieren

Initialisieren Sie das Web-SDK der Mobile Foundation, indem Sie in der Haupt-JavaScript-Datei Ihrer Webanwendung das Kontextstammverzeichnis und die Anwendungs-ID angeben:

var wlInitOptions = {
mfpContextRoot : '/mfp', // "mfp" ist das Standardkontextstammverzeichnis der Mobile Foundation
    applicationId : 'com.sample.mywebapp' // Durch eigenen Wert ersetzen
sessionMode : true // Dies ist ein optionaler Parameter, der mit dem Wert 'true' sicherstellt, dass MFP-beogene Daten in der Sitzung und nicht im lokalen Speicher gespeichert werden. Ist der Parameter auf 'false' gesetzt oder nicht definiert, wird standardmäßig der lokale Speicher verwendet.
};

WL.Client.init(wlInitOptions).then (
    function() {
        // Anwendungslogik
});
  • mfpContextRoot: Von MobileFirst Server verwendetes KKontextstammverzeichnis
  • applicationId: Name des Anwendungspakets, der beim Registrieren der Anwendung definiert wurde

Webanwendung registrieren

Sie können Anwendungen über die MobileFirst Operations Console oder die MobileFirst CLI registrieren.

MobileFirst Operations Console

  1. Öffnen Sie Ihren bevorzugten Browser und laden Sie die MobileFirst Operations Console. Geben Sie dazu die URL http://localhost:9080/mfpconsole/ ein.
  2. Klicken Sie neben Anwendungen auf die Schaltfläche Neu, um eine neue Anwendung zu erstellen.
  3. Wählen Sie Web als Plattform aus und geben Sie einen Namen und eine ID an.
  4. Klicken Sie auf Anwendung registrieren.

Webplattform hinzufügen

MobileFirst CLI

Navigieren Sie in eiem Befehlszeilenfenster zum Stammverzeichnis der Webanwendung und führen Sie den Befehl mfpdev app register aus.

MobileFirst-Web-SDK aktualisieren

SDK-Releases sind im NPM-Repository für das jeweilige SDK enthalten.
Gehen Sie wie folgt vor, um das MobileFirst-Web-SDK auf den neuesten Releasestand zu bringen:

  1. Navigieren Sie zum Stammordner der Webanwendung.
  2. Führen Sie den Befehl npm update ibm-mfp-web-sdk aus.

Same-Origin-Policy

Wenn Webressourcen von einer Servermaschine bereitgestellt werden, auf der MobileFirst Server nicht installiert ist, wird ein Verstoß gegen die Same-Origin-Policy ausgelöst. Das SOP-Sicherheitsmodell (Same-Origin-Policy) ist für den Schutz vor Sicherheitsbedrohungen durch nicht verifizierte Quellen konzipiert. 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.

Web-Apps, die das MobileFirst-Web-SDK verwenden, müssen in einer unterstützenden Topologie ausgeführt werden. Nutzen Sie beispielsweise einen Reverse Proxy, der Anforderungen indirekt und unter Wahrung des einheitlichen Ursprungs zum vorgesehenen Server weiterleitet.

Alternativen

Sie können eine der folgenden Methoden anwenden, um den Richtlinienanforderungen zu genügen:

  • Stellen Sie die Webanwendungsressourcen mit einem Anwendungsserver (WebSphere Application Server Liberty Profile) bereit, der im IBM MobileFirst Foundation Developer Kit verwendet wird.
  • Verwenden Sie Node.js als Reverse Proxy, um Anwendungsanforderungen an MobileFirst Server weiterzuleiten.

Weitere Informationen enthält das Lernprogramm Webentwicklungsumgebung einrichten.

Secure-Origins-Policy

Wenn Sie während der Entwicklung Chrome und sowohl HTTP als auch einen Host verwenden, der nicht localhost ist, erlaubt der Browser möglicherweise nicht das Laden einer Anwendung. Der Grund dafür ist die in diesem Browser implementierte und standardmäßig verwendete Secure-Origins-Policy.

Sie können dies ändern, indem Sie den Chrome-Browser mit folgender Option starten:

--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
  • Die Option funktioniert, wenn Sie “test-to-new-user-profile/myprofile” durch die Position eines Ordners ersetzen, der als neues Chrome-Benutzerprofil verwendet werden kann.

Weitere Informationen zum sicheren Ursprung enthält dieses Chormium-Dokument für Entwickler.

Nächste Lernprogramme

Jetzt, da das MobileFirst-Web-SDK integriert ist, können Sie Folgendes tun:

▲
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on October 09, 2018