Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Untersuchen des Vorlagenprojekts

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

  • Navigieren in der Projektstruktur für Mobile SDK React Native-Anwendungen
  • Konfigurieren Ihres Projekts für Debugging oder Produktion
  • Finden der Mobile SDK React Native-Beispielanwendung und Open Source Libraries auf GitHub

Mobile SDK-Vorlagen für React Native

Wenn Sie eine Anwendung mit forcereact erstellen, passt das Skript eine Vorlage mit den Argumenten an, die Sie zur Verfügung stellen. Diese angepasste Vorlage ist das Projekt für Ihre neue Mobile SDK-Anwendung. Für React Native definiert die Vorlage eine native Containeranwendung, die direkten Zugriff auf das native Betriebssystem ermöglicht. Dieser Container bildet die Brücke zwischen Ihrem JavaScript-Code und der Android- oder iOS-Laufzeitumgebung. In einigen Fällen kann es sein, dass Ihre Entwicklungsanforderungen Anpassungen an diesem zugrundeliegenden Container notwendig machen. Schauen wir uns kurz an, was in der Anwendung enthalten ist.

iOS-nativer Container

Der iOS-native Teil des Vorlagenprojekts ist nahezu identisch mit dem eines nativen iOS-Projekts. Seine zwei Klassen übernehmen Folgendes:

  • * Konfigurieren von Mobile SDK für den Start
  • * Instanziieren und Anzeigen der Stammansicht
  • * Initiierung und Durchführung von Login und Authentifizierung

Öffnen Sie <Ausgabeverzeichnis>/ios/FirstReact.xcworkspace in Xcode. Beim Ansehen der Arbeitsumgebung kann leicht der Eindruck entstehen, dass es sich um ein natives iOS-Projekt handelt. Die AppDelegate-Klasse enthält beispielsweise den Großteil der Codebausteine einer nativen iOS-Anwendung. Der React-spezifische Code befindet sich in den Methoden setupReactRootView: und setupRootViewController von AppDelegate.

In setupRootViewController weisen Sie React an, ob Ihre Anwendung von einem Entwicklungsserver (zum Testen) oder von einem Bundle auf dem Gerät (für die Produktion) ausgeführt werden soll. Diese Methode ruft lediglich setupReactRootView: auf. Abhängig von dem Szenario, das Sie erstellen, müssen Sie möglicherweise die Kommentierung des entsprechenden setupReactRootView:-Aufrufs aufheben und den anderen durch Kommentarzeichen deaktivieren. Die Code-Kommentare enthalten hilfreiche Details für diese Setups.
- (void)setupRootViewController {    
    /**
     * Loading JavaScript code - uncomment the one you want.
     *
     * OPTION 1
     * Load from development server. Start the server from the repository root:
     *
     * $ npm start
     *
     * To run on a device, change `localhost` to the IP address of your computer
     * and make sure your computer and iOS device are on the same Wi-Fi network.
     */
    [self setupReactRootView:[NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]];
    /**
     * OPTION 2
     * Load from pre-bundled file on disk. To re-generate the static bundle,
     * start the server from the repository root:
     *
     * $ npm start
     *
     * Run the curl command and add the output to your main Xcode build target:
     *
     * $ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
     */
    // [self setupReactRootView:[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]];
}

Beachten Sie, dass Sie diese Klasse mit dem Speicherort (jsCodeLocation) eines Bundles initialisieren, das Ihren JavaScript-Code enthält. Wenn Sie die Anwendung vom Entwicklungsserver aus ausführen – im Simulator oder auf dem Gerät – verwenden Sie Option 1. Um das Bundle als statisches Paket neu zu packen und es lokal in einer Produktionsumgebung zu installieren, verwenden Sie Option 2. Folgen Sie in jedem Fall den Anweisungen in den Code-Kommentaren.

