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
          
    Hinweis: Dieser Schritt ist nicht für React Native ab Version 0.60 erforderlich.

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/tools"  package="com.myapp">
        ...
        <application tools:replace="android:allowBackup"
        ...
      </application>
    ]]>
    

iOS


Installieren Sie Mobilefirst-spezifische Cocopods-Abhängigkeiten im Projekt. cd ios && pod install Dieser Schritt gilt nur für die iOS-Plattform.

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) => {
                         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

IBM Mobile Foundation JSONStore ist eine optionale clientseitige API für ein einfaches, dokumentorientiertes Speichersystem. JSONStore ermöglicht die permanente Speicherung von JSON-Dokumenten. Dokumente einer Anwendung sind auch dann in JSONStore verfügbar, wenn das Gerät offline ist. Dieser permanente und stets verfügbare Speicher kann nützlich sein, um Benutzern den Zugriff auf Dokumente zu ermöglichen, wenn das Gerät beispielsweise keine Netzverbindung herstellen kann.

Installation

Das IBM MobileFirst-JSONStore-SDK für React-Native-Apps ist vom IBM MobileFirst-Foundation-SDK abhängig. Fügben 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

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()
        

Weitere Informationen

Einzelheiten zu JSONStore in React-Native-Anwendungen finden Sie hier.

Referenzinformationen

Last modified on October 30, 2019