MobileFirst-Foundation-SDK zu React-Native-Anwendungen hinzufügen

improve this page | report issue

Übersicht

In diesem Lernprogramm erfahren Sie, wie das MobileFirst-SDK zu einer neuen oder vorhandenen React-Native-Anwendung, die über die React-Native-CLI erstellt wurde, hinzugefügt wird. Sie werden auch lernen, wie MobileFirst Server konfiguriert werden muss, um die Anwendung zu erkennen. Außerdem erfahren Sie, wie Sie Informationen zu den MobileFirst-Konfigurationsdateien, die im Projekt geändert werden, finden können.

Das MobileFirst-React-Native-SDK wird in Form eines React-Native-NPM-Plug-ins bereitgestellt und ist bei NPM registriert.

Folgende Plug-ins sind verfügbar:

  • react-native-ibm-mobilefirst - zentrales SDK-Plug-in

Fahren Sie mit folgenden Abschnitten fort:

React-Native-SDK-Komponenten

react-native-ibm-mobilefirst

Das Plug-in react-native-ibm-mobilefirst ist das zentrale MobileFirst-Plug-in für React Native und ein erforderliches Plug-in. Wenn Sie eines der anderen MobileFirst-Plug-ins installieren, wird das Plug-in react-native-ibm-mobilefirst automatisch mitinstalliert, sofern es noch nicht installiert ist.

Voraussetzungen:

Mobile Foundation-React-Native-SDK hinzufügen

Folgen Sie den nachstehenden Anweisungen, um das React-Native-SDK der Mobile Foundation zu einem neuen oder vorhandenen React-Native-Projekt hinzuzufügen und bei MobileFirst Server zu registrieren.

Vergewissern Sie sich als Erstes, dass der MobileFirst Server aktiv ist.
Wenn Sie einen lokal installierten Server verwenden, navigieren Sie in einem Befehlszeilenfenster zum Serverordner und führen Sie den Befehl ./run.sh aus.

SDK hinzufügen

Neue Anwendung

  1. Erstellen Sie wie folgt ein React-Native-Projekt: react-native init Projektname.
    Beispiel:

    react-native init Hello
    
    • Hello ist der Ordnername und der Name der Anwendung.

    Mit der von der Schablone bereitgestellten Datei index.js können Sie zusätzliche MobileFirst-Features verwenden, z. B. die Anwendungsübersetzung in mehrere Sprachen und Initialisierungsoptionen. (Weitere Informationen finden Sie in der Benutzerdokumentation.)

  2. Navigieren Sie mit cd hello zum Stammverzeichnis des React-Native-Projekts.

  3. Fügen Sie die MobileFirst-Plug-ins mit dem folgenden NPM-CLI-Befehl hinzu: npm install React-Native-Plug-in-Name. Beispiel:

    npm install react-native-ibm-mobilefirst
    

    Mit dem obigen Befehl wird das zentrale MobileFirst-SDK-Plug-in zum React-Native-Projekt hinzugefügt.

  4. Verbinden Sie die Plug-in-Bibliotheken mit dem folgenden Befehl:

    react-native link
    

Vorhandene Anwendung

  1. Navigieren Sie zum Stammverzeichnis Ihres vorhandenen React-Native-Projekts und fügen Sie das zentrale MobileFirst-React-Native-Plug-in hinzu:

    npm install react-native-ibm-mobilefirst
    
  2. Verbinden Sie die Plug-in-Bibliotheken mit dem folgenden Befehl:

    react-native link
    

