Entwicklung in React Native

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
         

   Hinweis: Dieser Schritt ist nicht für React Native ab Version 0.60 erforderlich.

Schritt 2.3: Zusätzliche plattformspezifische Schritte

Android

      <![CDATA[
      <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"  package="com.myapp">
        ...
        <application tools:replace="android:allowBackup"
        ...
      </application>
    ]]>
    

iOS

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.

         import {WLAuthorizationManager, WLResourceRequest} from 'react-native-ibm-mobilefirst';
         

3. 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) => {
                   console.error(error);
                   alert("Failure: Resource Request");
                 }
               );
                  }, (error) => {
               console.error(error);
               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.

React-Native-SDK für IBM MobileFirst JSONStore

Installation

Das IBM MobileFirst-JSONStore-SDK für React-Native-Apps ist vom IBM MobileFirst-Foundation-SDK abhängig. Fügen Sie das IBM MobileFirst-Foundation-SDK zu Ihrer App hinzu.

Navigieren Sie zu den Ordner Ihrer React-Native-App und führen Sie den folgenden Befehl aus, um das JSONStore-SDK für React-Native-Apps zu installieren.

      npm install react-native-ibm-mobilefirst-jsonstore --save
      

Unterstützte Plattformen sind Android und iOS.

Erste Schritte

Voraussetzungen

• Vergewissern Sie sich, dass Sie alle Voraussetzungen für eine React-Native-App bedacht haben. Sie können diese auf der Seite React Native Getting Started nachlesen, falls Sie noch nicht mit React Native vertraut sind.
• Sie benötigen eine Mobile-Foundation-Instanz für IBM Cloud ODER eine lokale Installation von IBM Mobile Foundation Server.

React-Native-Projekt erstellen

1. Der erste Schritt ist die Erstellung eines React-Native-Projekts. Die App wollen wir JSONStoreApp nennen. Erstellen Sie mithilfe der React-Native-CLI ein neues Projekt.

         react-native init JSONStoreApp
         cd JSONStoreApp
         

2. Installieren Sie das zentrale MobileFirst-SDK und führen Sie die Anweisungen auf der Seite Getting Started Instructions aus.
3. Fügen Sie das IBM MobileFirst-JSONStore-SDK zu Ihrer App hinzu.

         npm install react-native-ibm-mobilefirst-jsonstore —-save
         

4. Verlinken Sie Ihr Projekt so, dass alle nativen Abhängigkeiten zu Ihrem React-Native-Projekt hinzugefügt werden.

         react-native link
         

   Hinweis: Dieser Befehl ist für React Native ab Version 0.60 nicht erforderlich.

Android-App konfigurieren

• Fügen Sie zum Abschnitt android der Datei /android/app/build.gradle die folgenden Zeilen hinzu:

      packagingOptions{
      	exclude 'META-INF/ASL2.0'
      }
      

JSONStore-Sammlung erstellen

Der erste Schritt bei der Verwendung der JSONStore-API ist das Erstellen einer JSONStore-Sammlung.

1. Importieren Sie die JSONStore-Klassen in Ihre Anwendung. Öffnen Sie die Datei App.js und fügen Sie bei den anderen Importanweisungen die folgende Zeile hinzu:

       import {WLJSONStore, JSONStoreCollection} from 'react-native-ibm-mobilefirst-jsonstore';
       

2. Erstellen Sie eine Sammlung und öffnen Sie sie. Sie können mehrere Sammlungen auf einmal öffnen. Übergeben Sie den Parameter JSONStoreInitOptions für erweiterte Optionen, z. B. für den Schutz Ihrer Sammlung mit einem Kennwort, für das Einrichten von Synchronisationsrichtlinien usw.

       var dogs = new JSONStoreCollection('dogs');
       WLJSONStore.openCollections(['dogs']);  // Geben Sie den Namen der Sammlung als Zeichenfolge an.
   
       

Daten zu einer Sammlung hinzufügen

Fügen Sie JSON-Daten zu Ihrer Sammlung hinzu.

    	var hachi = { "name" : "Hachiko" , "breed" : "Akita" , "country" : "Japan"};
        dogs.addData(hachi).then( ()=> {
          // Daten wurden erfolgreich zur Sammlung hinzugefügt.

        }).catch ( (err) => {
          // Fehler beim Hinzufügen der Daten. Weitere Informationen zum Fehler enthält das err-Objekt.

        })
    

Daten einer Sammlung abfragen

Sie können eine der APIs JSONStoreCollection.find* verwenden, um eine Sammlung abzufragen. Für erweiterte Filter- und Abfragefunktionen für JSON-Daten verwenden Sie die APIs JSONStoreQueryPart und JSONStoreQuery.

    	dogs.findAllDocuments().then( (result) => {
           // Das Ergebnis umfasst alle Dokumente der Sammlung,

           // z. B. [ {"json": {"name":"Hachiko","breed":"Akita","country":"Japan"},"_id":2}]

         }).catch((error) => {
            console.error ("Error finding docs " +  JSON.stringify(error));
         });
    

Sammlung schließen, Inhalt löschen und Sammlung zerstören

Wenn Sie Ihre JSONStore-Sammlung schließen, bleibt sie geschlossen, bis Sie sie erneut mit der API openCollections öffnen.

    WLJSONStore.closeAll()
    

Wenn Sie den Inhalt einer Sammlung löschen, werden alle Dokumente aus der Sammlung entfernt, ohne dass die Sammlung zerstört wird.

    	dogs.clearCollection().then (()=>{
    		// Inhalt aller Dokumente erfolgreich gelöscht

         }).catch( (err) => {
           // Beim Löschen des Inhalts der Sammlung ist ein Fehler aufgetreten.

         })
    

Beim Zerstören einer Sammlung werden alle Daten, alle Zugreifenden und alle Sicherheitsartefakte unwiderruflich gelöscht. Eine einmal zerstörte Sammlung kann nicht wiederhergestellt werden. Alle Sammlungen der App werden zerstört.

    	WLJSONStore.destroy()
    

React-Native-SDK für die IBM MobileFirst-Liveaktualisierung

Installation

Das IBM MobileFirst-SDK für die Liveaktualisierung von React-Native-Apps ist vom IBM MobileFirst-Foundation-SDK abhängig. Fügen Sie das IBM MobileFirst-Foundation-SDK zu Ihrer App hinzu.

Navigieren Sie zu den Ordner Ihrer React-Native-App und führen Sie den folgenden Befehl aus, um das SDK für die Liveaktualisierung von React-Native-Apps zu installieren.

      npm install react-native-ibm-mobilefirst-liveupdate --save
      

Erste Schritte

Voraussetzungen

• Vergewissern Sie sich, dass Sie alle Voraussetzungen für eine React-Native-App bedacht haben. Sie können diese auf der Seite React Native Getting Started nachlesen, falls Sie noch nicht mit React Native vertraut sind.
• Sie benötigen eine Mobile-Foundation-Instanz für IBM Cloud ODER eine lokale Installation von IBM Mobile Foundation Server.

React-Native-Projekt erstellen

1. Der erste Schritt ist die Erstellung eines React-Native-Projekts. Die App wollen wir MFLiveUpdateApp nennen. Erstellen Sie mithilfe der React-Native-CLI ein neues Projekt.

           react-native init MFLiveUpdateApp
           

2. Fügen Sie das React-Native-Plug-in zu Ihrer App hinzu.

           cd MFLiveUpdateApp
           npm install react-native-ibm-mobilefirst-liveupdate —-save
           

   Hinweis: Das Liveaktualisierungspaket unterstützt React Native ab Version 0.62.x.

3. Installieren Sie Mobilefirst-spezifische Cocopods-Abhängigkeiten im Projekt.

           cd ios && pod install
           

Anwendung konfigurieren

Android

• Fügen Sie xmlns:tools="http://schemas.android.com/tools" zum Tag manifest hinzu. Beispiel:

        <manifest
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        package="com.mobilefirstapp">
        

• Fügen Sie tools:replace="android:allowBackup" zum Tag application hinzu. Beispiel:

        <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:allowBackup="false"
        android:theme="@style/AppTheme"
        tools:replace="android:allowBackup">
        

iOS

• Installieren Sie Mobilefirst-spezifische Cocopods-Abhängigkeiten im Projekt.

        cd ios && pod install
        

  Dieser Schritt muss nur auf der Plattform iOS ausgeführt werden.

Anwendung testen

Android

• Geben Sie Folgendes ein, um die Anwendung auszuführen:

        react-native run-android
        

iOS

• Geben Sie Folgendes ein, um die Anwendung auszuführen:

        react-native run-ios
        

Unterstützte Plattformen

• Android
• iOS

Konfiguration in der MobileFirst Operation Console

1. Fügen Sie in der MobileFirst Operations Console eine Bereichszuordnung für liveupdate.mobileclient hinzu ([Ihre Anwendung] → Registerkarte 'Sicherheit' → Zuordnung von Bereichselementen). Die Zuordnung muss zu einer leeren Zeichenfolge erfolgen, wenn Sie den Standardschutz verwenden möchten, oder zu einer Sicherheitsüberprüfung, sofern Sie eine solche durchführen möchten.
   Informieren Sie sich über Bereichszuordnungen.
2. Sie können Schemata und Features in der MobileFirst Operations Console hinzufügen ([Ihre Abnwendung] → Einstellungen für Liveaktualisierung).

Wenn Sie Schemata und Features eingerichtet haben, können Sie die clientseitige API nutzen.

Beispielverwendung der API

      var useClientCache = false; //true (Standardeinstellung)


      var featureId = 'featureId';
      var propertyId = 'propertyId' ;

      MFLiveUpdate.obtainConfiguration(useClientCache)
      .then(result => {

      console.log('Is feature enabled for' + featureId + ':' + result.isFeatureEnabled('featureId'));
      console.log ('Property value for the ' + propertyId + 'is :' +result.getProperty('propertyId'));


      })
      .catch(err => console.log('There was an error:' + err))
      

Weitere Informationen

• Developer Center
• Einführung
• API-Referenz