Desenvolvimento Web Fullstack com Next.js + Spring Boot

Desenvolva um sistema web completo de vendas com autenticação de usuários e geração de relatórios e gráficos

4.68 (176 reviews)

Udemy

platform

Português

language

Web Development

What you will learn

Criar e desenvolver uma aplicação Next Js

Desenvolver API Rest com Spring Boot

Criar bancos de dados SQL e manipular os dados através da aplicação

Testar API's com o POSTMAN

Criar componentes e páginas utilizando React

Bulma CSS e PrimeReact

Criar Relatórios JasperReports e chamá-los através da aplicação

Criar Página de Dashboard simples com Gráfico de vendas

Autenticação com sites de terceiros (Github, Auth0)

Fazer Build das aplicações e Deploy na Nuvem

Why take this course?

Olá! Seja bem vindo!

Neste curso iremos abordar de forma totalmente prática, o desenvolvimento de uma aplicação fullstack do absoluto zero, desde a instalação das ferramentas até a finalização da aplicação.

O curso é para desenvolvedores que já tem conhecimento nas linguagens de programação Java e Javascript e desejam criar uma stack para construir aplicações WEB. Os assuntos abordados no curso são:

Next.JS, um framework que está sendo utilizado por várias grandes empresas no mundo todo e está ganhando bastante mercado;
Spring Boot, um framework java completo para desenvolvimento de API's Rest com todos os recursos necessários para acesso a bancos de dados, segurança, Web, etc;
Bulma CSS, um framework css para estilização de páginas HTML;
Prime React, uma biblioteca de componentes ricos React prontos para utilizar e ter um bom ganho de produtividade;
JasperReports, uma ferramenta para criação de relatórios que serão exportados através da aplicação em PDF;
Banco de Dados PostgreSQL, um banco de dados SQL relacional robusto e bastante utilizado pelo mercado.

Todo o projeto é criado, configurado e codificado pelo instrutor, os links para o código fonte das aulas estará anexo a cada uma das aulas, além do link para os sites mostrados no curso e o link para download direto das ferramentas nas versões utilizadas pelo instrutor.

Iremos utilizar um provedor de autenticação de terceiros para fazer a autenticação da aplicação, como por exemplo, Github e o Auth0.

No final iremos aprender a fazer o BUILD e empacotamentos das aplicações e publicá-las na nuvem, colocando-as em ambiente de produção na internet, juntamente com o banco de dados.

Content

Introdução

Introdução e Apresentação do Curso

Instruções iniciais

Primeiros Passos

Introdução ao Next JS

Instalação do Node JS

Instalação e configuração do Visual Studio Code

Criando a Aplicação Next.JS

Primeiros Passos com o Next JS

Criando componentes React de forma fácil

Aviso rápido

Adicionando o Bulma CSS no projeto

Criando o Template

Implementação do menu lateral

Componentizando os itens de menu

Cadastro de Produtos

Criando a página de cadastro de produtos

Criando o formulário de produtos

Alinhando os campos do formulário de produtos

Manipulação de Formulários com State

Algumas explicações sobre o estado do componente

Componentizando os Inputs

Concluindo o componente de Input Customizado

Instalando o JDK 11

Instalando o STS

Criando o projeto Spring Boot

Conhecendo a aplicação back end

Testando a aplicação back end

Criando o Post de produtos

Utilizando o Postman pra testar o Post de produtos

Trabalhando com JPA

Salvando o produto no banco de dados

Instalando o PostgreSQL e criando o banco de dados

Conectando a aplicação com o banco e testando

Salvando o script SQL na aplicação

Criando o Client HTTP na aplicação NEXT

Criação do serviço de produtos

Salvando o produto através da aplicação NEXT

Melhorias na API de produtos

Melhorias na tela de cadastro de produtos

Api de Atualização de Produto

Atualizando produto cadastrado

Criando máscara de dinheiro para o input

Criando componente de mensagens

Mostrando mensagens de feedback ao usuário

Validando os campos com Yup

Customizando as validações

Finalizando o cadastro de produtos

Criando o método de listagem de produtos

Criando a tela de listagem de produtos

Componente tabela de produtos

Data fetching com SWR

Criando um loader com Pure CSS Loader

Editar e Excluir produtos

Carregar o produto para edição

Finalizando fluxo de redirecionamento de produto

Deletando produtos

Mecanismo de confirmação de exclusão

Modulo de Clientes: Formik, Custom Masks, Validação de Formulários

Iniciando o Módulo de clientes

Criando a camada de Modelo de clientes

API de Clientes parte 1

API de Clientes parte 2

Iniciando a tela de clientes

Iniciando com o Formik

Implementando os campos do formulário de clientes

Corrigindo o problema do Input com Formik

Criando um Input com valor Formatável

Inputs com máscaras de CPF, Telefone e Data

Criando o serviço de clientes e testando

Populando a data de cadastro do cliente e atualizando

Validando o formulário de clientes

Finalizando o cadastro de clientes

Iniciando a Consulta de Clientes

Formulário de consulta de clientes

Adicionando o Primereact no projeto

Criando o DataTable de Clientes

Implementando a consulta paginada na API

Tornando o Data Table paginado por demanda no front end

Testando os filtros e corrigindo a busca por nome

Exclusão de clientes com confirm dialog

Finalizando o módulo de clientes

Padronizando o módulo de produtos para o Primereact

Tela de Realização de Vendas

Como será a tela de vendas

Criando a Tela de Vendas

Configurando o primeflex no projeto

Autocomplete de seleção de clientes

Adicionando os campos de seleção de produtos

Carregando o produto na venda pelo código

Corrigindo problemas de adição de produtos na venda

