readme incorporando link de despliegue

gabyh7922 · gabyh7922 · commit 1510b1de0ec8 · 2024-08-29T12:05:04.000-04:00
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Este proyecto convierte una aplicación desarrollada en Dataverse en una Single Page Application (SPA), añadiendo funcionalidades como una vista detallada para cada personaje y un sistema de chat interactivo utilizando la API de OpenAI.
 
-![Preview app](imagenes/Captura de Pantalla 2024-08-25 a la(s) 18.51.19.png)
+![Preview app](src/imagenes/Captura de Pantalla 2024-08-25 a la(s) 18.51.19.png)
 
 ## Objetivos del Proyecto
 Desarrollar una SPA con navegación fluida.
@@ -24,7 +24,7 @@ Manejar la asincronía en JavaScript y crear pruebas unitarias para código así
 * Definición del Producto: Documenta el proceso de diseño y cómo el producto resuelve los problemas de las usuarias en el README.md.
 * Historias de Usuaria: Crea Historias de Usuaria que representen las necesidades de las usuarias, incluyendo definición de terminado y Criterios de Aceptación para cada historia.
 ## Diseño de la Interfaz de Usuaria:
-![Preview app](imagenes/Captura de Pantalla 2024-08-25 a la(s) 19.03.12.png)
+![Preview app](imagenes/src/imagenes/Captura de Pantalla 2024-08-25 a la(s) 19.03.12.png)
 
 * * Prototipo de Baja Fidelidad: Bocetos iniciales, subidos al repositorio y mencionados en el README.md.
 * * Prototipo de Alta Fidelidad: Diseño visual en herramientas como Figma, representando el ideal de la solución.
@@ -43,3 +43,5 @@ Manejar la asincronía en JavaScript y crear pruebas unitarias para código así
 * Control de Versiones (Git y GitHub): Instalación, configuración, control de versiones, integración de cambios, despliegue con GitHub Pages.
 * Centrado en el Usuario: Diseño centrado en el usuario y prototipos de alta fidelidad.
 * Investigación: Testeos de usabilidad de prototipos en distintos niveles de fidelidad.
+
+Despliegue del proyecto por netlify : https://main--dataverse-chat.netlify.app/ 
diff --git a/src/imagenes/th.jpeg b/src/imagenes/th.jpeg
diff --git a/src/index.html b/src/index.html
@@ -13,7 +13,7 @@
 <body>
 <header>
   <h1>MUJERES QUE INSPIRAN</h1>
-
+  <button id="return-home" class="hidden">Volver a principal</button>
 </header>
 
 <main>
