Entwicklung in React Native

improve this page | report issue
Nutzen Sie für die Entwicklung Ihrer React-Native-Anwendungen die folgenden Lernprogramme. Richten Sie Ihre Entwicklungsumgebung ein, probieren Sie das Produkt aus und erhalten Sie einen Mehrwert durch die Kombination mit den Angeboten von Mobile Foundation 8.0.

Wenn Sie ein Entwickler sind, der sich für React Native als Framework für die Entwicklung von mobilen oder Web-Apps entschieden hat, können Ihnen die folgenden Abschnitte bei Ihren ersten Schritten mit dem SDK der IBM Mobile Foundation in Ihrer React-Native-App helfen.

Sie können Ihren bevorzugten Codeeditor (Atom.io, Visual Studio Code, Eclipse, IntelliJ oder einen anderen Editor) verwenden, um Ihre Anwendungen zu schreiben.

Schritt 1: React-Native-CLI installieren

Der erste erforderliche Schritt für den Einstieg in die React-Native-Enwticklung ist die Installation der React-Native-CLI.

Gehen Sie wie folgt vor, um die React-Native-CLI zu installieren:

Laden Sie NodeJS herunter und installieren Sie es.

Führen Sie in einem Befehlszeilenfenster den folgenden Befehl aus:

    npm install -g react-native-cli
   

Folgen Sie den Anweisungen auf der Seite 'Getting Started' der React-Native-Dokumentation, um Ihre Maschine für die React-Native-Entwicklung einzurichten.

Dazu gehört auch das Setup, das für Android & iOS erforderlich ist.

Schritt 2: MobileFirst-Entwicklungsumgebung einrichten

Wenn Sie die React-Native-CLI installiert haben, richten Sie die MobileFirst-Entwicklungsumgebung ein. Ausführliche Informationen dazu enthält das Lernprogramm MobileFirst-Entwicklungsumgebung einrichten.


Auf der Registerkarte Schnelleinstieg erfahren Sie, wie Sie das React-Native-SDK nutzen können, um rasch mit der Entwicklung zu beginnen.

Führen Sie die folgenden Schritte aus, um unverzüglich mit der Entwicklung unter Verwendung von React Native für die MobileFirst Platform Foundation zu beginnen.

Ziel dieses Lernprogramms für den Schnellstart ist es, einen einfachen End-to-End-Ablauf zu erläutern.

Github stellt eine Beispielanwendung bereit, die heruntergeladen und bei MobileFirst Server registriert wird. Der zur Verfügung gestellte (oder neue) Adapter wird in der MobileFirst Operations Console implementiert. Die Anwendungslogik wird so geändert, dass sie eine Ressourcenanforderung absetzt.

Erwartetes Ergebnis: MobileFirst Server kann erfolgreich mit Ping überprüft werden und Daten können erfolgreich mithilfe eines Adapters abgerufen werden.

Schritt 1: MobileFirst Server starten

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

Schritt 2: React-Native-SDK hinzufügen

Schritt 2.1: Laden Sie die React-Native-Beispielanwendung von Github herunter.

Schritt 2.2: Fügen Sie das React-Native-SDK zur heruntergeladenen React-Native-Beispielanwendung hinzu.

Das MobileFirst-SDK für React Native ist als React-Native-Modul von NPM verfügbar.

  1. Navigieren Sie zum Stammverzeichnis Ihres heruntergeladenen React-Native-Projekts und fügen Sie das zentrale MobileFirst-React-Native-Plug-in hinzu. Wechseln Sie dann zum Stammverzeichnis des React-Native-Projekts cd MFPStarterReactNative.
  2. Fügen Sie die MobileFirst-Plug-ins mit dem NPM-CLI-Befehl npm install React-Native-Plug-in-Name hinzu.
    Beispiel:
            npm install react-native-ibm-mobilefirst --save
          
    Mit dem obigen Befehl wird das zentrale MobileFirst-SDK-Plug-in zum React-Native-Projekt hinzugefügt.
  3. Verbinden Sie alle nativen Abhängigkeiten mit Ihrer App.
            react-native link
          

Schritt 2.3: Zusätzliche plattformspezifische Schritte

Android


Fügen Sie die folgenden Zeilen zur Datei AndroidManifest.xml ({project-folder}/android/app/src/main/) hinzu:
      <![CDATA[
      <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/  package="com.myapp">
        ...
        <application tools:replace="android:allowBackup"
        ...
      </application>
    ]]>
    