Die Methode setupReactRootView: erstellt eine Instanz von RCTRootView, einer React Native-Klasse, und weist diese Instanz als Stammansicht der Anwendung zu. RCTRootView dient als Brücke zwischen nativen Benutzeroberflächen-Komponenten und den React Native-Komponenten Ihrer Anwendung.
- (void)setupReactRootView:(NSURL*)jsCodeLocation{
    RCTRootView *rootView = 
        [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                    moduleName:@"FirstReact"
                             initialProperties:nil
                                 launchOptions:self.launchOptions];
    UIViewController *rootViewController =
        [[UIViewController alloc] init];
    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
}

Android-nativer Container

Öffnen Sie Ihr FirstReact/android-Projekt in Android Studio, wechseln Sie dann in die Projektansicht und sehen Sie unter android/app/src/main/java nach. Dort finden Sie zwei native Java-Klassen, MainActivity und MainApplication. Diese Klassen sind vergleichbar mit ihren rein nativen Mobile SDK-Gegenstücken.

Die Klassen MainApplication und MainActivity erfüllen dieselben Zwecke wie in Android-nativen Projekten:

  • Konfigurieren von Mobile SDK für den Start
  • Instanziieren und Anzeigen der Startaktivitäten
  • Initiieren und Durchführen von Login und Authentifizierung

Die Hauptunterschiede zwischen nativen und React Native-Vorlagen für diese Klassen sind ihre Basisklassen. In React Native-Anwendungen erweitert MainApplication meist Application, implementiert aber auch ReactApplication. MainActivity erweitert die Klasse SalesforceReactActivity, die wiederum ReactActivity erweitert. ReactApplication und ReactActivity stammen aus der React Native-Bibliothek von Facebook. Bei genauer Betrachtung der Implementierungen stellt man fest, dass die meisten Codepfade letztendlich zu einem React Native-Objekt führen. Zu diesen Objekten gehören React-orientierte Spezialisierungen vieler Mobile SDK-Klassen wie SalesforceReactSDKManager.

Der MainApplication-Code erstellt zum Beispiel ein ReactNativeHost-Objekt und verwendet dieses, um Mobile SDK React Native-Pakete an das React Native-Framework weiterzugeben.
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override  public boolean getUseDeveloperSupport() {
     return BuildConfig.DEBUG;
  }
  @Override
  protected List<ReactPackage> getPackages() {
     return Arrays.asList(
           new MainReactPackage(),
           SalesforceReactSDKManager.getInstance().getReactPackage()
     );
  }
};
Wenn Sie tiefer in den Code von SalesforceReactSDKManager.getReactPackage() eintauchen, stellen Sie fest, dass er ein neues ReactPackage-Objekt zurückgibt. Dieses Objekt überschreibt die createNativeModules()-Basismethode, damit genau die Liste der von Ihnen erwarteten Pakete zurückgegeben wird:
@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
   List<NativeModule> modules = new ArrayList<>();  
   modules.add(new SalesforceOauthReactBridge(reactContext));
   modules.add(new SalesforceNetReactBridge(reactContext));
   modules.add(new SmartStoreReactBridge(reactContext));
   modules.add(new MobileSyncReactBridge(reactContext));
   return modules;
   }

Die React Native-Laufzeit ruft diese Methode und andere Überschreibungen auf, um den Zauber zu wirken, der JavaScript-Methoden als nativen Mobile SDK-Code ausführt.

Konfigurieren Ihres Builds

Suchen Sie nach der Stelle, an der Sie Ihren Code so konfigurieren, dass er im Debug- oder Release-Modus ausgeführt werden kann? Dieser Mechanismus ist bei Android etwas anders als bei iOS. Beim Entwickeln und Debuggen erwartet Android Studio, dass die JS-Dateien direkt vom Entwicklungsserver geladen werden. Im Release-Modus werden die JS-Dateien aus einem Bundle auf das Gerät geladen. Sie können die standardmäßige Build-Konfiguration in der Datei android/app/build.gradle des Projekts außer Kraft setzen. Befolgen Sie dazu die Anweisungen in dem umfangreichen Kommentar am Anfang der Datei. Beispiel:

