Experiência Conversacional FURIA

Uma experiência conversacional imersiva criada para a comunidade da FURIA Esports. Este projeto implementa um chatbot completo, desde a API RESTful em Spring Boot (Java) até um frontend reativo com React/Next.js, permitindo que os fãs se conectem com o time de uma forma única.

Caso queira testar em seu navegador: Link do deploy com banco de dados em mémoria

Principais Funcionalidades:

• Verificação de Status ao Vivo: Integração em tempo real com a API da Twitch para notificar quais jogadores estão em live.

• Banco de Dados de Jogadores: Consulta de informações detalhadas, como redes sociais, mapas e skins favoritas, gerenciado com JPA e Flyway.

• Sistema de Feedback: Permite que os fãs enviem sugestões diretamente através do chat, que são salvas e podem ser consultadas.

📑 Sumário

• Experiência Conversacional FURIA
• Tecnologias 🛠
• 🚀 Como Rodar o Projeto Localmente
  • 1. Crie as credenciais da Twitch
  • 2. Configuração do Ambiente
  • 3. Baixando dependências
  • 4. Rodando pela primeira vez
• 🧪 Testes e Qualidade de Código
  • Como Executar os Testes
  • Estratégia de Testes
• Preview
  • 1. BackEnd
    • 1.1. Interação com o Chat em /chat
    • 1.2. Listagem de Sugestão em /sugestoes
    • 1.3. Cadastro e listagem de Jogador em /jogador/
  • 2. FrontEnd
• Autor

Tecnologias 🛠

• Linguagens: Java em BackEnd, Javascript em FrontEnd
• Banco de dados relacional: MySQL
• ORM: Hibernate
• Migrations: Flyway
• FrameWork e Dependências:
  • BackEnd em Spring
    • Data JPA
    • Lombok
    • DevTools
    • Spring Web
    • MySQLDriver
  • FrontEnd com NextJs:
    • React
    • TaillWindCSS
• APIs Externas
  • Twitch API

🚀 Como Rodar o Projeto Localmente

1. Crie as credenciais da Twitch

Para utilizar a API da Twitch, você precisa gerar suas próprias credenciais. Siga os passos abaixo para criar uma conta de desenvolvedor e obter seu client_id e client_secret:

1. Acesse Twitch Developer Console.
2. Crie uma nova aplicação clicando em "Register Your Application / Registre seu aplicativo".
3. Em Nome, coloque um nome unico qualquer, ex: APIKEYCHATBOT{seuUsuariodaTwitch}
4. Em URLs de redirecionamento OAuth, coloque http://localhost:8080/chat
5. Em categoria coloque ChatBot
6. Em tipo de cliente deixe como Confidencial
7. Clique em criar
8. Salve o client_id e client_secret gerados.

2. Configuração do Ambiente

Crie um arquivo application.properties em /src/main/resources/. Você pode usar este arquivo: /src/main/resources/application-example.properties, ele já esta no mesmo diretório basta trocar o nome e substitua pelas suas credenciais da Twitch e demais informações: Para usuario e senha do banco de dados, nas linhas 4 e 5, foi utilizado de variaveis de ambiente com os valores de usuario(DB_USER) e senha(DB_PASSWORD) do banco, você pode criar essas variaveis, com estes nomes:

Ou apenas colocar o valor, ex: spring.datasource.username=username

Também vai ser necessário colocar o número da porta do MySQL na linha 3, troque o 3306 pela porta em que esta o seu MySQL, nessa mesma linha garante que a database chatfuriacs seja criada ao rodar o projeto

Por fim, você vai colocar client_id e client_secret, da API da Twich, nas linhas 12 e 13:

3. Baixando dependências

• Backend:
  • Com o projeto baixado, e o Maven instalado, utilize a IDE de sua preferência, baixe as dependencias do projeto com o Maven, no terminal você vai entrar no diretorio: /backend/ usar o comando mvn install.
