📱 Módulo 12: App Mobile - Recursos Nativos (Câmera) e Build de Produção

✅ Pré-Requisitos deste Módulo

Confirme antes de começar:

# dentro de mobile/
ionic serve   # deve abrir localhost:8100 com login funcionando

Você deve ter concluído o Módulo 11 (login + persistência via Capacitor Preferences funcionando).

Para o build do APK (Passo 2), você precisará do Android Studio instalado com os SDKs do Android configurados.

Neste último módulo do ecossistema Mobile da TecLoja 01, romperemos a barreira da “aplicação de navegador” e acessaremos o hardware físico do celular utilizando o Capacitor. Em seguida, aprenderemos a empacotar o nosso código TypeScript/HTML em um binário executável (.apk) instalável no Android.

📷 1. Integração com Hardware: Câmera Nativa

Imagine que a loja quer permitir que um vendedor administrativo altere a foto de um produto fotografando-o diretamente da prateleira.

O plugin de câmera do Capacitor não precisa de códigos Java ou Swift. Nós chamamos um método assíncrono em TypeScript, e o Capacitor se encarrega de abrir a interface do sistema operacional nativo.

Instale os plugins:

npm install @capacitor/camera

O Serviço de Captura e Configuração PWA

Para que a câmera funcione de forma nativa e também simule uma webcam no navegador de testes local do aluno, instalamos o plugin de câmera nativo e a biblioteca PWA Elements:

npm install @capacitor/camera @ionic/pwa-elements

Em seguida, configuramos a inicialização do simulador de câmera no arquivo principal main.ts:

import { defineCustomElements } from '@ionic/pwa-elements/loader';
defineCustomElements(window);

No nosso componente Angular Standalone home.page.ts, injetamos a chamada nativa:

// src/app/home/home.page.ts
import { Component, signal } from '@angular/core';
import { Camera, CameraResultType } from '@capacitor/camera';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  // Armazena a imagem capturada (webPath)
  profilePhoto = signal<string | null>(null);

  async tirarFotoPerfil(): Promise<void> {
    try {
      // Abre a câmera do celular (ou webcam simulada no navegador) assincronamente
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: false, // Sem crop nativo
        resultType: CameraResultType.Uri // Retorna o caminho de URI leve do Capacitor
      });
      
      if (image.webPath) {
        this.profilePhoto.set(image.webPath);
      }
    } catch (err) {
      console.warn('Acesso à câmera cancelado ou indisponível:', err);
    }
  }
}

E na interface (HTML inline):

<ion-avatar slot="start" class="user-avatar" (click)="tirarFotoPerfil()">
  <img [src]="profilePhoto() || 'assets/default-avatar.png'" alt="Avatar">
</ion-avatar>

<ion-button (click)="tirarFotoPerfil()">
  <i class="bi bi-camera"></i> Alterar Foto de Perfil
</ion-button>

🛠️ 2. Build de Produção (Gerando o Binário Nativo)

A sua aplicação funciona perfeitamente rodando ionic serve no navegador, mas para enviar à Google Play Store, precisamos encapsulá-la.

Pré-requisitos

Você precisa do Android Studio instalado na sua máquina, contendo os SDKs essenciais do Android.

Passo 1: Construir a Versão Web Minificada

Primeiro, o Angular compila o TypeScript e o SCSS em HTML puro e Javascript ofuscado de alta performance.

ionic build --prod

Passo 2: Sincronizar os Arquivos Web com o Capacitor Android

Nós injetamos esse código web dentro de uma casca Java (Android App).

npx cap add android
npx cap copy android

Passo 3: Abrir no Android Studio

O comando abaixo lança a interface pesada do Android Studio contendo todo o seu projeto mapeado nativamente.

npx cap open android

Passo 4: Build do APK

Dentro do Android Studio:

  1. Vá no menu Build na barra superior.
  2. Selecione Build Bundle(s) / APK(s) > Build APK(s).
  3. Aguarde o Gradle compilar. No final, uma notificação flutuante indicará “Build APK(s) successfully”. Clique em “locate” para abrir a pasta do Windows onde o app-debug.apk foi gerado!