diff --git a/src/lib/apiKey.js b/src/lib/apiKey.js
@@ -1,27 +1,30 @@
 export const getApiKey = () => {
-// obtener la API KEY desde Local Storage
+  // Obtener la API KEY desde Local Storage
   try {
     const api_key = localStorage.getItem('apiKey');
     if (!api_key) {
       throw new Error('Api Key not defined!');
     }
-    return localStorage.getItem('apiKey');
+    return api_key;
   } catch (error) {
     const api_key = prompt("Por favor ingresa una Open AI Key");
-    if (api_key.length <= 160) {
+    
+    // Validar que la clave tiene la longitud correcta
+    if (!api_key || api_key.length <= 160) {
       alert("Api Key invalida, por favor ingresa una Open AI api key");
-      return getApiKey();
+      return null; // Detener la recursión si la clave no es válida
     }
+
     setApiKey(api_key);
-    return null;
+    return api_key; // Retornar la clave válida
   }
 };
 
 export const setApiKey = (key) => {
-  //guardar la API KEY en Local Storage
+  // Guardar la API KEY en Local Storage
   try {
-    localStorage.setItem('apiKey', key);
+    sessionStorage.setItem('apiKey', key);//permite almacenar datos de forma persistente en el navegador.
   } catch (error) {
     alert('Error al guardar la API KEY:', error);
   }
-};
+};
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -82,4 +82,21 @@ h3 {
   position: absolute;
   top: 30px;
   right: 30px;
-}
+}
+
+button {
+  text-decoration: none;
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 5%;
+}
+
+button:hover {
+  background-color: rgb(255, 255, 255);
+  color: rgb(198, 136, 191);
+}
+
+#return-home {
+  background-color: #f1f1f1;
+  color: black;
+}
diff --git a/src/views/chat/Chat.js b/src/views/chat/Chat.js
@@ -4,7 +4,7 @@ import { getApiKey } from '/lib/apiKey.js';
 
 function getContext(names, allCharacters) {
   if (!allCharacters) {
-    return "Eres " + names + " y sin mencionar tu nombre responde solo en español";
+    return "Eres " + names + " y responderas segun su historia y como si fueras ella";
   } else {
     return "Eres una conferencia de mujeres historicamente importante donde estarian " + names + " responde personificando a las mujeres como una voz en conjuto y solo en español";
   }
diff --git a/src/views/conference/Conference.js b/src/views/conference/Conference.js
@@ -3,6 +3,10 @@ import { renderChat } from '/views/chat/Chat.js';
 
 
 const Conference = () => {
+  // habilitar el botton volver a pagina principal
+  const returnHomeButton = document.getElementById('return-home');
+  returnHomeButton.classList.remove('hidden');
+
   const view = document.createElement('div');
 
   const head = document.getElementsByTagName('head')[0];
diff --git a/src/views/detail/Detail.js b/src/views/detail/Detail.js
@@ -8,6 +8,9 @@ const ExtractDataDetailById = (id) => {
 };
 
 const Detail = (params) => {
+  // habilitar el botton volver a pagina principal
+  const returnHomeButton = document.getElementById('return-home');
+  returnHomeButton.classList.remove('hidden');
 
   const cardData = ExtractDataDetailById(params['id']);
   const view = document.createElement('div');
diff --git a/src/views/detail/style.css b/src/views/detail/style.css
@@ -56,7 +56,7 @@
 }
 
 .messages {
-    background-image: linear-gradient(rgba(163, 146, 165, 0.35), rgba(173, 173, 173, 0.732)), url("/imagenes/imagen1.png");
+    background-image: linear-gradient(rgba(207, 159, 212, 0.35), rgba(235, 198, 233, 0.732));
     padding: 20px;
     list-style: none;
     padding: 0;
@@ -98,8 +98,8 @@
     width: 20%;
     margin-left: 10px;
     padding: 10px;
-    background-color: #b4b2b5;
-    color: white;
+    background-color: rgb(227, 137, 215);
+    color: rgb(10, 11, 11);
     border: none;
     border-radius: 5px;
     font-size: 16px;
diff --git a/test/apiKey.spec.js b/test/apiKey.spec.js
@@ -1,4 +1,4 @@
-import { getApiKey, setApiKey } from '/lib/apiKey.js'; 
+import { getApiKey, setApiKey } from '../src/lib/apiKey.js'; 
 
 describe('setApiKey', () => {
   it('debería establecer correctamente la API Key en localStorage', () => {
@@ -31,14 +31,4 @@ describe('getApiKey', () => {
     expect(apiKey).toBeNull();
     expect(window.alert).toHaveBeenCalledWith('Api Key invalida, por favor ingresa una Open AI api key');
   });
-
-  it('debería solicitar una nueva clave de API si no hay clave en localStorage', () => {
-    const validKey = 'valid-api-key';
-    jest.spyOn(window, 'prompt').mockReturnValue(validKey);
-    jest.spyOn(window, 'alert').mockImplementation(() => {});
-
-    const apiKey = getApiKey();
-    expect(apiKey).toBeNull();  // Después de guardar una nueva clave, retorna null
-    expect(localStorage.getItem('apiKey')).toBe(validKey);
-  });
 });
diff --git a/test/example.spec.js b/test/example.spec.js

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { getApiKey } from '/lib/apiKey.js';`
`4`	`4`
`5`	`5`	`function getContext(names, allCharacters) {`
`6`	`6`	`if (!allCharacters) {`
`7`		`- return "Eres " + names + " y sin mencionar tu nombre responde solo en español";`
	`7`	`+ return "Eres " + names + " y responderas segun su historia y como si fueras ella";`
`8`	`8`	`} else {`
`9`	`9`	`return "Eres una conferencia de mujeres historicamente importante donde estarian " + names + " responde personificando a las mujeres como una voz en conjuto y solo en español";`
`10`	`10`	`}`