Integração e Entrega Contínua (CI/CD) Flutter usando a Codemagic


Esse é um guia introdutório sobre compilação de aplicativos Flutter usando a Codemagic CI/CD. Atualizado em agosto de 2021.

Durante a conferência Flutter Dwell 2018, em Londres, a Nevercode, em parceria com a Google, lançou uma solução de CI/CD dedicada para aplicativos Flutter – uma solução chamada Codemagic. Com a Codemagic, seus aplicativos Flutter podem ser testados e publicados com zero de configuração e sem dificuldades.

Somos especialistas em Flutter, mas também somos muito mais. Se você deseja tratar seus apps nativos com a mesma qualidade, agora você pode usar o arquivo codemagic.yaml para configurar e compilar seus aplicativos Android e iOS nativos, bem como aplicativos React Native, Ionic e Cordova. Se você prefere ter mais controle sobre os scripts, a Codemagic permite que desenvolvedores rodem scripts personalizados e criem workflows customizados para os seus apps. Desenvolver aplicativos de alta qualidade acaba de ficar ainda melhor!

Neste artigo, você aprenderá como compilar, testar e publicar aplicativos Flutter com a Codemagic.

Primeiros passos

Certifique-se de ter enviado seu projeto Flutter para uma plataforma de hospedagem de código (como GitHub, Bitbucket ou GitLab) usando um sistema de controle de versão. Para começar a compilar seus apps usando a Codemagic CI/CD, primeiro você precisa se cadastrar usando uma conta GitHub, Bitbucket ou GitLab, ou through e-mail. Siga os passos abaixo para acessar seu projeto na Codemagic:

  1. Faça login na Codemagic. Se você não for usuário, cadastre-se:

Cadastrar-se

  1. Na página Aplicativos, clique em Adicionar aplicativo:

  2. Selecione o provedor Git que você deseja usar (ou selecione Outro se desejar adicioná-lo usando a URL de clonar repositório):

  3. Clique em Avançar: autorizar integração para autorizar a Codemagic. Se você já autorizou seu provedor Git selecionado, clique em Avançar: selecionar repositório.

    Se estiver usando o GitHub como provedor Git, há um passo adicional antes de selecionar o repositório: clique em Instalar aplicativo GitHub para configurar a integração. Saiba mais sobre como configurar a integração do aplicativo GitHub aqui.

  4. Agora, selecione o seu repositório (ou informe a URL de clonar, se escolher Outro) e o tipo de projeto, depois clique em Finalizar: adicionar aplicativo:

  5. Você será levado à configuração do projeto. A aba Editor de Workflows será selecionada, por padrão.

Para configurar o workflow de construct de seu projeto Flutter, você pode usar o editor de workflows ou o arquivo codemagic.yaml.

Editor de workflows em detalhes

Vamos dar uma olhada em como você pode usar o editor de workflows para configurar seu workflow de construct e gerar builds de debug para o seu aplicativo Flutter.

No lado direito, você encontra o painel Configuração do workflow, onde você pode alterar o nome do workflow, definir a duração máxima de construct, agendar builds e muito mais.

Você pode saber mais sobre a configuração do workflow na documentação.

Construct triggers

Nesta seção, você pode automatizar o início de suas builds na Codemagic, especificando construct triggers. Ali você pode configurar quando a construct é disparada (a partir de push, PR ou criação de tag) e a quais branches específicos e padrões de tags reagir.

Você pode saber mais sobre construct triggers aqui.

Variáveis de ambiente

Você pode armazenar na Codemagic suas credenciais, chaves de API ou qualquer tipo de arquivo secreto, especificando-os na seção Variáveis de ambiente. Antes de armazenar arquivos/chaves confidenciais, certifique-se de criptografá-los, indo na opção Criptografar variáveis de ambiente da seção Configuração como código.

Existem várias variáveis de ambiente somente para leitura na Codemagic. Você pode saber mais sobre elas aqui.

Saiba mais sobre como adicionar variáveis de ambiente aqui.

Cache de dependências

Você pode acelerar builds na Codemagic fazendo cache das dependências. Para isso, você precisa marcar a opção Habilitar cache de dependências. A seguir, você precisa especificar o(s) caminho(s) das dependências que deseja fazer cache.

Saiba mais sobre cache de dependências aqui.

Teste

Nesta seção, você pode configurar o tipo de testes que você deseja rodar em seu projeto Flutter. Se estiver rodando testes de integração, você pode especificar o tipo de dispositivo onde deseja executá-los. Pode ser um emulador, simulador ou dispositivo físico (AWS Machine Farm).

Saiba mais sobre como testar aplicativos Flutter na Codemagic aqui.

Construct

Você pode configurar a versão do Flutter, Xcode e CocoaPods. Adicionalmente, você pode definir o caminho raiz do projeto e o modo de construct (debug, launch ou perfil) nessa seção.

Saiba mais sobre como fazer construct de projetos Flutter na Codemagic aqui.

Distribuição

