Help Desk 🆘

Projeto Full Stack

O Projeto HelpDesk é uma aplicação web desenvolvida utilizando as tecnologias Java, Spring Boot 3+ e Angular.O objetivo do projeto é fornecer um sistema no qual os usuários possam abrir chamados e serem atendidos por um técnico, as mudanças de status do chamado são enviadas por e-mail, informando o cliente sobre a aceitação e conclusão. O projeto conta com segurança do Spring Security, geração de tokens com JWT, testes unitários e integração com JUnit 5. Este ano, iniciei meus estudos em Cloud com foco na AWS e nada melhor do que colocar em prática alguns conceitos. Por isso, escolhi desenvolver esta aplicação simples para auxiliar nos estudos e compreender como funciona o processo de deploy na AWS, utilizando S3, RDS e Elastic Beanstalk.

0410.mp4

UML 🧱

Funcionalidades Principais como Cliente 👷‍♀️

Criando conta: Os usuários podem se cadastrar no Help Desk.

Criando chamado: Os usuários podem criar chamados e descreverem seus problemas 🟢 ABERTO, após aberto o chamado o usuário tem que aguardar até que seja aceito por um técnico.

Funcionalidades Principais como Técnico 🛠️

Criando conta: Os usuários podem se cadastrar no Help Desk.

Listar Chamados: O Técnico pode listar todos os chamados de acordo com seu StatusChamdo 🟢 ABERTO, 🟡 ANDAMENTO e 🔴 FECHADO.

Aceitando chamado: O Técnico aceita o chamado, a aplicação envia uma email avisando que seu chamado foi aceito, trocando o status do chamado para 🟡 ANDAMENTO.

Finalizando chamado: Após o técnico resolver o problema é enviado um email para o cliente informando que foi resolvido e seus status é alterado para 🔴 FECHADO.

AWS ☁️

O Projeto HelpDesk foi desenvolvido com o intuito de explorar e aplicar conceitos da AWS. Utilizando as tecnologias Java, Spring Boot 3+ e Angular, o projeto foi implantado na infraestrutura da AWS para fornecer uma solução escalável e segura para seus usuários.

Fluxo 🔄

• S3 (Simple Storage Service): Armazena o frontend da aplicação, ou seja, todos os arquivos necessários para o usuário interagir com a interface.

• Beanstalk: É onde o backend da aplicação está hospedado. Aqui está o código do servidor que processa as requisições do usuário e fornece as respostas necessárias.

• RDS (Relational Database Service): É onde os dados da aplicação são armazenados de forma segura e organizada. Aqui está o banco de dados MySQL que o backend acessa para recuperar ou armazenar informações.

Documentação com Swagger 📗

• Documentação do nosso sistema de halp desk usando Swagger, proporcionando uma visão unificada e acessível.

2024-01-03-12-12-31.mp4

Acesse a documentação do projeto: (Local)

• Acesse: http://localhost:8080/swagger-ui.html para visualizar os endpoints.

Ferramentas e Tecnologias usadas no Backend 🧱

Ferramentas e Tecnologias usadas no Frontend 🎨

Execute o projeto 👁‍🗨

Backend 🧱

Pré-requisitos: Java 17, Docker(opcional)

Clone o repositório do projeto

git clone https://github.com/AugustoMello09/Help-Desk.git

Configurando o projeto local 🏠

Configurando o ambiente:

• Navegue até o diretório do projeto.

cd HelpDesk-Backend

• Acesse o diretório do projeto, utilize o comando mvn install para instalar todas as dependências necessárias:

# exemplo
cd HelpDesk-Backend

./mvnw install -DskipTests=true

• Abra o arquivo de configuração application.yml.

• Modifique o perfil que deseja rodar a aplicação.

Perfil de teste

profiles:
  active:
  - test

Perfil de Dev

profiles:
  active:
  - dev

Usando a aplicação no perfil Test 🧪

• Não é necessário nenhuma modificação no projeto, certifique-se que esteja no perfil de test.

Perfil de teste: application-test.yml

profiles:
  active:
  - test

• Suba a aplicação e acesse o H2.

• Acesse: http://localhost:8080/h2-console para visualizar o H2.

• Tudo pronto e funcionando.

Usando a aplicação no perfil Dev 🏛️

• AVISO ⚠️: para rodar no modo dev faça as modificações necessárias no application-dev.yml.

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/helpdesk
    username: username
    password: senha
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: false

• Antes de supir a aplicação prepare o banco e certifique-se que esteja no perfil de dev.

Perfil de Dev: application-dev.yml

profiles:
  active:
  - dev

• Suba a aplicação e logo depois será criado automaticamente o banco.

• faça um INSERT na tabela tb_cargo.

COMANDO:

INSERT INTO tb_cargo (authority) VALUES ('ROLE_OPERATOR');
INSERT INTO tb_cargo (authority) VALUES ('ROLE_ADMIN');

• Feito o INSERT na tabela tb_cargo já pode começar a usar.

Configurando o projeto para usar Docker-compose 🐳

• AVISO ⚠️: para subir o docker-compose usando a imagem augustomello09/help-desk-backend:latest o username e password tem que ser root no mySQL. Caso não seja vou mostrar como subir uma nova img e alterar no docker-compose.

Alterando a img docker (Caso credencial não for compatível com password e username root).

• Navegue até o local do arquivo e faça modificações necessárias no application-dev.yml com sua credencial do mySQL.

• Certifique-se que esteja no perfil Dev.

