CRUD com Anular e Spring Boot

⚠️⚠️ Em CONTRUÇÃO

---

Descrição do Projeto

Este projeto é uma aplicação CRUD (Create, Read, Update, Delete) desenvolvida utilizando Angular para o front-end e Spring Boot para o back-end. A aplicação foi implementada na AWS (Amazon Web Services) para garantir escalabilidade e desempenho.

Pré-requisitos

• Node.js instalado em sua máquina. Você pode baixá-lo aqui: https://nodejs.org/en/
• Angular CLI instalado. Para instalar, execute o seguinte comando no terminal: npm install -g @angular/cli
• Java instalado em sua máquina. Você pode baixá-lo aqui: https://www.java.com/en/download/
• IDE de sua escolha. Recomendamos o IntelliJ IDEA: https://www.jetbrains.com/idea/download/

Criando o projeto Spring Boot

• Abra a sua IDEA e selecione "Criar novo projeto".

• Selecione "Spring Initializr" ( caso não tenha na sua IDEA utilize o site do Spring Initializr: https://start.spring.io/).

• Selecione as seguintes opções:

    - Tipo de projeto: Maven
    - Linguagem: Java
    - Versão do Spring Boot: 2.5.0
    - Nome do projeto: (o nome que desejar)
    - Nome do pacote: (o nome que desejar)
    - Empacotamento: Jar
    - Java: 8, 11, ou 17   ---> OBs: de preferencia pra estas versões do java pois são as versões LTS
  

• Clique em "Próximo".

• Na guia "Dependências", procure por "Spring Web" e selecione a caixa de seleção.

• Clique em "Próximo".

• Escolha o local onde deseja salvar o projeto e clique em "Concluir".

Criando o back-end

• Abra o arquivo src/main/java/com.example.demo/DemoApplication.java.
• Adicione a anotação @RestController à classe.
• Adicione o seguinte método à classe:

@GetMapping("/hello")
public String hello() {
    return "Hello World!";
}

• Execute o aplicativo clicando com o botão direito do mouse no arquivo DemoApplication.java e selecionando "Executar".

---

Criando o projeto Angular

Abra o terminal e navegue até a pasta onde deseja criar o projeto Angular. Execute o seguinte comando: ng new my-app Quando solicitado, escolha o estilo de folha de estilo que desejar. Recomendamos CSS. Depois que o projeto for criado, navegue até a pasta do projeto digitando cd my-app. Inicie o servidor de desenvolvimento digitando ng serve.

Criando o front-end

• Abra o arquivo src/app/app.component.html.
• Adicione o seguinte código:

<h1>{{title}}</h1>
<p>{{message}}</p>

• Abra o arquivo src/app/app.component.ts.
• Adicione o seguinte código:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My App';
  message = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/api/hello', { responseType: 'text' }).subscribe((data) => {
      this.message = data;
    });
  }
}

• Execute o servidor de desenvolvimento novamente digitando ng serve.
• Agora você deve ser capaz de visualizar "Hello World!" no navegador ao acessar http://localhost:4200.

Stack utilizada

Front-end:

Back-end:

Plataforma de Nuvem:

Autores

• @Danilo A. Damasceno

---

Atualizações de Projeto e suas Versões

Atualização 1.2.0 :

Desenvolvimento do Front-End. FRONT-END em desenvolvimento. --> PROJETO EM DESENVOLVIMENTO.