Você pode configurar a assinatura de código e a publicação do seu aplicativo Flutter nesta seção. A Codemagic permite que você publique seu aplicativo automaticamente em vários serviços, tais como Google Play Retailer, App Retailer Join e Firebase App Distribution. Para publicar aplicativos Flutter para net, você pode usar as Páginas Estáticas Codemagic sem qualquer problema.

Você terá as opções de distribuição baseadas nas plataformas de construct selecionadas.

Você pode saber mais sobre os diferentes tipos de opções de publicação aqui.

Notificações

Nesta seção, você encontra as opções para configurar notificações por e-mail e Slack.

Scripts personalizados

Você pode definir scripts personalizados clicando em qualquer um dos botões “+” localizados antes das diversas seções do editor de workflows Flutter. Os scripts personalizados podem ser definidos nas fases post-clone, pre-test, post-test, pre-build, post-build, pre-publish e post-publish.

Você pode definir scripts personalizados em qualquer linguagem. (A linguagem pode ser especificada com uma linha shebang.) Por exemplo, se estiver usando Firebase em seu projeto, você precisa descriptografar os arquivos secretos Firebase antes de compilar o app. Você pode definir o seguinte como script de pre-build:

#!/usr/bin/env sh
set -e # exit on first failed command

echo $ANDROID_FIREBASE_SECRET | base64 --decode > $CM_BUILD_DIR/android/app/google-services.json
echo $IOS_FIREBASE_SECRET | base64 --decode > $CM_BUILD_DIR/ios/Runner/GoogleService-Information.plist

Saiba mais sobre scripts personalizados aqui.

YAML em detalhes

Você também pode configurar seu workflow Flutter usando o arquivo codemagic.yaml. Para usar YAML, clique em Mudar para configuração YAML. Uma caixa de diálogo aparecerá para atualizar sua configuração e se você deseja exportar a configuração atual para codemagic.yaml. Clique em Salvar alterações.

OBSERVAÇÃO: O arquivo de configuração baixado pode não corresponder exatamente à configuração definida no editor de workflows. Ajustes podem ser necessários.

Se o arquivo YAML estiver em seu controle de versão, ele deve aparecer aqui. Caso contrário, você pode consultar os hyperlinks da documentação para criar seu arquivo YAML.

Recomendamos que você leia o artigo para entender melhor, mas se já possuir experiência no uso do arquivo codemagic.yaml, você pode acessar o modelo de YAML para projetos Flutter aqui.

Segue um exemplo de workflow para construct de um aplicativo Android para debug:

workflows:
  simple-android-workflow:
    identify: Easy Android Workflow
    instance_type: mac_mini
    max_build_duration: 60
    surroundings:
      flutter: secure
    scripts:
      - identify: Arrange debug keystore
        script: |
          rm -f ~/.android/debug.keystore
          keytool -genkeypair 
            -alias androiddebugkey 
            -keypass android 
            -keystore ~/.android/debug.keystore 
            -storepass android 
            -dname 'CN=Android Debug,O=Android,C=US' 
            -keyalg 'RSA' 
            -keysize 2048 
            -validity 10000          
      - identify: Arrange native properties
        script: echo "flutter.sdk=$HOME/applications/flutter" > "$CM_BUILD_DIR/android/native.properties"
      - identify: Get Flutter packages
        script: flutter packages pub get
      - identify: Construct debug apk
        script: flutter construct apk --debug
    artifacts:
      - construct/**/outputs/**/*.apk
      - construct/**/outputs/**/*.aab
      - construct/**/outputs/**/mapping.txt
      - flutter_drive.log
    publishing:
      e mail:
        recipients:
          - [email protected]

Segue um exemplo de workflow para construct de um aplicativo iOS para debug:

workflows:
  simple-ios-workflow:
    identify: Easy iOS Workflow
    instance_type: mac_mini
    max_build_duration: 60
    surroundings:
      flutter: secure
      xcode: newest
      cocoapods: default
    scripts:
      - identify: Arrange native properties
        script: echo "flutter.sdk=$HOME/applications/flutter" > "$CM_BUILD_DIR/android/native.properties"
      - identify: Get Flutter packages
        script: flutter packages pub get
      - identify: Set up Podfiles
        script: discover . -name "Podfile" -execdir pod set up ;
      - identify: Construct debug iOS app
        script: flutter construct ios --debug --no-codesign
    artifacts:
      - construct/**/outputs/**/mapping.txt
      - construct/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - flutter_drive.log
    publishing:
      e mail:
        recipients:
          - [email protected]

Vamos examinar mais de perto as principais seções do arquivo codemagic.yaml.

Variáveis de ambiente

Na seção de variáveis de ambiente você pode definir credenciais (em formato criptografado) e especificar a versão das diversas ferramentas, tais como Flutter, Xcode, CocoaPods, and so forth.

surroundings:
  flutter: secure
  xcode: newest
  cocoapods: default

DICA: Para simplificar, em vez de definir essas variáveis de ambiente no arquivo codemagic.yaml, você também pode especificar esses valores na seção Variáveis de ambiente do aplicativo da aba Variáveis de ambiente. Saiba mais aqui.

Scripts

Você pode especificar os comandos para rodar nesse workflow na seção scripts.

Para obter pacotes Flutter, use o seguinte:

