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:
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.
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.
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.
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.
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
Öffnen Sie ein Befehlszeilenfenster und navigieren Sie zum Stammverzeichnis des Projekts für die entsprechende Plattform (iOS oder Android).
cd ios
or
cd android
Führe Sie den folgenden Befehl aus, um die Anwendung zu registrieren:
mfpdev app register
Falls ein ferner Server verwendet wird, verwenden Sie den Befehlmfpdev 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
Öffnen Sie das React-Native-Projekt im Codeeditor Ihrer Wahl.
Importieren Sie die Klasse WLAuthorizationManager in Ihre Datei App.js.
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);varresourceRequest=newWLResourceRequest("/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ü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.
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.
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
Installieren Sie das zentrale MobileFirst-SDK und führen Sie die Anweisungen auf der Seite Getting Started Instructions aus.
Fügen Sie das IBM MobileFirst-JSONStore-SDK zu Ihrer App hinzu.
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.
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';
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.
vardogs=newJSONStoreCollection('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.
varhachi={"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
Die Mobile-Foundation-Liveaktualisierung bietet eine einfache Möglichkeit, verschiedene Konfigurationen zu definieren und für Benutzer einer Anwendung bereitzustellen. Das Feature für Liveaktualisierung umfasst eine Komponente für die MobileFirst Operations Console, mit der Struktur und Werte der Konfiguration definiert werden können.
Mit dem React-Native-SDK für die Liveaktualisierung können Sie Eigenschaften und Features der Laufzeitkonfiguration abfragen, die Sie in der Anzeige **Einstellungen für Liveaktualisierung** der MobileFirst Operations Console festlegen. Wenn Sie die Liveaktualisierung in Ihre Anwendung integrieren, können Sie das Ein-/Ausschalten von Features, A/B-Tests, Featuresegmentierungen etc. implementieren.
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.
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.
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
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.
Installieren Sie Mobilefirst-spezifische Cocopods-Abhängigkeiten im Projekt.
cd ios && pod install
Anwendung konfigurieren
Android
Nehmen Sie an der Datei AndroidManifest.xml (/android/app/src/main/) die folgenden Änderungen vor.
Fügen Sie xmlns:tools="http://schemas.android.com/tools" zum Tag manifest hinzu. Beispiel:
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
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.
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
varuseClientCache=false;//true (Standardeinstellung)
varfeatureId='featureId';varpropertyId='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
Einzelheiten zu JSONStore in React-Native-Anwendungen finden Sie hier.
Weiere Informationen zur Liveaktualisierung finden Sie hier.
Inclusive terminology note: The Mobile First Platform team is making changes to support
the IBM® initiative to replace racially biased and other discriminatory language in our code and content
with more inclusive language. While IBM values the use of inclusive language, terms that are outside of
IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other
industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the
documentation to reflect those changes.