elizabetefabri/sap012-dataverse-chat

💬 Dataverse Chat

Projeto 03 - DataverseChat Comunidade Criativa

📚 Confira meu caderno de estudos:

📝 Ferramentas utilizadas no sistema DataverseChat

• GitHub do Projeto
• Figma - Protótipo do projeto

Este projeto exibe vários personagens, cada um dos quais pode interagir por meio de um sistema de chat desenvolvido pela API OpenAI.

Nº	Status	Etapas	Etapas do Desenvolvimento do Projeto
01		Marco 01 SPA - Protótipos.
02		Marco 02 DADOS - Vizualização do sistema, funções de filtragem, ordenação e cálculo.
03		Marco 03 API - Conectar com API OpenAI(chat individual).
04		Marco 04 API - Conectar a API OpenAI(chat grupal).

Instalação

Instale meu projeto com npm

npm install my-project
cd my-project
npm run start

Executando testes

npm run test

📱 Páginas do Mobile

Página do Home Mobile	Componente Modal

Página do Chat em Grupo Mobile	Página do Chat Individual Mobile

💻 Página Home e componente Modal

💻 Página do Chat em Grupo

💻 Página do Chat em Individual

Desenvolvido por Elizabete Fabri 💚

sap012-dataverse-chat's Issues

Criação de uma visualização para interagir com todos os elementos do conjunto de dados

Tarefas deste marco

• Criação de uma visualização para interagir com todos os elementos do conjunto de dados
• Consumo da integração com Open AI
• Implementação de testes

1. Navegue até a pasta views em seu projeto e dentro dela,
   crie um componente para a visualização do chat grupal,
   por exemplo, ChatGroup.js ou Panel.js,
   que mostrará um chat grupal com todos os personagens.
   Este componente deve permitir aos usuários enviar
   mensagens para todos os personagens ou elementos do conjunto de dados
   e receber respostas.

2. A visualização deve ser capaz de obter os dados necessários (id) para
   mostrar os elementos do conjunto de dados.
   Isso pode ser feito passando os dados como parâmetros ou utilizando
   funções que obtêm os dados.

Consumo da integração com Open AI

Obtenha as respostas de todos os elementos nos dados utilizando
a função designada para consumir a API da OpenAI,
neste exemplo, communicateWithOpenAI.
Isso permitirá que os usuários interajam com todos os
personagens através
de um chat grupal.

[!DICA]
Revise o tópico de
Promessas
e o método
Promise.all()

Para alcançar este objetivo, siga estes passos:

1. Obtenha a lista de elementos nos dados.

2. Para cada elemento na lista:

   • Envie uma mensagem para a função communicateWithOpenAI.
   • Guarde a resposta da função communicateWithOpenAI.
   • Mostre a resposta da função communicateWithOpenAI.

Criação de Visualizações da SPA

1. Seguindo este guia, vá até a pasta views.
2. Crie dois arquivos: Home.js e About.js, cada um desses arquivos representará uma visualização.
3. Dentro de cada arquivo, adicione pelo menos um elemento ou texto representativo da visualização correspondente.

Precisa de Ajuda?

Se em algum momento você tiver dúvidas ou perguntas durante o desenvolvimento deste projeto, não hesite em procurar ajuda! Lembre-se de que você pode contar com:

• Documentação do Projeto: Certifique-se de revisar cuidadosamente a documentação fornecida no README; especialmente as dicas, sugestões e leituras complementares.

• Coaches: Os coaches estão aqui para ajudar você. Se você enfrentar obstáculos que a documentação não resolve ou se precisar de uma explicação mais detalhada, não hesite em solicitar uma OH ou nos enviar uma mensagem pelo Slack.

👈Todos os marcos

Migração do conjunto de dados do Dataverse

Tarefas deste marco

• Migração do conjunto de dados do Dataverse
• Reutilização de Funções do Dataverse
• Configuração de testes para funções migradas
• Visualizar o conjunto de Dados

Crie uma pasta chamada data dentro de src.
Dentro dessa pasta, crie um arquivo dataset.js e
copie seu conjunto de dados para esse arquivo.

// src/data/dataset.js

export default [
  {
    "id": "marie-curie",
    "name": "Marie Curie",
    "shortDescription": "Física e química, ganhadora de dois Prêmios Nobel.",
    "description": "física e química ...",
    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/marie-curie.jpg",
    "facts": {
      "yearOfBirth": "1867",
      "yearOfDeath": "1934",
      "birthPlace": "Varsóvia, Polônia",
      "mainField": "Física e Química"
    },
    "extraInfo": {
      "imageSource": "https://www.historyextra.com/period/first-world-war/life-of-the-week-marie-curie/"
    }
  },
]

Protótipo de Dataverse

Tarefas deste marco

• Protótipo de Dataverse
• Criação de Visualizações da SPA

Projete as visualizações da página inicial, onde serão apresentados os elementos do seu conjunto de dados, bem como as visualizações de Chat Individual e Chat em Grupo. A premissa é otimizar e reutilizar o design do protótipo do projeto anterior, incorporando exclusivamente a visualização de chat individual e/ou chat em grupo, evitando a necessidade de reinventá-lo.

