Merge pull request #51 from Arquisoft/develop

✨ Añadida documentación (parte de Ray)

docker-compose.yml

@@ -11,7 +11,7 @@ services:
     networks:
       - mynetwork
 
-  creationervice:
+  creationservice:
     container_name: creationservice-${teamname:-defaultASW}
     image: ghcr.io/arquisoft/wiq_es2b/creationservice:latest
     profiles: ["dev", "prod"]
@@ -62,13 +62,15 @@ services:
       - mongodb
       - userservice
       - authservice
+      - creationservice
     ports:
       - "8000:8000"
     networks:
       - mynetwork
     environment:
       AUTH_SERVICE_URL: http://authservice:8002
       USER_SERVICE_URL: http://userservice:8001
+      CREATION_SERVICE_URL: http://creationservice:8005
 
   webapp:
     container_name: webapp-${teamname:-defaultASW}

docs/src/02_architecture_constraints.adoc

@@ -3,70 +3,63 @@ ifndef::imagesdir[:imagesdir: ../images]
 [[section-architecture-constraints]]
 == Architecture Constraints
 
-.Contents
-Any requirement that constraints software architects in their freedom of design and implementation decisions or decision about the development process. These constraints sometimes go beyond individual systems and are valid for whole organizations and companies.
+.Introduction
+In the development of the WIQ  Application, various constraints have been identified to guide the project towards success. These constraints are crucial in aligning with user expectations and meeting the diverse needs of stakeholders.
 
-.Motivation
-Architects should know exactly where they are free in their design decisions and where they must adhere to constraints.
-Constraints must always be dealt with; they may be negotiable, though.
+=== Functionality-related Constraints
+These constraints pertain to the core functionality of the application.
 
-
-=== Technical Constraints
-[cols="1,1", options="header"]
-|===
-| Constraint | Description
-| Application Server Version | Usage of version X.X of the application server is required.
-| Compatibility with Operating Systems | The application must be compatible with Windows .
+[options="header", cols="1,1"]
 |===
+| Constraint | Explanation
+| Integration with Wikidata API | Enabling seamless integration with the Wikidata API is imperative. This integration allows automatic generation of questions and responses, enhancing the application's functionality.
 
-=== Legal and Regulatory Constraints
-[cols="1,1", options="header"]
-|===
-| Constraint | Description
-| Compliance with Privacy Regulations | The application must comply with privacy regulations in country Spain.
-|===
+| User Authentication | Implementation of a robust login system is mandated to safeguard user privacy and control access to sensitive information within the application.
 
-=== Development Constraints
-[cols="1,1", options="header"]
-|===
-| Constraint | Description
-| Development Methodology | The team will follow an agile development methodology.
-| Build Tool | The Z build tool will be used for the compilation process.
-|===
+| Web Deployment | The application must be easily deployable, ensuring convenient access for users through the web.
 
-=== Organizational Constraints
-[cols="1,1", options="header"]
-|===
-| Constraint | Description
-| Internal Security Policies | Internal security policies of the organization will be adhered to.
 |===
 
-=== Interoperability Constraints
-[cols="1,1", options="header"]
-|===
-| Constraint | Description
-| Communication Standard | The application must be compatible with communication standard ABC.
+=== Process-related Constraints
+These constraints focus on the development process itself.
+
+[options="header", cols="1,1"]
 |===
+| Constraint | Explanation
+| Version Control (GitHub) | Utilization of GitHub and Git for version control is essential. This facilitates collaboration and maintains a structured workflow with effective monitoring of team contributions.
 
-=== Security Constraints
-[cols="1,1", options="header"]
 |===
-| Constraint | Description
-| Two-Factor Authentication | Two-factor authentication is mandatory for all users.
+
+=== Data Management Constraints
+These constraints are associated with the management of application data.
+
+[options="header", cols="1,1"]
 |===
+| Constraint | Explanation
+| MongoDB Database | The application will leverage MongoDB, a NoSQL document database known for its flexibility in handling dynamic data structures, scalability, and high performance.
 
