Skip to content

Latest commit

 

History

History
367 lines (272 loc) · 14.6 KB

README.md

File metadata and controls

367 lines (272 loc) · 14.6 KB
Raw

Trevor - Assistente de Viagens

Trevor é um assistente de viagens inteligente que te ajuda a planejar cronogramas para suas viagens de acordo com suas necessidades.

Integrantes

Documentação do Projeto: Sistema de Geração de Roteiros de Viagem

Para rodar o projeto:

  1. Na pasta backend, crie um arquivo .env e use os parametros do .env.template

  2. Abra um terminal para o backend:

    cd backend

    npm i

    npm start

  3. Abra um novo terminal para a pasta frontend:

    cd frontend

    npm i

    npm start

Objetivo

O objetivo deste sistema é oferecer uma plataforma interativa e prática para os usuários gerarem roteiros de viagem personalizados. O sistema utiliza o ChatGPT para criar um roteiro detalhado baseado nas preferências e características da viagem, como tipo de viagem, destino, número de dias, e presença de crianças ou animais de estimação.

Visão Geral

O projeto é composto por três partes principais:

  1. Front-end: Interface de usuário responsável pela coleta de dados e exibição dos roteiros. Desenvolvido em ReactJS
  2. Back-end: Processamento das requisições e comunicação com o modelo ChatGPT. Desenvolvido em NodeJS
  3. Banco de Dados: Armazenamento de histórico e registros dos roteiros gerados. Desenvolvido com PostgreSQL no Aiven.

Front-end

1. Componente: Left

O componente Left contém os arquivos historico.js e roteiro.js.

Funcionalidade:

  • Histórico: Exibe os roteiros gerados pelo usuário.
  • Roteiro: Exibe detalhes de um roteiro específico.

Componentes:

  1. Historico:

    • Descrição: Exibe um botão para criar um novo roteiro e uma lista de roteiros gerados anteriormente.
    • Botão "Novo Roteiro": Abre a modal do componente Forms para criar um novo roteiro.
    • Título "Histórico de Roteiros": Exibe o título da seção de histórico.
    • Props: Recebe props.children para renderizar a lista de roteiros.

  2. Roteiro:

    • Descrição: Exibe um item de roteiro na lista de histórico.
    • Imagem: Exibe a imagem associada ao roteiro.
    • Título: Exibe o título do roteiro.
    • Data: Exibe a data de criação do roteiro.
    • Props: Recebe props.img, props.title, e props.data para renderizar as informações do roteiro.

2. Componente: Right

O componente Right contém os arquivos chat.js e message.js.

Funcionalidade:

  • Chat: Interface de chat onde o usuário pode interagir com o assistente de viagem Trevor.
  • Mensagem: Exibe mensagens enviadas e recebidas no chat.

Componentes:

  1. Chat:

    • Descrição: Exibe a interface de chat com o assistente Trevor.
    • Imagem do Assistente: Exibe a imagem do assistente Trevor.
    • Nome do Assistente: Exibe o nome "Trevor".
    • Speed Dial: Exibe um botão flutuante com opções de "Salvar" e "Refazer".
    • Toast: Exibe notificações de ações realizadas.
    • Props: Recebe props.children para renderizar as mensagens do chat.

  2. Message:

    • Descrição: Exibe uma mensagem no chat.
    • Data de Envio: Exibe a data e hora de envio da mensagem.
    • Lado da Mensagem: Define se a mensagem é do assistente Trevor (esquerda) ou do usuário (direita).
    • Imagem do Remetente: Exibe a imagem do remetente da mensagem.
    • Nome do Remetente: Exibe o nome do remetente da mensagem.
    • Conteúdo da Mensagem: Exibe o conteúdo da mensagem.
    • Props: Recebe props.dtEnvio, props.owner, e props.children para renderizar as informações da mensagem.

1. Componente: Forms

O componente Forms é uma modal que se abre com diversas informações e campos de entrada.

