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
- Initiieren und Durchführen 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 der Methode setupRootViewController
von AppDelegate
.
Diese Methode 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. Beachten Sie, dass Sie diese Klasse mit dem Speicherort (jsCodeLocation
) eines Bundles initialisieren, das Ihren JavaScript-Code enthält.
- (void)setupRootViewController { NSURL *jsCodeLocation; jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SecondReact" initialProperties:nil launchOptions:self.launchOptions]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; }
Android-nativer Container
Öffnen Sie in Android Studio Ihr Projekt FirstReact/android, wechseln Sie in die Projektansicht und sehen Sie unter FirstReact/app/app/src/main/java/com.mytrail.react 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 nativen Android-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 es, 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() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); packages.add(SalesforceReactSDKManager.getInstance().getReactPackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } };
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:
@Override public 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.bundle", * * // the entry file for bundle generation * entryFile: "index.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: [] * ] */
In iOS wird die Umstellung zwischen Debug- und Release-Modus automatisch für Sie erledigt.
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 Repository SalesforceMobileSDK-Templates 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, verwenden Sie den Befehl forcereact createwithtemplate. Hier ein Beispiel.
% forcereact createwithtemplate Enter the target platform(s) separated by commas (ios, android): ios,android Enter URI of repo containing template application or a Mobile SDK template name: MobileSyncExplorerReactNative Enter your application name: MyMobileSyncExplorer Enter your package name: com.mytrail.react Enter your organization name (Acme, Inc.): MyTrail Enter output directory for your app (leave empty for the current directory): MyMobileSyncExplorer
Um die Anwendung auszuführen, starten Sie den React Native-Entwicklungsserver.
- Wechseln Sie in einem Terminal-Fenster unter macOS oder an der Eingabeaufforderung unter Windows in das Stammverzeichnis Ihrer Anwendung. In unserem Fall ist dies MyMobileSyncExplorer/.
- Führen Sie einen der folgenden Befehle aus:
- Unter macOS: yarn start oder npm start
- Unter Windows: yarn run-script start-windows oder npm run-script start-windows
Wenn in der Befehlszeile die Meldung "To open developer menu press 'd'" angezeigt wird, können Sie die Anwendung in Ihrer Entwicklungsumgebung starten.
- Für iOS:
- Öffnen Sie MyMobileSyncExplorer/ios/MyMobileSyncExplorer.xcworkspace in Xcode.
- Klicken Sie auf Ausführen.
- Für Android:
- Navigieren Sie im Begrüßungsbildschirm von Android Studio oder über den Menübefehl File | Open zu MyMobileSyncExplorer/android/.
- Klicken Sie auf OK.
- Klicken Sie auf Ausführen.
Da geht noch mehr!
Um zu untersuchen, wie das native Bibliotheksprojekt Brücken zwischen Mobile SDK und React Native definiert, siehe:
- iOS: das Projekt ios/SalesforceReact im Repository SalesforceMobileSDK-ReactNative.
- Android: das Projekt libs/SalesforceReact im Repository SalesforceMobileSDK-Android.
- Ressourcen
- GitHub-Repository: React Native template for Mobile SDK
- GitHub-Repository: MobileSyncExplorerReactNative
- GitHub-Repository: Mobile SDK: React Native-Komponenten für iOS
- GitHub-Repository: Mobile SDK: React Native-Komponenten für Android
- Using SmartStore to Securely Store Offline Data
- Verwenden von Mobile Sync für den Zugriff auf Salesforce-Objekte