End-to-End-Demonstration für Web-Apps

Übersicht

Bei der folgenden Demonstration geht es darum, einen End-to-End-Ablauf zu veranschaulichen:

1. Eine im Lieferumfang des MobileFirst-Client-SDK enthaltene Beispielanwendung wird in der MobileFirst Operations Console registriert und heruntergeladen.
2. Ein neuer oder bereitgestellter Adapter wird über die MobileFirst Operations Console implementiert.
3. Die Anwendungslogik wird geändert, um eine Ressourcenanforderung zu ermöglichen.

Endergebnis:

• Erfolgreiches Absetzen eines Pingsignals an MobileFirst Server
• Erfolgreiches Abrufen von Daten mit einem Adapter

Voraussetzungen:

• Moderner Web-Browser
• Optional: MobileFirst CLI (Download)
• Optional: Eigenständiger MobileFirst Server (Download)

1. MobileFirst Server starten

Stellen Sie sicher, dass eine Mobile-Foundation-Instanz erstellt wurde oder,
falls Sie das MobileFirst Developer Kit verwenden, navigieren Sie zum Ordner des Servers und führen Sie unter Mac und Linux den Befehl ./run.sh oder unter Windows den Befehl run.cmd aus.

2. Anwendung erstellen und registrieren

Öffnen Sie in einem Browser die MobileFirst Operations Console. Laden Sie dazu die URL http://Ihr_Server-Host:Serverport/mfpconsole. Wenn Sie die Konsole lokal ausführen, verwenden Sie http://localhost:9080/mfpconsole. Geben Sie für Benutzername/Kennwort die Werte admin/admin an.

1. Klicken Sie neben Anwendungen auf die Schaltfläche Neu.
   • Wählen Sie die Web-Plattform aus.
   • Geben Sie als Anwendungs-ID den Wert com.ibm.mfpstarterweb ein.
   • Klicken Sie auf Anwendung registrieren.

   

2. Klicken Sie auf die Kachel Startercode abrufen und wählen Sie die Webbeispielanwendung zum Download aus.

   

3. Anwendungslogik bearbeiten

1. Öffnen Sie das Projekt in einem Editor Ihrer Wahl.

2. Wählen Sie die Datei client/js/index.js aus und fügen Sie das folgende Code-Snippet als Ersatz für die vorhandene Funktion WLAuthorizationManager.obtainAccessToken() ein:

   WLAuthorizationManager.obtainAccessToken()
        .then(
            function(accessToken) {
                titleText.innerHTML = "Yay!";
                statusText.innerHTML = "Connected to MobileFirst Server";
                   
                var resourceRequest = new WLResourceRequest(
                    "/adapters/javaAdapter/resource/greet/",
                    WLResourceRequest.GET
                );
                   
                resourceRequest.setQueryParameter("name", "world");
                resourceRequest.send().then(
                    function(response) {
                        // Zeigt in einem Alertdialog "Hello world" an
                    alert("Success: " + response.responseText);
                    },
                    function(response) {
                        alert("Failure: " + JSON.stringify(response));
                    }
                );
            },
   
            function(error) {
                titleText.innerHTML = "Bummer...";
                statusText.innerHTML = "Failed to connect to MobileFirst Server";
            }
        );
   

4. Adapter implementieren

Laden Sie dieses vorbereitete Adapterartefakt herunter und implementieren Sie es über die MobileFirst Operations Console, indem Sie Aktionen → Adapter implementieren auswählen.

Alternativ können Sie neben Adapter auf die Schaltfläche Neu klicken.

1. Wählen Sie Aktionen → Beispiel herunterladen aus. Laden Sie das Java-Adapterbeispiel “Hello World” herunter.

   Wenn Maven und die MobileFirst CLI nicht installiert sind, folgen Sie den auf dem Bildschirm angezeigten Anweisungen unter Entwicklungsumgebung einrichten.

2. Navigieren Sie in einem Befehlszeilenfenster zum Stammverzeichnis des Adapter-Maven-Projekts und führen Sie den folgenden Befehl aus:

   mfpdev adapter build
   

3. Wenn der Build fertiggestellt ist, implementieren Sie den Adapter über die MobileFirst Operations Console, indem Sie Aktionen → Adapter implementieren auswählen. Sie finden den Adapter im Ordner [adapter]/target.

   

5. Anwendung testen

1. Navigieren Sie in einem Befehlszeilenfenster zum Ordner [Projektstammverzeichnis] → node-server.
2. Öffnen Sie die Datei [Projektstammverzeichnis] → node-server → server.js und bearbeiten Sie die Variablen host und port. Geben Sie die entsprechenden Werte für Ihren MobileFirst Server an.
   • Wenn Sie einen lokalen MobileFirst Server verwenden, lauten die Werte normalerweise http, localhost und 9080.
   • Wenn Sie einen fernen MobileFirst Server (für IBM Cloud) verwenden, lauten die Werte in der Regel https, Ihre_Serveradresse und 443.
   • Wenn Sie einen Kubernetes-Cluster in IBM Cloud Private verwenden und der Implementierungstyp NodePort ist, ist der Portwert in der Regel der NodePort, der vom Service im Kubernetes-Cluster zugänglich gemacht wird.

   Beispiel:

   var host = 'https://mobilefoundation-xxxx.mybluemix.net'; // Adresse von Mobile Foundation Server
   var port = 9081; // zu verwendende lokale Portnummer
   var mfpURL = host + ':443'; // Portnummer von Mobile Foundation Server
   

3. Führen Sie den Befehl npm start aus, um die erforderliche Node.js-Konfiguration zu installieren und den Node.js-Server zu starten.
4. Rufen Sie in Ihrem Browser die URL http://localhost:9081/home auf.

Secure-Origins-Richtlinie

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-Richtlinie.

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.

Ergebnisse

• Wenn Sie auf die Schaltfläche Ping MobileFirst Server klicken, wird Connected to MobileFirst Server angezeigt.
• Wenn die Anwendung eine Verbindung zu MobileFirst Server herstellen konnte, findet ein Ressourcenanforderungsaufruf unter Verwendung des implementierten Java-Adapters statt.

Die Antwort des Adapters wird in Form eines Alerts angezeigt.

Nächste Schritte

Informieren Sie sich über die Verwendung von Adaptern in Anwendungen und über die Integration von zusätzlichen Services wie Push-Benachrichtigungen mithilfe des MobileFirst-Sicherheitsframeworks. Weitere Möglichkeiten sind:

• Gehen Sie die Lernprogramme zur Anwendungsentwicklung durch.
• Gehen Sie die Lernprogramme zur Adapterentwicklung durch.
• Gehen Sie die Lernprogramme zu Authentifizierung und Sicherheit durch.
• Sehen Sie sich alle Lernprogramme an.