🎞️ Slides 📝 Material ← Módulo
Projeto 6 · Engenharia de Software Plano de Ensino

Aula 6 — FrontEnd Mobile e Arquitetura MVVM (React Native)

Plano operacional do dia: por que mobile-first em recomendação, React Native sob a JSI, MVVM em 3 camadas e a montagem completa de uma tela usando hook como ViewModel.

← Voltar ao Módulo

Identificação

Curso
Engenharia de Software
Módulo
Projeto 6 — SOA Mobile
Aula
6 de 10
Data
25/05/2026
Carga horária do dia
6h (2h + 2h + 2h)
Modalidade
Presencial · Metodologia ativa

Resumo

A aula 6 traz o frontend mobile do projeto 6 para o centro da arquitetura. Discutimos por que mobile-first faz sentido em sistema de recomendação de espetáculos (sessão curta, push, geolocalização) e apresentamos o React Native sob a nova JSI — JS rodando em runtime nativo via interface C++, sem bridge serializada.

O fio condutor é o padrão MVVM: Model (tipos + fetch), ViewModel (custom hook com estado e ações) e View (componente que só consome o hook). A aula foca em uma mão na massa prática onde cada aluno iniciará seu primeiro aplicativo React Native seguindo um tutorial base, usando IA para acelerar a construção de uma POC rápida do frontend que será apresentada no fim da aula.

Objetivos de aprendizagem

  • OA-1Justificar a escolha mobile-first em um sistema de recomendação, citando contexto de uso e restrições.
  • OA-2Explicar a arquitetura do React Native (JSI, Hermes, componentes nativos) e diferenciá-lo de Flutter.
  • OA-3Aplicar o padrão MVVM em React Native, separando Model, ViewModel (hook) e View.
  • OA-4Implementar uma tela com FlatList, pull-to-refresh, loading e error usando o hook como única fonte de estado.
  • OA-5Decidir a estratégia de estado, navegação e cache adequada à complexidade da tela (useState → Zustand).
  • OA-6Conectar a tela mobile ao endpoint GET /recommendations/:userId?k=10 desenhado na aula 3.

Pré-requisitos

  • Aula 5 concluída: discussão de transactions e triggers fechada; backend do grupo expõe ao menos um endpoint de leitura.
  • Expo Go instalado no celular pessoal e projeto vazio criado com npx create-expo-app rodando antes da aula.
  • Vocabulário base de React (componentes funcionais, useState, useEffect) revisado.

Cronograma do dia

📚 Bloco 1 · Autoestudo

10h00 — 12h00

Estudo individual focado no primeiro app React Native e no padrão MVVM.

🎓 Bloco 2 · Instrução PE — Aula em metodologia ativa

14h00 — 16h00

Encontro síncrono com o professor especialista.

  • 14h00 — 14h15 · Daily.
  • 14h15 — 14h55 · Teoria + Mão na massa (Tutorial React Native + POC com IA).
  • 14h55 — 16h00 · Atividade prática individual em sala.

🍴 Intervalo · Almoço

12h00 — 14h00

Janela livre.

🛠️ Bloco 3 · Desenvolvimento do projeto

16h00 — 18h00

Janela de trabalho da equipe.

  • Finalizar o MR feat/espetaculos-mvvm aberto na atividade prática.
  • Integrar a tela do MVVM no fluxo de navegação principal do app (Stack/Tab).
  • Refatorar mocks remanescentes para o endpoint real do backend do grupo.
  • Esboçar a próxima ViewModel (ex.: useDetalheEspetaculoViewModel) a ser usada na aula 7 com TDD.

Detalhamento da instrução PE (14h00 — 16h00)

14h00
14h15

DailyDaily de abertura

Cada aluno apresenta em 1 minuto: 1 app mobile que admiro / 1 problema do MVC que MVVM resolve / 1 dúvida concreta sobre custom hooks.

14h15
14h25

TalkMobile-first em recomendação

Exposição rápida (10 min) sobre contexto de uso (sessão curta, push, geolocalização) e restrições (bateria, rede instável). Estatísticas de tráfego mobile e impacto em decisões de arquitetura.

