Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Exploration du Projet modèle

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

  • Naviguer dans la structure du projet des applications React Native du Kit de développement mobile.
  • Configurer votre projet pour le débogage ou la production.
  • Trouver l’exemple d’application React Native du Kit de développement mobile et ouvrir des bibliothèques sources sur GitHub.

Modèles du kit de développement mobile pour React Native

Lorsque vous créez une application avec forcereact, le script personnalise un modèle en fonction des arguments que vous passez. Ce modèle personnalisé devient le projet de votre nouvelle application Kit de développement mobile. Pour React Native, le modèle définit une application conteneur native qui permet un accès direct au système d’exploitation natif. Ce conteneur fait le lien entre votre code JavaScript et l’application d’exécution Android ou iOS. Dans certains cas, vos besoins de développement nécessiteront peut-être d'ajuster ce conteneur sous-jacent. Voyons maintenant ce que contient cette application.

Conteneur iOS natif

La partie native iOS du projet de modèle est pratiquement identique à celle d’un projet iOS natif. Il existe deux classes chargées de :

  • * Configurer le Kit de développement mobile pour le démarrage
  • * Instancier et afficher la vue racine
  • * Initier et gérer la connexion et l’authentification

Ouvrez <output_directory>/ios/FirstReact.xcworkspace dans XCode. En parcourant l’espace de travail, vous pourriez avoir l’impression d’être face à un projet iOS natif. Par exemple, la classe AppDelegate inclut la plupart du code standard d’une application iOS native. Le code spécifique à React se trouve dans les méthodes setupReactRootView: et setupRootViewController de AppDelegate.

Dans setupRootViewController, vous dites à React s’il doit exécuter votre application depuis un serveur de développement (pour les tests) ou depuis un paquet sur l’appareil (en production). Cette méthode appelle simplement setupReactRootView:. En fonction du scénario de votre compilation, il se peut que vous deviez décommenter l’un des appels à setupReactRootView: et commenter l’autre. Les commentaires du code vous donnent des détails utiles pour ces configurations.
- (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"]];
}

Vous noterez qu’on initialise cette classe avec la localisation d’un paquet (jsCodeLocation) contenant votre code JavaScript. Si vous exécutez depuis un serveur de développement (soit dans le simulateur, soit sur l’appareil), utilisez la première option. Pour rempaqueter les fichiers sous forme d'un paquet statique et l’installer localement dans un environnement de production, choisissez la seconde option. Dans tous les cas, suivez les instructions fournies dans les commentaires du code.

La méthode setupReactRootView: crée une instance de RCTRootView, une classe React Native, et assigne cette instance à la vue racine de cette application. RCTRootView joue le rôle de passerelle entre les composants de l’interface utilisateur native et les composants React Native de votre application.
- (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;
}

Conteneur Android natif

Ouvrez votre projet FirstReact/android dans Android Studio, puis allez dans la vue Projet et regardez dans android/app/src/main/java. Vous y trouverez deux classes Java natives, MainActivity et MainApplication. Ces classes sont similaires à leurs équivalents natifs du Kit de développement mobile.

Les classes MainApplication et MainActivity jouent le même rôle que dans les projets Android natifs :

  • Configurer le Kit de développement mobile pour le démarrage
  • Instancier et afficher l’activité de démarrage
  • Initier et gérer la connexion et l’authentification

Les différences principales entre modèles natifs et React Native pour ces classes sont leurs classes de case. Dans les applications React Native, MainApplication étend Application, comme d’habitude, mais implémente aussi ReactApplication. MainActivity étend SalesforceReactActivity, qui étend à son tour ReactActivity. ReactApplication et ReactActivity proviennent de la bibliothèque Facebook React Native. En regardant attentivement ces implémentations, vous constaterez que la plupart des chemins dans le code conduisent finalement à un objet React Native. Ces objets comprennent des versions adaptées à React de nombreuses classes du Kit de développement mobile, notamment SalesforceReactSDKManager.

Par exemple, le code de MainApplication crée un objet ReactNativeHost et l’utilise pour passer des paquets du SDK React Native au framework React Native.
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()
     );
  }
};
En creusant plus profondément dans le code de SalesforceReactSDKManager.getReactPackage(), vous verrez qu’il renvoie un nouvel objet ReactPackage. Cet objet remplace la méthode de base createNativeModules() pour renvoyer exactement la liste de paquets qu'on peut attendre :
@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;
   }

L’exécutable React Native appelle cette méthode et d’autres méthodes de remplacement pour tisser sa magie qui exécute des méthodes JavaScript comme du code natif du Kit de développement mobile.

Configurer votre compilation

Vous cherchez où indiquer si votre code doit être exécuté en mode débogage ou production ? Le mécanisme est un peu différent pour Android, par rapport à iOS. Au cours du développement et du débogage, Android Studio s’attend à charger les fichiers JS directement depuis le serveur de développement. En mode final, il charge les fichiers JS depuis un paquet situé sur l’appareil. Vous pouvez remplacer la configuration par défaut de la compilation dans le fichier android/app/build.gradle du projet. Suivez les instructions du long commentaire en haut du fichier. Par exemple :

/*** 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: []
* ]
*/

Exemple d’application du Kit de développement mobile pour React Native

Si vous avez hâte d’en apprendre plus par vous-même, allez jeter un œil à l’exemple d’application MobileSyncExplorerReactNative dans son référentiel open source sur GitHub. Cet exemple met en œuvre toutes les fonctionnalités du langage React Native que vous venez de découvrir, ainsi que certaines fonctionnalités hors ligne du Kit de développement mobile que vous ne connaissez peut-être pas encore :
  • SmartStore : un mécanisme de cache hors ligne pour stocker des données de manière sécurisée sur l’appareil.
  • Mobile Sync : un mécanisme de synchronisation hors ligne pour fusionner facilement des modifications effectuées hors ligne dans les enregistrements Salesforce source lorsqu’un appareil retrouve de la connectivité.
Pour construire et exécuter l’exemple d’application MobileSyncExplorerReactNative sur votre machine de développement :
  1. Dans une fenêtre du Terminal ou à l’invite de commande Windows, clonez le dépôt :

    git clone https://github.com/forcedotcom/SalesforceMobileSDK-Templates.git
  2. Naviguez jusqu’au répertoire MobileSyncExplorerReactNative/.

    cd MobileSyncExplorerReactNative
  3. Installez les dépendances :
    • iOS : node ./installios.js
    • Android : node ./installandroid.js
  4. Démarrez le packageur react-native :
    • OS X : npm start
    • Windows : npm run-script start-windows
  5. Ouvrez l’espace de travail du projet dans votre environnement de développement :
    • iOS : Dans XCode, ouvrez l’espace de travail <local_clone_of_repo>/ios/MobileSyncExplorerReactNative.xcworkspace
    • Android : Dans Android Studio, ouvrez <local_clone_of_repo>/android/
  6. Cliquez sur Exécuter.


Pour en savoir plus sur le projet de bibliothèque native définissant les liens entre kit de développement mobile et React Native, reportez-vous aux projets ios/SalesforceReact dans le référentiel SalesforceMobileSDK-ReactNative et libs/SalesforceReact dans le référentiel SalesforceMobileSDK-Android.