É fundamental que a sua proposta visual não apenas reflita a essência da sua solução ideal, mas também siga estritamente os princípios fundamentais do design visual.

[!DICA]
Use a identidade visual ou o protótipo do seu projeto anterior.

• Desenvolver o layout da Landing Page Desktop
• Desenvolver o layout do Landing Page Chat individual
• Desenvolver o layout do Landing Page Chat em Grupo
• Desenvolver o layout da Landing Page Mobile
• Desenvolver o layout da Landing Page de Mobile Individual
• Desenvolver o layout da Landing Page de Mobile e Grupo
• Desenvolver o layout do logo
• Desenvolver o layout do favicon

Implementar a divisão dos componentes menores

Uma vez identificadas as partes que podem ser divididas,
você deve implementar a divisão em componentes menores.
Isso pode ser feito de várias maneiras, como:

1. Criar novos componentes a partir de código existente.
2. Mover código existente para componentes existentes.
3. Reestruturar o código existente para que seja mais modular.

Manejo da API KEY na Aplicação

Tarefas deste marco

• Manejo da API KEY na Aplicação
• Armazenamento Seguro da API KEY com Local Storage
• Testes para funções de API Key
• Criação de uma visualização para interagir com cada elemento do conjunto de dados
• Integração com Open AI

O manejo das API KEYs é crucial para manter a segurança.
A fim de não incluir a chave diretamente no código do aplicativo,
crie um campo de entrada que permita inserir ou colar a API KEY.
Este campo de entrada pode estar localizado em uma visualização,
diálogo ou modal.

Integração com Open AI

Para obter respostas de cada elemento ou personagem e poder interagir com ele ou ela, é essencial fazer uma solicitação HTTP para a OpenAI. Neste processo, é recomendável se familiarizar com os conceitos de promessas e considerar o uso de
fetch ou axios para realizar a solicitação.

Sugerimos que você organize o código associado a esta tarefa dentro da pasta lib.
Nesta pasta, você pode criar um arquivo chamado openAIApi.js, que conterá uma função específica. Esta função deve receber um parâmetro que armazena as mensagens; tenha em mente que essas mensagens devem seguir uma estrutura específica, que você pode entender melhor consultando a documentação fornecida pela OpenAI.

// src/lib/openAIApi.js

// Importa la función para obtener la API KEY desde apiKey.js
import { getApiKey } from './apiKey.js';


export const communicateWithOpenAI = (messages) => {
   //Aquí es donde debes implementar la petición con fetch o axios
};

[!NOTA]
communicateWithOpenAI é uma sugestão para o nome
da sua função. Você pode escolher o nome que preferir.

👈Todos os marcos

Implementação de testes

Para verificar o funcionamento das funções criadas, crie um arquivo
openAIApi.spec.js na pasta test.

[!DICA]
Você pode revisar esta documentação sobre Testes de código assíncrono.

// test/openAIApi.spec.js

import { communicateWithOpenAI } from '../src/utils/openAIApi.js';

describe('communicateWithOpenAI', () => {
  test('communicateWithOpenAI', () => {
    return communicateWithOpenAI().then(data => {
      expect(data).toBe('example');
    });
  });
});

[!NOTA]
communicateWithOpenAI é uma sugestão para o nome
da sua função. Você pode escolher o nome que preferir.

👈Todos os marcos

Testes para funções de API Key

Dentro da pasta test, crie um arquivo chamado
apiKey.spec.js. Neste arquivo, desenvolva os
testes correspondentes. Você pode utilizar o seguinte
esquema como ponto de partida:

// test/apiKey.spec.js

import { getApiKey, setApiKey } from '../src/lib/apiKey.js';

describe('getApiKey', () => {

  it('debería devolver el valor de la API Key', () => {
    // Desarrolla el test correspondiente aquí
  });
});

describe('setApiKey', () => {

  it('debería establecer correctamente la API Key', () => {
   // Desarrolla el test correspondiente aquí
  });
});

Armazenamento Seguro da API KEY com Local Storage

Para garantir a segurança e persistência da
API KEY, sugere-se utilizar Local Storage.
Recomendamos seguir estes passos:

1. Na pasta lib, crie um novo arquivo chamado apiKey.js.

2. Dentro de apiKey.js, implemente duas funções essenciais:

// src/lib/apiKey.js

export const getApiKey = () => {
   // Implementa el código para obtener la API KEY desde Local Storage
};

export const setApiKey = (key) => {
  // Implementa el código para guardar la API KEY en Local Storage
};

Configuração de testes para funções migradas

Para continuar com as migrações, é necessário criar uma
pasta test na
raiz do projeto. Dentro da pasta test, crie um arquivo
dataFunctions.spec.js. Neste arquivo, copie seus testes do Dataverse
e ajuste as importações para que funcionem corretamente.

// test/dataFunctions.spec.js

