SENAI // DESENVOLVIMENTO DE SISTEMAS AULA 16

Do Protótipo ao Produto Profissional

Código Completo & Automação CLI

Personalização Nativa de Ícones & Splash Screens

Insira a identidade visual profissional no seu projeto Capacitor. Automatize a geração de dezenas de resoluções exigidas pelo Android (mipmap-mdpi até xxxhdpi) utilizando a ferramenta oficial @capacitor/assets.

/assets/icon.png (1024x1024) /assets/splash.png (2732x2732)

O Fluxo "Single Source of Truth" (Fonte Única da Verdade)

01

Pasta Fonte

Criar /assets com icon.png e splash.png

02

Instalação CLI

npm i @capacitor/assets --save-dev

03

Geração Nativa

npx capacitor-assets generate

04

Sync & Deploy

npx cap sync android

01

Estruturação da Pasta Assets

Criação dos 2 arquivos fonte na raiz do projeto React/Capacitor

Requisito Base

Na raiz do seu projeto (mesmo nível do package.json), crie o diretório assets/ com os nomes e dimensões exatas:

// Estrutura de Diretórios Solicitada
meu-app-capacitor/
├── assets/
│ ├── icon.png       (1024 x 1024 px | Sem Transparência)
│ └── splash.png     (2732 x 2732 px | Logo Centralizada)
├── android/
├── capacitor.config.ts
└── package.json

Especificações de Design Nativo:

  • Ícone (`icon.png`): $1024 \times 1024\text{px}$. Fundo preenchido com cor sólida opaca. Não faça cantos arredondados manualmente; o SO aplica a máscara.
  • Splash (`splash.png`): $2732 \times 2732\text{px}$. Fundo sólido com o logotipo posicionado na Safe Zone Central (~1200px) para evitar cortes em telas compridas.
02

Instalação do Motor Gerador `@capacitor/assets`

Adicionando a ferramenta oficial de automação visual via NPM

Terminal / Terminal VS Code

Execute o comando abaixo no terminal da raiz do seu projeto para instalar o pacote como dependência de desenvolvimento: 

npm install @capacitor/assets --save-dev
03

Configuração do Arquivo `capacitor.config.ts`

Definindo comportamentos da Splash Screen e do plugin nativo

TypeScript

Garanta que as propriedades do plugin de Splash Screen estejam devidamente declaradas no seu arquivo de configuração: 

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.senai.meuapp',
  appName: 'MeuAppProfissional',
  webDir: 'dist',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      backgroundColor: "#0f0f11",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: false,
    },
  },
};

export default config;
04

Execução da Geração Automática das Resoluções

Criação de mipmaps, adaptive icons e telas de splash para o Android

Comando Mágico

Rode a CLI para processar a pasta /assets e injetar os recursos nas pastas nativas do Android: 

npx capacitor-assets generate --android

Arquivos gerados automaticamente em `android/app/src/main/res/`:

mipmap-mdpi
mipmap-hdpi
mipmap-xhdpi
mipmap-xxhdpi
mipmap-xxxhdpi
drawable-port
drawable-land
values/ic_launcher
05

Sincronização & Build para Dispositivo Físico

Transferindo assets para o projeto nativo e testando no Smartphone

Deploy Físico

Sincronize as alterações do projeto e execute a compilação do APK: 

# 1. Copia o bundle web e sincroniza os plugins nativos
npx cap sync android

# 2. Abre o projeto no Android Studio para rodar no celular via USB
npx cap open android
06

Automação CI/CD no GitHub Actions (Build da APK na Nuvem)

Geração automática do arquivo APK de depuração a cada commit nas branches main ou master

Workflow YAML

Crie o arquivo no caminho .github/workflows/android-build.yml no seu repositório para compilar o APK automaticamente na nuvem sem depender do Android Studio local: 

name: Construir APK Android (Capacitor)

on:
  push:
    branches:
      - main
      - master
  workflow_dispatch:

jobs:
  build:
    name: Gerar APK de Depuracao (Debug)
    runs-on: ubuntu-latest

    steps:
      - name: 📥 Clonar Repositorio
        uses: actions/checkout@v4

      - name: 🟢 Configurar Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: 📦 Instalar Dependencias
        run: npm install

      - name: ☕ Configurar Java JDK 21
        uses: actions/setup-java@v4
        with:
          distribution: 'temurin'
          java-version: '21'

      - name: 🔄 Sincronizar Capacitor com Android
        run: npx cap sync android

      - name: 🔑 Permissao de Execucao do Gradle
        run: chmod +x android/gradlew

      - name: 🔨 Compilar APK com Gradle
        run: |
          cd android
          ./gradlew assembleDebug

      - name: 📤 Publicar APK para Download
        uses: actions/upload-artifact@v4
        with:
          name: meu-aplicativo-apk
          path: android/app/build/outputs/apk/debug/app-debug.apk

Como baixar o APK gerado no GitHub Actions:

  1. Faça o git push do seu código com a pasta .github/workflows/android-build.yml.
  2. Acesse a aba Actions no topo do seu repositório no GitHub.
  3. Clique no workflow da compilação executada.
  4. Assim que o status ficar verde (Success), role até a seção Artifacts no rodapé da página e faça o download do arquivo meu-aplicativo-apk para obter a APK de teste!