Exploration du Projet modèle

Objectifs de formation

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

Vous repérer dans la structure de projet des applications React Native de kit de développement mobile
Configurer votre projet pour le débogage ou la production.
Trouver l’exemple d’application React Native de 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é constitue le projet de votre nouvelle application de 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 à des fins de démarrage ;
instancier et afficher la vue racine ;
lancer et gérer la connexion et l’authentification.

Ouvrez <dossier_de_sortie>/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 propre à React se trouve dans la méthode setupRootViewController de AppDelegate.

Cette méthode crée une instance de RCTRootView (une classe React Native), et attribue 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. Vous noterez qu’on initialise cette classe avec la localisation d’un paquet (jsCodeLocation) contenant votre code JavaScript.

- (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;
}

Conteneur Android natif

Ouvrez votre projet FirstReact/android dans Android Studio, puis accédez à la vue Project (Projet) et regardez sous FirstReact/app/app/src/main/java/com.mytrail.react. Vous y trouverez deux classes Java natives, MainActivity et MainApplication. Ces classes sont semblables à 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 à des fins de démarrage ;
instancier et afficher l’activité de démarrage ;
lancer 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 orientées React de nombreuses classes du kit de développement mobile, notamment SalesforceReactSDKManager.

Par exemple, le code MainApplication crée un objet ReactNativeHost et l’utilise pour transmettre des paquets React Native du kit de développement mobile au framework React Native.

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";
   }
};

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 :

@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;
}

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

sous iOS, le basculement entre les modes de débogage et de production est géré automatiquement.

Exemple d’application de kit de développement mobile employant 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 le référentiel SalesforceMobileSDK-Templates 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 permettant de fusionner facilement des modifications de données effectuées hors ligne avec les enregistrements sources de Salesforce lorsque la connexion d’un appareil est rétablie.

Pour créer l’exemple d’application MobileSyncExplorerReactNative sur votre machine de développement, utilisez la commande forcereact createwithtemplate. Voici un exemple.

%
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

Pour exécuter l’application, démarrez le serveur de développement React Native.

Dans une fenêtre Terminal sous macOS ou dans l’invite de commande sous Windows, indiquez le répertoire racine de votre application. Dans notre cas, il s’agit de MyMobileSyncExplorer/.
Exécutez la commande qui vous correspond :

Sous macOS : yarn start ou npm start
Sous Windows : yarn run-script start-windows ou npm run-script start-windows

Lorsque la ligne de commande indique « To open developer menu press "d" », vous pouvez exécuter l’application depuis votre environnement de développement.

Pour iOS :

Dans Xcode, ouvrez MyMobileSyncExplorer/ios/MyMobileSyncExplorer.xcworkspace.
Cliquez sur Exécuter.

Pour Android :

Depuis l’écran d’accueil d’Android Studio, ou via le menu Fichier | Ouvrir, accédez à MyMobileSyncExplorer/android/.
Cliquez sur OK.
Cliquez sur Exécuter.

Exploration approfondie

Pour comprendre comment le projet de bibliothèque natif définit des liens entre kit de développement mobile et React Native, reportez-vous aux ressources suivantes :

iOS : projet ios/SalesforceReact dans le référentiel SalesforceMobileSDK-ReactNative.
Android : projet libs/SalesforceReact dans le référentiel SalesforceMobileSDK-Android.

Ressources

Besoin d'aide ?

En savoir plus