📱 Módulo 10: App Mobile - Fundamentos do Ionic e Estruturação de UI
✅ Pré-Requisitos deste Módulo
Confirme antes de começar:
ionic --version # deve retornar 7.x ou superior
node --version # deve retornar v18.x
Se o Ionic CLI não estiver instalado: npm install -g @ionic/cli
Você deve ter concluído o Módulo 09 (backend e frontend web finalizados). O backend deve estar rodando para os próximos módulos.
Neste módulo, daremos início ao desenvolvimento do terceiro pilar da nossa arquitetura Omnichannel: o aplicativo Mobile Híbrido.
Utilizaremos o Ionic Framework, que permite criar interfaces móveis nativas deslumbrantes utilizando as tecnologias web que já conhecemos (HTML, CSS, TypeScript e Angular). A ponte para o hardware do celular (como câmera, GPS e sistema de arquivos) será feita pelo Capacitor.
🏛️ SPA Web vs App Híbrido
Por que não usamos apenas o site Angular no celular? Porque os usuários de aplicativos móveis esperam uma experiência nativa (gestos de deslizar, barras de navegação inferiores fixas, animações fluidas) e acesso offline parcial.
flowchart TD
classDef mobile fill:#3880ff,stroke:#1e4eb5,stroke-width:2px,color:#fff;
classDef web fill:#dd0031,stroke:#900020,stroke-width:2px,color:#fff;
classDef hardware fill:#2dd36f,stroke:#1a7d42,stroke-width:2px,color:#fff;
A[App Ionic / Angular]:::mobile -->|Renderiza| B(WebView Nativa do Celular)
A -->|Chama| C[Capacitor Bridge]:::hardware
C -->|Executa| D(Hardware: Câmera, SQLite, Notificações)
A -->|Requisição HTTP| E[Spring Boot API]:::web
🛠️ 1. Inicializando o Projeto Ionic
Se você ainda não instalou o CLI do Ionic, execute o comando global no seu terminal:
npm install -g @ionic/cli
Na raiz do repositório tecloja_01, crie o esqueleto do projeto usando o template “blank” com o tipo moderno angular-standalone (que elimina o uso de NgModules legados em favor de Standalone Components):
ionic start mobile blank --type=angular-standalone --capacitor
Entre na pasta criada e inicie o servidor de testes:
cd mobile
ionic serve
O seu aplicativo abrirá no navegador. Aperte F12 e ative o modo de dispositivo móvel para visualizar o design imitando a tela de um iPhone ou Android.
🗺️ Mapeamento de Rotas no Angular Standalone (app.routes.ts)
Como estamos usando componentes standalone modernos, o roteamento do aplicativo móvel é unificado diretamente no arquivo app.routes.ts:
| Rota (Path) | Componente Físico | Funcionalidade Principal | Módulo de Implementação |
|---|---|---|---|
| /login | app/pages/login/ |
Formuário de Autenticação (JWT) | Módulo 11 |
| /home | app/home/ |
Catálogo de Produtos e Câmera Nativa | Módulo 10 (Mock) / Módulos 11 e 12 |
🎨 2. Ionic UI Components (O Catálogo de Produtos)
Diferente do projeto web (web) onde nós escrevemos o HTML e o CSS do zero para os botões e cards, no Ionic nós usamos os seus próprios componentes customizados, que se auto-adaptam visualmente dependendo de onde o app está rodando (estilo Material Design no Android, estilo Cupertino no iOS).
Vamos modificar a aba principal (src/app/tab1/tab1.page.html) para exibir um catálogo de produtos falso (mock) antes de conectarmos à API no próximo módulo.
<!-- src/app/tab1/tab1.page.html -->
<ion-header [translucent]="true">
<ion-toolbar color="primary">
<ion-title>
TecLoja Mobile
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="ion-padding">
<!-- Um cabeçalho extra grande, padrão em iOS -->
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Catálogo</ion-title>
</ion-toolbar>
</ion-header>
<!-- O Componente ion-card cria automaticamente as bordas e sombras perfeitas -->
<ion-card>
<img alt="Notebook M1" src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8" />
<ion-card-header>
<ion-card-title>MacBook Pro M1</ion-card-title>
<ion-card-subtitle>R$ 14.500,00</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
O notebook mais rápido da geração.
</ion-card-content>
<ion-button expand="block" fill="solid" color="success">
<ion-icon name="cart-outline" slot="start"></ion-icon>
Comprar Agora
</ion-button>
</ion-card>
</ion-content>
A mágica do Ionic acontece nas diretivas como color="primary", expand="block" e o uso da biblioteca oficial de ícones (Ionicons) através de <ion-icon>. Não foi necessário escrever nenhuma linha de CSS!
🤔 Por que Ionic e não React Native ou Flutter?
Ionic usa Angular + WebView nativa do dispositivo — ou seja, você já conhece as ferramentas (Angular, TypeScript, CSS). React Native e Flutter usam paradigmas diferentes (JSX/Dart) que exigiriam reaprender tudo. Para a TecLoja, onde já temos Angular no frontend web, reutilizar os mesmos padrões no mobile reduz a curva de aprendizagem e maximiza o reaproveitamento de código (modelos, serviços, interceptors).
🔍 Checkpoint
Após criar o projeto e modificar a página inicial:
cd mobile
ionic serve
Abra o navegador (o Ionic normalmente abre automaticamente em http://localhost:8100). Pressione F12 e ative o modo de dispositivo móvel (ícone de celular no DevTools).
Resultado esperado: A interface exibe o header com cor primária, o título “TecLoja Mobile”, e o ion-card com a imagem do MacBook Pro e o botão “Comprar Agora” estilizado automaticamente pelo Ionic.
⚠️ Erros Comuns
| Sintoma | Causa | Solução |
|---|---|---|
ionic: command not found |
Ionic CLI não instalado | npm install -g @ionic/cli e reabra o terminal |
--type=angular-standalone não reconhecido |
Ionic CLI desatualizado | npm install -g @ionic/cli@latest |
| App abre mas tela totalmente branca | zone.js não importado |
Veja a seção sobre zone.js no Módulo 13 — o mesmo problema afeta testes no navegador |
Imagem do ion-card não carrega |
URL externa bloqueada por CSP | Substitua por uma imagem local em src/assets/ |
ionic serve falha com EADDRINUSE: port 8100 |
Outra instância já rodando | Feche o terminal anterior ou use ionic serve --port 8200 |
🏁 Conclusão
Neste módulo, entendemos o poder de reaproveitamento do Angular sendo envelopado por componentes móveis (Ionic UI). Criamos a casca do nosso App.
No Módulo 11, faremos o App acordar! Substituiremos o HTML estático por requisições HTTP reais consumindo nossa API do Spring Boot. Aprenderemos a programar o Login no celular, interceptar os tokens JWT e gerenciar sessões offline utilizando o Capacitor Storage.