• FrontEnd:
  • Necessario ter o Node instalado, abra um terminal dentro do diretório /frontend/chatbot-furia/ e use os seguintes comandos:
    • npm install: instala as dependências e cria a pasta /node_modules
    • npm run dev: com tudo instalado roda a aplicação, informando em qual porta o frontend está rodando, normalmente o NextJs roda em http://localhost:3000
  • A rota do chatbot está em /chat, mas eu configurei para o "/" redirecionar para a rota do chat, um exemplo: http://localhost:3000 vai redirecionar para http://localhost:3000/chat

4. Rodando pela primeira vez

• Backend:

  • dentro do diretorio: /backend/ usar o comando mvn spring-boot:run.

  • Caso ocorra tudo certo, após alguns segundos o resultado no terminal será algo parecido com a imagem abaixo:

    

  • Quando é rodado o backend pela primeira vez a JPA e o Flyway realizam:

    • Criação da database chatfuriacs
    • Criação das tabelas: redes_sociais, mapa_favorito, skin_favorita, jogador e sugestao
    • Inserção de dados dos jogadores atuais da Furia incluindo as redesSociais, mapas favoritos e skins favoritas

  • Caso queira testar apenas o backend é possivel utiliziar Postman ou Insominia

• FrontEnd:

  • Com as dependências instaladas, basta usar npm run dev, dentro do diretório /frontend/chatbot-furia/
  • Caso ocorra tudo certo o resultado no terminal será algo parecido com a imagem abaixo:

  

  • Abra o navegador de sua preferência e entre em no endereço informado no terminal em local, seguindo a imagem acima eu devo entrar em http://localhost:3030 isso irá te redirecionar para a tela de interação com o chatbot em /chat

  

  • Aqui é necessário o backend estar rodando também, se as opções, botões verdes, não aparecerem é por que o backend não esta rodando

🧪 Testes e Qualidade de Código

Este projeto leva a qualidade de código a sério, utilizando uma suíte de testes automatizados para garantir a estabilidade, confiabilidade e corretude da lógica de negócio no backend. A estratégia de testes foi desenvolvida para cobrir as diferentes camadas da aplicação.

Como Executar os Testes

Para rodar todos os testes unitários e de integração do backend, certifique-se de estar no diretório /backend e execute o seguinte comando Maven:

bash mvn test

Este comando irá compilar o código, baixar as dependências necessárias e executar todos os testes localizados em src/test/java. Os testes são executados em um ambiente controlado utilizando um banco de dados em memória (H2) para não impactar seu banco de dados de desenvolvimento.

Estratégia de Testes

A aplicação adota uma abordagem de pirâmide de testes, focando em:

• Testes de Unidade (Services): Focados em testar as regras de negócio nas classes de serviço (@Service).
  • As dependências externas, como Repositórios e outros Serviços, são simuladas (mocadas) com Mockito, garantindo que a lógica de cada método seja testada de forma rápida e isolada.
    • Jogador:
      • É testado se suas associações são criadas e salvas ao cadastrá-lo
      • É testado se está sendo feito duplicadas de associações já salvas

🔎 Preview

1. BackEnd:

1.1. Interação com o Chat em /chat

• GET : Exibe o menu com as opções cadastradas

• POST: Colocar no body { "opcao":"numero da opcao desejada" }

  • POST{"opcao" : "1"} : Utiliza da API da Twich para verificar, enviando o canal da twitch de cada jogador cadastrado, se um ou mais estão em live. Se pelo menos 1 jogador estiver, retorna o nome dele, o link do canal da twitch e qual jogo estão jogando, caso nenhum esteja, retorna os nomes do jogadores e os links do canal da twitch de cada um. Exemplo:

  • POST{"opcao" : "2"} : Retorna as redes sociais dos jogadores cadastrados no banco de dados da API do chat

  • POST{"opcao" : "3"} : Retorna as skins e mapas favoritos de cada jogador

  • POST { "tipo": "tipo de sugestão, ex: Melhoria", "descricao": "colocar aqui a sua suguestão", "emailUsuario": "colocar aqui seu email para caso necessario entrar em contato para entender melhor sua sugestão" } : Salva uma sugestão no banco de dados com os dados enviados no body

1.2. Listagem de Sugestão em /sugestoes

• GET: Exibe todos as sugestões cadastrados

• GET (/sugestoes/id): Exibe a sugestão que tenha o id infor