Criar um aplicativo React Native

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.

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.

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.

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

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!

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/.

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)

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

...
"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.

Agora vamos nos divertir um pouco.

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

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.

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