Erstellen einer React Native-Anwendung

Lernziele

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

• Erstellen einer einfachen React Native-Anwendung mit Mobile SDK
  
• Zugreifen auf React Native-Komponenten, die vom Mobile SDK bereitgestellt werden
  
• Hinzufügen der entsprechenden Informationen zu Ihrer verbundenen Anwendung
  
• Erstellen und Testen Ihrer Mobile SDK React Native-Anwendung
  

Erstellen einer React Native-Anwendung mit Forcereact

Im folgenden Beispiel wird eine React Native-Anwendung mit forcereact unter macOS X erstellt. Sie können forcereact unter macOS X oder Windows verwenden, doch eine iOS React Native-Anwendung kann nur unter macOS X entwickelt werden.

1. Um eine React Native-Anwendung zu erstellen, führen Sie forcereact create in einem Terminal-Fenster aus.
   
2. Geben Sie die folgenden Werte an den Eingabeaufforderungen ein:
   

• Plattform: Kommagetrennte Liste mit einer oder mehreren Plattformen. Hier kann ios, android oder ios,android angegeben werden.
  
• Anwendungstyp: Drücken Sie die <Eingabetaste.>
  
• Anwendungsname: FirstReact
  
• Paketname: com.mytrail.react
  
• Organisationsname: MyTrail, Inc.
  
• Ausgabeverzeichnis: FirstReact
  

3. So sollte Ihre Eingabe aussehen (natürlich ohne unsinnige Syntaxmarkierungen):
   

4. $ forcereact create
   Enter the target platform(s) separated by commas (ios, android):
   ios,android
   Enter your application type (react_native_typescript or react_native, leave empty for react_native_typescript):
   <Return>
   Enter your application name:
   FirstReact
   Enter your package name:
   com.mytrail.react
   Enter your organization name (Acme, Inc.):
   MyTrail, Inc.
   Enter output directory for your app (leave empty for the current directory):
   FirstReact

Anwendungsname, Paketname, Organisationsname und Ausgabeverzeichnis sind benutzerdefinierte Eigenschaften, die Sie angeben.

Was erstellt dieser forcereact-Aufruf? Eine React Native-Anwendung, die:

• FirstReact heißt,
  
• sowohl iOS als auch Android unterstützt,
  
• den Einsatz von TypeScript unterstützt
  
• mit Mobile SDK-Bibliotheken erstellt wird
  
• und sich im Verzeichnis <aktuelles_Verzeichnis>/FirstReact/ befindet.
  

Wenn Sie das erste Mal eine forcereact-Anwendung auf einem Entwicklungsrechner erstellen, sollten Sie sich auf eine Wartezeit von mehreren Minuten einstellen, während die React Native-Bibliotheken heruntergeladen werden.

Festlegen von Werten für die verbundene Anwendung

Nachdem in einer Befehlszeilennachricht gemeldet wurde, dass Ihr Projekt fertig ist, aktualisieren Sie das neue Projekt, damit es die Einstellungen Ihrer verbundenen Anwendung widerspiegelt.

iOS

1. Öffnen Sie in Xcode die Datei <aktuelles_Verzeichnis>/FirstReact/ios/FirstReact.xcworkspace.
   
2. Navigieren Sie in der Projektansicht zu FirstReact/FirstReact/Supporting Files und öffnen Sie dann die Datei bootconfig.plist.
   
3. Ersetzen Sie die Werte von "remoteAccessConsumerKey" und "oAuthRedirectURI" durch Ihre eigenen Einstellungen.
   

Android

1. Klicken Sie im Willkommensbildschirm von Android Studio auf Import Project (Eclipse ADT, Gradle, etc.). Falls in Android Studio bereits ein anderes Projekt geöffnet ist, wählen Sie File | Open.
   
2. Wählen Sie das Verzeichnis <aktuelles_Verzeichnis>/FirstReact/android aus und klicken Sie auf OK.
   
3. Öffnen Sie in der Projektansicht die Datei app/src/main/res/values/bootconfig.xml.
   
4. Ersetzen Sie die Werte von "remoteAccessConsumerKey" und "oauthRedirectURI" durch Ihre eigenen Einstellungen.
   

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="remoteAccessConsumerKey">3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa</string>
   <string name="oauthRedirectURI">testsfdc:///mobilesdk/detect/oauth/done</string>
   <string-array name="oauthScopes">
       <item>api</item>
   </string-array>
   <string name="androidPushNotificationClientId"></string>
</resources>

Erstellen und Testen Ihrer React Native-Anwendung

Um Ihre React Native-Anwendung auszuführen, kehren Sie zur Terminal-Anwendung oder zur Windows-Befehlszeile zurück.

Bei der Erstellung Ihrer React Native-Anwendung wird ein Bundle angelegt, das Ihre benutzerdefinierten JavaScript-Komponenten enthält. Damit sich der JavaScript-Code und der native Code beim Ausführen der Anwendung verstehen, starten Sie den React Native-Entwicklungsserver.