Anwendung registrieren

  1. Öffnen Sie ein Befehlszeilenfenster und navigieren Sie zum Stammverzeichnis der Projektplattform (iOS oder Android).

  2. Registrieren Sie die Anwendung bei MobileFirst Server:

    mfpdev app register
    
  • iOS:

    Wenn Ihre Plattform iOS ist, werden Sie aufgefordert, die Bundle-ID (BundleID) der Anwendung anzugeben. Wichtiger Hinweis: Bei der Bundle-ID muss die Groß-/Kleinschreibung beachtet werden.

    Der CLI-Befehl mfpdev app register stellt zunächst eine Verbindung zu MobileFirst Server her, um die Anwendung zu generieren. Anschließend wird die Datei mfpclient.plist im Stammverzeichnis des Xcode-Projekts generiert, zu der Metadaten, die den MobileFirst Server angeben, hinzugefügt werden.

  • Android:

    Wenn Ihre Plattform Android ist, werden Sie aufgefordert, den Paketnamen der Anwendung anzugeben. Wichtiger Hinweis: Beim Paketnamen muss die Groß-/Kleinschreibung beachtet werden.

    Der CLI-Befehl mfpdev app register stellt zunächst eine Verbindung zu MobileFirst Server her, um die Anwendung zu registrieren. Anschließend wird die Datei mfpclient.properties im Ordner [Projektstammverzeichnis]/app/src/main/assets/ des Android-Studio-Projekts generiert. Zu der Datei werden Metadaten hinzugefügt, die den MobileFirst Server angeben.

Wenn ein ferner Server verwendet wird, fügen Sie ihn mit dem Befehl mfpdev server add hinzu.

Der CLI-Befehl mfpdev app register stellt zunächst eine Verbindung zu MobileFirst Server her, um die Anwendung zu registrieren. Jede Plattform wird in MobileFirst Server als Anwendung registriert.

Tipp: Sie können Anwendungen auch über die MobileFirst Operations Console registrieren:

  1. Laden Sie die MobileFirst Operations Console.
  2. Klicken Sie neben Anwendungen auf die Schaltfläche Neu, um eine neue Anwendung zu registrieren. Folgen Sie den angezeigten Anweisungen.

MobileFirst-React-Native-SDK aktualisieren

Wenn Sie das MobileFirst-React-Native-SDK auf den neuesten Releasestand bringen möchten, entfernen Sie das Plug-in react-native-ibm-mobilefirst. Führen Sie dazu den Befehl npm uninstall react-native-ibm-mobilefirst aus. Führen Sie dann den Befehl npm install react-native-ibm-mobilefirst aus, um das Plug-in wieder hinzuzufügen.

SDK-Releases sind im NPM-Repository für das jeweilige SDK enthalten.

Generierte Artefakte des MobileFirst-React-Native-SDK

Android-Umgebung

mfpclient.properties

Diese Datei befindet sich im Ordner ./app/src/main/assets/ des Android-Studio-Projekts. Sie enthält die clientseitigen Eigenschaften für die Registrierung Ihrer Android-App bei MobileFirst Server.

Eigenschaft Beschreibung Beispielwerte
wlServerProtocol Protokoll für die Kommunikation mit MobileFirst Server http oder https
wlServerHost Hostname von MobileFirst Server 192.168.1.63
wlServerPort Port von MobileFirst Server 9080
wlServerContext Kontextstammverzeichnis der Anwendung auf dem MobileFirst Server /mfp/
languagePreferences Legt die Standardsprache für Client-SDK-Systemnachrichten fest en

iOS-Umgebung

mfpclient.plist

In dieser Datei, die sich im Stammverzeichnis des Projekts befindet, sind die clientseitigen Eigenschaften für die Registrierung Ihrer iOS-App bei MobileFirst Server definiert.

Eigenschaft Beschreibung Beispielwerte
protocol Protokoll für die Kommunikation mit MobileFirst Server http oder https
host Hostname von MobileFirst Server 192.168.1.63
port Port von MobileFirst Server 9080
wlServerContext Kontextstammverzeichnis der Anwendung auf dem MobileFirst Server /mfp/
languagePreferences Legt die Standardsprache für Client-SDK-Systemnachrichten fest en

Nächste Lernprogramme

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

Last modified on October 09, 2018