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

improve this page | report issue

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

    Anwendung registrieren

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

    Beispielanwendung herunterladen

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.

    Adapter implementieren

Beispielanwendung

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:

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 July 02, 2019