to-day-list

Índice 📚

1. Front-end
• Tela de Registro
• Tela de Login
• Tela Principal
2. Back-end
• API Rest
• Registrar
• Login
3. BCrypt
4. Criação de Tasks
5. Diagrama de Classes
6. Chat Assistente
7. Principais Bibliotecas
8. Tech Stack Utilizada
9. Executar o Projeto

Front-end 💻

Tela de Registro ✏️

Tela de registro aonde é necessario seu nome, e-mail e uma senha de 8 caracteres

Tela de Login 🔒

Tela aonde deve ser passada as informações de login previamente cadastradas

Tela Principal 🪟

Tela principal com a criação, listagem, atualização e exclusão das tasks, e na barra da direita um ChatBot usando com tecnologia do ChatGPT 3.5

Back-end ⚙️

API Rest 🌐

Endpoint	Método	Body	Status	Response	Descrição
/auth/register	POST	UserRegister	201		Cadastrar o usuário.
/auth/login	POST	UserLogin	200	Token	Logar o usuário e gerar um Token.
/tasks/create	POST	TaskRequestData	201		Cria uma nova Task.
/tasks/list/{login}	GET		200	TaskResponseData[]	Lista de todas as tasks.
/tasks	PUT	TaskUpdateData	200	TaskResponseData	Atualiza uma Task existente.
/tasks/{taskId}	DELETE		204		Deleta a Task escolhida.
/chat	POST	ChatRequestData	200	String	Responde a pergunta solicitada.

Registrar ✏️

É necessario passar o email e senha fornecidos durante o registro, caso seja valido, sera devolvido um Token JWT para autenticação.

Dados necessarios:

• ➡️ seu nome
• ➡️ seu login (email)
• ➡️ sua senha

Exemplo de request body:

{
    "username": "luiz",
    "login": "[email protected]",
    "password": "123456"
}

Exemplo de responsy body:

{
    "id": 1,
    "username": "luiz",
    "login": "[email protected]",
    "password": "$2a$10$diT5bwmH91kdVQvNmmUAae.e8sIUgfkixdgfAJqWr17R.jjldSAsK",
    "enabled": true,
    "authorities": [
        {
            "authority": "Usuario"
        }
    ],
    "accountNonLocked": true,
    "accountNonExpired": true,
    "credentialsNonExpired": true
}

BCrypt 🔏

Foi usado a criptografia do algoritimo HMAC256 para criptografar as senhas dos usuários e armazenalas no banco de dados da maneira correta seguindo os padrões estabelecidos pela LGPD.

Login 🔒

É necessario passar o email e senha fornecidos durante o registro, caso seja valido, sera devolvido um Token JWT para autenticação.

Dados necessarios:

• ➡️ seu login (email)
• ➡️ sua senha

Exemplo de request body:

{
    "login": "[email protected]",
    "password": "12345678"
}

Token JWT 🔑

Exemplo de Token JWT gerado caso a requisição de login seja bem sucedida, nele possui os dados relacionados ao usuario que o gerou e tem validade de 2 horas.

Exemplo de response body:

{
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9. TyJzdWIiOiJlZG5hbGRvLmVsbjY4QGdtYWlsLmNvbSIsImlzcyI6IlRvLWRvIGxpc3QiLCJleHAiOjE2OegwODY1MTB9.gFolC6lmSqS9FiAdM1zIX0CftVAokc495pkMNnDYLaU"
}

Diagrama de sequencia 📝

Esse diagrama ilustra o processo da requisição do usuário, aonde ela é enviada do Front-end até o servidor, aonde ela sera processada e se validada, retorna um Token JWT que será armazenado no localstorage do navegador.

sequenceDiagram
    participant User as Usuario
    participant Application as Front-end
    participant Server as Back-end

    User->>Application: 1. Inicia o processo de login
    Application->>Server: 2. Envia solicitação de login (POST /auth/login)
    Server->>Server: 3. Verifica as credenciais no banco de dados
    Server-->>Application: 4. Confirmação de sucesso (HTTP 200)
    Server-->>Application: 5. Gera um token JWT
    Application-->>User: 6. Logado com sucesso