• Depois das alterações navegue até o diretório do projeto HelpDesk-Backend e empacote o Jar.

./mvnw clean peckage -DskipTests=true

• Gere o build da img do docker (Lembre de tirar os {}).

docker build -t {NomeDaNovaImg}:{teg} .

• Depois de todas as modificações e com a img nova, abra o docker-compose e faça as ultimas alterações com a nova img e sua credencial do mySQL.

• Agora com tudo pronto suba o docker-compose: docker-compose up -d ( Todas as modificações foram feitas no diretório HelpDesk-Backend).

Executando o Docker-compose

• Navegue até o local do arquivo docker-compose.yml e suba.

cd helpdesk

docker-compose up -d

• Acesse: http://localhost:8000 para visualizar o phpMyAdmin.

• Abra o banco helpdesk.

• Execute a Query na tabela de tb_cargo.

COMANDO:

INSERT INTO tb_cargo (authority) VALUES ('ROLE_OPERATOR');
INSERT INTO tb_cargo (authority) VALUES ('ROLE_ADMIN');

• Tudo pronto, agora é só usar.

Configurando o projeto na AWS ☁️ (Opcional)

• AVISO ⚠️: Esta seção de implantação na AWS é apenas informativa e não está refletida na última versão da aplicação HelpDesk, você poderá rodar a aplicação local.

Antes de começar

• Crie uma conta na AWS

Passos para Implantação

1. Preparação do AWS S3:

• Acesse o console da AWS -> S3 ;

• Crie um novo bucket

• Acesse as permissões do bucket:

• Gerenciar políticas públicas do bucket;

• Acesse as propriedades do bucket:

• Selecione a opção para utilizar o bucket como website host;

S3 URL: [nome-do-bucket].s3-website.[zona-do-bucket].amazonaws.com

2. Configuração do AWS RDS:

   • Crie um banco no RDS.

   

   • Escolha o MySQL.

   

   • Modelos escolha free tier.

   

   • Configure o nome identificador, username e password do db.

   

   • Deixe somente habilitada a opção marcada e use db.t3.micro.

   

   • Desabilite a opção de escalabilidade.

   

   • Escolha o nome do banco de dados. (Recomendo usar o mesmo do id instância)

   

   • Crie o banco.

3. Configuração do Backend (Spring Boot):

   • Configure seu aplicativo Spring Boot para usar o banco de dados RDS (MySQL).

   1. Crie um application-aws.yml

   2. configure para acessar o RDS.

   spring:
     datasource:
       url: jdbc:mysql://{url}:3306/{nomedb}
       username: (username)
       password: (senha)
     jpa:
       hibernate:
         ddl-auto: update
       show-sql: false

   • Confira se está usando o perfil da aws no application.yml e também coloque a porta como 5000.

     server:
       port: 5000
     profiles:
       active:
       - aws

   • Abra o mySQL no meu caso estou usando o HeidiSQL como exemplo.

   

   • Acesse o banco.

   

   • Suba a aplicação e certifique que está usando o perfil correto.

   profiles:
     active:
     - aws
   spring:
     datasource:
       url: jdbc:mysql://{url}:3306/{nomedb}
       username: (username)
       password: (senha)
     jpa:
       hibernate:
         ddl-auto: update
       show-sql: false

   • Atualize a tabela.

   

   • faça um INSERT na tabela tb_cargo.

   COMANDO:

   INSERT INTO tb_cargo (authority) VALUES ('ROLE_OPERATOR');
   INSERT INTO tb_cargo (authority) VALUES ('ROLE_ADMIN');

   

   • Empacote seu aplicativo em um arquivo JAR executável:

     ./mvnw clean package -DskipTests=true

   

4. Implantação no Elastic Beanstalk:

ANTES DE CRIAR UM NOVO AMBIENTE NO ELASTIC BEANSTALK:

• Acesse IAM

  1. Crie um perfil.

  

  2. Selecione as opções.

  

  3. ACESSE: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/concepts-roles-instance.html

  

  5. Adicione as 3 permissões.

  

  4. Escolha um nome para usar.

  

  6. verifique se foram adicionados as permissões.

  

• Agora Crie um novo ambiente no Elastic Beanstalk para seu aplicativo.

• Escolha o ambiente e o nome da aplicação.

• Escolha a plataforma, e marque as primeiras opções de código da aplicação e predefinições.

• Na configuração de acesso ao serviço use o perfil criado antes de começar a implantação do Beanstalk.

• Coloque as credenciais usadas na criação do RDS com username e password.

• Crie a aplicação.

• Faça o upload do jar empacotado

5. Preparação do frontend (Angular):

   • Acesse o diretório do HelpDesk-frontend

   cd helpdesk-frontend

   • Acesse environment.prot.ts e coloque a url gerada pelo Beanstalk.

    export const environment = {
      production: true,
      baseUrl: 'http://{url}.com'
    };

   • Compile seu projeto Angular para produção:

   ng build --configuration=production

   • Faça upload dos arquivos gerados para um bucket no Amazon S3.

   

   • Agora é só acessar a url do S3 e testar.

Frontend 🌐

Pré-requisitos: Angular

Executar

• Certifique-se de ter o Node.js e o Angular CLI instalados em seu ambiente.
• Navegue até a pasta do projeto front-end:

cd helpdesk/helpdesk-frontend

Instale as dependências do projeto:

npm install

Inicie a aplicação:

ng serve

Entre em contato

Para mais informações sobre o projeto ou para entrar em contato, você pode me encontrar através dos canais abaixo: