Explorar o projeto de modelo

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Navegar pela estrutura do projeto de aplicativos do Mobile SDK em React Native.
Configurar seu projeto para depuração ou produção.
Encontrar o aplicativo de exemplo React Native do Mobile SDK e bibliotecas de código aberto GitHub.

Modelos do Mobile SDK para React Native

Quando você cria um aplicativo com forcereact, o script personaliza um modelo com os argumentos fornecidos. Esse modelo personalizado é o projeto do seu novo aplicativo do Mobile SDK. Para o React Native, o modelo define um aplicativo de contêiner nativo que oferece acesso direto ao sistema operacional nativo. Esse contêiner faz a ponte entre seu código JavaScript e o tempo de execução do Android ou do iOS. Em alguns casos, suas necessidades de desenvolvimento exigem alguns ajustes a esse contêiner. Vejamos o que faz esse aplicativo.

Contêiner nativo do iOS

A parte nativa de iOS do projeto de modelo é quase idêntica ao do projeto de iOS nativo. Suas duas classes se ocupam de:

Configurar o Mobile SDK para iniciar
Instanciar e apresentar a exibição raiz
Iniciar e lidar com login e autenticação

Abra <output_directory>/ios/FirstReact.xcworkspace no Xcode. Se você olhar rapidamente para o espaço de trabalho, pode até pensar que está olhando para um projeto de iOS nativo. Por exemplo, a classe AppDelegate inclui a maior parte do código clichê de um aplicativo iOS nativo. O código específico React está nos métodos setupRootViewController de AppDelegate.

Esse método cria uma instância de RCTRootView, uma classe React Native, e atribui essa instância como modo de exibição raiz do aplicativo. RCTRootView atua como a ponte entre componentes de IU nativos e os componentes React Native do seu aplicativo. Observe que você inicializa a classe com a localização (jsCodeLocation) de um bundle que contém seu 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;
}

Contêiner nativo do Android

Abra seu projeto FirstReact/android no Android Studio, vá para o modo de exibição do projeto e procure FirstReact/app/app/src/main/java/com.mytrail.react. Lá você verá duas classes nativas Java: MainActivity e MainApplication. Essas classes são semelhantes a suas equivalentes do Mobile SDK somente nativas.

As classes MainApplication e MainActivity servem para o mesmo fim que nos projetos nativos Android:

Configurar o Mobile SDK para iniciar
Instanciar e exibir a atividade de inicialização
Iniciar e lidar com login e autenticação

As principais diferenças entre modelos nativos e React Native para essas classes são as classes base. Em aplicativos React Native, MainApplication estende Application, como sempre, mas também implementa ReactApplication. MainActivity estende SalesforceReactActivity, que, por sua vez, estende ReactActivity. ReactApplication e ReactActivity vêm da biblioteca React Native do Facebook. Examinando as implementações, você verá que a maioria dos caminhos de código levam, no fim das contas, a um objeto React Native. Esses objetos incluem especializações, voltadas para React, de várias classes do Mobile SDK, como SalesforceReactSDKManager.

Por exemplo, o código MainApplication cria um objeto ReactNativeHost e o usa para transmitir pacotes React Native do Mobile SDK para a estrutura 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";
   }
};

Examinando melhor o código SalesforceReactSDKManager.getReactPackage(), você verá que ele retorna um novo objeto ReactPackage. Esse objeto substitui o método base createNativeModules() para retornar exatamente a lista de pacotes esperados:

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

O tempo de execução do React Native chama esse método e outras substituições para fazer a mágica que é executar métodos JavaScript como código nativo do SDK móvel.

Como configurar sua build

Quer saber onde configurar seu código para ser executado em modo de depuração ou de lançamento? Esse mecanismo difere um pouco entre Android e iOS. Durante o desenvolvimento e a depuração, o Android Studio pretende carregar os arquivos JS diretamente do servidor de desenvolvimento. No modo de lançamento, ele carrega os arquivos JS de um bundle no dispositivo. Você pode substituir a configuração de build padrão no arquivo android/app/build.gradle do projeto. Siga as instruções inseridas no comentário maior no início do arquivo. Por exemplo:

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

No iOS, a alternância entre os modos de depuração e liberação é gerenciada automaticamente para você.

Aplicativo de exemplo do Mobile SDK para React Native

Se você está louco para explorar por conta própria, confira o aplicativo de exemplo MobileSyncExplorerReactNative no repositório SalesforceMobileSDK-Templates no GitHub. Esse exemplo demonstra todos os recursos de linguagem React Native que você acabou de ver, além de outros recursos offline do Mobile SDK que você pode ainda não conhecer:

SmartStore: um mecanismo para armazenamento em cache offline que permite armazenar dados de maneira segura no dispositivo.
Sincronização móvel: um mecanismo de sincronização offline para mesclar facilmente alterações de dados offline com os registros originais do Salesforce quando um dispositivo recupera a conectividade.

Para compilar o aplicativo de amostra MobileSyncExplorerReactNative em seu computador de desenvolvimento, use o comando forcereact createwithtemplate. Veja aqui um exemplo.

%
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 executar o aplicativo, inicie o servidor de desenvolvimento React Native.

Em uma janela do Terminal no macOS ou no prompt de comando do Windows, acesse o diretório raiz do seu aplicativo. Neste nosso caso, é MyMobileSyncExplorer/.
Execute um dos seguintes comandos:

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

Quando a linha de comando indicar “Para abrir o menu de desenvolvedor, pressione 'd'”, você poderá executar o aplicativo em seu ambiente de desenvolvimento.

Para iOS:

No Xcode, abra MyMobileSyncExplorer/ios/MyMobileSyncExplorer.xcworkspace.
Clique em Executar.

Para Android:

Na tela de boas-vindas do Android Studio, ou no item de menu File | Open (Arquivo, Abrir), navegue até MyMobileSyncExplorer/android/.
Clique em OK.
Clique em Executar.

Aprofunde-se!

Para examinar como o projeto de biblioteca nativo define pontes entre Mobile SDK e React Native, consulte:

iOS: projeto ios/SalesforceReact no repositórioSalesforceMobileSDK-ReactNative.
Android: projeto libs/SalesforceReact no repositórioSalesforceMobileSDK-Android.

Recursos

Procurando ajuda?

Descubra mais