Na aula anterior compilamos nosso projeto React no GitHub Actions e geramos o arquivo .apk. Agora é hora de transformar seu smartphone em um dispositivo de teste profissional, contornar barreiras de segurança e debugar o app em tempo real pelo Google Chrome!
"Nós compilamos o app na nuvem e baixamos o arquivo .apk. Mas o Windows não executa esse arquivo! Como colocar a aplicação rodando na palma da mão e como inspecionar erros de código (console.log) se o celular não tem teclado nem a tecla F12?"
Objetivos de Aprendizagem & Pré-requisitos
Competências técnicas que você dominará ao concluir este laboratório.
Habilitar as configurações ocultas do Android e ativar a Depuração USB para comunicação ADB.
Autorizar Fontes Desconhecidas e configurar o Play Protect para aceitar APKs em fase de teste.
Transferir o arquivo gerado no GitHub Actions e executar a WebView React em tela cheia no hardware real.
Acessar chrome://inspect para inspecionar DOM, CSS e Console da WebView direto pelo PC.
Como liberar os poderes ocultos do sistema Android para testes de software.
Abra o menu de Configurações (ícone de engrenagem) e role até a última opção: Sobre o Telefone (ou Informações do Software).
Localize a opção "Número da Versão" (ou Número de Compilação) e toque 7 vezes consecutivas e rápidas sobre ela!
Volte para a tela principal de Configurações. No final ou em Opções do Sistema, você verá o novo menu "Opções do Desenvolvedor". Abra-o e ligue a chave "Depuração USB" (USB Debugging).
O menu "Opções do Desenvolvedor" aparece no fim da lista de Ajustes. Confirme no aviso que você autoriza a depuração.
Configurações → Sobre o Telefone → Informações do Software → Número de Compilação (Tocar 7x).
Se o celular tiver PIN ou padrão de desenho, o Android pedirá a confirmação após o 7º toque para liberar o modo.
Configurações → Opções do Desenvolvedor → Ativar 'Depuração USB'.
Como transferir o arquivo binário, autorizar fontes desconhecidas e contornar o Google Play Protect.
O arquivo app-debug.apk baixado do GitHub Actions está no seu PC. Escolha um dos métodos de envio:
Ao tocar no APK pelo Gerenciador de Arquivos ou WhatsApp, o Android exibirá: "Por segurança, seu telefone não tem permissão para instalar apps desconhecidos desta fonte."
Como o nosso APK foi compilado em modo Debug (sem certificado digital pago da Play Store), o Google Play Protect mostrará um aviso vermelho de "App Bloqueado / Desenvolvedor Não Reconhecido".
NÃO clique em "OK" (isso cancela). Clique em "Mais Detalhes" (ou Ver mais) e depois em "Instalar assim mesmo (não seguro)".
Note como o aplicativo abre em tela cheia nativa, sem a barra de endereços do navegador (URL bar) e sem controles do browser. A sua aplicação web React agora tem comportamento 100% de app nativo!
Conecte o smartphone ao computador e use o DevTools (F12) no PC para debugar a WebView ao vivo.
Use um cabo USB de boa qualidade. No celular, selecione o modo de conexão "Transferência de Arquivos / MTP" (não deixe apenas em "Apenas Carregamento").
Aparecerá um popup na tela do celular: "Permitir depuração USB? A impressão digital da chave RSA do computador é: ...". Marque "Sempre permitir a partir deste computador" e toque em OK.
Na barra de endereços do Chrome no PC, digite exatamente a URL especial:
chrome://inspect/#devices
O modelo do seu celular aparecerá na lista de dispositivos. Abaixo dele, você verá a WebView do seu app com a URL interna. Clique em "inspect" para abrir a janela do DevTools remota!
console.log() e testar chamadas de API!
Pratique o fluxo completo sem sair da página: toque 7 vezes no celular virtual para liberar o modo desenvolvedor, autorize a depuração USB e controle o app no DevTools remoto!
Aplicação rodando em tela cheia na WebView do Android real.
A impressão digital da chave RSA do computador é:
9F:42:DE:01:A5:77:BC:10:88
src/main.tsx no Android Sandbox.
No mercado profissional, o Android roda em mais de 24.000 modelos de aparelhos diferentes. Aprenda a contornar as peculiaridades de cada fabricante!
A Xiaomi possui camadas extras de segurança que costumam travar desenvolvedores iniciantes.
Uma das interfaces mais diretas, porém esconde o menu dentro da subpasta de software.
Interface muito próxima do Android Puro do Google (AOSP).
Execute os desafios práticos na bancada e teste seus conhecimentos com o quiz interativo abaixo!
Ative o Modo Desenvolvedor e a Depuração USB no seu próprio smartphone. Transfira o APK da Aula 06 e execute o aplicativo em tela cheia.
Conecte o smartphone via cabo USB ao PC do laboratório. Abra chrome://inspect/#devices e abra a janela de inspeção remota.
Pelo DevTools no PC, altere a cor de fundo do cabeçalho do seu app para vermelho e execute console.log("Aluno [SeuNome] conectou!").
1. Como o desenvolvedor libera o menu de Opções do Desenvolvedor no Android padrão?
2. O que significa o termo técnico "Sideloading"?
3. Ao instalar o APK de Debug, o Play Protect exibe aviso de risco. Qual é o procedimento correto do desenvolvedor?
4. Qual é a URL exata do Google Chrome usada no PC para encontrar o smartphone e depurar a WebView?
5. Se você conectar o celular ao PC e o Chrome Inspect NÃO listar o aparelho, qual costuma ser a causa mais frequente?
Marque cada item validado com o professor ou monitor em sala de aula.
"Agora que nosso app roda no hardware e conseguimos depurá-lo, vamos conectá-lo a um banco de dados real na nuvem utilizando o Supabase SDK para salvar e carregar dados do usuário direto do celular!"