Campos de Entrada (Inputs):

  1. Input Nome da Cidade:

    • Tipo: Texto (String)
    • Descrição: Campo onde o usuário insere o nome da cidade ou cidades (separadas por vírgula) que deseja visitar.
    • Validação:
      • O campo não pode estar vazio.
      • Aceita múltiplos nomes de cidades separados por vírgula.
    • Exemplo de Entrada: "Paris, Roma, Barcelona"
    • Obrigatório: Sim

  2. Input Quantidade de Dias:

    • Tipo: Número Inteiro (Int)
    • Descrição: Quantidade de dias disponíveis para a viagem.
    • Validação:
      • Deve ser um número inteiro positivo.
    • Exemplo de Entrada: 7
    • Obrigatório: Sim

  3. Combo Box - Tipo de Viagem:

    • Opções:
      • Paisagens Naturais
      • Gastronomia
      • Arquitetura
      • Cultura e Artes
      • Vida Noturna
      • Pontos Turísticos Gerais
    • Descrição: Seleção do tipo de viagem que o usuário deseja realizar.
    • Validação:
      • Uma das opções deve ser selecionada.
    • Obrigatório: Sim

Opções (Checkboxes):

  1. Viajando com Criança:

    • Tipo: Checkbox
    • Descrição: O usuário indica se está viajando com uma ou mais crianças.
    • Validação: Não obrigatória.
    • Ação: Este campo ajusta as sugestões de atividades adequadas para crianças.

  2. Viajando Sozinho:

    • Tipo: Checkbox
    • Descrição: O usuário indica se está viajando sozinho.
    • Validação: Não obrigatória.
    • Ação: Este campo pode ajustar as sugestões para atividades e experiências mais adequadas para viajantes solo.

  3. Viajando com Animais de Estimação:

    • Tipo: Checkbox
    • Descrição: O usuário indica se está viajando com animais de estimação.
    • Validação: Não obrigatória.
    • Ação: Este campo pode ajustar o roteiro com sugestões de locais pet-friendly.

Campos de Data (Date Pickers):

  1. Data de Partida:

    • Tipo: Date Picker
    • Descrição: Campo onde o usuário seleciona a data de partida da viagem.
    • Validação:
      • A data deve estar dentro do intervalo permitido (1900-01-01 a 2099-12-31).
    • Obrigatório: Sim

  2. Data de Retorno:

    • Tipo: Date Picker
    • Descrição: Campo onde o usuário seleciona a data de retorno da viagem.
    • Validação:
      • A data deve estar dentro do intervalo permitido (1900-01-01 a 2099-12-31).
    • Obrigatório: Sim

Campo de Observações:

  1. Observações:
    • Tipo: Textarea
    • Descrição: Campo onde o usuário pode adicionar observações adicionais sobre a viagem.
    • Validação: Não obrigatória.

Campo de Orçamento (Range):

  1. Orçamento:
    • Tipo: Range
    • Descrição: Campo onde o usuário define o orçamento disponível para a viagem.
    • Validação:
      • O valor deve estar dentro do intervalo permitido (0 a 10000).
    • Exemplo de Entrada: 5000
    • Obrigatório: Sim

Botões:

  1. Botão "Próximo":

    • Ação: Avança para a próxima etapa do formulário.
    • Validação: Todos os campos obrigatórios da etapa atual devem estar preenchidos antes de prosseguir.

  2. Botão "Anterior":

    • Ação: Retorna para a etapa anterior do formulário.

  3. Botão "Finalizar":

    • Ação: Submete o formulário e envia os dados para o back-end para processamento.
    • Validação: Todos os campos obrigatórios devem estar preenchidos antes de submeter.

Barra de Progresso:

  1. Barra de Progresso:
    • Descrição: Exibe o progresso do preenchimento do formulário em porcentagem.
    • Cálculo: A porcentagem é calculada com base no número de etapas concluídas.

. Componente Raiz: Index

O arquivo index.js é o ponto de entrada principal do front-end, onde os componentes são renderizados na tela principal.

Funcionalidade:

  • Renderização dos Componentes: Renderiza os componentes Historico, Chat, Message, Forms e Modal na tela principal.

Componentes:

  1. Historico:

    • Descrição: Exibe o histórico de roteiros gerados.
    • Roteiros: Exibe uma lista de roteiros gerados anteriormente.
    • Props: Recebe props.children para renderizar a lista de roteiros.

  2. Roteiro:

    • Descrição: Exibe um item de roteiro na lista de histórico.
    • Props: Recebe props.img, props.title, e props.data para renderizar as informações do roteiro.

  3. Chat:

    • Descrição: Exibe a interface de chat com o assistente Trevor.
    • Mensagem: Exibe uma mensagem de boas-vindas do assistente Trevor.
    • Props: Recebe props.children para renderizar as mensagens do chat.

  4. Message:

    • Descrição: Exibe uma mensagem no chat.
    • Props: Recebe props.dtEnvio, props.owner, e props.children para renderizar as informações da mensagem.

  5. Forms:

    • Descrição: Exibe o formulário para criação de um novo roteiro.
    • Modal: Exibe o formulário dentro de uma modal.

