Spring Boot e Angular

1 - Introdução 2 - Criar projeto Spring 3 - Estrutura do projeto 4 - Conexão com MySQL 5 - Configurando controle 6 - Configurando entidade 7 - Configurando repositório 8 - Annotation @Autowired 9 - Rota de cadastro 10 - Rota de listagem 11 - Rota de edição 12 - Rota de remoção 13 - CORS 14 - Criando projeto em Angular 15 - Criando componente 16 - Bootstrap 17 - Manipulando imagens 18 - Formulário 19 - Tabela 20 - Visibilidade dos botões 21 - FormsModule e HttpClientModule 22 - Modelo Cliente 23 - Camada de serviços 24 - Configurando serviços 25 - RxJS 26 - Listagem de clientes (Parte 1) 27 - Listagem de clientes (Parte 2) 28 - Utilizando ngOnInit e ngFor 29 - Objeto Cliente 30 - Utilizando o ngModel 31 - Cadastro de clientes (Parte 1) 32 - Cadastro de clientes (Parte 2) 33 - Cadastro de clientes (Parte 3) 34 - Selecionar cliente 35 - Edição de clientes (Parte 1) 36 - Edição de clientes (Parte 2) 37 - Remoção de clientes (Parte 1) 38 - Remoção de clientes (Parte 2) 39 - Cancelar 40 - Considerações finais

1 - Spring Boot e Angular

Olá pessoal, iniciaremos mais um treinamento de Spring Boot, dessa vez iremos trabalhar também com o front-end, utilizando o fraework Angular.

O que precisaremos saber para fazer esse treinamento?

Conhecimentos básicos de como criar uma API com Spring Boot, deixarei o link da playlist do treinamento Criando API's com Spring Boot

Como será desenvolvido esse projeto?

Será utilizado o editor Visual Studio Code (clique aqui para baixar). Esse poderoso editor será utilizado para o desenvolvimento do Spring Boot e o front-end com o ReactJS.

JDK

Será necessário termos o JDK instalado, nesse tutorial utilizarei a versão 17, mas você pode utilizar qualquer versão a partir da 8, clique aqui para baixar o JDK.

Banco de dados

Iremos utilizar o banco MySQL para desenvolvermos nossa API, clique aqui para baixar.

Extensões do Visual Studio Code

Para facilitar o desenvolvimento desse projeto, iremos utilizar as seguintes extensões para Visual Studio Code:

  • Extension Pack for Java: Conjunto de extesões para a linguagem Java, contendo as seguintes funcionalidades: Executar projetos em formato java, debug, Maven, Gerenciador de projetos e o IntelliCode;
  • https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack: Extensão contendo o Spring Initializr para criação de projetos, Spring Boot Dashboard para gerenciar projetos em Spring Boot e o Spring Boot Tools que fornece o suporte base para trabalhar com o Spring Boot;
  • Thunder Client: Essa extesão permite realizarmos testes em nossas APIs;
  • MySQL: Instalando essa extensão, teremos acesso a gerenciar bases de dados e tabelas em diversos bancos de dados como: MySQL, PostgreSQL, SQLite, entre outros;
  • VSCode-lombok: Suporte ao lombok, que fará com que tenhamos annotations para gerar Getters, Setters e Construtores dinâmicamente.

Node.js

Precisamos instalar o Node.js. Ele será responsável para conseguirmos desenvolver nosso front-end, clique aqui para baixar.

Angular CLI

Para finalizar o nosso setup, precisamos instalar o Angular CLI, Ele será responsável por realizarmos diversas ações utilizando o Angular, como: criar projetos, baixar complementos (pipes, módulos, componentes, etc...), realizar o buid, implementar o uso de tesetc, etc... Para instalar é bem simples, tendo o Node.js instaldo, abra o Terminal ou Prompt de Comando e digite: npm install -g @angular/cli, espere alguns minutos e pronto! O Angular estará pronto para utilizarmos.

E com isso finalizamos essa primeira etapa, na próxima aula iremos criar nossa API em Spring, até lá!

Caso queira acompanhar esse tutorial através de vídeos, acesse minha playlist no YouTube, deixarei abaixo a primeira aula do curso, até a próxima ;)