CodePush

Integração Completa do CodePush no React Native

By arpita 5 Min Read
Contents
CodePushApp Center Command Line Interface (CLI)Passos para usar o CodePush com App CenterAndroid — Integração1. Criar arquivo de configuração2. Modificar strings.xmliOS — IntegraçãoInstalação do CodePushIntegração no Android1. settings.gradle2. build.gradle3. MainApplication.javaIntegração no iOSExemplo do App.jsAtualização via CodePush

CodePush

Um aplicativo React Native é composto por arquivos JavaScript e por quaisquer imagens associadas. Porém, o metro bundler precisa empacotar e distribuir esses arquivos como parte de um binário específico de cada plataforma — ou seja, um arquivo .ipa ou .apk.

Depois que o aplicativo é lançado, atualizar o código JavaScript — incluindo correções de erros, adição de novos recursos ou atualização de imagens — exige recompilação e redistribuição de todo o binário. Isso também envolve o tempo de análise das lojas nas quais você publica o aplicativo.

O plugin CodePush oferece um recurso de backup para recuperação rápida e simples. Ele mantém uma cópia da atualização anterior, permitindo realizar um rollback automático caso ocorra alguma falha durante a atualização. Esse recurso também beneficia os usuários finais, pois garante que sempre tenham uma versão funcional do app. Além disso, elimina a necessidade de tempo de inatividade, já que é possível restaurar rapidamente a versão anterior.

É importante destacar que, quando suas alterações incluem modificações em códigos nativos — como os arquivos AppDelegate.m ou MainActivity.java — o CodePush não pode ser usado para distribuir a atualização; nesse caso, a publicação deve ser feita pelas lojas.

App Center Command Line Interface (CLI)

A Interface de Linha de Comando do App Center (CLI) é uma ferramenta unificada para executar serviços do App Center diretamente pelo terminal. Instale o comando usando:

npm install -g appcenter-cli

Passos para usar o CodePush com App Center

  1. Cadastre-se no App Center.

  2. Crie seu projeto.

  3. Adicione o nome do projeto, tipo de release, sistema operacional e plataforma.

  4. Crie uma chave de deployment para produção e desenvolvimento.

Integre o App Center instalando:

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

Android — Integração

1. Criar arquivo de configuração

Crie o arquivo appcenter-config.json em:

android/app/src/main/assets/

Conteúdo:

{ "app_secret": "{Seu app secret aqui}" }

2. Modificar strings.xml

Adicione:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

Adicione também a chave de deployment do CodePush:

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

iOS — Integração

Execute:

pod install --repo-update

Abra AppDelegate.m ou AppDelegate.mm e adicione:

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

Depois, no método application:didFinishLaunchingWithOptions::

[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

Crie o arquivo AppCenter-Config.plist em /ios:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>AppSecret</key>
<string>{Seu app secret aqui}</string>
</dict>
</plist>

Adicione a chave de deployment no info.plist:

<key>CodePushDeploymentKey</key>
<string>{sua deployment key}</string>

Instalação do CodePush

Na raiz do projeto, execute:

npm install --save react-native-code-push

Integração no Android

1. settings.gradle

No final do arquivo:

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. build.gradle

No final do arquivo:

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

3. MainApplication.java

Importe:

import com.microsoft.codepush.react.CodePush;

Substitua o método getJSBundleFile:

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

Integração no iOS

Execute:

cd ios && pod install && cd ..

No AppDelegate.m, adicione:

#import <CodePush/CodePush.h>

Localize:

return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

Substitua por:

return [CodePush bundleURL];

Seu método ficará assim:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge{
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
return [CodePush bundleURL];
#endif
}

Exemplo do App.js

import React from "react";
import { View } from 'react-native';
import CodePush from "react-native-code-push";function App() {
return (
<View style={{ flex: 1.0, backgroundColor: ‘green‘ }}>
</View>
)
}

export default CodePush(App)

Atualização via CodePush

Altere a cor de fundo de verde para vermelho:

<View style={{ flex: 1.0, backgroundColor: 'red' }}>

Execute o comando para lançar a atualização:

appcenter codepush release-react -a {appcenter-username}/{appname} -d {Staging/Production}

Depois que a atualização aparecer no App Center, basta reabrir o app para visualizar a alteração tanto no Android quanto no iOS.

Share This Article
Leave a comment
Lost your password?