Criar um aplicativo React Native

Objetivos de aprendizagem

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

• Criar um aplicativo React Native simples com Mobile SDK.
  
• Acessar componentes React Native fornecidos pelo Mobile SDK.
  
• Adicionar as informações do aplicativo conectado ao seu aplicativo.
  
• Criar e testar seu aplicativo do Mobile SDK em React Native.
  

Criar um aplicativo React Native com forcereact

O exemplo a seguir cria um aplicativo React Native usando forcereact no macOS X. Você pode usar forcereact no macOS X ou no Windows, mas somente pode desenvolver um aplicativo React Native para iOS no macOS X.

1. Para criar um aplicativo React Native, execute forcereact create em uma janela do Terminal.
   
2. Insira os valores a seguir quando solicitado:
   

• Plataforma: lista delimitada por vírgulas de uma ou mais plataformas. Pode ser ios, android ou ios,android
  
• Tipo de aplicativo: Pressione <Return>
  
• Nome do aplicativo: FirstReact
  
• Nome do pacote: com.mytrail.react
  
• Nome da organização: MyTrail, Inc.
  
• Diretório de saída: FirstReact
  

3. Veja como sua entrada deve ficar (menos qualquer destaque de sintaxe sem sentido):
   

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

Nome do aplicativo, nome do pacote, nome da organização e diretório de saída são propriedades personalizadas que você deve fornecer.

O que essa chamada forcereact cria? Um aplicativo React Native que:

• Se chama FirstReact
  
• Suporta iOS e Android
  
• Suporta o uso de TypeScript
  
• É criado com bibliotecas do Mobile SDK
  
• Reside no diretório <current_directory>/FirstReact/
  

Quando você criar um aplicativo forcereact pela primeira vez em qualquer computador de desenvolvimento, estime um tempo de espera de vários minutos até que as bibliotecas React Native sejam baixadas.

Definir valores do aplicativo conectado

Após receber uma mensagem de linha de comando informando que o seu projeto está pronto, atualize o projeto novo para refletir as configurações do seu aplicativo conectado.

iOS

1. No Xcode, abra o arquivo <current_directory>/FirstReact/ios/FirstReact.xcworkspace.
   
2. No modo de exibição do projeto, navegue até FirstReact/FirstReact/Classes e abra o arquivo bootconfig.plist.
   
3. Substitua os valores de "remoteAccessConsumerKey" e "oAuthRedirectURI" por suas próprias configurações.
   

Android

1. Na tela de boas-vindas do Android Studio, clique em Import project (Eclipse ADT, Gradle, etc.) (Importar projeto (Eclipse ADT, Gradle, etc.)). Ou, caso outro projeto já esteja aberto no Android Studio, escolha File Open (Arquivo, Abrir).
   
2. Selecione o diretório <current_directory>/FirstReact/android e clique em OK.
   
3. No modo de exibição do projeto, abra o arquivo app/src/main/res/values/bootconfig.xml.
   
4. Substitua os valores de "remoteAccessConsumerKey" e "oauthRedirectURI" por suas próprias configurações.
   

<?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>

Criar e testar seu aplicativo React Native

Para executar seu aplicativo React Native, volte para o aplicativo Terminal ou para a linha de comando do Windows.

Quando criado, seu aplicativo React Native cria um bundle que contém seus componentes JavaScript personalizados. Para executar o aplicativo com comunicação entre o JavaScript e o código nativo, inicie o servidor de desenvolvimento do React Native.

1. Em uma janela do Terminal no macOS ou no prompt de comando do Windows, altere o diretório raiz do seu aplicativo. Nesse nosso caso, é FirstReact.
   
2. Execute um dos seguintes comandos:
   

• yarn start ou npm start 
  

Quando a linha de comando indicar “Carregando gráfico de dependência; concluído”, você pode executar o aplicativo em seu ambiente de desenvolvimento.

1. Para iniciar um aplicativo forcereact iOS:
   

1. No Xcode, abra FirstReact/ios/FirstReact.xcworkspace.
   
2. Clique em Executar.
   

2. Para iniciar um aplicativo forcereact Android:
   

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

Quando a tela de login aparecer, digite suas credenciais da organização Developer Edition. Quando for solicitado, autorize o aplicativo para acessar os dados; uma tela de modo de exibição de lista aparecerá.

Aqui está seu novo aplicativo Reactive Native do Mobile SDK!

Um momento! Onde estão meus arquivos JavaScript?

Se você navegou pelo projeto no Xcode ou no Android Studio, deve estar se perguntando: Onde estão os arquivos de marcação e JavaScript do React Native? Você não vai encontrá-los no projeto do Xcode ou do Android Studio. Como os arquivos JavaScript podem ser compartilhados entre aplicativos iOS e Android, eles são criados em um nível acima e referenciados somente nas configurações de build do projeto. Procure o arquivo app.tsx no mesmo nível da pasta ios/ ou android/.

Componentes do React Native para SDK móvel

Ao procurar o arquivo app.js, algumas das primeiras linhas de código encontradas trazem o molho especial do SDK móvel. O SDK móvel oferece componentes JavaScript que permitem aos aplicativos React Native acessar recursos do SDK móvel. Entre esses componentes estão:

• react.force.oauth.ts (login, identidade e autenticação)
  
• react.force.net.ts (utilitários e classes auxiliares da API REST)
  
• react.force.smartstore.ts (recurso de armazenamento em cache offline da SmartStore)
  
• react.force.mobilesync.ts (recurso de sincronização do Mobile Sync offline)
  

Assim como os componentes do Mobile SDK usados em aplicativos híbridos, esses componentes definem pontes entre o código JavaScript para o código do Mobile SDK nativo. Importe-os para seu arquivo app.tsx da biblioteca react-native-force. Por exemplo, para importar todos os componentes, use:

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

Especifique o caminho para os componentes react-native-force na seção dependências do arquivo package.json no nível raiz do seu aplicativo. Normalmente, o repositório usado é o SalesforceMobileSDK-ReactNative.gitrepo:

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

Se você ramificou esse repositório localmente, poderá configurar o caminho para a ramificação local.

Você não pode usar a biblioteca force.js com o React Native.

Teste em tempo real

Agora vamos nos divertir um pouco.

No diretório raiz do seu aplicativo, abra o arquivo app.tsx em um editor de texto. Encontre a definição do objeto styles quase no fim do arquivo.

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

Na propriedade Item deste objeto, adicione uma linha que defina backgroundColor como ' vermelho ':

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

Volte para o simulador do iOS e pressione Command-R. Consegue ver o fundo vermelho?

Você pode visualizar as alterações salvas na origem JavaScript do React Native atualizando o emulador ou simulador.

Recursos

• Guia de desenvolvimento do Mobile SDK: desenvolvimento em React Native