Skip to content

Latest commit

 

History

History
155 lines (114 loc) · 5.67 KB

03-milestone.md

File metadata and controls

155 lines (114 loc) · 5.67 KB
Raw

MARCO 3: Conectar a API OpenAI (chat individual)

Armazenar de forma segura sua chave de API e garantir que nosso aplicativo se conecte de forma eficaz à API OpenAI são o cerne deste marco.

Important

Para isso, certifique-se de solicitar sua APIKEY aos coaches.

Tarefas deste marco

Manejo da API KEY na Aplicação

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.

Preview apiKey

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
};

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í
  });
});

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. Nesta tela, é necessário obter um identificador (id) ou outros dados necessários para mostrar o elemento específico do conjunto de dados. Isso é fundamental para que você possa identificar com quem deseja conversar no aplicativo. Você pode obter este identificador (id) de duas maneiras: incluir como argumento (props) na função que o levará a esta vista ou receber os dados como parâmetros de pesquisa. Portanto, é importante melhorar as capacidades do seu roteador para lidar com ambas as situações.

    • No arquivo src/router.js, adicione as funções navigateTo e queryStringToObject.

    Nota 📝: Para obter detalhes das funções, consulte esta seção do guia.

Preview Detail

Important

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

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
};

Note

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

👈Todos os marcos