Configurando o ambiente para desenvolvimento mobile cross-platform

A configuração correta do ambiente de desenvolvimento é o primeiro passo crítico para qualquer projeto mobile cross-platform bem-sucedido. Neste artigo, abordaremos detalhadamente como preparar seu sistema para trabalhar com as principais ferramentas do mercado, garantindo que você evite os erros mais comuns e maximize sua produtividade desde o início.

1. Escolha da Ferramenta Principal: Flutter ou React Native?

Antes de iniciar a instalação, é fundamental decidir entre Flutter e React Native. Ambos possuem requisitos de sistema distintos:

Flutter requer o SDK Flutter, que pode ser instalado via linha de comando ou através do gerenciador de pacotes. No Windows, utilize o Chocolatey ou baixe manualmente o SDK. No macOS, recomenda-se o Homebrew:

# Instalação via Homebrew no macOS
brew install --cask flutter

No Linux, o processo envolve baixar o SDK e configurar o PATH manualmente:

# Extrair o SDK no diretório desejado
cd ~
tar xf flutter_linux_*.tar.xz
export PATH="$PATH:`pwd`/flutter/bin"

React Native depende do Node.js e do React Native CLI. A instalação do Node.js é unificada entre plataformas:

# Verificar versão do Node.js (mínimo 18.x)
node --version

# Instalar React Native CLI globalmente
npm install -g react-native-cli

2. Configuração do Android Studio e SDK do Android

O Android Studio é essencial para ambas as ferramentas. Baixe a versão mais recente (2024.2 ou superior) diretamente do site oficial. Durante a instalação, certifique-se de incluir:

  • Android SDK Platform 34 (para Android 14)
  • Android SDK Build-Tools 34.0.0
  • Intel HAXM (para emuladores em CPUs Intel)

Após a instalação, configure as variáveis de ambiente:

# No Windows (PowerShell)
[System.Environment]::SetEnvironmentVariable('ANDROID_HOME', 'C:\Users\SeuUsuario\AppData\Local\Android\Sdk', 'User')
[System.Environment]::SetEnvironmentVariable('PATH', "$env:PATH;$env:ANDROID_HOME\platform-tools;$env:ANDROID_HOME\emulator", 'User')

# No macOS/Linux (adicione ao ~/.bashrc ou ~/.zshrc)
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Para criar um emulador, utilize o AVD Manager:

# Criar emulador via linha de comando
avdmanager create avd -n Pixel_6_API_34 -k "system-images;android-34;google_apis;x86_64"

3. Preparação do Ambiente iOS (macOS obrigatório)

O desenvolvimento iOS requer um Mac com Xcode instalado. Baixe pelo Mac App Store ou via linha de comando:

# Instalar Xcode Command Line Tools
xcode-select --install

# Verificar versão do Xcode
xcodebuild -version

O CocoaPods é indispensável para gerenciar dependências iOS:

# Instalar CocoaPods
sudo gem install cocoapods

# Verificar instalação
pod --version

Para testar em simulador iOS, utilize o comando:

# Listar simuladores disponíveis
xcrun simctl list devices

# Iniciar simulador específico
xcrun simctl boot "iPhone 15 Pro"

4. Configuração de Editores e Plugins Essenciais

VS Code é a escolha mais popular. Instale estas extensões obrigatórias:

  • Flutter (Dart Code)
  • React Native Tools
  • ESLint e Prettier para formatação
  • GitLens para controle de versão

Android Studio oferece suporte nativo a Kotlin Multiplatform. Adicione os plugins:

  • Kotlin Multiplatform Mobile
  • Flutter (se aplicável)
  • Firebase App Distribution

Configure o linting no VS Code adicionando ao settings.json:

{
  "editor.formatOnSave": true,
  "dart.previewFlutterUiGuides": true,
  "eslint.validate": ["javascript", "typescript"],
  "prettier.singleQuote": true
}

5. Gerenciamento de Dependências e Projetos

Para Flutter, o arquivo pubspec.yaml gerencia todas as dependências:

name: meu_app_cross
description: Aplicativo cross-platform
version: 1.0.0

environment:
  sdk: '>=3.2.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
  provider: ^6.1.0
  firebase_core: ^2.25.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

Para React Native, o package.json segue o padrão Node.js:

{
  "name": "meu_app_rn",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.74.0",
    "@react-navigation/native": "^6.1.0",
    "axios": "^1.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "metro-react-native-babel-preset": "0.77.0"
  }
}

Boas práticas incluem o uso de lockfiles (pubspec.lock ou package-lock.json) e a verificação de versões compatíveis entre plataformas.

6. Testes em Múltiplas Plataformas

Configure emuladores Android para diferentes arquiteturas:

# Emulador x86 para desenvolvimento rápido
avdmanager create avd -n Fast_x86 -k "system-images;android-34;google_apis;x86_64"

# Emulador ARM para testar bibliotecas nativas
avdmanager create avd -n ARM_Test -k "system-images;android-34;google_apis;arm64-v8a"

Para testes em dispositivos físicos iOS, certifique-se de que o dispositivo está em modo desenvolvedor e conectado ao Mac. Utilize o Firebase Test Lab para testes em larga escala:

# Comando para executar testes no Firebase Test Lab
gcloud firebase test android run --app app-debug.apk --device model=Pixel2,version=30

7. Integração Contínua e Deploy Automatizado

Configure um pipeline no GitHub Actions para builds automáticos:

name: Build Cross-Platform

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: macos-latest

    steps:
    - uses: actions/checkout@v4

    - name: Setup Flutter
      uses: subosito/flutter-action@v2
      with:
        flutter-version: '3.16.0'

    - name: Build Android
      run: flutter build apk

    - name: Build iOS
      run: flutter build ios --no-codesign

Para iOS, a geração de certificados e perfis de provisionamento pode ser automatizada com Fastlane:

# Fastlane para iOS
lane :beta do
  match(type: "development")
  gym(scheme: "MeuApp")
  pilot
end

8. Resolução de Problemas Comuns e Checklist Final

Erros frequentes e soluções:

  • SDK não encontrado: Verifique as variáveis ANDROID_HOME e PATH
  • Versão do Gradle incompatível: Atualize para a versão 8.2+ no arquivo android/gradle-wrapper.properties
  • Permissões negadas no macOS: Execute sudo xcodebuild -license accept

Checklist final antes de iniciar o primeiro projeto:

  • [ ] Flutter ou React Native CLI instalado e funcionando
  • [ ] Android SDK configurado com ANDROID_HOME
  • [ ] Emulador Android criado e funcional
  • [ ] Xcode e Command Line Tools instalados (macOS)
  • [ ] CocoaPods instalado e atualizado
  • [ ] Extensões do VS Code ou Android Studio configuradas
  • [ ] Dependências do projeto baixadas sem erros
  • [ ] Teste básico executado em pelo menos uma plataforma

Com este ambiente configurado, você está pronto para iniciar o desenvolvimento de aplicações mobile cross-platform com eficiência e confiança.

Referências