- identify: Get Flutter packages
  script: flutter packages pub get

Para rodar a análise do Flutter, você pode usar o seguinte:

- identify: Flutter analyze
  script: flutter analyze

Testes unitários do Flutter podem ser executados usando:

- identify: Flutter unit assessments
  script: flutter check

Use o seguinte para compilar a versão de depuração do app:

# Construct debug Android .apk
- identify: Construct debug apk
  script: flutter construct apk --debug
# Construct debug iOS .app
- identify: Construct debug iOS app
  script: flutter construct ios --debug --no-codesign

Artefatos

Você pode obter o arquivo .apk ou .app gerado acrescentando seu caminho em artifacts. Normalmente, o caminho parece algo assim:

# For Android
artifacts:
  - construct/**/outputs/**/*.apk
  - construct/**/outputs/**/*.aab
  - construct/**/outputs/**/mapping.txt
  - flutter_drive.log
# For iOS
artifacts:
  - construct/**/outputs/**/mapping.txt
  - construct/ios/ipa/*.ipa
  - /tmp/xcodebuild_logs/*.log
  - flutter_drive.log

Publicação

Para receber um relatório da construct, junto com os artefatos gerados, em seu e-mail, especifique o seguinte:

publishing:
  e mail:
    recipients:
      - [email protected] # enter your e mail id right here

Para mais informações sobre publicação, consulte este hyperlink.

Assinatura de código

Você precisa assinar seu aplicativo Android ou iOS/macOS para poder publicá-lo na Google Play Retailer ou App Retailer Join, respectivamente.

Você pode seguir os passos fornecidos aqui para configurar a assinatura de código:

Se estiver usando o editor de workflows, basta ir até a seção Publicação e configurar a assinatura de código para as respectivas plataformas.

Se você estiver usando o arquivo codemagic.yaml para gerar a construct de launch de projetos Flutter, você pode usar os seguintes comandos:

# For Android launch construct
- identify: Construct launch APK with Flutter (computerized versioning)
  script: |
        flutter construct apk --release --build-name=1.0.0 --build-number=$(($(google-play get-latest-build-number --package-name "$PACKAGE_NAME" --tracks="$GOOGLE_PLAY_TRACK") + 1))
# For iOS launch construct
- identify: Construct ipa with Flutter (computerized versioning)
  script: |
    flutter construct ipa --release 
    --build-name=1.0.0 
    --build-number=$(($(app-store-connect get-latest-testflight-build-number "$APP_STORE_ID") + 1)) 
    --export-options-plist=/Customers/builder/export_options.plist    

Esses comandos usam algumas variáveis de ambiente. Se desejar saber mais sobre elas, acesse os hyperlinks de artigos sobre assinatura de código fornecidos acima.

Distribuindo o aplicativo

A Codemagic permite que você publique automaticamente seu app Android ou iOS/macOS na Google Play Retailer ou App Retailer Join, respectivamente.

Você pode seguir os passos para publicar seu app dados pelos artigos abaixo:

Confira a documentação da Codemagic sobre publicação.

Builds na Codemagic

Se você estiver usando o arquivo codemagic.yaml para definir suas configurações de construct, assegure de ter feito commit dele no sistema de controle de versão. Por outro lado, se você estiver usando o editor de workflows do Flutter, está pronto para prosseguir com os passos para iniciar sua construct.

Siga os passos abaixo para iniciar uma construct:

  1. Vá até a configuração do seu projeto. Se estiver usando o editor de workflows, certifique-se de ter escolhido as plataformas corretas e a máquina que executará a construct. Depois clique em Iniciar nova construct ou Iniciar sua primeira construct (se for a primeira vez).

  2. Selecione um workflow e clique em Iniciar nova construct.

Isso iniciará uma nova construct de seu projeto Flutter.

Parabéns! 🎉 Sua primeira construct de Flutter pela Codemagic CI/CD está concluída!

Algumas informações a considerar se você estiver fazendo construct de aplicativos para desktop:

  • Construct de app macOS somente em máquinas Mac
  • Construct de app Linux somente em máquinas Linux (minutos pagos)
  • Builds de apps desktop e cell não podem rodar ao mesmo tempo

Webhooks

Para disparar automaticamente builds em resposta a eventos, você precisa configurar webhooks. Consulte as instruções para configurar webhooks na Codemagic aqui.

Você pode obter a URL de carga necessária para adicionar manualmente um webhook na aba Webhooks, dentro da configuração do aplicativo. Além disso, a lista de todas as builds disparadas estará disponível nesta página da seção Entregas recentes.

Conclusão

Apesar da Codemagic ter começado como uma solução oficial de CI/CD dedicada exclusivamente a aplicativos Flutter, ela agora acolhe todos os projetos cell na CI/CD mais rápida. Usando a mágica da Codemagic, você pode compilar, testar e publicar aplicativos Flutter com zero de configuração e rodar builds em ambientes controlados usando workflows customizados. Se você tem um aplicativo nativo para Android, iOS ou React Native, conte com a Codemagic. Basta usar o arquivo codemagic.yaml e você estará pronto para decolar!

Feliz compilação!

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles