📚 Módulo 12: Mobile - Splash Screens, Ícones, Otimização de Performance e Geração de APK Assinado

Neste módulo final de encerramento da Expansão Mobile da TecLoja 02, daremos o tratamento visual e técnico necessário para transformar o nosso projeto híbrido em um produto pronto para a publicação nas lojas oficiais de aplicativos.

Configuraremos de forma automatizada os Ícones e a Splash Screen (Tela de Abertura) nativos do app, otimizaremos a performance de renderização no celular e aprenderemos a gerar o APK de Produção assinado digitalmente através do Android Studio.

🗺️ 1. Fluxo de Geração e Assinatura do Binário (.APK)

Abaixo, ilustramos o pipeline de empacotamento que transforma nossos arquivos web estáticos compilados e o container nativo no arquivo binário final para instalação no celular:

flowchart TD
    %% Styling
    classDef web fill:#41B883,stroke:#35495E,stroke-width:2px,color:#fff;
    classDef asset fill:#FF9800,stroke:#E65100,stroke-width:2px,color:#fff;
    classDef grad fill:#0072B5,stroke:#003F6B,stroke-width:2px,color:#fff;
    classDef out fill:#4CAF50,stroke:#2E7D32,stroke-width:2px,color:#fff;

    A[npm run build: Vue 3]:::web --> B[npx cap sync: Copiar Assets]:::web
    C[Capacitor Assets: Ícones & Splash]:::asset --> D[Pasta /android/res/]:::asset
    
    B --> E[Gradle Compiler: Android Studio]:::grad
    D --> E
    
    E --> F[Sign Build: Inserir Keystore Digital]:::grad
    F --> G[app-release.apk / app-release.aab]:::out

🎨 2. Geração Automática de Ícones e Splash Screens

Para evitar a necessidade de criar manualmente dezenas de resoluções de ícones e telas de abertura diferentes exigidas pelo Android, utilizaremos a ferramenta CLI @capacitor/assets.

Preparação das Imagens de Origem

Na raiz do seu repositório frontend, crie uma pasta chamada assets e adicione três imagens base em formato .png:

  1. assets/icon-only.png (Ícone limpo do aplicativo, recomendado tamanho 1024x1024px).
  2. assets/icon-foreground.png (Frente do ícone adaptativo, recomendado tamanho 1024x1024px).
  3. assets/icon-background.png (Fundo do ícone adaptativo, recomendado tamanho 1024x1024px).
  4. assets/splash.png (Imagem centralizada com fundo sólido para tela de abertura, recomendado tamanho 2732x2732px).

Executando a Geração de Assets

No terminal do seu projeto frontend, instale a ferramenta e execute o gerador automático:

# 1. Instalar a CLI de assets globalmente ou localmente
npm install @capacitor/assets

# 2. Rodar a ferramenta gerando todas as variações nativas
npx capacitor-assets generate --android

Esta ferramenta processará suas imagens base da pasta /assets e gerará automaticamente todas as versões redimensionadas nos caminhos nativos corretos em android/app/src/main/res/drawable-* e mipmap-*.

⚡ 3. Otimização de Performance Mobile

Aplicativos híbridos baseados em WebView exigem cuidado extra com o tamanho dos arquivos transferidos. Siga estes passos para garantir uma resposta ultraveloz:

  1. Lazy Loading de Imagens de Produtos: No seu componente de vitrine, certifique-se de carregar imagens de produtos de forma preguiçosa adicionando o atributo loading="lazy" nas tags <img>.
  2. Otimização do Bundler Vite: Abra o arquivo vite.config.ts do frontend e ative a compressão manual de chunks em pedaços menores para evitar arquivos JS gigantescos de carregamento:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    chunkSizeWarningLimit: 600,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
});

🔑 4. Geração e Assinatura do APK no Android Studio

Para instalar o aplicativo no celular de forma permanente ou submetê-lo na Google Play Store, o Android exige que o binário esteja assinado digitalmente por um certificado de segurança privado (.keystore).

Passos para Assinar o APK no Android Studio:

  1. No terminal, sincronize o build mais atual do código web: 
    npm run build
npx cap sync
npx cap open android
  2. No Android Studio, vá no menu superior em Build -> Generate Signed Bundle / APK….
  3. Escolha a opção APK e clique em Next.
  4. Em Key store path, clique em Create new… para criar sua chave de assinatura digital única:
    • Key store path: Selecione um caminho seguro no seu computador (ex: C:\Users\Usuario\meu-certificado.jks).
    • Password: Defina uma senha forte para a Keystore.
    • Alias: Defina um apelido para a chave (ex: tecloja_key).
    • Password: Defina outra senha forte para a chave (ou use a mesma da Keystore).
    • Validity (years): Mantenha 25 anos.
    • Preencha os dados de identificação organizacional mínimos exigidos e clique em OK.
  5. Selecione a chave recém-criada, insira as senhas e avance clicando em Next.
  6. Em Build Variants, selecione a opção release (compilação de produção enxuta).
  7. Clique em Finish. O Gradle processará a compilação final e gerará o arquivo binário em: android/app/release/app-release.apk.
  8. Envie este arquivo .apk para o seu próprio celular via cabo USB, e-mail ou nuvem, habilite a permissão de “Fontes Desconhecidas” nas configurações de segurança do aparelho e execute a instalação nativa física!

✅ Pré-Requisitos deste Módulo

Antes de encerrar o projeto móvel, certifique-se de que:

🤔 Por que fizemos assim?

🔍 Checkpoint

  1. Splash e Ícone: Instale o app gerado em release no celular ou emulador e confirme se o ícone personalizado da TecLoja é renderizado e se a Splash Screen é exibida durante o tempo de inicialização da WebView.
  2. Tamanho do APK: Valide se o tamanho total do arquivo APK gerado em release está abaixo de 15MB (o Capacitor limpa automaticamente dependências não utilizadas e entrega pacotes compilados enxutos).

⚠️ Erros Comuns

Erro Causa Solução
O ícone do aplicativo fica com uma borda branca esquisita Imagem icon.png ou icon-foreground.png sem transparência alfa ou com área de respiro de design inadequada para o padrão circular do Android. Crie ícones respeitando a safe-zone de 66% centralizada da imagem, deixando o restante do fundo com transparência.
O APK é instalado fisicamente, mas retorna tela preta ao carregar O endereço HTTPS do backend está offline ou o celular de testes real não tem conexão ativa de internet. Certifique-se de que o aparelho possui acesso à internet e que a API FastAPI no Render não está sob inatividade de suspensão automática (cold start).
Perda do arquivo .jks (Key store) Exclusão acidental ou falta de backup da assinatura digital. Cuidado extremo: Se você perder sua Keystore, nunca mais conseguirá subir atualizações para a Google Play Store para o mesmo aplicativo. Faça backup em local seguro e persistente.

Voltar para o Sumário