Programação Web e Mobile
Sobre esta Disciplina
Uma aplicação moderna raramente é um programa só: é um serviço que expõe dados e regras de negócio, consumido por vários clientes — navegador, celular e, às vezes, outros serviços. Esta disciplina trata exatamente dessa divisão de trabalho: como projetar o serviço, como acessar a base de dados por trás dele e como construir clientes web e mobile que compartilham o mesmo backend.
O percurso é organizado em três frentes, integradas por um estudo de caso único desenvolvido ao longo do semestre:
- Arquitetura de serviços — API REST com NestJS (TypeScript) e acesso a base de dados relacional.
- Frontend web — interface com React e Next.js.
- Mobile multiplataforma — aplicativo em Flutter (Dart), consumindo o mesmo backend.
O fio condutor é a ideia de multiplataforma: um único conjunto de serviços, contratos de API bem definidos e clientes distintos construídos sobre eles.
O conteúdo publicado aqui complementa as aulas presenciais e não substitui o plano de ensino oficial da disciplina. A bibliografia oficial, o enunciado do estudo de caso, prazos e critérios de avaliação são divulgados pelos canais oficiais da turma.
Ementa
Introdução ao desenvolvimento de aplicativos web e mobile. Características, arquiteturas, linguagens e frameworks para desenvolvimento de aplicativos multiplataforma. Arquitetura de serviços e acesso a conteúdos em bases de dados. Implementação de aplicativos baseados em estudo de caso.
Conteúdo Programático
- Características das aplicações web e mobile: modelo cliente-servidor, HTTP, ciclo de vida e restrições de cada plataforma
- Estratégias de desenvolvimento mobile: nativo, híbrido, cross-platform compilado e web app
- Arquiteturas de aplicações multiplataforma: separação backend/frontend, contratos de API e compartilhamento de código
- Linguagens e ecossistemas: TypeScript no backend e no frontend web, Dart no mobile
- Arquitetura de serviços: API REST, modularização, injeção de dependência, validação e tratamento de erros
- Acesso a conteúdos em bases de dados: modelagem, ORM, migrações e consultas
- Autenticação, autorização e proteção de rotas em clientes web e mobile
- Interface web com React e Next.js: componentes, estado, roteamento e estratégias de renderização
- Aplicativos mobile com Flutter: widgets, navegação, gerência de estado, consumo de serviços e recursos do dispositivo
- Qualidade e entrega: testes automatizados, containers e publicação
- Implementação de um estudo de caso integrando backend, web e mobile
Aulas
A grade abaixo é o mapa do semestre. As páginas são publicadas incrementalmente — as aulas marcadas como em construção ainda não têm material próprio no site e são conduzidas em aula.
Módulo 1 — Introdução
| # | Aula | Ementa | Status |
|---|---|---|---|
| 01 | Introdução ao desenvolvimento web e mobile | Características das aplicações web e mobile, modelo cliente-servidor, HTTP, front-end × back-end, o que muda no mobile (rede, bateria, ciclo de vida, distribuição por loja) | ✅ Disponível |
| 02 | Arquiteturas e frameworks multiplataforma | Arquitetura acoplada × desacoplada; nativo × híbrido × cross-platform × web app; critérios de escolha; a arquitetura da disciplina (um serviço, dois clientes); ambiente de desenvolvimento e ferramentas | ✅ Disponível |
| 03 | TypeScript para backend e frontend | JavaScript moderno essencial, sistema de tipos, narrowing, generics, utility types, classes, parameter properties, decorators e tsconfig.json | ✅ Disponível |
Módulo 2 — APIs REST com NestJS
| # | Aula | Ementa | Status |
|---|---|---|---|
| 04 | Introdução a APIs REST | O que é uma API, estilos arquiteturais, HTTP, restrições REST, recursos e URIs, verbos, códigos de status, representações JSON, erros, paginação, versionamento e OpenAPI | ✅ Disponível |
| 05 | Introdução ao NestJS | TypeScript aplicado ao backend, módulos como fronteira de visibilidade, controllers, providers, injeção de dependência e o pipeline de requisição | ✅ Disponível |
| 06 | API REST com NestJS | DTOs e class-validator, ValidationPipe global, CRUD completo, filtro de exceções, paginação e filtros, serialização de saída e OpenAPI | ✅ Disponível |
| 07 | Persistência com Prisma — ferramenta e migrations | O que um ORM resolve, arquitetura em camadas, ciclo de migrations e PrismaService como provider injetável | ✅ Disponível |
| 08 | Modelagem de relacionamentos com Prisma | Os seis tipos de relacionamento, um a um: 1:N obrigatório e opcional, N:N implícito, junção explícita, 1:1 e auto-relacionamento, com as estratégias de onDelete e uma migration por tipo | ✅ Disponível |
| 09 | Consultas, transações e seed | Consultas com include/select, problema N+1, mapeamento completo de erros do Prisma, transações e seed reprodutível | ✅ Disponível |
| 10 | Autenticação e autorização no serviço | Autenticação com JWT, guards, perfis de acesso e proteção dos recursos da API | ✅ Disponível |
Módulo 3 — Frontend com Next.js
| # | Aula | Ementa | Status |
|---|---|---|---|
| 11 | Introdução ao Next.js | O que um framework acrescenta ao React, fronteira entre servidor e cliente, App Router e roteamento por sistema de arquivos, arquivos especiais e o ciclo de desenvolvimento | ✅ Disponível |
| 12 | Fundamentos de React | Componentes, props, estado, eventos, composição e onde o estado mora | ✅ Disponível |
| 13 | Dados da API | Chamadas à API pelo servidor e pelo navegador, layouts aninhados, estados de carregamento e erro, estratégias de renderização e CORS | ✅ Disponível |
| 14 | Formulários e cache | Estado na URL, paginação, Server Actions com useActionState/useFormStatus, desfechos de uma escrita e cache com revalidate/updateTag | ✅ Disponível |
| 15 | Sessão, rotas protegidas e publicação | Login no cliente web, sessão, rotas protegidas e build/publicação da aplicação | 🚧 Em construção |
Módulo 4 — App com Flutter
| # | Aula | Ementa | Status |
|---|---|---|---|
| 16 | Introdução a Dart e Flutter | Linguagem Dart, árvore de widgets, layout e hot reload | 🚧 Em construção |
| 17 | Navegação e gerência de estado | Telas e rotas, formulários e padrões de gerência de estado no Flutter | 🚧 Em construção |
| 18 | Consumo de serviços no mobile | Cliente HTTP, serialização JSON, tratamento de falhas de rede e cache local | 🚧 Em construção |
| 19 | Recursos do dispositivo e distribuição | Acesso a recursos nativos via plugins, permissões, build Android/iOS e distribuição | 🚧 Em construção |
Módulo 5 — Estudo de Caso e Entrega
| # | Aula | Ementa | Status |
|---|---|---|---|
| 20 | Estudo de caso integrador | Requisitos, arquitetura da solução, contratos de API e integração backend + web + mobile | 🚧 Em construção |
| 21 | Qualidade, testes e entrega | Testes automatizados nas três frentes, containers, observabilidade básica e publicação | 🚧 Em construção |
Extras — Material complementar
Páginas de aprofundamento, fora da sequência de aulas. Nenhuma delas é pré-requisito de nada: existem para o momento em que o assunto vira dúvida.
| # | Página | Ementa | Status |
|---|---|---|---|
| A | Assincronismo em TypeScript | Modelo de execução e event loop, callbacks, Promises, async/await, sequencial × concorrente, combinadores, tempo limite e cancelamento, tipagem do código assíncrono e iteração assíncrona | ✅ Disponível |
| B | Consumo de APIs com fetch e axios | Leitura e escrita autenticada, os três desfechos de uma chamada, corpo e Content-Type, tempo limite e cancelamento, cliente configurado com interceptors, tipagem da resposta, fetch e axios no Next.js e o custo de uma dependência | ✅ Disponível |
Como Usar Este Material
- Não pule o Módulo 1: as três aulas montam a base de tudo o que vem depois — o vocabulário (01), as decisões de arquitetura (02) e a linguagem (03). A aula 03 continua útil como referência durante o semestre inteiro.
- Siga a ordem dos módulos: o backend vem primeiro porque os dois clientes consomem os serviços construídos nele.
- Construa um projeto só: cada módulo acrescenta uma camada ao mesmo estudo de caso, em vez de exemplos isolados.
- Compare as plataformas: ao implementar a mesma funcionalidade na web e no mobile, registre o que muda e o que se repete — é aí que o conceito de multiplataforma fica concreto.
- Faça os checkpoints: cada aula publicada traz exercícios curtos para verificar compreensão.
- Confira o que foi combinado em aula: o enunciado do estudo de caso, os prazos e a forma de entrega são definidos pelo professor da turma.
Ambiente Sugerido
Os exemplos desta disciplina são executáveis: cada aula indica os passos mínimos para rodar o código apresentado.
| Ferramenta | Versão sugerida | Uso |
|---|---|---|
| Node.js | 22 LTS ou superior | Runtime do backend e do frontend web |
| npm ou pnpm | versão que acompanha o Node | Gerenciamento de pacotes |
| NestJS | 11.x | Backend / arquitetura de serviços |
| Prisma ORM | 7.x | Acesso à base de dados (exige @prisma/adapter-pg) |
| React | 19.2 | Biblioteca de interface web |
| Next.js | 16.x (App Router) | Framework web; exige Node 20.9 ou superior |
| Flutter (com Dart) | 3.x | Aplicativo mobile |
| PostgreSQL | 16 ou superior | Base de dados do estudo de caso |
| Docker | versão estável atual | Base de dados local e empacotamento |
| Android Studio / Xcode | conforme a plataforma alvo | Emulador/simulador e build mobile |
Node, NestJS, Next.js e Flutter têm ciclos de release rápidos. As versões acima são o ponto de partida; a combinação efetivamente adotada na turma é confirmada na primeira aula.
Documentação oficial
Referências principais, para consulta durante todo o semestre:
- NestJS — documentação oficial
- Prisma ORM — documentação oficial (confirme que a página se refere à versão 7)
- React — documentação oficial
- Next.js — documentação oficial (confirme que a página se refere à versão 16)
- Flutter e Dart — documentação oficial
- MDN Web Docs — referência de HTTP, HTML, CSS e JavaScript
Pré-Requisitos
- Algoritmos e Programação — lógica, estruturas de dados e programação (obrigatório)
- Programação orientada a objetos em alguma linguagem (Java, C#, Python ou similar)
- Noções de banco de dados relacional e SQL
- Familiaridade com Git e linha de comando
Se você cursou Programação Web Java, muito do que aprendeu transfere direto: injeção de dependência, API REST, mapeamento objeto-relacional e validação reaparecem aqui, com outra stack. Vale comparar as duas abordagens — o padrão é o mesmo, a sintaxe e o ecossistema mudam.