Recarregamento ativo e dinâmico são dois recursos notáveis no React Native. No entanto, os desenvolvedores móveis expressaram o desejo de enviar atualizações para os usuários finais diretamente na produção, o que seria uma alternativa mais rápida e eficiente para atualizar o aplicativo na Google Play Store e na iOS App Store.
Em neste tutorial, usaremos react-native-code-push , um módulo React Native para CodePush, para implantar atualizações de aplicativos diretamente para os usuários. Forneceremos instruções passo a passo para começar e até mesmo realizar uma demonstração detalhada. Primeiro, vamos aprender o que é CodePush e quais são seus benefícios.
O que é CodePush?
Em aplicativos móveis, corrigir bugs pode corromper todo o aplicativo. Depois que um aplicativo é lançado, todas as atualizações do código devem ser recompiladas e revisadas pela loja de aplicativos móveis antes de serem enviadas aos usuários.
CodePush , um serviço em nuvem gerenciado pelo Microsoft AppCenter, permite que os desenvolvedores implantem instantaneamente atualizações móveis para os usuários finais. CodePush sincroniza o código JavaScript com todas as atualizações lançadas para o servidor CodePush, o que significa que você não precisa atualizar seu aplicativo em nenhuma app store.
No caso de novas atualizações, Codepush fornece reversões e inclui testes configurações para muitos dispositivos e plataformas.
Configurando CodePush
Para adicionar CodePush a um aplicativo, o aplicativo já deve estar implantado em uma loja móvel. Para este tutorial, você pode acompanhar meu exemplo abaixo ou implementar CodePush em um de seus aplicativos existentes. Começaremos criando uma implantação padrão no AppCenter.
Se ainda não fez isso, crie uma conta no AppCenter . Crie um novo aplicativo e selecione o botão Adicionar novo aplicativo . Você deverá ver a seguinte página:
Adicionamos um nome para nosso aplicativo, Meatball App. Em seguida, selecionamos nosso tipo de lançamento de Produção, Beta e Loja. Em seguida, selecione o sistema operacional e a plataforma para a qual você está desenvolvendo. Depois de adicionar esses detalhes, você pode selecionar o botão Criar novo aplicativo .
Opções de configuração
Existem três opções diferentes para configurar seu aplicativo para plataformas diferentes.
Por um lado, a frequência de construção permite que você execute construções automaticamente para plataformas diferentes sempre que uma alteração é feita em um branch. Distribuir compilações permite distribuir aplicativos para lojas de aplicativos móveis. Verifique a seção Distribuir do painel do AppCenter para ativar esse recurso. Por último, você pode adicionar scripts de construção ao seu package.js que executam pós-clonagem, pré-construção e pós-construção e representam os estágios de desenvolvimento do aplicativo.
Opções de distribuição
Para distribuir seu aplicativo React Native na iOS App Store ou Android Google Play Store, primeiro você precisa conectar seu aplicativo. Navegue até a seção Distribuir do painel do AppCenter, clique em Lojas e conecte seu aplicativo à loja:
Para iniciar seu aplicativo no iOS, você precisará registrar o desenvolvedor da Apple:
Criando implantações padrão
Agora que temos CodePush instalado e configurado, navegue até CodePush de o painel do seu aplicativo e clique em Criar implantações padrão:
No canto superior direito do painel do AppCenter, selecione Preparação como seu aplicativo ambiente:
Uma vez você selecionou o ambiente do aplicativo, clique no ícone configurações no lado direito do seu painel para revelar as chaves privadas do seu aplicativo:
Agora que nós ter implantações padrão configuradas, vamos integrar CodePush em nosso aplicativo React Native usando react-native-code-push.
Integrando CodePush em React Native
Primeiro, vamos instalar o react-Native-code-push usando um dos comandos abaixo
Yarn:
yarn add react-native-code-push
npm:
npm i–save react-native-code-push
A integração do CodePush é diferente para iOS e Android. Vamos dar uma olhada mais de perto.
Configuração do iOS
Para adicionar o plug-in CodePush a um projeto iOS nativo , primeiro, instale o pod com o comando abaixo:
cd ios pod install cd..
A seguir, vamos instalar dependências de frutos de cacau. Navegue até o arquivo AppDelegate.m e importe os cabeçalhos CodePush em seu arquivo:
import
Configuração do Android
Para integrar o react-native-code-push em um projeto Android nativo, navegue até o arquivo settings.gradle na pasta Android e adicione o seguinte bloco 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’)
A seguir, adicionaremos o arquivo codepush.gradle recém-importado em nosso arquivo react.gradle como uma tarefa de construção:
apply from:”../../node_modules/react-native/react.gradle”apply from:”../../node_modules/react-native-code-push/android/codepush.gradle”
No trecho de código acima, aplicamos CodePush ao nosso React Native Android Gradle, importando-o dos módulos Node de nosso aplicativo.
Em seguida, vamos atualize nosso arquivo MainApplication.java para incluir CodePush em nosso aplicativo:
import com.microsoft.codepush.react.C odePush; public class MainApplication extends Aplicativo implementa ReactApplication {private final ReactNativeHost mReactNativeHost=new ReactNativeHost (this) {@Override protected String getJSBundleFile () {return CodePush.getJSBundleFile (); }}; }
Primeiro, importamos a classe do plugin CodePush para nosso aplicativo a partir de nossa lista de pacotes. Em seguida, criamos uma substituição para CodePush para determinar onde nosso pacote de JavaScript deve ser renderizado quando nosso aplicativo é iniciado.
Inicializando CodePush em React Native
Para inicializar CodePush, envolveremos nossa raiz componente com um componente de ordem superior fornecido pelo CodePush. Também adicionaremos algumas opções de CodePush, como uma tag de título para exibir atualizações ao vivo para os usuários:
import CodePush de’react-native-code-push’; let CodePushOptions={checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME, optionalInstallMode: CodePush.InstallMode.IMMEDIATE, updateDialog: {appendReleaseDescription: true, title:”uma nova atualização está disponível!} classe MeatBallApp padrão estende Component…} CodePushOptions) (meatBallApp);
No bloco de código acima, importamos CodePush de nossos pacotes e listamos várias opções para nosso aplicativo. Por um lado, checkFrequency define quando queremos que nosso aplicativo verifique se há novas atualizações. Em nosso caso, nós configure-o como ON_APP_START, entretanto, existem outras opções disponíveis . obrigatórioInstallMode define quando queremos instalar atualizações obrigatórias. Em nosso aplicativo, marcamos ON_APP_START.
updateDialog determina se um texto de confirmação ou tela será processado para o usuário quando uma atualização estiver disponível e que tipo de texto ou obj ect será renderizado. Se definido como verdadeiro, renderizamos as strings padrão para atualizações no Android e no iOS. Por último, usamos updateDialog: title e um título do tipo string para adicionar títulos a um updateDialog.
Dependendo da natureza do seu aplicativo, você também pode adicionar mais opções, como minimumBackgroundDuration, que é usado para definir a quantidade mínima de tempo em segundos que um aplicativo deve ser executado em segundo plano antes de ser reiniciado.
Implementando atualizações de aplicativos com CodePush
Para lançar atualizações em nosso aplicativo React Native usando CodePush, primeiro, precisaremos instalar o pacote CLI do App Center :
Yarn:
yarn global add appcenter-cli
npm:
npm install-g appcenter-cli
Depois de instalar o pacote CLI do App Center, faremos login em nosso AppCenter usando o comando abaixo:
appcenter login
Agora, podemos lançar atualizações para nosso aplicativo com CodePush usando o seguinte formato:
appcenter CodePush release-react-a {user}/{app name}-d {environment}
Para enviar atualizações para nosso aplicativo, usaremos o código abaixo:
appcenter CodePush release-react-a Fortune-Ikechi/MeatBal Produção de lApp-d
Outra maneira de enviar atualizações usando CodePush em um aplicativo React Native é adicionar o comando como um script no package.json de nosso aplicativo usando o formato abaixo:
“scripts: {“CodePush: ios”:”appcenter CodePush release-react-a Fortune-Ikechi/MeatBallApp-d Production”,”CodePush: android”:”appcenter CodePush release-react-a Fortune-Ikechi/MeatBallApp-Android-d Production”}
Uma vez você adicionou uma atualização, recarregue o painel do AppCenter para garantir que sua versão esteja lá. Ao executar novamente o aplicativo, você deve conseguir baixar a versão mais recente do aplicativo.
Conclusão
Agora, você sabe como adicionar CodePush ao aplicativo React Native! O módulo react-native-code-push permite que você implante atualizações de aplicativos diretamente para seus usuários finais, em vez de por meio de uma loja móvel. Criamos implantações padrão, configuramos o comando react-native-code-push para aplicativos iOS e Android e, finalmente, implantamos nossas atualizações.
Você pode ler mais no Documentação do CodePush e Documentos do Microsoft AppCenter . Espero que você tenha gostado deste tutorial!