14h25
14h35

TalkReact Native em 1 slide

O que é, JSI/Hermes, componentes nativos. Comparação rápida com Flutter (componentes nativos vs canvas Skia). Exemplo mínimo de <View><Text>.

14h35
14h45

TalkMVVM · o padrão

Diagrama View ⇄ ViewModel → Model. Comparação com MVC. Por que o custom hook é o ViewModel natural em React funcional. Critério de qualidade: View sem fetch, Model sem useState.

14h45
14h55

Hands-onPOC Rápida com Expo

Agora todos devem seguir este tutorial Primeiro app com React Native para iniciarmos o primeiro aplicativo. Cada pessoa faz o seu utilizando IA para ganhar velocidade e apresenta uma POC rápida de como deve ser o frontend da aplicação ao final.

14h55
16h00

AtivaAtividade prática · MR individual

Cada aluno reproduz a estrutura no repositório do app mobile do grupo, na branch feat/espetaculos-mvvm. Mock se backend ainda não estiver pronto. Screenshot do Expo Go anexado no MR. Mesmo se ficar parcial, abrir o MR com prefixo WIP:.

Estratégias de metodologia ativa

  • 3 arquivos como contrato — a turma sai com a regra "1 tela = 1 Model + 1 hook + 1 view"; toda discussão arquitetural posterior se ancora nesse triplet.
  • Hands-on com IA e POCs Rápida — Os alunos se engajam ativamente construindo a tela com IA guiados pelo tutorial em tempo real, em vez de assistir passivamente. A apresentação da POC consolida o aprendizado.
  • MR como artefato de aprendizagem — abrir um MR mesmo parcial obriga o aluno a parar, refletir e nomear o que fez. O code review do colega/professor é o feedback formativo.
Princípio orientador

MVVM não é cerimônia: é separar dados, estado e UI em arquivos diferentes. Se a View tem fetch ou o Model tem useState, o padrão quebrou.

Recursos e ferramentas

CategoriaRecursoUso
Slidesslides/slide-lesson-6.htmlExposição na instrução PE
Materialmaterials/lesson-6-material.htmlAutoestudo
LinguagemTypeScript + React NativeImplementação MVVM
RuntimeExpo Go (iOS/Android)Execução no celular do aluno
BibliotecasReact Navigation · TanStack Query · AsyncStorageApoio em estado, navegação e cache
RepositórioApp mobile do grupo · branch feat/espetaculos-mvvmEntrega da atividade

Verificação de aprendizagem

  • CR-1Justificou em par 1 motivo concreto para mobile-first no domínio do parceiro Aventura.
  • CR-2Implementou os 3 arquivos (model/, viewmodels/, views/) com a separação correta de responsabilidades.
  • CR-3FlatList com pull-to-refresh, ActivityIndicator no loading e mensagem amigável no error funcionando no Expo Go.
  • CR-4Abriu Merge Request individual no repositório do grupo com screenshot do Expo Go anexado.
  • CR-5(⭐ Excelência) Implementou paginação infinita ou cache offline com AsyncStorage.
Critério mínimo

Aluno que sair às 16h sem MR aberto (mesmo parcial, com WIP:) está em débito técnico para a aula 7 — o hook que ele criar agora será o alvo dos testes TDD da próxima sessão.

Conexão com a aula 7

A aula 7 entra em Orientação a Objetos com TDD — escrever os testes antes do código. O ViewModel que você acabou de criar é o primeiro candidato: testá-lo isoladamente (sem montar a UI) é exatamente o que MVVM promete e o que o ciclo red-green-refactor vai exercitar na próxima sessão.

  • O hook useEspetaculosViewModel vira o sujeito do primeiro teste TDD.
  • Modelagem em classes vs hooks: quando vale a pena cada abordagem.
  • Mocks de Model permitem testar a ViewModel sem rede e sem UI.
Para o autoestudo da aula 7

Antes das 10h: ler material da aula 7, instalar Jest no projeto mobile (npm i -D jest @testing-library/react-native) e revisar o ciclo red-green-refactor.

← Voltar ao Módulo
Inteli Logo