CI/CD em seu aplicativo React Native com o Microsoft App Center

Guilherme Augusto Steinmacher Bublitz
Aurum Tech
Published in
6 min readNov 19, 2020

--

Quem já trabalhou com desenvolvimento mobile sabe que uma das maiores dores é o processo burocrático da publicação dos apps nas lojas. Portanto, qualquer ajuda para encurtar essa etapa é bem-vinda. Pensando nisso, aqui na Aurum, decidimos por automatizar a publicação do app Astrea Mobile.

A ferramenta escolhida foi o Microsoft App Center. Escolhemos essa opção, dentre outras que existem no mercado, pois nosso objetivo final era também termos o OTA (over-the-air update), e a Microsoft já possui uma boa integração com o CodePush.

Nesse post vou relatar as etapas de integração e um pouco como foi nossa experiência na implementação, indicando alguns dos problemas que passamos.

Antes de começar

Github

Antes de iniciarmos, é importante salientar que, caso o repositório do seu projeto no Github seja privado, somente o criador desse projeto conseguirá adicioná-lo ao build do App Center.

App Center

Atualmente, em seu plano gratuito o App Center disponibiliza 4 horas de build por mês. Um valor mais do que o suficiente para projetos médios e pequenos. Mas fique atento pois o consumo desse tempo será da conta que adicionou o projeto, não necessariamente da conta que executou o build.

Android

O que é necessário?

  • Um repositório com o projeto de seu app (Github ou Bitbucket);
  • Uma conta de desenvolvedor na Google Play;
  • Uma conta no Microsoft App Center (é possível logar com o e-mail ou Github);

Iniciando

Primeiro, vamos criar um app com as seguintes configurações:

Conexão com a loja

Vamos criar a conexão com a Google Play. Para isso, acesse o seu app recém-criado clique na aba Distribute e depois em Stores.

Depois, clique em connect to store e escolha a Google Play. Agora será necessária uma chave para realizar a conexão. Essa chave é um arquivo JSON (é possível ver o passo a passo de como consegui-la neste link). O processo para obter este arquivo só pode ser realizado pelo dono da conta de desenvolvedor na Google Play, mesmo com acesso de administrador não foi possível realizá-lo com outra conta.

Após conseguir o arquivo, é só fazer o upload dele e colocar o package name de seu projeto (o package name dos projetos Android são encontrados no arquivo AndroidManifest.xml).

Build

Agora que já estamos com a conexão com a loja, podemos avançar para a próxima etapa. Clicando em build na área do app, podemos escolher qual serviço de repositório queremos (nesse caso utilizamos o Github). Ao selecionar o serviço uma lista com os repositórios disponíveis vai aparecer (tanto da sua conta, quanto de organizações que você esteja participando).

Selecione o projeto e depois selecione a branch com a qual você quer que seu build seja rodado, no nosso caso escolhemos a branch Master (que pode estar como Main, dependendo de quando você criou seu projeto).

Configuração do build

Nesse passo temos que fazer algumas alterações. A primeira é escolher a versão mais estável do NodeJS (no nosso caso era a versão 12x).

Em Build Frequency, selecionaremos para fazer o build desta branch em cada push. Marque também as opções: Build Android App Bundle, para otimizarmos o aplicativo usando o formado .aab; e a opção Automatically increment version code, para não nos preocuparmos em ter que alterar a versão do bundle em cada build.

Além disso, vamos ativar o Sign Build. Será necessário fazer o upload de sua keystore e de algumas variáveis de ambiente. Caso você não tenha uma keystore, aqui você encontra como obtê-la.

Nessa parte, tivemos falhas em nossos builds. Para que a assinatura do App Center funcione, a assinatura manual do projeto terá que ser removida. Para resolver isso é simples, basta remover (ou comentar) as seguintes linhas no arquivo android/app/build.gradle dentro da seção buildTypes/release:

signingConfig signingConfigs.debugsigningConfig signingConfigs.release

Lembrando que, comentando essas linhas, o processo de criar apk na sua máquina não funcionará. Sem o signingConfig, o arquivo gerado será um unsigned-app-release.apk.

E, por fim, vamos selecionar a conexão com a loja que realizamos anteriormente, escolher a opção Production e escrever uma nova mensagem de atualização.

iOS

O que é necessário?

  • Um repositório com o projeto de seu app (Github ou Bitbucket);
  • Uma conta apple ID no programa de desenvolvedores Apple;
  • Uma conta no Microsoft App Center (é possível logar com o e-mail ou Github);

Iniciando

Primeiro, vamos criar um app com as seguintes configurações:

Conexão com a loja

Vamos criar a conexão com a App Store. Para isso, acesse o seu app recém-criado, clique na aba Distribute e depois em Stores.

Depois, clique em connect to store e escolha a App Store Connect. Agora é necessário informar seu apple ID, será solicitado o código da autenticação de dois fatores, mas existe um porém, a autenticação por SMS não é aceita. Para resolver isso foi simples, é só adicionar um dispositivo ao seu apple ID e pegar o código por lá.

Logo após, foi solicitado um app password, basta acessar a página da Apple e gerar um novo na parte de segurança. Pronto, após conectar com sua conta é só selecionar o seu projeto!

Build

Aqui é só repetir o processo do Android: selecionar seu repositório e a branch.

Configuração do build

De novo, a primeira alteração é selecionar a versão mais estável do NodeJS.

Selecionamos também o Scheme, Xcode Version e o Build Frequency. Aqui o problema foi com relação à versão do Xcode. Com a versão 12, o build demorava mais de 30 minutos o que ocasionava timeout e falha. Depois de testar diversas opções, a versão estável encontrada foi 11.3, com ela o build foi realizado com sucesso.

Agora, vamos configurar a assinatura do app. Para isso, é necessário fazer o upload de dois arquivos: o Provisioning Profile e o certificado .p12. Caso você não saiba como obter esses arquivos, aqui tem um tutorial que pode ajudar nisso.

E, no fim, vamos selecionar a nossa conexão com a App Store, selecionar a versão de produção e escrever as atualizações do app.

Antes do build

Um problema encontrado no iOS foi com mudança de versões. Quando mudamos para uma diferente da 1.0, o arquivo Info.plist foi atualizado e começou a utilizar a variável MARKETING_VERSION.

<key>CFBundleShortVersionString</key><string>$(MARKETING_VERSION)</string>

O problema com a versão desse jeito é que o App Center não consegue encontrá-la e falha ao tentar construir nosso app. Então, caso isso ocorra, altere seu arquivo manualmente.

<key>CFBundleShortVersionString</key><string>1.1</string>

Uma última coisa!

Um outro ponto que o App Center proporciona é uma badge de status do seu projeto, que fica bem legal pra colocar no README do seu repositório.

Adeus assembleRelease e archive

Pronto! Agora você já tem seus builds configurados. Pode se despedir do comando ./gradlew assembleRelease e do archive no XCode. A cada push que você der, na branch escolhida, uma nova versão vai aparecer em sua loja.

--

--