Explorar el proyecto de plantilla

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Navegar por la estructura de proyecto de aplicaciones React Native con Mobile SDK.
Configurar su proyecto para depuración o producción.
Localizar la aplicación de ejemplo React Native con Mobile SDK y abrir las bibliotecas de código abierto en GitHub.

Plantillas de Mobile SDK para React Native

Cuando crea una aplicación con forcereact, la secuencia de comandos personaliza una plantilla con los argumentos que usted proporciona. Esta plantilla personalizada es el proyecto para su nueva aplicación de Mobile SDK. Para React Native, la plantilla define una aplicación de contenedor nativa que proporciona acceso directo al sistema operativo nativo. Este contenedor contiene el puente entre su código JavaScript y el tiempo de ejecución Android o iOS. En algunos casos, su desarrollo podría necesitar ajustes en este contenedor subyacente. Echemos un vistazo rápido a lo que hay en esa aplicación.

Contenedor nativo de iOS

La parte nativa iOS del proyecto de plantilla es casi idéntico al de un proyecto nativo de iOS. Sus dos clases se encargan de:

Configuración de Mobile SDK para iniciar
Instanciar y visualizar la vista raíz
Iniciación y control del inicio de sesión y la autenticación

Abra <output_directory>/ios/FirstReact.xcworkspace en Xcode. Si pasa por el espacio de trabajo, es fácil pensar que está mirando un proyecto iOS nativo. Por ejemplo, la clase AppDelegate incluye la mayoría del código reutilizable de una aplicación iOS nativa. El código específico de React está en los métodos setupRootViewController de AppDelegate.

Este método crea una instancia de RCTRootView, una clase de React Native y asigna esa instancia a la vista raíz de la aplicación. RCTRootView actúa como el puente entre los componentes nativos de la interfaz de usuario y los componentes React Native de su aplicación. Observe que inicializa esta clase con la ubicación (jsCodeLocation) de un paquete que contiene su código 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;
}

Contenedor nativo de Android

Abra su proyecto FirstReact/android en Android Studio y luego vaya a la vista Project y mire FirstReact/app/app/src/main/java/com.mytrail.react. Ahí puede encontrar dos clases nativas de Java: MainActivity y MainApplication. Estas clases son parecidas a sus homólogas de Mobile SDK solo nativas.

Las clases MainApplication y MainActivity cumplen los mismos propósitos que en proyectos nativos de Android:

Configuración de Mobile SDK para iniciar
Instanciación y visualización de la actividad de inicio
Iniciación y control del inicio de sesión y la autenticación

Las principales diferencias entre las plantillas nativas y las de React Native para estas clases son sus clases de base. En aplicaciones React Native, MainApplication amplía Application, como es habitual, pero también implementa ReactApplication. MainActivity amplía SalesforceReactActivity, que a su vez amplía ReactActivity. ReactApplication y ReactActivity provienen de la biblioteca React Native de Facebook. Mirando de cerca las implementaciones, verá que la mayoría de las rutas de código dirigen en última instancia a un objeto React Native. Estos objetos incluyen especializaciones centradas en React de muchas clases de Mobile SDK, como SalesforceReactSDKManager.

Por ejemplo, el código de MainApplication crea un objeto ReactNativeHost y lo utiliza para pasar paquetes React Native de Mobile SDK al marco de trabajo de 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";
   }
};

Al profundizar más en el código de SalesforceReactSDKManager.getReactPackage(), encontrará que devuelve un nuevo objeto ReactPackage. Este objeto anula el método base createNativeModules() para devolver exactamente la lista de paquetes que podría esperar:

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

El tiempo de ejecución de React Native llama a este método y otras anulaciones para tejer la magia que ejecuta métodos JavaScript como código nativo de Mobile SDK.

Configuración de su compilación

¿Busca dónde configurar su código para ejecutar en modo de depuración o de creación de versión? Ese mecanismo es un poco diferente en Android a iOS. Durante el desarrollo y la depuración, Android Studio espera cargar los archivos JS directamente del servidor de desarrollo. Para el modo de creación de versión, carga los archivos JS desde un paquete en el dispositivo. Puede anular la configuración de compilación predeterminada en el archivo android/app/build.gradle del proyecto. Siga las instrucciones incrustadas en el comentario grande de la parte superior del archivo. Por ejemplo:

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

En iOS, el cambio entre los modos de depuración y creación de versión se gestiona automáticamente.

Aplicación Mobile SDK de ejemplo para React Native

Si le interesa realizar más exploraciones por su cuenta, eche un vistazo a la aplicación de ejemplo MobileSyncExplorerReactNative en el repositorio SalesforceMobileSDK-Templates en GitHub. Este ejemplo demuestra todas las funciones del lenguaje React Native que acaba de aprender, así como algunas funciones de Mobile SDK sin conexión que es posible no conozca aún:

SmartStore: un mecanismo de caché sin conexión para almacenar datos de forma segura en el dispositivo.
Mobile Sync: un mecanismo de sincronización sin conexión para combinar fácilmente cambios en los datos sin conexión con los registros de origen de Salesforce cuando un dispositivo retoma la conectividad.

Para compilar la aplicación de ejemplo MobileSyncExplorerReactNative en su equipo de desarrollo, use el comando forcereact createwithtemplate. A continuación, se incluye un ejemplo.

%
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

Para ejecutar la aplicación, inicie el servidor de desarrollo de React Native.

En una ventana de Terminal en macOS o en el símbolo del sistema en Windows, cambie al directorio raíz de su aplicación. En nuestro caso, es MyMobileSyncExplorer/.
Ejecute uno de los siguientes comandos:

En macOS: yarn start o npm start
En Windows: yarn run-script start-windows o npm run-script start-windows

Cuando la línea de comandos indique “To open developer menu press ‘d’” (Para abrir el menú del desarrollador, presione “d”), puede ejecutar la aplicación desde su entorno de desarrollo.

Para iOS:

En Xcode, abra MyMobileSyncExplorer/ios/MyMobileSyncExplorer.xcworkspace.
Haga clic en Ejecutar.

Para Android:

Desde la pantalla Android Studio Welcome, o desde el elemento de menú File | Open (Archivo | Abrir), navegue a MyMobileSyncExplorer/android/.
Haga clic en Aceptar.
Haga clic en Ejecutar.

Profundice más

Para examinar cómo el proyecto de biblioteca nativo define puentes entre Mobile SDK y React Native, consulte:

iOS: proyecto ios/SalesforceReact en el repositorio SalesforceMobileSDK-ReactNative.
Android: proyecto libs/SalesforceReact en el repositorio SalesforceMobileSDK-Android.

Recursos

¿Necesita ayuda?

Descubrir más