-=== Performance Constraints
-[cols="1,1", options="header"]
 |===
-| Constraint | Description
-| Response Time | The application's response time should not exceed 2 seconds.
+
+=== User Interface Constraints
+These constraints focus on the user interface design.
+
+[options="header", cols="1,1"]
 |===
+| Constraint | Explanation
+| React for User Interface | The application's user interface will be built using React, a JavaScript library with a component-based architecture. This choice aims to provide a user-friendly and modular interface with efficient UI updates.
 
-=== Maintenance and Scalability Constraints
-[cols="1,1", options="header"]
 |===
-| Constraint | Description
-| Scalability | The application is expected to be scalable to handle a 20% increase in workload.
+
+.Recommended Technologies
+While not constraints, the following technologies are recommended for optimal performance and functionality of the WIQ Application.
+
+[options="header", cols="1,1"]
 |===
+| Technology | Explanation
+| React | A JavaScript library for building user interfaces, known for its component-based architecture and efficient UI updates.
+| ExpressJS | A fast and minimalist web framework for Node.js, suitable for server-side tasks and supporting various web applications.
+| MongoDB | A NoSQL document database, offering schema flexibility, scalability, and high performance for storing application data.
 
+|===
 
+These constraints and recommended technologies collectively shape the architectural decisions, ensuring a robust and effective development process for the WIQ  Application.

docs/src/09_architecture_decisions.adoc

@@ -10,26 +10,26 @@ ifndef::imagesdir[:imagesdir: ../images]
 Important, expensive, large scale or risky architecture decisions including rationales.
 With "decisions" we mean selecting one alternative based on given criteria.
 
-Please use your judgement to decide whether an architectural decision should be documented
-here in this central section or whether you better document it locally
-(e.g. within the white box template of one building block).
+|====
+| Decision | Consequences | Risks
+| Uso de React.js | - Facilitates the development of user interfaces.
+                  - React.js is a widely popular library in the development community.
+                  - Improves the efficiency of frontend development. | - Limited experience with React.js.
+                                                               - Possible learning curve for the team.
+| Uso de JavaScript | - Team's prior knowledge in JavaScript.
+                     - Extensive support and resources available.
+                     - Suitable language for frontend and backend development. | - Limitations in compile-time error detection.
+                                                               - Potential challenges in performance for large projects.
+| Uso de MongoDB | - Flexible schema and horizontal scalability.
+                 - Widely used in modern applications.
+                 - Compatibility with unstructured data.
+                 - Already implemented in user registration and login. | - Not familiar with NoSQL databases.
+                                                    - Possible learning curve.
+| Uso de Docker | - Containerization that facilitates deployment and scalability.
+                 - Consistent environment in development and production.
+                 - Streamlines dependency management. | - Potential initial complexity in Docker configuration.
+                                                      - Requires additional learning resources.
+|====
 
-Avoid redundancy. 
-Refer to section 4, where you already captured the most important decisions of your architecture.
-
-.Motivation
-Stakeholders of your system should be able to comprehend and retrace your decisions.
-
-.Form
-Various options:
-
-* ADR (https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions[Documenting Architecture Decisions]) for every important decision
-* List or table, ordered by importance and consequences or:
-* more detailed in form of separate sections per decision
-
-.Further Information
-
-See https://docs.arc42.org/section-9/[Architecture Decisions] in the arc42 documentation.
-There you will find links and examples about ADR.
 
 ****

gatewayservice/gateway-service.js

