End-to-End-Demonstration für React Native

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

• Xcode für iOS, Android Studio für Android
• React-Native-CLI
• Optional: MobileFirst CLI (Download)
• Optional: Eigenständiger MobileFirst Server (Download)

Schritt 1: MobileFirst Server starten

Sie müssen eine Mobile-Foundation-Instanz erstellt haben. 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.

Schritt 2: Anwendung erstellen und registrieren

Öffnen Sie im Browser die MobileFirst Operations Console. Laden Sie dazu die URL http://your-server-host:server-port/mfpconsole. Wenn der Server lokal ausgeführt wird, verwenden Sie http://localhost:9080/mfpconsole. Geben Sie für Benutzername/Kennwort die Werte admin/admin ein.

1. Klicken Sie neben Anwendungen auf die Schaltfläche Neu.
   • Wählen Sie eine der Plattformen Android, iOS aus.
   • Geben Sie als Anwendungs-ID den Wert com.ibm.mfpstarter.reactnative ein.
   • Geben Sie für die Version den Wert 1.0.0 ein.
   • Klicken Sie auf Anwendung registrieren.

   

2. Laden Sie die React-Native-Beispielanwendung von GitHub herunter.

Schritt 3: Anwendungslogik bearbeiten

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

2. Wählen Sie die Datei app.js aus dem Stammordner des Projekts aus und fügen Sie das folgende Code-Snippet als Ersatz für die vorhandene Funktion WLAuthorizationManager.obtainAccessToken() ein:

  WLAuthorizationManager.obtainAccessToken("").then(
      (token) => {
        console.log('-->  pingMFP(): Success ', token);
        var resourceRequest = new WLResourceRequest("/adapters/javaAdapter/resource/greet/",
          WLResourceRequest.GET
        );
        resourceRequest.setQueryParameters({ name: "world" });
        resourceRequest.send().then(
          (response) => {
            // Zeigt in einem Alertdialog "Hello world" an
                    alert("Success: " + response.responseText);
          },
          (error) => {
            console.error(error);
            alert("Failure: Resource Request");
          }
        );
      }, (error) => {
        console.error(error);
        alert("Failed to connect to MobileFirst Server");
      });

Schritt 4: Adapter implementieren

Laden Sie das 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.

   

Schritt 5: Awendung testen

1. Vergewissern Sie sich, dass die MobileFirst CLI installiert ist. Navigieren Sie dann zum Stammordner der entsprechenden Plattform (iOS oder Android) und führen Sie den Befehl mfpdev app register aus. Bei Verwendung eines fernen MobileFirst Server müssen Sie den Befehl zum Hinzufügen eines Servers ausführen.

   mfpdev server add
   

   Im Anschluss führen Sie den Befehl für die Registrierung der App aus. Beispiel:

   mfpdev app register myIBMCloudServer
   

2. Führen Sie den folgenden Befel aus, um die Anwendung auszuführen:

   react-native run-ios|run-android
   

Wenn das Gerät verbunden ist, wird die Anwendung auf dem Gerät installiert und dann gestartet. Andernfalls wird der Simulator oder Emulator verwendet.

Ergebnisse

• Wenn Sie auf die Schaltfläche MobileFirst Server pingen klicken, wird Verbunden mit 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.
• Gehen Sie die Lernprogramme zu Benachrichtigungen durch.
• Sehen Sie sich alle Lernprogramme an.