Copie esse .apk para o seu celular Android, autorize “Instalação de Fontes Desconhecidas”, e veja a sua SPA se comportando como um aplicativo profissional baixado da loja.

🤔 Por que Capacitor e não código nativo Java/Swift?

Escrever a tela de câmera em Java/Kotlin (Android) ou Swift/Objective-C (iOS) exigiria manter dois codebases completamente diferentes — um por plataforma. Com o Capacitor, chamamos Camera.getPhoto() uma única vez em TypeScript e o Capacitor delega para o código nativo correto em tempo de execução.

A troca é: acesso nativo completo vs. manutenibilidade. Para a TecLoja (e para a maior parte dos aplicativos empresariais), o ganho de produtividade do híbrido supera as limitações de acesso a APIs muito específicas do hardware.

PWA Elements (@ionic/pwa-elements) permite testar a câmera diretamente no navegador sem precisar de um celular físico — invaluable durante o desenvolvimento.

🔍 Checkpoint

Teste a câmera no navegador antes de gerar o APK:

  1. Certifique-se de que defineCustomElements(window) está em main.ts
  2. Execute ionic serve e acesse http://localhost:8100
  3. Faça login, navegue até a tela que tem o botão de câmera
  4. Clique em “Alterar Foto de Perfil”

Resultado esperado: Um diálogo PWA Elements abre mostrando opções de câmera/galeria, ou abre a webcam do seu computador. Após confirmar, a imagem aparece no <img> vinculado ao Signal profilePhoto.

Para o build do APK:

ionic build --prod
npx cap add android
npx cap copy android
npx cap open android

No Android Studio: Build → Build Bundle(s)/APK(s) → Build APK(s). O app-debug.apk será gerado em android/app/build/outputs/apk/debug/.

⚠️ Erros Comuns

Sintoma Causa Solução
Botão de câmera não abre nada no navegador defineCustomElements(window) ausente em main.ts Adicione import { defineCustomElements } from '@ionic/pwa-elements/loader' e chame defineCustomElements(window)
Error: Camera not available no browser @ionic/pwa-elements não instalado npm install @ionic/pwa-elements na pasta mobile/
npx cap add android falha: SDK location not found Android Studio / SDK não configurado Instale o Android Studio e defina ANDROID_HOME ou ANDROID_SDK_ROOT nas variáveis de ambiente
ionic build --prod falha com erros TypeScript Código com erros de compilação Corrija os erros indicados — ionic build faz strictMode. Rode ng build primeiro para ver os erros detalhados
APK instalado mas tela branca no celular URL da API aponta para localhost (que no celular é o próprio celular) Substitua http://localhost:8080 pela URL de produção do Render no auth.service.ts antes do build

🎉 Parabéns! O Projeto TecLoja 01 está finalizado!

Você arquitetou um e-commerce gigante que conta com:

  1. Um Backend robusto em Java com banco de dados em Nuvem.
  2. Um Frontend Web (SPA) com deploy contínuo via GitHub Actions.
  3. Um Frontend Mobile híbrido consumindo recursos físicos e distribuível em lojas.

Esta é a exata definição moderna do engenheiro Full-Stack! Continue seus estudos explorando os outros padrões de projeto disponíveis nas demais versões do TecLoja.

📬 Entrega da Atividade via Microsoft Teams

Como você acaba de finalizar toda a construção do ecossistema Mobile Híbrido, este é o momento de fazer o envio final do repositório para avaliação!

  1. Garanta que todo o código da pasta mobile foi enviado (pushed) para um repositório público no seu GitHub pessoal.
  2. Abra o Microsoft Teams na aba de Tarefas/Assignments da disciplina.
  3. Envie o link do repositório seguindo estritamente o padrão de nomenclatura abaixo no campo de texto ou título da entrega:

Padrão de Nomenclatura:

[TECLOJA_01] - [MOBILE] - Seu Nome Completo Link: https://github.com/seu-usuario/nome-do-repositorio-mobile

Voltar para o Sumário