Back-end

O back-end é responsável por receber os dados do front-end, fazer a integração com o modelo ChatGPT e armazenar as informações no banco de dados.

Processo de Geração do Roteiro:

  1. Coleta de Dados:

    • O sistema coleta os dados dos inputs fornecidos pelo usuário na tela principal, como cidade, número de dias, tipo de viagem, datas de partida e retorno, orçamento, e se está viajando com crianças, sozinho ou com animais de estimação.

  2. Estruturação do Prompt:

    • Um prompt é criado com base nas entradas do usuário, seguindo a estrutura abaixo:
    Quero que você me gere 5 roteiros de viagem para: {cidade}. 
A viagem será do tipo {tipo de viagem} e ocorrerá entre os dias {data de partida} e {data de retorno}. 
Estarei viajando {sozinho ou com companhia}, 
{com ou sem crianças}, 
{com ou sem animais de estimação}. 
Pretendo gastar até {orçamento} por pessoa. E tenho as seguintes observações: {observações}.

  3. Exemplo de Prompt:

    Quero que você me gere 5 roteiros de viagem para: Paris. 
A viagem será do tipo gastronomia e ocorrerá entre os dias 2024-06-01 e 2024-06-06. 
Estarei viajando com companhia, 
com crianças, 
sem animais de estimação. 
Pretendo gastar até 5000 por pessoa. E tenho as seguintes observações: sem observações.

  4. Processamento pelo ChatGPT:

    • O prompt é enviado ao ChatGPT, que retorna um roteiro detalhado e personalizado.

  5. Exibição do Roteiro:

    • O roteiro gerado é exibido no front-end.

Tela de Histórico:

  1. Consulta ao Banco de Dados:

    • A tela de histórico exibe as últimas pesquisas realizadas.
    • Query de Seleção:
    SELECT rot.id_exeo, rot.dt_exeo, rot.id_historico, hst.nome_destino
FROM log_roteiro rot LEFT JOIN historico hst ON rot.id_historico = hst.id;

  2. Abertura do Roteiro Completo:

    • O usuário pode visualizar um roteiro anterior ao clicar em um item na lista.

    Banco de Dados

    O banco de dados é usado para armazenar as informações de roteiros gerados e garantir que o histórico de pesquisas do usuário seja preservado.

    Conexão com o Banco de Dados:

    A conexão com o banco de dados é feita utilizando o módulo pg do Node.js e um certificado SSL para garantir a segurança da conexão.

    Estrutura da Tabela:

    • Nome da Tabela: historico

    Campos:

    Campo Tipo Descrição
    dt_ida date Data de partida da viagem.
    dt_volta date Data de retorno da viagem.
    nome_destino string Nome(s) da(s) cidade(s) para o roteiro.
    tipo_viagem string Tipo de viagem (ex: Gastronomia, Cultura).
    viajando_sozinho boolean Indica se o usuário está viajando sozinho.
    tem_animal boolean Indica se o usuário está viajando com animais de estimação.
    valor_pessoa int Orçamento por pessoa.
    obs_viagem string Observações adicionais sobre a viagem.
    tem_crianca boolean Indica se o usuário está viajando com crianças.
    • Nome da Tabela: log_roteiro

    Campos:

    Campo Tipo Descrição
    res_message string Mensagem de resposta do ChatGPT.
    dt_exeo datetime Data e hora em que a execução foi realizada.
    id_historico int ID do histórico associado.

    Validações e Tratamento de Erros

    Validações no Front-end:

    • Verificar se os campos obrigatórios foram preenchidos.
    • Garantir que o número de dias seja um valor inteiro positivo.

    Validações no Back-end:

    • Checar se os dados enviados pelo front-end estão corretos antes de enviar o prompt para o ChatGPT.
    • Gerenciar erros de resposta do ChatGPT, garantindo que respostas incompletas ou inválidas sejam tratadas corretamente.

    Fluxo Resumido

    1. Tela Principal:

      • O usuário preenche as informações necessárias para a viagem.
      • O sistema gera um roteiro via ChatGPT.
      • O roteiro é exibido e salvo no banco de dados.

    2. Tela de Histórico:

      • O sistema exibe as últimas pesquisas realizadas.
      • O usuário pode visualizar roteiros completos gerados anteriormente.