/*** The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
*   // the name of the generated asset file containing your JS bundle
*   bundleAssetName: "index.android.bundle",
*
*   // the entry file for bundle generation
*   entryFile: "index.android.js",
*
*   // whether to bundle JS and assets in debug mode
*   bundleInDebug: false,
*
*   // whether to bundle JS and assets in release mode
*   bundleInRelease: true,
*
*   // whether to bundle JS and assets in another build variant (if configured).
*   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
*   // The configuration property can be in the following formats
*   //         'bundleIn${productFlavor}${buildType}'
*   //         'bundleIn${buildType}'
*   // bundleInFreeDebug: true,
*   // bundleInPaidRelease: true,
*   // bundleInBeta: true,
*
*   // the root of your project, i.e. where "package.json" lives
*   root: "../../",
*
*   // where to put the JS bundle asset in debug mode
*   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
*   // where to put the JS bundle asset in release mode
*   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
*   // where to put drawable resources / React Native assets, e.g. the ones you use via
*   // require('./image.png')), in debug mode
*   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
*   // where to put drawable resources / React Native assets, e.g. the ones you use via
*   // require('./image.png')), in release mode*   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
*   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
*   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
*   // date; if you have any other folders that you want to ignore for performance reasons (gradle
*   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
*   // for example, you might want to remove it from here.
*   inputExcludes: ["android/**", "ios/**"],
*
*   // override which node gets called and with what additional arguments
*   nodeExecutableAndArgs: ["node"]
*
*   // supply additional arguments to the packager
*   extraPackagerArgs: []
* ]
*/

Mobile SDK-Beispielanwendung für React Native

Wenn Sie auf eigene Faust weitere Erkundungen machen möchten, können Sie sich die Beispielanwendung SmartSyncExplorerReactNative in ihrem Open-Source-Repository auf GitHub ansehen. Diese Beispielanwendung demonstriert alle React Native-Funktionen, die Sie soeben kennen gelernt haben, sowie einige Offline-Funktionen von Mobile SDK, die Sie vielleicht noch nicht kennen:
  • SmartStore: Ein Offline-Caching-Mechanismus für die sichere Speicherung von Daten auf dem Gerät
  • Mobile Sync: Ein Offline-Synchronisierungsmechanismus für die einfache Zusammenführung von offline erfolgten Datenänderungen mit den Salesforce-Quelldatensätzen, wenn das Gerät seine Verbindung wiederhergestellt hat.
Um die Beispielanwendung MobileSyncExplorerReactNative auf Ihrem Entwicklungsrechner zu erstellen und auszuführen, gehen Sie wie folgt vor:
  1. Duplizieren Sie das Repository in einem Terminalfenster oder einer Windows-Eingabeaufforderung:

    git clone https://github.com/forcedotcom/SalesforceMobileSDK-Templates.git
  2. Wechseln Sie zum Verzeichnis "MobileSyncExplorerReactNative/".

    cd MobileSyncExplorerReactNative
  3. Installieren Sie Abhängigkeiten:
    • iOS: node ./installios.js
    • Android: node ./installandroid.js
  4. Starten Sie die react-native-Paketerstellungsfunktion:
    • OS X: npm start
    • Windows: npm run-script start-windows
  5. Öffnen Sie die Projektarbeitsumgebung in Ihrer Entwicklungsumgebung:
    • iOS: Öffnen Sie in Xcode <lokales_Duplikat_des_Repositorys>/ios/MobileSyncExplorerReactNative.xcworkspace.
    • Android: Öffnen Sie in Android Studio <lokales_Duplikat_des_Repositorys>/android/.
  6. Klicken Sie auf Run.


Wenn Sie sich mit dem nativen Bibliotheksprojekt befassen möchten, das die Brücken zwischen Mobile SDK und React Native definieren, sehen Sie sich das Projekt ios/SalesforceReact im Repository SalesforceMobileSDK-ReactNative und das Projekt libs/SalesforceReact im Repository SalesforceMobileSDK-Android an.