JSONStore in React-Native-Anwendungen

Voraussetzungen

• Gehen Sie das übergeordnete Lernprogramm zu JSONStore durch.
• Stellen Sie sicher, dass das zentrale MobileFirst-SDK für React Native zum Projekt hinzugefügt wurde. Folgen Sie dabei dem Lernprogramm Mobile-Foundation-SDK zu React-Native-Anwendungen hinzufügen.

Fahren Sie mit folgenden Abschnitten fort:

• JSONStore hinzufügen
• Grundlegende Verwendung
• Beispielanwendung

JSONStore hinzufügen

Gehen Sie wie folgt vor, um das JSONStore-Plug-in zu Ihrer React-Native-Anwendung hinzuzufügen:

1. Öffnen Sie ein Befehlszeilenfenster und navigieren Sie zu Ihrem React-Native-Projektordner.
2. Führen Sie den folgenden Befehl aus:

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

3. Mobilefirst-Pod-Abhängigkeiten installieren (nur iOS)

   cd ios && pod install
   

Grundlegende Verwendung

Neue JSONStore-Sammlung erstellen

1. Mit der Klasse JSONStoreCollection werden Sie JSONStore-Instanzen erstellen. Für die neue erstellte JSONStore-Sammlung können Sie auch zusätzliche Konfigurationseinstellungen festlegen (z. B. für Suchfelder).
2. Für die Interaktion mit einer vorhandenen JSONStore-Sammlung (z. B. zum Hinzufügen oder Entfernen von Daten), müssen Sie die Sammlung öffnen. Verwenden Sie dafür die API openCollections().

   var collection = new JSONStoreCollection('people');
   WLJSONStore.openCollections(['people'])
   .then(res => {
   	// Erfolg behandeln
   }).catch(err => {
   	// Feler behandeln
   });
   

Add

Verwenden Sie die API addData(), um JSON-Daten in einer Sammlung zu speichern.

var data = { "name": "John", age: 28 };
var collection = new JSONStoreCollection('people');
collection.addData(data)
.then(res => {
  // Erfolg behandeln
    }).catch(err => {
    	// Feler behandeln
});

Mit dieser API können Sie ein einzelnes JSON-Objekt oder ein Array mit JSON-Objekten hinzufügen.

Find

1. Verwenden Sie find, um mit einer Abfrage ein Dokument in einer Sammlung zu finden.
2. Verwenden Sie die API findAllDocuments(), um alle Dokumente aus einer Sammlung abzurufen.
3. Nutzen Sie die APIs findDocumentById() und findDocumentsById() für eine Suche unter Verwendung der eindeutigen Dokument-ID.
4. Verwenden Sie die API findDocuments() zum Abfragen der Sammlung. Die Daten für Abfragen können Sie mithilfe von JSONStoreQueryPart-Klassenobjekten filtern.

Übergeben Sie ein Array mit JSONStoreQueryPart-Objekten als Parameter der API findDocuments.

var collection = new JSONStoreCollection('people');
var query = new JSONStoreQueryPart();
query.addEqual("name", "John");
collection.findDocuments([query])
.then(res => {
	// Erfolg behandeln
    }).catch(err => {
    	// Feler behandeln
});

Remove

Verwenden Sie remove, um ein Dokument aus einer Sammlung zu löschen.

var id = 1; // for example
var collection = new JSONStoreCollection('people');
collection.removeDocumentById(id)
.then(res => {
	// Erfolg behandeln
    }).catch(err => {
    	// Feler behandeln
});

removeCollection

Verwenden Sie removeCollection, um alle Dokumente aus einer Sammlung zu löschen. Diese Operation ist mit dem Löschen einer Datenbanktabelle vergleichbar.

var collection = new JSONStoreCollection('people');
collection.removeCollection()
.then(res => {
	// Erfolg behandeln
    }).catch(err => {
    	// Feler behandeln
});

Beispiel-App für IBM MobileFirst JSONStore

Laden Sie das Beispiel hier herunter.

Beispiel ausführen

Führen Sie im Stammverzeichnis des Beispiels den folgenden Befehl aus, um alle Projektabhängigkeiten zu installieren:

npm install

Hinweis: Vergewissern Sie sich, dass Ihre Dateien mfpclient.properties und mfpclient.plist auf den richtigen MobileFirst Server zeigen.

1. Registrieren Sie die App. Führen Sie dazu im Verzeichnis android den folgenden Befehl aus:

    mfpdev app register
   

2. Konfigurieren Sie die App (nur Android).

   • Öffnen Sie die Datei android/app/src/main/AndroidManifest.xml im React-Native-Projektstammverzeichnis.
     Fügen Sie zum Tag <manifest> die folgende Zeile hinzu:
     xmlns:tools="http://schemas.android.com/tools"
     Fügen Sie zum Tag <application> die folgende Zeile hinzu:
     tools:replace="android:allowBackup"
     
     Dieser Schritt ist für die Bibliothek react-native-ibm-mobilefirst erforderlich.
     

   • Öffnen Sie die Datei android/app/build.gradle im React-Native-Projektstammverzeichnis.
     Fügen Sie innerhalb von android {} den folgenden Code hinzu:
     

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

     Dieser Schritt ist für die Bibliothek react-native-ibm-mobilefirst-jsonstore erforderlich.

3. Kehren Sie für die Ausführung der App zum Stammverzeichnis zurück, navigieren Sie zum Verzeichnis iOS und führen Sie den folgenden Befehl aus: mfpdev app register

Jetzt kann die App ausgeführt werden. Führen Sie für eine Ausführung unter Android den folgen Befehl aus:

react-native run-android