Desenvolvimento Full-Stackcom Java: Construindo um To-Do List
Objetivo Geral: Ao final do curso, o aluno será capaz de projetar, desenvolver e integrar uma aplicação completa seguindo o padrão arquitetural MVC. Ele dominará a criação de um backend RESTful com Spring Boot, o consumo dessa API por um cliente web moderno com Angular e por um cliente desktop nativo com JavaFX.
Pré-requisitos:
- Lógica de programação.
- Conhecimentos básicos de Orientação a Objetos (Classes, Objetos, Herança, Polimorfismo).
- Conhecimentos básicos de Java.
- Noções de HTML, CSS e JavaScript são um diferencial, mas não estritamente necessárias.
Diagrama da Arquitetura Final:
+------------------+ +---------------------+ +-----------------+
| | | | | |
| Frontend Web | | Backend (API) | | Frontend Desktop|
| (Angular) | | (Spring Boot) | | (JavaFX) |
| | | | | |
+--------+---------+ +----------+----------+ +--------+--------+
| | |
+---------------------------+---------------------------+
|
Comunicação via
HTTP (JSON)
|
+----------+----------+
| |
| Banco de Dados |
| (H2) |
| |
+---------------------+
Módulo 0: Fundamentos e Configuração do Ambiente
Objetivo: Nivelar a turma nos conceitos chave e garantir que todos tenham o ambiente de desenvolvimento pronto.
-
Aula 1: A Arquitetura da Nossa Aplicação
- Conceitos:
- CRUD: O que significa Create, Read, Update, Delete? Usar analogias (agenda de contatos, posts em redes sociais).
- API REST: O que é uma API? O conceito de “garçom” que busca e entrega dados. Verbos HTTP (
GET
,POST
,PUT
,DELETE
) e seus significados no CRUD. Formato de dados JSON. - Padrão MVC (Model-View-Controller): A importância de separar responsabilidades.
- Model: A representação dos dados (ex: uma “Tarefa”).
- View: A camada de apresentação (a tela que o usuário vê).
- Controller: O cérebro que recebe as interações do usuário, aciona o Model e atualiza a View.
- Prática: Desenhar o diagrama da arquitetura no quadro/slide.
- Conceitos:
-
Aula 2: Preparando as Ferramentas
- Conceitos: Ecossistema de desenvolvimento Java e Web.
- Prática: Guia de instalação passo a passo:
- JDK (Java Development Kit): Versão 17 ou superior.
- IDE (Ambiente de Desenvolvimento Integrado): IntelliJ IDEA Community ou VS Code com extensões Java.
- Maven ou Gradle: Gerenciador de dependências do Java.
- Node.js e npm: Para o ambiente Angular.
- Angular CLI:
npm install -g @angular/cli
- Postman/Insomnia: Ferramenta para testar a API REST.
- Scene Builder: Ferramenta visual para criar as telas em JavaFX.
Módulo 1: Construindo o Coração da Aplicação - Backend com Spring Boot
Objetivo: Criar a API REST completa que servirá como base para os clientes web e desktop.
-
Aula 3: “Hello, World!” com Spring Boot
- Conceitos: Inversão de Controle e Injeção de Dependências. Estrutura de um projeto Spring Boot.
- Prática:
- Usar o Spring Initializr (start.spring.io) para criar o projeto.
- Dependências:
Spring Web
,Spring Data JPA
,H2 Database
(banco de dados em memória, para simplificar),Lombok
(para reduzir código boilerplate). - Criar um
RestController
simples que retorna uma saudação. - Executar o projeto e acessar a rota no navegador.
-
Aula 4: A Camada Model e Repository (M do MVC)
- Conceitos: Mapeamento Objeto-Relacional (ORM) com JPA. Entidades e Repositórios.
- Prática:
- Criar a classe
Tarefa.java
. - Anotá-la com
@Entity
para que o JPA a reconheça como uma tabela no banco. - Definir os atributos:
id
(@Id
,@GeneratedValue
),descricao
(String
),concluida
(boolean
). - Criar a interface
TarefaRepository.java
que estendeJpaRepository<Tarefa, Long>
. - Explicar que o Spring Data JPA criará magicamente os métodos CRUD para nós (find, save, delete, etc.). Este é o nosso Model, a camada de acesso e representação dos dados.
- Criar a classe
-
Aula 5: A Camada Controller e Service (C do MVC)
- Conceitos: Separação entre a camada de API (Controller) e a camada de Regras de Negócio (Service).
- Prática:
- Criar a classe
TarefaService.java
. Injetar oTarefaRepository
e criar métodos paralistarTodas()
,criar()
,atualizar()
,deletar()
. Aqui pode ir a lógica de negócio (ex: não permitir descrição vazia). - Criar a classe
TarefaController.java
com a anotação@RestController
. - Injetar o
TarefaService
. - Mapear os endpoints da API para os métodos do Service:
@GetMapping("/tarefas")
->listarTodas()
@PostMapping("/tarefas")
->criar()
@PutMapping("/tarefas/{id}")
->atualizar()
@DeleteMapping("/tarefas/{id}")
->deletar()
@GetMapping("/tarefas/{id}")
->buscarPorId()
- Reforçar: O
TarefaController
é o Controller do nosso backend. Ele orquestra as requisições.
- Criar a classe
-
Aula 6: Testando e Validando a API
- Conceitos: A importância de testar a API de forma isolada.
- Prática:
- Usar o Postman/Insomnia para fazer requisições a todos os endpoints criados.
- CREATE: Fazer um
POST
para/tarefas
com um JSON no corpo:{ "descricao": "Aprender Spring Boot" }
. - READ: Fazer um
GET
para/tarefas
e ver a lista. Fazer umGET
para/tarefas/1
. - UPDATE: Fazer um
PUT
para/tarefas/1
com o corpo:{ "descricao": "Aprender muito Spring Boot", "concluida": true }
. - DELETE: Fazer um
DELETE
para/tarefas/1
. - Resolver o problema de CORS adicionando a anotação
@CrossOrigin
no Controller para permitir que o frontend (em outra porta) acesse a API.
Módulo 2: A Interface Web com Angular
Objetivo: Construir uma interface web reativa que consome a API Spring Boot.
-
Aula 7: Estrutura do Projeto Angular
- Conceitos: Single Page Application (SPA), Componentes, Services, Módulos.
- Prática:
- Criar o projeto com
ng new todo-list-web
. - Analisar a estrutura de pastas (
src/app
). - Gerar os componentes e serviços necessários via Angular CLI:
ng generate component task-list
ng generate service services/task
ng generate interface models/task
- Criar o projeto com
-
Aula 8: Conectando Angular ao Backend
- Conceitos:
HttpClient
para requisições HTTP,Observable
para programação assíncrona. - Prática:
- Definir a interface
task.ts
para espelhar o modeloTarefa.java
. - No
task.service.ts
, injetar oHttpClient
. - Criar métodos no serviço para cada operação CRUD, que chamarão a nossa API Spring Boot (ex:
getTasks(): Observable<Task[]>
,addTask(task: Task): Observable<Task>
). - Importar o
HttpClientModule
noapp.module.ts
.
- Definir a interface
- Conceitos:
-
Aula 9: Construindo a View e o Controller (Component)
- Conceitos: Data Binding (
[]
,()
,[()]
), Diretivas (*ngFor
,*ngIf
). - Prática:
- No
task-list.component.ts
(nosso Controller do frontend):- Injetar o
TaskService
. - Criar métodos para carregar, adicionar, remover e atualizar tarefas, que chamarão os métodos do serviço.
- Manter um array de tarefas como estado do componente.
- Injetar o
- No
task-list.component.html
(nossa View):- Criar um formulário com um campo de input para a nova tarefa. Usar
[(ngModel)]
para fazer o two-way data binding. - Criar um botão “Adicionar” que chama o método de adicionar do componente.
- Usar a diretiva
*ngFor
para iterar sobre o array de tarefas e exibir cada uma em uma lista. - Em cada item da lista, adicionar botões “Deletar” e um checkbox para “Concluir”, que chamarão os respectivos métodos no componente, passando o ID da tarefa.
- Criar um formulário com um campo de input para a nova tarefa. Usar
- No
- Conceitos: Data Binding (
Módulo 3: A Interface Desktop com JavaFX
Objetivo: Provar a flexibilidade da API REST, criando um segundo cliente, desta vez para desktop, com JavaFX.
-
Aula 10: Configurando o Projeto JavaFX
- Conceitos: Plataforma JavaFX, FXML para separação de UI e lógica.
- Prática:
- Criar um novo projeto Maven/Gradle.
- Adicionar as dependências do JavaFX.
- Introduzir o Scene Builder para desenhar a interface.
-
Aula 11: Desenhando a View com FXML e Scene Builder
- Conceitos: Componentes de UI do JavaFX (
TableView
,TextField
,Button
). - Prática:
- Usar o Scene Builder para criar a interface
main-view.fxml
. - Arrastar e soltar um
TableView
para listar as tarefas, umTextField
para a nova tarefa e botões para “Adicionar”, “Atualizar” e “Deletar”. - No painel do Scene Builder, associar o FXML a uma classe
Controller
(ex:MainViewController.java
). - Atribuir
fx:id
aos componentes que precisarão ser manipulados no código (a tabela, o campo de texto). - Definir os métodos
onAction
para os botões (ex:onAdicionarButtonClick
). Este arquivo FXML é a nossa View.
- Usar o Scene Builder para criar a interface
- Conceitos: Componentes de UI do JavaFX (
-
Aula 12: O Controller JavaFX e a Comunicação com a API
- Conceitos:
HttpClient
do Java para consumir a API REST. Deserialização de JSON para Objetos Java com a biblioteca Jackson. - Prática:
- Criar a classe
MainViewController.java
(nosso Controller do desktop). - Usar a anotação
@FXML
para injetar os componentes da View (oTableView
, etc.). - Criar uma classe de serviço,
ApiConsumerService.java
, responsável por toda a comunicação com a API Spring Boot.- Este serviço usará o
java.net.http.HttpClient
para fazer as requisições GET, POST, PUT, DELETE. - Usará a biblioteca Jackson para converter o JSON da resposta em objetos
Tarefa.java
(reaproveitar a mesma classe do backend é uma boa prática aqui).
- Este serviço usará o
- No
MainViewController
, injetar oApiConsumerService
. - Implementar os métodos
onAction
dos botões. Eles chamarão o serviço para interagir com a API e, em seguida, atualizarão aTableView
. - Ponto importante: Atualizações da UI a partir de threads secundárias (como a de rede) devem usar
Platform.runLater()
.
- Criar a classe
- Conceitos:
Módulo 4: Conclusão e Próximos Passos
-
Aula 13: Revisão Geral e Boas Práticas
- Revisar o fluxo completo: Interação na View (Angular/JavaFX) -> Chamada ao Controller (Component/JavaFX Controller) -> Chamada ao Service (Angular/API Consumer) -> Requisição HTTP -> Controller do Backend (Spring) -> Service do Backend -> Repository -> Banco de Dados.
- Discutir melhorias: tratamento de erros, validação de dados (
@Valid
no Spring), feedback visual para o usuário (loading, mensagens de sucesso/erro).
-
Aula 14: Para Onde Ir Agora?
- Conceitos: Autenticação e Autorização com Spring Security e JWT.
- Prática: Breve demonstração de como proteger a API.
- Tópicos Futuros:
- Deployment: Empacotar a aplicação em um JAR, usar Docker.
- Bancos de dados mais robustos (PostgreSQL, MySQL).
- Testes unitários e de integração.
- CI/CD (Integração Contínua/Entrega Contínua).