Loading

---

Criação de Tasks ☑️

Dados necessarios:

• ➡️ titulo da tarefa
• ➡️ descrição da tarefa (opcional)
• ➡️ prioridade (BAIXA, MEDIA, ALTA)
• ➡️ data inicio da tarefa
• ➡️ data prevista para finalizar
• ➡️ email do usuario

⚠️ OBS: no Front-end o email não é necessario, visto que ele é atribuido automaticamente atraves da decodificação do token JWT enviado

Exemplo:

{
    "title": "Estudar",
    "description": "estudar orientação a objetos com Java",
    "priority": "ALTA",
    "startAt": "2023-11-06T12:30:00",
    "endAt": "2023-11-08T12:30:30",
    "userLogin": "[email protected]"
}

Diagrama de Classes 📝

Diagrama ilustrativo do modelo orientado a objetos dando uma breve visão de como o sistema e as entidades do banco de dados estão ligadas usando um SGBD relacional

classDiagram
direction RL
    class UserModel {
        -id: Long
	-username: String
        -login: String
        -password: String
	-tasks: List < TaskModel >
      }
    
    class TaskModel {
	-id: Long
	-description: String
	-title: String
	-startAt: LocalDateTime
	-endAt: LocalDateTime
	-priority: Priority
	-userLogin: UserModel
	-createdAt: LocalDateTime
     }

    class Priority {
    <<enumeration>>
        BAIXA
        MEDIA
        ALTA
   }

    UserModel "1" -- "0..*" TaskModel : Tem
    TaskModel "1" -- "1" UserModel : Possui

Loading

Chat Assistente 💬

Caso envie uma mensagem, ela será validade pela Api do GPT 3.5, caso ele encontre uma solução, irá enviar uma resposta.

Dados necessarios:

• ➡️ pergunta/descrição da Task

Exemplo de request body:

{
    "prompt": "olá, bom dia!"
}

Exemplo de response body:

{
    "role": "assistant",
    "content": "Olá! Bom dia! Como posso ajudar?"
}

Principais Bibliotecas 📚

OpenAI GPT 3.5 🤖

biblioteca usada para realizar conexão com a API do ChatGPT

<dependency>
	<groupId>com.theokanning.openai-gpt3-java</groupId>
	<artifactId>service</artifactId>
	<version>0.16.0</version>
</dependency>

Spring Security 🔒

biblioteca usada para filtrar as requisições e autenticar os usuários

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-security</artifactId>
</dependency>

Auth0 JWT 🔏

biblioteca usada para gerar o Token JWT

<dependency>
	<groupId>com.auth0</groupId>
	<artifactId>java-jwt</artifactId>
	<version>4.2.1</version>
</dependency>

Docker Compose 🐳

biblioteca usada em conjunto com o docker-compose.yml para criação do container com a imagem do MySQL

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-docker-compose</artifactId>
	<version>3.1.0</version>
</dependency>

Tech Stack Utilizada 🛠️

MySQL	Hibernate	Spring Boot	Java	Javascript	VSCode	Postman	Docker
🔖 8.1.0	🔖 6.3	🔖 3.1.4	🔖 17	🔖 ES6	🔖 1.83	🔖 10.19	🔖 24.0.6

Executar o Projeto

git clone https://github.com/EdnaldoLuiz/to-day-list.git
cd to-day-list

Requisitos

• Java Development Kit (JDK)
• Node.js
• npm
• Docker

Rodar o Back-end

./mvnw spring-boot:run

Back-end: http://localhost:8080
MySQL: http://localhost:3307

⚠️ OBS: o docker-compose é iniciado junto graças a biblioteca spring-boot-docker-compose

Rodar o Front-end

cd front-end
npm run start

Front-end: http://localhost:3333