iOS


Öffnen Sie Ihr Projekt in Xcode. Ziehen Sie im Projektnavigator die Datei mfpclient.plist mit der Maus aus dem iOS-Ordner.

Schritt 3: Anwendung registrieren

  1. Öffnen Sie ein Befehlszeilenfenster und navigieren Sie zum Stammverzeichnis des Projekts für die entsprechende Plattform (iOS oder Android).
            cd ios
          
    or
            cd android
          
  2. Führe Sie den folgenden Befehl aus, um die Anwendung zu registrieren:
            mfpdev app register
          

    Falls ein ferner Server verwendet wird, verwenden Sie den Befehl mfpdev server add, um den Server hinzuzufügen. 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 eine Anwendung registriert.

    • 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 registrieren. Anschließend aktualisiert er die Konfigurationsdatei mfpclient.plist im Stammverzeichnis des Xcode-Projekts, die Metadaten zur Identifizierung des MobileFirst Server enthält.

      Hinweis: Ziehen Sie in Xcode im Projektnavigator die Datei mfpclient.plist mit der Maus aus dem iOS-Ordner. Dieser Schritt muss nur auf der Plattform iOS ausgeführt 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 generiert er die Datei mfpclient.properties im Ordner [Projektstmmverzeichnis]/app/src/main/assets/ des Android-Studio-Projekts und fügt die Metadaten zur Identifizierung des MobileFirst Server zu dieser Datei hinzu.

Schritt 4: Anwendungslogik bearbeiten

  1. Öffnen Sie das React-Native-Projekt im Codeeditor Ihrer Wahl.
  2. Importieren Sie die Klasse WLAuthorizationManager in Ihre Datei App.js.
  3.          import {WLAuthorizationManager, WLResourceRequest} from 'react-native-ibm-mobilefirst';
             
  4. Wählen Sie die Datei App.js im Stammordner des Projekts aus und ersetzen Sie die vorhandene Funktion WLAuthorizationManager.obtainAccessToken() durch das folgende Code-Snippet:
    Referenzinformationen zur cleintseitigen React-Native-API finden Sie hier.
               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 "Hello world" in einem Benachrichtigungsdialog an
    
                         alert("Success: " + response.responseText);
                       },
                       (error) => {
                         alert("Failure: " + JSON.stringify(error));
                       }
                     );
                   }, (error) => {
                     console.log('-->  pingMFP(): failure ', error.responseText);
                     alert("Failed to connect to MobileFirst Server");
                   });
           

Schritt 5: Adapter implementieren

Laden Sie dieses vorbereitete Adapterartefakt herunter und implementieren Sie es in der MobileFirst Operations Console (Akltionen → Adapter implementieren).

Schritt 5.1: Wählen Sie die Option Aktionen → Beispiel herunterladen aus. Laden Sie das Java-Adapterbeispiel Hello World herunter.

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

Wenn Sie Maven und die MobileFirst CLI noch nicht installiert haben, folgen Sie den angezeigten Anweisungen unter Entwicklungsumgebung einrichten.

Schritt 5.2: Navigieren Sie in einem Befehlszeilenfenster zum Stammordner des Adapter-Maven-Projekts und führen Sie folgenden Befehl aus:

    mfpdev adapter build
  

Scritt 5.3: Wenn der Build erstellt ist, implementieren Sie den Adapter in der MobileFirst Operations Console unter Verwendung der Option Aktionen → Adapter implementieren. Sie finden den Adapter im Ordner [adapter]/target.

Schritt 6: Anwendung testen

Führen Sie die Anwendung mit folgendem Befehl aus:

     react-native run-ios|run-android
    

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

Ausführliche Anweisungen zu den Schritten für den Schnelleinstieg finden Sie hier.

Ergebnisse

  • Wenn Sie auf die Schaltfläche Ping MobileFirst Server klicken, wird Connected to MobileFirst Server angezeigt.
  • Falls die Anwendung eine Verbindung zu MobileFirst Server herstellen kann, wird mithilfe des implementierten Java-Adapters eine Ressourcenanforderung abgesetzt. Die Adapterantwort wird dann in Form eines Alerts angezeigt.
Last modified on October 16, 2018