import { data } from '../src/data/dataset.js';
import { filterData } from '../src/lib/dataFunctions.js';

console.log(data);

describe('filterData', () => {

  it('returns `filterData`', () => {
    expect(filterData()).toBe('example');
  });
});

[!DICA]
Na pasta de testes, considere ter um arquivo de teste
(suite) para cada arquivo JavaScript que deseja testar.

Visualizar o conjunto de Dados

Uma vez que as funções estejam em dataFunctions.js
junto com seus respectivos testes,
podemos avançar com a visualização do conjunto de dados.
O objetivo é conseguir visualizar
o conjunto de dados de forma semelhante ao Dataverse, mas dentro da SPA.

Para alcançar isso, recomendamos que você faça modificações
no arquivo Home.js localizado na pasta views.
Este arquivo deve conter o código necessário para
visualizar o conjunto de dados. Tenha em mente que,
neste caso, cada visualização deve retornar
um elemento para que possa ser renderizado pelo router.
É provável que você precise adaptar o
código da sua visualização anterior para modificar um novo elemento
dentro desta visualização Home.js.
Se tiver dúvidas, você pode revisar novamente o
guia do router
e consultar os coaches para obter
mais clareza neste processo.

// src/views/Home.js

import { data } from '../data/dataset.js';
import { filterData } from '../lib/dataFunctions.js';

export function Home(props) {
  const viewEl = document.createElement('div');
  //Modificariamos el contenido del nuevo elemento con lo realizado en Dataverse
  viewEl.innerHTML = `
    <h1>DataVerse</h1>
    ...
  `;
  return viewEl;
}

👈Todos os marcos

Assegurar funcionamento pós-refatoração

É importante testar o aplicativo após a refatoração para garantir
que ele funcione corretamente. Isso pode ser feito testando
o aplicativo manualmente ou utilizando um framework de testes automatizados.

Exemplo

Vamos supor que temos um aplicativo que mostra uma lista de personagens.
O aplicativo possui uma visualização que exibe a lista de personagens,
e uma função que obtém os dados dos personagens.

Para melhorar a estrutura e organização do aplicativo,
podemos dividir a função getCharacters() em dois componentes
menores:

1. Um componente CharacterRepository que é responsável por obter
   os dados dos personagens.

2. Um componente CharacterList que é responsável por exibir a lista de personagens.

Essa divisão nos permite separar a lógica de obtenção de dados
da lógica de visualização. Isso torna o aplicativo mais fácil de entender e manter.

👈Todos os marcos

Identificar partes para dividir

• Identificar partes para dividir
• Implementar a divisão dos componentes menores
• Assegurar o funcionamento pós-refatoração

Para esta tarefa, você deve examinar o aplicativo e buscar áreas
que possam ser divididas em componentes menores.
Algumas coisas a serem consideradas são:

1. Funções que realizam tarefas independentes.
2. Dados que são usados de forma independente.
3. Interface do usuário que pode ser dividida em partes menores.

Criação de uma visualização para interagir com cada elemento do conjunto de dados

Para facilitar a interação com um elemento específico do nosso
conjunto de dados, criaremos uma nova visualização. Siga estes passos:

1. Acesse a pasta views do seu projeto.
   Se encontrar um arquivo chamado About.js,
   renomeie-o conforme o conjunto de dados
   com o qual está lidando, como por exemplo Planet.js
   se estiver trabalhando com dados de planetas.
   Se o arquivo About.js não existir,
   você pode criar um novo com um nome relevante.

2. Dentro deste arquivo, desenvolva a visualização que permitirá interagir
   com os elementos do conjunto de dados. Você pode incluir componentes como botões,
   formulários ou qualquer outro elemento necessário para alcançar o objetivo específico
   da sua aplicação.

3. Certifique-se de que esta visualização seja capaz de receber um identificador (id)
   ou outros dados necessários para mostrar o elemento específico do conjunto
   de dados. Você pode conseguir isso usando parâmetros, como por
   exemplo através dos
   search params
   da URL que o router pode comunicar.

[!IMPORTANTE]
Lembre-se de utilizar as funções que criamos anteriormente em apiKey.js
para gerenciar de forma segura a API KEY.

Reutilização de Funções do Dataverse

Vamos reutilizar as funções de filtragem, ordenação e
cálculo do seu projeto anterior neste novo projeto.
Para isso, crie um novo arquivo no seguinte caminho:
src/lib/dataFunctions.js e copie as funções mencionadas
para esse arquivo. Se ainda não existir, você precisará criar uma pasta
chamada lib dentro da pasta src (src/lib).

[!DICA]
Volte ao README principal tantas vezes quanto necessário.
5. Considerações técnicas

Exemplo:

// src/lib/dataFunctions.js

export const filterData = (data, filterBy, value) => {
  return 'example';
};

export const sortData = (data, sortBy, sortOrder) => {
  return [];
};

export const computeStats = (data) => {
  return [];
};

[!DICA]
Consulte estes links para obter mais informações sobre como importar
módulos
e funções