1. Wechseln Sie in einem Terminal-Fenster unter macOS oder an der Eingabeaufforderung unter Windows in das Stammverzeichnis Ihrer Anwendung. In unserem Fall ist dies FirstReact.
   
2. Führen Sie einen der folgenden Befehle aus:
   

• yarn start oder npm start 
  

Wenn in der Befehlszeile die Meldung "Loading dependency graph, done" angezeigt wird, können Sie die Anwendung von Ihrer Entwicklungsumgebung aus starten.

1. So starten Sie eine forcereact iOS-Anwendung:
   

1. Öffnen Sie FirstReact/ios/FirstReact.xcworkspace in Xcode.
   
2. Klicken Sie auf Ausführen.
   

2. So starten Sie eine forcereact Android-Anwendung:
   

1. Navigieren Sie im Willkommensbildschirm von Android Studio oder über den Menübefehl File | Open zu FirstReact/android/.
   
2. Klicken Sie auf OK (Posten).
   
3. Klicken Sie auf Ausführen.
   

Wenn der Anmeldebildschirm angezeigt wird, geben Sie die Anmeldeinformationen für Ihre Developer Edition-Organisation ein. Autorisieren Sie die Anwendung bei der entsprechenden Aufforderung zum Datenzugriff. Anschließend wird eine Listenansicht angezeigt.

Hier ist sie – Ihre funkelnagelneue Mobile SDK React Native-Anwendung.

Halt – wo sind meine JavaScript-Dateien?

Wenn Sie in Xcode oder Android Studio durch Ihr Projekt geblättert haben, fragen Sie sich vielleicht: Wo sind die React Native JavaScript- und Markup-Dateien? Sie werden sie im Xcode- oder Android Studio-Projekt nicht finden. Da diese JavaScript-Dateien von iOS- und Android-Anwendungen gemeinsam genutzt werden können, werden sie eine Ebene höher erstellt und in den Build-Einstellungen des Projekts nur referenziert. Suchen Sie die Datei app.tsx auf der Ebene des Ordners ios/ oder android/.

React Native-Komponenten für das Mobile SDK

Einige der ersten Codezeilen in der Datei app.js importieren die "Geheimzutaten" aus dem Mobile SDK. Das Mobile SDK bietet JavaScript-Komponenten, mit denen React Native-Anwendungen auf Mobile SDK-Funktionen zugreifen können. Zu diesen Komponenten gehören:

• react.force.oauth.ts (Anmeldung, Identität und Authentifizierung)
  
• react.force.network.ts (REST-API-Hilfsklassen und -Dienstprogramme)
  
• react.force.smartstore.ts (Offline-Caching-Funktion von SmartStore)
  
• react.force.mobilesync.ts (Mechanismus zur Offline-Synchronisierung von Mobile Sync)
  

Wie die in Hybridanwendungen verwendeten Mobile SDK-Komponenten definieren diese Komponenten Brücken von JavaScript zum nativen Mobile SDK-Code. Sie importieren sie aus der Bibliothek "react-native-force" in Ihre app.tsx-Datei. Um alle Komponenten zu importieren, verwenden Sie beispielsweise folgenden Befehl:

import {oauth, net, smartstore, mobilesync} from 'react-native-force';

Sie geben den Pfad zu react-native-force-Komponenten im Abschnitt "dependencies" der package.json-Datei an, die sich auf der obersten Ebene Ihrer Anwendung befindet. In der Regel verwenden Sie das Repository SalesforceMobileSDK-ReactNative.gitrepo:

...
"react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v9.0.0"
...

Wenn Sie dieses Repo lokal verzweigt haben, können Sie diesen Pfad auf Ihren lokalen Zweig einstellen.

Die force.js-Bibliothek kann nicht mit React Native verwendet werden.

Echtzeit-Testing

Und jetzt amüsieren wir uns ein bisschen!

Öffnen Sie in einem Texteditor im Stammverzeichnis Ihrer Anwendung die Datei app.tsx. Suchen Sie die Objektdefinition styles am Ende der Datei.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22,
        backgroundColor: 'white',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },

Fügen Sie in der Eigenschaft item dieses Objekts eine Zeile hinzu, die backgroundColor auf 'red' einstellt:

const styles = StyleSheet.create({
    ...
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
backgroundColor: 'red',
    }
});

Wechseln Sie zu Ihrem iOS-Simulator und drücken Sie Command-R. Sehen Sie den roten Hintergrund?

Sie können alle Änderungen, die Sie in der React Native JavaScript-Quelle speichern, als Vorschau anzeigen, indem Sie einfach den Emulator oder Simulator aktualisieren.

Ressourcen

• Entwicklerhandbuch für das Mobile SDK: React Native-Entwicklung