@@ -48,7 +48,6 @@ app.post('/adduser', async (req, res) => {
 
 app.post('/createquestion', async (req, res) => {
   try {
-    console.log('eyou');
     // Crea una peticion a la url (le llegará a creation-service.js) con la opcion /login 
     // y los parametros req.body
     const questionResponse = await axios.post(creationServiceUrl+'/createquestion', req.body);

questions/creationservice/creation-service.js

@@ -18,23 +18,26 @@ app.post('/createquestion', async (req, res) => {
   // TODO LO COMENTADO ES UN INTENTO DE HACER LAS QUERIES
   // PERO COMO SALTA UN ERROR ANTES, NO SE PRUEBA CON ELLAS
 
-  /*const sparqlQuery = 'SELECT DISTINCT ?country ?countryLabel ?capital ?capitalLabel WHERE { ?country wdt:P31 wd:Q6256. ?country wdt:P36 ?capital. SERVICE wikibase:label {bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es".}}';
+  const sparqlQuery = 'SELECT DISTINCT ?country ?countryLabel ?capital ?capitalLabel WHERE { ?country wdt:P31 wd:Q6256. ?country wdt:P36 ?capital. SERVICE wikibase:label {bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es".}}';
   const apiUrl = `https://query.wikidata.org/sparql?query=${encodeURIComponent(sparqlQuery)}`;
-  const headers = { "Accept": "application/json" };*/
+  const headers = { "Accept": "application/json" };
 
   try {
-
-    //const respuestaWikidata = await fetch(apiUrl, {headers});
-    //if (respuestaWikidata.ok) {
-      //const data = await respuestaWikidata.json();//obtengo los datos en json
-      //const numEles = data.results.bindings.length;
-      //const index = Math.floor(Math.random() * numEles);//index al azar
-      //result = data.results.bindings[index];
+    const respuestaWikidata = await fetch(apiUrl, {headers});
+    console.log(respuestaWikidata);
+    if (respuestaWikidata.ok) {
+      console.log('Entro al if');
+      const data = await respuestaWikidata.json();//obtengo los datos en json
+      const numEles = data.results.bindings.length;
+      const index = Math.floor(Math.random() * numEles);//index al azar
 
-      console.log(req);
+      res = data.results.bindings[index];
       // Hardcodeo el resultado para hacer pruebas
-      res.json({ token: 'asdf'});
-    //}
+      // res.json({ token: 'asdf'});
+    }else{
+      console.log('no entra al if');
+      console.log('la peticion tiene un status:' ,respuestaWikidata.status);
+    }
   } catch (error) {
     res.status(500).json({ error: 'Internal Server Error' });
   }

webapp/src/App.js

@@ -1,9 +1,7 @@
 // App.js
 import React, { useState } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';  // Cambiado de Switch a Routes
 import AddUser from './components/AddUser';
 import Login from './components/Login';
-import Juego from './components/Juego';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
@@ -18,17 +16,11 @@ function App() {
 
 
   return (
-    <Router>
       <Container component="main" maxWidth="xs">
         <CssBaseline />
         <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
           Bienvenido a WIQ 2024 del curso de Arquitectura del Software
         </Typography>
-
-        <Routes>
-          <Route path="/juego" element={<Juego />} />
-          <Route path="/" element={
-            <>
               {showLogin ? <Login /> : <AddUser />}
               <Typography component="div" align="center" sx={{ marginTop: 2 }}>
                 {showLogin ? (
@@ -41,13 +33,8 @@ function App() {
                   </Link>
                 )}
 
-
               </Typography>
-            </>
-          } />
-        </Routes>
       </Container>
-    </Router>
   );
 }
 

webapp/src/components/Game.js

@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import { Container, Typography, Button, Paper } from '@mui/material';
 
 const Game = () => {
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
-  const [askForQuestion, setAskForQuestion] = useState(false);
   const [pais, setpais] = useState('');
-  const [capital, setcapital] = useState('');
-
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  const [capitalCorrecta, setcapital] = useState('');
+  const [capitalIcnorrecta1, setcapitalIcnorrecta1] = useState('');
+  const [capitalIcnorrecta2, setcapitalIcnorrecta2] = useState('');
+  const [capitalIcnorrecta3, setcapitalIcnorrecta3] = useState('');
 
   // Esta es la llamada al servicio de generar las preguntas
   const  handleShowQuestion = async () => {
-    //setAskForQuestion(true);
     try{
       // Se declara esta variable unicamente para probar cosas con ella en la peticion
       const eyou = "aa"
@@ -28,43 +28,58 @@ const Game = () => {
   // TODO ESTO ES LO QUE ESTA COMENTADO EN CREATION-SERVICE.JS
   // CREO QUE DEBERIA IR ALLI PERO COMO NO FUNCIONA LO PROBE AQUI
   const deberiaIrEnelServicio = async () => {
-    setAskForQuestion(true);
     const sparqlQuery = 'SELECT DISTINCT ?country ?countryLabel ?capital ?capitalLabel WHERE { ?country wdt:P31 wd:Q6256. ?country wdt:P36 ?capital. SERVICE wikibase:label {bd:serviceParam wikibase:language "[AUTO_LANGUAGE],es".}}';
     const apiUrl = `https://query.wikidata.org/sparql?query=${encodeURIComponent(sparqlQuery)}`;
     const headers = { "Accept": "application/json" }
     const respuestaWikidata = await fetch(apiUrl, {headers});
     if (respuestaWikidata.ok) {
     const data = await respuestaWikidata.json();
     const numEles = data.results.bindings.length;
-    const index = Math.floor(Math.random() * numEles);
-    const result = data.results.bindings[index];
+    const indexCapCorre = Math.floor(Math.random() * numEles);
+    const result = data.results.bindings[indexCapCorre];
     setpais(result.countryLabel.value);
     setcapital(result.capitalLabel.value);
+
+    const indexCapIncorre1 = Math.floor(Math.random() * numEles);
+    const indexCapIncorre2 = Math.floor(Math.random() * numEles);
+    const indexCapIncorre3 = Math.floor(Math.random() * numEles);
+    setcapitalIcnorrecta1(data.results.bindings[indexCapIncorre1].capitalLabel.value);
+    setcapitalIcnorrecta2(data.results.bindings[indexCapIncorre2].capitalLabel.value);
+    setcapitalIcnorrecta3(data.results.bindings[indexCapIncorre3].capitalLabel.value);
     } else {
       console.error("Error al realizar la consulta en Wikidata. Estado de respuesta:", respuestaWikidata.status);
     }
   }
 
   return (
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-        Esta sería la pagina del juego
-      </Typography>
+    <Container maxWidth="md" style={{ marginTop: '2rem' }}>
+      <Paper elevation={3} style={{ padding: '2rem', textAlign: 'center' }}>
+        <Typography variant="h4" gutterBottom>
+          Saber y Ganar Juego
+        </Typography>
+        <Typography variant="body1" paragraph>
+          Pregunta: ¿Cuál es la capital de {pais}?
+        </Typography>
+        {/* Botones de opción */}
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalCorrecta}
+        </Button>
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalIcnorrecta1}
+        </Button>
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalIcnorrecta2}
+        </Button>
+        <Button variant="outlined" style={{ margin: '0.5rem' }}>
+          {capitalIcnorrecta3}
+        </Button>
+      </Paper>
       <Button variant="contained" color="primary" onClick={handleShowQuestion}>
         Genera pregunta NO FUNCIONA AUNQUE DEBERIA
       </Button>
       <Button variant="contained" color="primary" onClick={deberiaIrEnelServicio}>
         Genera pregunta FUNCIONA
       </Button>
-      {askForQuestion ? (
-        <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-          Pais {pais} capital {capital}
-        </Typography>
-      ) : (
-        <Typography component="h1" variant="h5" sx={{ textAlign: 'center' }}>
-          Dale al boton
-        </Typography>
-      ) }
     </Container>
   );
 };

webapp/src/components/HistoricalData.js

@@ -5,9 +5,9 @@ import { Container, Typography, TextField, Button, Snackbar } from '@mui/materia
 const HistoricalData = () => {
 
   return (
-    <div>
-        <h1>Esta sería la pagina del historico de partidas</h1>
-    </div>
+    <Typography variant="h4" gutterBottom>
+          Pagina del HistoricalData
+    </Typography>
   );
 };