BootCamp Spring React
Status:: concluído
Horas aula:: 160:00, 160:00
Habilidades:: Java, SpringBoot, React, TDD, JUnit, Webdesigner,
Prof. Nelio Alves - Devsuperior: Escola de Programação
BootCamp SpringBoot
Desafios de projeto:
01 CRUD
- 01-01 Visão geral do capítulo
- 01-02 Visão geral do ecossistema Spring
- 01-03 Aviso sobre o processo de desenvolvimento
- 01-04 Visão geral do app dscatalog
- 01-05 Instalação das ferramentas
- 01-06 Criação do projeto Spring Boot
- 01-07 Salvando o projeto no Github
- 01-08 Classe Category
- 01-09 Category Resource
- 01-10 Observações importantes sobre o sistema
- 01-11 Banco de dados H2, camadas
- 01-12 Transações e sessão JPA
- 01-13 Seeding da base de dados
- 01-14 DTO
- 01-15 Criando um ambiente de execução no Postman
- 01-16 Buscando categoria por id
- 01-17 Tratamento de exceções
- 01-18 Inserindo nova categoria com POST
- 01-19 Atualizando categoria com PUT
- 01-20 Deletando categoria com DELETE
- 01-21 Dados de auditoria
- 01-22 Paginação
- 01-23 Entidade Product, revisão modelo relacional N-N
- 01-24 Mapeamento JPA N-N, script SQL completo
- 01-25 ProductDTO
- 01-26 Product repository, service, resource, GET
- 01-27 Product insert, update, delete
- 01-28 Apresentando o trabalho final do capítulo
02 Testes automatizados
- 02-01 Visão geral do capítulo
- 02-02 Tipos de teste
- 02-03 Benefícios dos testes automatizados
- 02-04 O que é TDD
- 02-05 Boas práticas para testes
- 02-06 Visão geral do JUnit
- 02-07 Primeiro teste na prática com JUnit
- 02-08 Observação sobre TDD
- 02-09 Teste deposito deveria fazer nada quando quantia for negativa
- 02-10 Padrão de projeto Factory para instanciar objetos
- 02-11 Teste saque total deveria limpar saldo e retornar todo saldo
- 02-12 Testes para método withdraw
- 02-13 Exercício JUnit vanilla
- 02-14 Baixando o projeto do capítulo 1 (se precisar)
- 02-15 Refatoração no Pageable
- 02-16 Visão geral de testes com Spring, principais annotations
- 02-17 Primeiro teste de repository
- 02-18 Testando outro cenário do delete
- 02-19 Fixtures no JUnit, BeforeEach
- 02-20 Testando save com id nulo
- 02-21 Exercício com repository
- 02-22 Começando testes de ProductService, Mockito vs MockBean
- 02-23 Primeiro teste, simulando comportamento com Mockito
- 02-24 Imports estáticos do Mockito
- 02-25 Teste delete lança ResourceNotFoundException quando id não existe
- 02-26 Teste delete lança DatabaseException quando id dependente
- 02-27 Simulando comportamentos diversos com Mockito
- 02-28 Testando findAllPaged do ProductService
- 02-29 Exercício testes de unidade com Mockito
- 02-30 Começando testes na camada web
- 02-31 Legibilidade e negociação de conteúdo
- 02-32 Testando o findById
- 02-33 Testando o update
- 02-34 Simulando outros comportamentos do ProductService
- 02-35 Exercício testes na camada web
- 02-36 Nosso primeiro teste de integração
- 02-37 Teste de integração para findAllPaged
- 02-38 Teste de integração na camada web findAll
- 02-39 Teste de integração na camada web update
- 02-40 Apresentando o desafio TDD resolvido
- 02-41 Implementando o desafio resolvido
- 02-42 Desafio TDD para entregar
- TAREFA: TDD Event-City
03 - Validação e segurança
- 03-01-3 Visão geral do capítulo
- 03-02 Baixando o projeto pronto ao final deste capítulo
- 03-03 Baixando o projeto do capítulo anterior (se precisar)
- 03-04 Implementando entidades User e Role
- 03-05 Mapeamentos objeto-relacional, seed do banco
- 03-06-8 CRUD de usuários
- 03-07 CRUD de usuários Classe de configuração - componentes @ Bean Spring Security - senha
- 03-08 CRUD de usuários UserRespository (controller)
- 03-09 Introdução ao Bean Validation
- 03-10 Testando anotações básicas
- 03-11,12 Tratando exceção MethodArgumentNotValidException
- 03-12 Resposta customizada para erro de validação
- 03-13 Implementando um ConstraintValidator customizado
- 03-14,15 UserUpdateValidator
- 03-15 UserUpdateValidator
- 03-16 Token JWT, autenticação e autorização
- 03-17 OAuth2
- 03-18 Como funciona o processo de login
- 03-19 Checklist do Spring Security
- 03-20 Checklist do Spring OAuth e JWT
- 03-21 Ajustando o arquivo pom.xml
- 03-22 Implementando checklist do Spring Security
- 03-23 Implementando OAuth2 authorization server
- 03-24 Externalizando configuração, variáveis de ambiente
- 03-25 Adicionando informações ao token
- 03-26 Implementando OAuth2 resource server
- 03-27 Configuração especial para o banco H2
- 03-28 Deixando o Postman top
- 03-29 Spoiler - próximos tópicos de autenticação e autorização
- 03-30 Apresentando o desafio resolvido
- 03-31 Reaproveitando a infraestrutura do DSCatalog
- 03-32 Implementando as funcionalidades
- 03-33 Desafio para entregar
- 03-34 Opcional: atualização para Spring Boot 2.7.3
- TAREFA: Validação e segurança
04 - Domínio e ORM, autorizações
- 04-01 Visão geral do capítulo
- 04-02 Visão geral do sistema DSLearn
- 04-03 Baixando o projeto pronto (opcional)
- 04-04 Setup do projeto DSLearn
- 04-05 User, Role
- 04-06 Course
- 04-07 Offer
- 04-08 Resource
- 04-09 Section
- 04-10 Enrollment, EnrollmentPK
- 04-11 Enrollment seed
- 04-12 Correção - Offer sem timezone
- 04-13 Lesson, Content, Task
- 04-14 Lesson seed, correção - lessonsDone
- 04-15 Restante da implementação, clone do projeto
- 04-16 Correções adicionais no código
- 04-17 Últimas considerações sobre o projeto do Github
- 04-18 Preparando para a segunda parte do capítulo - autorizações
- 04-19 Criando os repositories
- 04-20 Incluindo exceções, validação e segurança ao projeto
- 04-21 Busca de usuário por id
- 04-22 Autorização customizada em nível de serviço PARTE 1
- 04-23 Autorização customizada em nível de serviço PARTE 2
- 04-24 Conteúdo customizado para usuário logado
- 04-25 Refresh token
- 04-26 Pré-autorizando métodos por perfil de usuário
- 04-27 Desafio para entregar
- TAREFA: MovieFlix domínio e autorização
05 - Consultas ao banco de dados
-05-01 Visão geral do capítulo
- 05-02 Baixando os projetos prontos
- 05-03 Orientações de estudo sobre SQL
- 05-04 Postgresql 12 instalado neste momento
- 05-05 URI 2602 - Elaborando a consulta
- 05-06 Baixando os projetos iniciados dos estudos de caso
- 05-07 URI 2602 Spring Boot SQL
- 05-08 URI 2602 Spring Boot JPQL
- 05-09 URI 2611 INNER JOIN Elaborando a consulta
- 05-10 URI 2611 Spring Boot SQL e JPQL
- 05-11 URI 2621 BETWEEN LIKE Elaborando a consulta
- 05-12 URI 2621 Spring Boot SQL e JPQL
- 05-13 Dica - pratique um pouco se você estiver precisando
- 05-14 URI 2609 GROUP BY Elaborando a consulta
- 05-15 URI 2609 Spring Boot SQL e JPQL
- 05-16 URI 2737 UNION ALL Elaborando a consulta
- 05-17 URI 2737 Solução alternativa
- 05-18 URI 2737 Spring Boot SQL
- 05-19 URI 2990 NOT IN Elaborando a consulta
- 05-20 URI 2990 Solução alternativa com LEFT JOIN
- 05-21 URI 2990 Spring Boot SQL e JPQL
- 05-22 Preparando o DSCatalog do fim do capítulo 3
- 05-23 Query methods
- 05-24 Problema N+1 consultas com Spring Data JPA
- 05-25 Disclaimer - avisos sobre o DSCatalog
- 05-26 Filtrar produtos, INNER JOIN, IN
- 05-27 Filtrar produtos, DISTINCT, IS NULL
- 05-28 Filtrar produto, FNC, LIKE, LOWER, CONCAT, Trim
- 05-29 Filtrar produtos, COALESCE, List
- 05-30 Lidando com o famigerado problema N mais 1 consultas
- 05-31 Corrigindo os testes do DSCatalog
- 05-32 Configuração de CORS no DSCatalog
- 05-33 Consulta de notificações do DSLearn
- 05-34 Apresentando o desafio para entregar
- 05-35 Explicação adicional: DTOs de cada requisição
- TAREFA: MovieFlix casos de uso
06 - Docker, implantação, CI/CD
- 06-01 Visão geral do capítulo
- 06-02 Instalação do Docker
- 06-03 Introdução a Docker e containers
- 06-04 Imagem, container, registry
- 06-05 Docker ps, images, pull, start, stop
- 06-06 Instanciando um container Postgres
- 06-07 Comandos básicos de manutenção no Docker
- 06-08 Arquivo Dockerfile
- 06-09 Analisando os demais exemplos de Dockerfile - AWS CLI, Spring Boot
- 06-10 Volumes no Docker
- 06-11 Enviando imagens para o DockerHub
- 06-12 Começando a implantação manual - baixando o DSCatalog
- 06-13 Perfis de projeto, variáveis de ambiente
- 06-14 Gerando imagem com Dockerfile
- 06-15 Criando base de dados Postgres remota no Heroku
- 06-16 Instanciando um container no modo dev
- 06-17 Cadastro na Amazon AWS e usuário IAM
- 06-18 Criando instância EC2
- 06-19 Acessar instância EC2 via SSH e instalar Docker
- 06-20 Criando base de dados no Amazon RDS
- 06-21 Conectando e instanciando a base de dados
- 06-22 Enviando imagem para DockerHub
- 06-23 Instanciando um container para conectar ao banco do RDS
- 06-24 Instanciando o container no EC2
- 06-25 CI CD no Heroku
- 06-26 CI CD na AWS com Github Actions - visão geral
- 06-27 Primeiro teste Github Actions
- 06-28 Etapa 1 - Conexão e Cloud Shell
- 06-29 Etapa 2 - Rede
- 06-30 Etapa 3 - Banco de dados RDS
- 06-31 Administração do banco de dados
- 06-32 Etapa 4 - Aplicação Elastic Beanstalk e bucket S3
- 06-33 Etapa 5 - Subindo build zero para nuvem
- 06-34 Etapa 6 - Implantando build zero no Elastic Beanstalk
- 06-35 Etapa 7 - Criando environment no Elastic Beanstalk
- 06-36 Etapa 8 - Configurando variáveis de ambiente adicionais
- 06-37 Etapa 9 - Configurando environment secrets no Github
- 06-38 Etapa 10 - Incluindo pipeline Github Actions
- 06-39 Exterminando os recursos da AWS
BrootCamp React
Desafios de projeto:
07 - Layout e navegação
- 07-01 Visão geral do capítulo
- 07-02 Visão geral de ReactJS e TypeScript
- 07-03 Instalação NPM, Yarn e VS Code
- 07-04 Baixando o projeto pronto
- 07-05 Criando o projeto ReactJS
- 07-06 Estrutura do projeto
- 07-07 Limpando o projeto
- 07-08 Adicionando Bootstrap ao projeto
- 07-09 Customizando o tema do Bootstrap
- 07-10 Prettier Code Formatter
- 07-11 React render e componente React
- 07-12 Começando o componente Navbar
- 07-13 Importando fontes, estilos globais
- 07-14 Referências sobre Bootstrap
- 07-15 Referências sobre Flexbox
- 07-16 Começando a estilizar a Navbar
- 07-17 Menu hamburguer da Navbar
- 07-18 Exportando imagem do Figma
- 07-19 Página Home - estrutura básica do HTML
- 07-20 Começando a estilização
- 07-21 Finalizando o layout X-Small
- 07-22 Responsividade até breakpoint 992px
- 07-23 Finalizando a responsividade
- 07-24 Preparando para fazer o component ProductCard
- 07-25 Criando componente ProductCard
- 07-26 Criando o componente ProductPrice
- 07-27 Mostrando cards na tela Catalog com Bootstrap Grid System
- 07-28 Rotas com React Router DOM
- 07-29 ButtonIcon customizado
- 07-30 Desafio para entregar
- TAREFA: Layout e navegação
08 - Integração com API
- 08-01 Visão geral do capítulo
- 08-02 Baixando o projeto pronto
- 08-03 Preparando o projeto para começar as aulas
- 08-04 Props - primeiro exemplo
- 08-05 ProductCard, tipos customizados
- 08-06 Formatando número com NumberFormat
- 08-07 ProductDetails - rota com parâmetro de URL
- 08-08 ProductDetails HTML
- 08-09 ProductDetails layout mobile
- 08-10 ProductDetails responsivo
- 08-11 Links entre páginas Catalog e ProductDetails
- 08-12 Título da página Catalog
- 08-13 Pagination HTML
- 08-14 Pagination CSS
- 08-15 Admin, Navbar HTML
- 08-16 Admin layout
- 08-17 Admin Navbar layout mobile
- 08-18 Admin Navbar layout responsivo
- 08-19 Rotas, redirecionamento, nesting
- 08-20 Primeira requisição com Axios
- 08-21 React Hooks useState e useEffect
- 08-22 Hook useParams
- 08-23 Fazendo a requisição paginada de produtos
- 08-24 Renderizando dinamicamente os cards do catálogo
- 08-25 Incluindo Loaders na página
- 08-26 Ajustes no layout do CardLoader
- 08-27 Loaders para ProductDetails
- 08-28 Formulário raiz - apresentando o estudo de caso
- 08-29 Tratando eventos de formulário
- 08-30 Representando e tratando os dados do formulário
- 08-31 Integrando com API ViaCEP por meio do Axios
- 08-32 Desafio para entregar
- TAREFA: Github API
9 - Autenticação e autorização
- 09-01 Visão geral do capítulo
- 09-02 Baixando o projeto pronto
- 09-03 Preparando o projeto para começar as aulas
- 09-04 Rota básica de login
- 09-05 Sub-rotas da área auth
- 09-06 Estilizando os containers da tela Auth
- 09-07 Estilizando o banner
- 09-08 HTML do card de Login
- 09-09 Estilizando o card de Login
- 09-10 React Hook Form - primeiro teste
- 09-11 Correção - AxiosRequestConfig
- 09-12 Fazendo a requisição de login
- 09-13 Manipulação de erros manual com useState
- 09-14 Primeira validação de dados com React Hook Form
- 09-15 Validando email com expressão regular
- 09-16 Estilização condicional dos inputs do formulário
- 09-17 Salvando os dados de autenticação no localStorage
- 09-18 Preparando para fazer requisições autorizadas
- 09-19 Enviando header Authorization na requisição autorizada
- 09-20 Redirecionando programaticamente
- 09-21 Primeiro teste com interceptors do Axios
- 09-22 Redirecionando para login quando autorização falha
- 09-23 Decodificando o token JWT
- 09-24 Testando se usuário está autenticado
- 09-25 Entendendo componentes com children ReactReactNode
- 09-26 Componente PrivateRoute para rotas autorizadas
- 09-27 Links de login e logout na Navbar
- 09-28 Estilizando o login e logout
- 09-29 Gerenciando estado global com Context API
- 09-30 Redirecionando para a rota pretendida após o login
- 09-31 Implementando a função hasAnyRoles
- 09-32 Implementação alternativa com high order functions
- 09-33 Restrição de conteúdo baseada no perfil do usuário
- 09-34 Permissionamento em nível de rotas
- 09-35 Organizando os utilitários
- 09-36 Desafio para entregar
- 09-37 Orientações sobre o desafio
- TAREFA: MovieFlix front inicial
10 - CRUD, paginação, filtros
- 10-01 Visão geral do capítulo
- 10-02 Preparando o projeto
- 10-03 Rotas do CRUD de produtos
- 10-04 Começando o layout da listagem de produtos
- 10-05 Responsividade da barra e dos cards
- 10-06 Componente CategoryBadge
- 10-07 Finalizando o layout do ProductCrudCard mobile
- 10-08 Responsividade do ProductCrudCard na forma horizontal
- 10-09 Começando o HTML do formulário de produtos
- 10-10 Estilizando margens e containers do formulário
- 10-11 Estilizando os botões e mais alguns retoques
- 10-12 Listando os produtos a partir do back end
- 10-13 Correção no seed do banco
- 10-14 Começando a integrar o formulário com React Hook Form
- 10-15 Salvando um produto (imgUrl e categories hardcode)
- 10-16 Configurando rotas do CRUD
- 10-17 Editando produtos
- 10-18 Função que deleta um produto
- 10-19 Criando um evento onDelete com padrão de projetos observer
- 10-20 React Select layout
- 10-21 Recuperando as categories do back end
- 10-22 Integrando o Select com o React Hook Form
- 10-23 Removendo hardcode dos campos imgUrl e categories
- 10-24 Formatação de número decimal no formulário
- 10-25 Componente de paginação - primeiro teste
- 10-26 Pagination layout
- 10-27 Criando props e evento onChange no componente Pagination
- 10-28 Finalizando o componente Pagination
- 10-29 Pequena correção na Navbar do Admin
- 10-30 Criando um estado específico para os dados dos controles
- 10-31 Recriando a função getProducts com o hook useCallback
- 10-32 Criando o componente ProductFiIter
- 10-33 HTML do ProductFilter
- 10-34 Layout do input name
- 10-35 Integrando o React Hook Form
- 10-36 Layout mobile do ProductFilter
- 10-37 Responsividade do ProductFilter
- 10-38 Comportamento intemo do ProductFilter
- 10-39 Criando o evento onSubmitFilter
- 10-40 Mostrando mensagem toast com React Toastfy
- 10-41 Desafio para entregar
- TAREFA: MovieFlix front listagem
11 - Testes e implantação
- 11-01 Visão geral do capítulo
- 11-02 AVISO - Terminal Linux com WSL
- 11-03 WSL Instalando WSL e Linux
- 11-04 WSL Instalando o Node
- 11-05 WSL Instalando o JDK
- 11-06 WSL Preparando o projeto no Linux
- 11-07 WSL Configurando usuário Git
- 11-08 Recordando a base sobre testes
- 11-09 Visão geral do JEST e da Testing Library
- 11-10 Setup do projeto
- 11-11 Primeiro teste com JEST
- 11-12 Rodando testes no modo watch
- 11-13 Block describe e suíte de testes
- 11-14 Refatoração - reorganizando token e Role
- 11-15 Primeiro teste com hasAnyRoles
- 11-16 Mockando função com spyON
- 11-17 Testando outro cenário de hasAnyRoIes
- 11-18 Exercício de fixação - teste de funções
- 11-19 Testando componentes React - visão geral
- 11-20 Testando Buttonlcon
- 11-21 Exercício de fixação - teste de renderização
- 11-22 Testes de ProductPrice e ProductCard
- 11-23 Demonstração de uso do data-testid
- 11-24 Primeiro teste com Pagination
- 11-25 Simulando clique do usuário com userEvent
- 11-26 Escrevendo outros testes de clique no Pagination
- 11-27 Começando os testes da página Catalog
- 11-28 Operações assíncronas com async await e waitFor
- 11-29 Mock da API com MSW, trabalhando com fixtures
- 11-30 Entendendo a necessidade do Router
- 11-31 Começando testes com Form de produtos
- 11-32 Mock do React Router DOM e useParams
- 11-33 Entendendo os cenários que vamos testar
- 11-34 Selecionando os inputs do formulário
- 11-35 Selecionando o Select no teste por meio do label
- 11-36 Simulando a digitação nas caixas de texto com userEvent
- 11-37 Simulando a seleção das categorias com React Select Event
- 11-38 Simulando clique no botão de enviar o formulário
- 11-39 Assertion para verificar a exibição do toast
- 11-40 Assertion para verificar o redirecionamento
- 11-41 Testando cenário de apenas clicar em submit diretamente
- 11-42 Testando o cenário de limpar as mensagens de erro
- 11-43 Testando o update de produto, mock de PUT e GET
- 11-44 Verificando os valores selecionados no Select
- 11-45 Implantação com Cl CD no Netlify
- 11-46 Desafio PARTE 1 - subindo o projeto
- 11-47 Desafio PARTE 2 - entendendo os testes do Form
- 11-48 Desafio PARTE 3 - entendendo os testes do List
- 11-49 Desafio PARTE 4 - resolvendo o primeiro teste
- TAREFA: ReacUS TDD
12 - Dashboard
- 12-01 Visão geral do capítulo
- 12-02 Preparando o projeto
- 12-03 Configuração do projeto
- 12-04 Criando componente Header
- 12-05 Criando o componente Filtro - Parte 1
- 12-06 Criando o componente Filtro - Parte 2
- 12-07 Criando o componente de Vendas Por Data - Parte I
- 12-08 Criando o componente de Vendas Por Data - Parte 2
- 12-09 Criando o componente de Vendas Por Data - Parte 3
- 12-10 Criando o componente de Sumário das Vendas - Parte 1
- 12-11 Criando o componente de Sumário das Vendas - Parte 2
- 12-12 Criando o componente de Sumário das Vendas - Parte 3
- 12-13 Criando o componente do gráfico de pizza
- 12-14 Criando o componente da tabela de vendas - Parte 1
- 12-15 Criando o componente da tabela de vendas - Parte 2
- 12-16 Integrando o componente de vendas por data com o backend - Parte 1
- 12-17 Integrando o componente de vendas por data com o backend - Parte 2
- 12-18 Integrando o componente de vendas por data com o backend - Parte 3
- 12-19 Integrando o filtro com a aplicação
- 12-20 Formatando a exibição das datas do filtro
- 12-21 Integrando o filtro com o gráfico de vendas por data
- 12-22 Integrando o filtro com o sumário de vendas
- 12-23 Integrando o filtro com os gráficos de pizza
- 12-24 Integrando o filtro com a tabela de vendas - Parte 1
- 12-25 Integrando o filtro com a tabela de vendas - Parte 2
- 12-26 Adicionando o arquivo responsive CSS
- 12-27 Desafio para entregar
- TAREFA: Gráfico e filtro