Adicionando os itens da venda

Ajustando detalhes de itens da venda

Autocomplete de busca de produtos

Adicionando os últimos campos da tela

Validando a venda

Removendo o item da venda

Criando o modelo de vendas na API

Entendendo o modelo de dados do sistema

Criando os scripts das tabelas de venda e associações

Implementação do Post de vendas na API

Criando o serviço de vendas e testando a realização de uma venda

Finalizando o módulo de vendas

Criando Relatórios com Jasper Reports

Instalando o Jaspersoft Studio

Conhecendo a estrutura de um relatório

Buscando os dados do relatório do banco de dados

Formatando o relatório

Finalizando o relatório

Criando o serviço de relatório de vendas

Código para gerar o relatório em PDF através do Java

Testando o relatório através da API

Formas mais simples de gerar o relatório

Criando a tela do relatório de vendas

Adicionando os campos do formulário de relatório de vendas

Finalizando o formulário de filtro

Imprimindo o relatório através da tela

Adicionando o campo data da venda

Tratando as datas antes de enviar para o relatório

Testando o relatório com parâmetros passados

Tratamento de parâmetros do relatório e finalização

Tratamento para relatórios vazios (sem dados)

Corrigindo problema com nova coluna da tabela de vendas

DashBoard

Api do Dashboard

Criando o componente de Dashboard

Renderização de páginas estáticas com o Next (Static Props)

Instalando o Chart.js com o Primereact e testando um gráfico

Criando e testando a consulta de vendas por mês

Implementando o gráfico de barras

Finalizando o gráfico de vendas

Autenticação de Usuários com Next Auth

Instalando e configurando o Next Auth

Logando na aplicação com GITHUB

Configurando o acesso com Auth0

Melhorias e proteção de todas as páginas

Git e Github

Curso rápido para alinhamento sobre GIT/GITHUB

Build e Deploy em produção

Preparando o ambiente back-end pra fazer o build

Gerando o build (JAR) e testando os múltiplos ambientes

Instalando e configurando o Apache Maven na sua máquina (opcional)

Criando a conta no Heroku e adicionando o Postgre na nuvem

Configurando o Banco de Produção

Instalando o Heroku CLI e fazendo deploy na nuvem

Acessando e manipulando o banco da nuvem através da sua máquina

Acessando a API da nuvem através da Aplicação front-end

Corrigindo o erro na API do Dashboard

Configurando ambiente de produção e gerando o build front-end

Fazendo o deploy do front-end na nuvem da Vercel

Final

Obrigado!

Reviews

Robson

September 5, 2023

Ótimo curso e ótima didática, inclusive esse não será o único curso que irei comprar do Douglas. parabéns pelo material!!

Rodrigo

July 13, 2023

Até agora muito básico. Não gostei de ficar misturando criação do back e do front. Seria mais interessante fazer primeiro o back ou o front e só depois partir para o outro. Assim não ficaria misturando as coisas e enchendo a cabeça do aluno com vários conceitos de back e front ao mesmo tempo. Mas o que está incomodando mesmo é o instrutor falar "aqui" a cada 3/4 palavras.

Marcus

July 13, 2023

é um ótimo curso até agora, no entanto o nextjs mudou alguns padrões e tive que pesquisar na documentação como ele está trabalhando com os arquivos agora

Bruno

March 6, 2023

Até agora, gostando muito do conteúdo do curso. Perfeito para quem tem certo conhecimento das tecnologias e não quer pegar um curso em que fique repassando todo o básico sobre programação pra de fato começar. Eu comprei o curso pra aprender as principais funcionalidades sobre o Springboot, mas também estou gostando muito do fato que o professor levar a sério a usabilidade dos componentes do projeto. Abriu meus olhos, pois apesar de já usar a ferramenta, não fazia idéia que dava pra deixar o código tão limpo (Talvez por falta de experiência).

Hamden

January 25, 2023

Mais um curso do Prof. Dougllas que eu faço questão de aprender e estudar; aprendi muita coisa com ele através dos outros cursos dele e este também; minha vida profissional mudou muito e praticamente Java SpringBoot aprendi tudo com ele em outros cursos que eu fiz com ele, vale o mesmo pro React de outro curso que também aprendi tudo com ele. Então ele é o cara. Agradeço demais.

Jair

January 10, 2023

Curso em si muito bom, muito completo, pena que o áudio é ruim em algumas partes, e bem baixo no restante.

Marcos

July 27, 2022

curso TOP, o professor escolher um otimo caso para trabalhar, e bem direto ao ponto, obs: apenas um ponto negativo, o som em algumas aulas e bem ruim, mas da pra acompanhar tranquilo.

Mateus

June 1, 2022

O curso é muito bom estou aprendendo bastante, já conheço Java e Spring porém não sabia como consumir a api no front. Uma coisa que está me incomodando é o fato do microfone está muito próximo da boca e do nariz do professor, eu por exemplo tenho problemas com isso e acaba me tirando bastante a atenção. Estou tendo que me esforçar muito pra não parar de assistir o curso. Mas tirando isso o curso é muito bom.

Tibério

April 28, 2022

Curso é muito bom mesmo! Recomendo a quem deseja aprender programação e deseja focar em React e Spring Boot. Aprendi bastante. Meus parabéns, professor!

Carlos

February 17, 2022

Ótimo curso, recomendo especialmente para quem é programador Java back end e deseja conhecer mais sobre React e NextJS. Para mim foi bem exclarecedor pois tinha muitas dúvidas como o front end com React realiza os submites ou se autentica.

Charts

Price

Rating

Enrollment distribution

Desenvolvimento Web Fullstack com Next.js + Spring Boot - Distribution chart