React Native — Code Push (Android)

Criando o projeto React Native

npx react-native init NomeApp — template react-native-template-typescript

IMPORTANTE: Para funcionamento correto do Code Push, é necessário que o projeto tenha sido criado usando o comando react-native init

Criando o app no App Center

O Code Push é um serviço open source da Microsoft, que permite aos desenvolvedores de aplicações fazerem deploy de updates direto para os usuários. Já o App Center é um portal voltado para o gerenciamento de todo o ciclo de vida de aplicativos mobile, e é através dele que conseguiremos realizar o Code Push da nossa aplicação mobile.

1° Passo: Acesse o App Center

Pode estar acesso o App Center através do seguinte link https://appcenter.ms/sign-in

2° Passo: Criando o App no App Center

Clique em Add new App e preencha o formulário. Neste caso selecione o Sistema Operacional Android e a Plataforma React Native.
Observação: Neste caso, criei apenas para o Android, mas o ideal é criar um projeto tanto para Android quanto para IOS.

3° Passo: Ativar o Code Push dentro da aplicação

Agora iremos ativar o Code Push para dentro desta aplicação. Para isso devemos ir em: Distribuite -> CodePush.
Após isso, vamos em Create standard deployments. Ao final, sua tela deve ficar da seguinte forma:

Configuração do Code Push na aplicação

Agora iremos configurar a nossa aplicação para conseguir utilizar o Code Push.

1° Passo: Instalar a CLI do App Center

Vamos instalar a CLI do App Center para que consigamos executar alguns comandos.

npm install -g appcenter-cli

2° Passo: Instalar o Code Push na aplicação

Execute o seguinte comando, dentro do diretório raiz do seu aplicativo

npm install --save react-native-code-push
// Ou se preferir
yarn add react-native-code-push

Configuração para o Android

IMPORTANTE: Essa configuração é para a versão do React Native 0.60 ou superior.

1° Passo: android/settings.gradle

Acesse o arquivo, settings.gradle, e inclua o seguinte trecho de código

...
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2° Passo: android/app/build.gradle

Em seu arquivo, adicione o arquivo como uma definição adicional de tarefa de compilação. Para achar a localização, dê um ctrl+f “react.gradle”.

...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...

3° Passo: Atualizar o MainApplication.java

Atualize o arquivo para usar o CodePush através das seguintes alterações:

Adicione a importação do CodePush

import com.microsoft.codepush.react.CodePush;

Depois, inclua o seguinte trecho de código, dentro do método mReactNativeHost

...
@Override
protected String getJSBundleFile() {
   return CodePush.getJSBundleFile();
}
...

4° Passo: Implementar a Key

Para implementar key, iremos rodar o seguinte comando dentro do diretório raiz da aplicação

appcenter codepush deployment list -a <proprietario>/<nomeApp> -k

Para saber o nome do proprietario e o nomeApp, basta acessar o App Center pelo seu navegador, selecionar sua aplicação e pegar os nomes na URL. Da seguinte forma:

Ao final, seu comando deve ficar parecido como:

5° Passo: Colocar a Key de Production

Após executar o comando do 4° Passo, deve retornar as key de Produção e Staging, algo parecido como:

Copie a Key de Production e cole no arquivo Strings.xml

<resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

Ao final, deve ficar algo parecido como:

Como usar o Code Push

Eu sei, isso já está longo de mais, mas já estamos acabando. Agora vamos de fato usar o Code Push.

Para isso, iremos importar o Code Push, no nosso App.tsx, que fica na raiz da aplicação:

import codePush from "react-native-code-push";

E depois, iremos exportar o App utilizando o codePush, ficando da seguinte forma

...
export default codePush({
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME
})(App);

Observe que na linha 14, estamos definido o formato de atualização para o nosso codePush.

Utilizando o ON_APP_RESUME, a atualização ocorrerá quando o aplicativo entrar novamente em primeiro plano.

Rodar o Build de release (Android)

Com tudo configurado, agora vamos rodar o Build de release da nossa aplicação.

Para isso primeiro executamos o seguinte comando

yarn android --variant="release"
// ou
react-native run-android --variant="release"

Esse comando irá gerar nosso Build, e no final irá abrir a aplicação. Para saber se a aplicação está com a build de produção, basta tentar abrir o menu debug apertando CTRL+M, caso não abra nada é porquê está com o build de produção.

Realize o login

Caso necessário, realize o login executando o comando:

appcenter login

E por fim colocando o código de acesso.

Liberando atualizações

Para liberar as atualizações, basta executar o seguinte comando

appcenter codepush release-react -a <proprietario>/<nomeApp> -d Production

Ficará algo como:

É só isso

É somente isso galera, a partir de agora você já consegue subir seus ajustes através do Code Push.