RicardoTecPro

projetos2

Leitura de 8 min

Listas de Tarefas v5.0

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.

  • 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:
      1. Usar o Spring Initializr (start.spring.io) para criar o projeto.
      2. Dependências: Spring Web, Spring Data JPA, H2 Database (banco de dados em memória, para simplificar), Lombok (para reduzir código boilerplate).
      3. Criar um RestController simples que retorna uma saudação.
      4. 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:
      1. Criar a classe Tarefa.java.
      2. Anotá-la com @Entity para que o JPA a reconheça como uma tabela no banco.
      3. Definir os atributos: id (@Id, @GeneratedValue), descricao (String), concluida (boolean).
      4. Criar a interface TarefaRepository.java que estende JpaRepository<Tarefa, Long>.
      5. 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.

  • 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:
      1. Criar a classe TarefaService.java. Injetar o TarefaRepository e criar métodos para listarTodas(), criar(), atualizar(), deletar(). Aqui pode ir a lógica de negócio (ex: não permitir descrição vazia).
      2. Criar a classe TarefaController.java com a anotação @RestController.
      3. Injetar o TarefaService.
      4. 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()
      5. Reforçar: O TarefaController é o Controller do nosso backend. Ele orquestra as requisições.

  • Aula 6: Testando e Validando a API

    • Conceitos: A importância de testar a API de forma isolada.
    • Prática:
      1. Usar o Postman/Insomnia para fazer requisições a todos os endpoints criados.
      2. CREATE: Fazer um POST para /tarefas com um JSON no corpo: { "descricao": "Aprender Spring Boot" }.
      3. READ: Fazer um GET para /tarefas e ver a lista. Fazer um GET para /tarefas/1.
      4. UPDATE: Fazer um PUT para /tarefas/1 com o corpo: { "descricao": "Aprender muito Spring Boot", "concluida": true }.
      5. DELETE: Fazer um DELETE para /tarefas/1.
      6. 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:
      1. Criar o projeto com ng new todo-list-web.
      2. Analisar a estrutura de pastas (src/app).
      3. 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

  • Aula 8: Conectando Angular ao Backend

    • Conceitos: HttpClient para requisições HTTP, Observable para programação assíncrona.
    • Prática:
      1. Definir a interface task.ts para espelhar o modelo Tarefa.java.
      2. No task.service.ts, injetar o HttpClient.
      3. 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>).
      4. Importar o HttpClientModule no app.module.ts.

  • Aula 9: Construindo a View e o Controller (Component)

    • Conceitos: Data Binding ([], (), [()]), Diretivas (*ngFor, *ngIf).
    • Prática:
      1. 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.
      2. 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.

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:
      1. Criar um novo projeto Maven/Gradle.
      2. Adicionar as dependências do JavaFX.
      3. 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:
      1. Usar o Scene Builder para criar a interface main-view.fxml.
      2. Arrastar e soltar um TableView para listar as tarefas, um TextField para a nova tarefa e botões para “Adicionar”, “Atualizar” e “Deletar”.
      3. No painel do Scene Builder, associar o FXML a uma classe Controller (ex: MainViewController.java).
      4. Atribuir fx:id aos componentes que precisarão ser manipulados no código (a tabela, o campo de texto).
      5. Definir os métodos onAction para os botões (ex: onAdicionarButtonClick). Este arquivo FXML é a nossa View.

  • 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:
      1. Criar a classe MainViewController.java (nosso Controller do desktop).
      2. Usar a anotação @FXML para injetar os componentes da View (o TableView, etc.).
      3. 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).
      4. No MainViewController, injetar o ApiConsumerService.
      5. Implementar os métodos onAction dos botões. Eles chamarão o serviço para interagir com a API e, em seguida, atualizarão a TableView.
      6. Ponto importante: Atualizações da UI a partir de threads secundárias (como a de rede) devem usar Platform.runLater().

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).

ricardotecpro.github.io

Visão de gráfico

Backlinks