Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 16 additions & 11 deletions docs/src/03_context_and_scope.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,9 @@ endif::arc42help[]
----
include::./diagrams/S3_C4_Business_Context_Diagram.puml[]
----
The business model diagram represents how the player interacts with the system of the WiChat application, which will communicate with the WikiData API using the HTTP protocol and MongoDB Query Languague (MQL) queries to retrieve the information. The data retrieved by the API will be used to generate the questions that the player must answer, in this case, an image will be retrieved, and the player must select the option that best fits what is shown in the picture. The player can also ask for help from the LLM Chat, which will use the information from the WikiData API to provide clues about the image.
A simple example of the functioning of the system is the following: the player logs in and starts a game. The system retrieves data from the WikiData API and generates the image and the possible answers (for example, an image of the Eiffel Tower, and four cities of Europe, like Madrid, Rome, London and Paris). The player may ask for help to the LLM Chat if he/she is not sure about the answer, and the AI will use the information from the WikiData API to provide clues about the image. The player can then select the correct answer, and the system will inform if it is correct or not.
The business model diagram represents how the player interacts with the system of the WiChat application. The core API will communicate with the external WikiData API using the HTTPS protocol and SPARQL queries to retrieve the information, using independent modules that generate a microservice architecture to decouple the system. The data retrieved by the API will be used to generate the questions that the player must answer. In this case, an image will be retrieved, and the player must select the option that best fits what is shown in the picture. The player can also ask for help, interacting with an LLM Chat, provided by another external API. The LLM will use the information from the WikiData API without direct interaction to provide clues about the image (the corresponding modules are in charge of gathering the information from WikiData API and passing it to the LLM API).

A simple example of the functioning of the system is the following: the player logs in and starts a game. The system retrieves data from the WikiData API and generates the image and the possible answers (for example, an image of the Eiffel Tower, and four cities of Europe, like Madrid, Rome, London and Paris). The player may ask for help to the LLM Chat if he/she is not sure about the answer, and the AI will use the information from the WikiData API to provide clues about the image. The player can then select the correct answer, and the system will inform if it is correct or not. After the game is finished the user will see the game results and can access his statistics and the leaderboards.

=== Technical Context

Expand All @@ -78,18 +79,22 @@ endif::arc42help[]
----
include::./diagrams/S3_C4_Technical_Context_Diagram.puml[]
----
The system will be deployed in a single server (using **Docker**) containing all the functionalities separated in different modules:
The system will be deployed over a virtual machine in a single Azure server (using **Docker**) containing all the functionalities separated in different modules:

* **Wichat Application Proxy: **
When interacting with the server, a <TO BE DEFINED> proxy will be tasked with redirecting the queries to the petitions to the Wichat application client, which will also be deployed on a Azure web server.
* **Wichat Application Proxy:**
When interacting with the server, a Nginx proxy gateway will be tasked with redirecting incoming requests to the Wichat application client, which will also be deployed on the Azure web server.

* **Wichat Application Client: **
This client will be served to the user and communicates with the API through HTTPS calls and exchanges information through JSON objects. The client (Front-End of the application) will be developed in React (+ JavaScript), and it is deployed via a Azure server.
* **Wichat Application Client:**
This client will be served to the user and communicates with the API through HTTPS calls and exchanges information through JSON objects. The client (Front-End of the application) will be developed in React (+ JavaScript).

* **Wichat REST API:**
The Wichat REST API will be run as a .jar file on the server and connect to a database running on a MongoDB docker container. The connection layer between the <TO BE DEFINED> API and the database will be <TO BE DEFINED>.
The Wichat REST API will be run as a .jar file on the server and connect to a database running on a MongoDB docker container.

* **Wichat Application Database:**
The questions and answers generated by the Question Generator module will be stored in the database, implemented using Node.js and MongoDB as the DBMS. The connection layer will use Mongoose.
* **Question generator:**
The Question Generator will also use the WikiData REST API to retrieve information to generate questions. It will generate the questions by connecting to the WikiData REST API through HTTPS calls and passing a MQL query to retrieve the data that will later be used in the question generation. The module is implemented using Node.js and utilizes Axios for making HTTP requests.
The Question Generator will use the external WikiData REST API to retrieve the information to generate the images and questions of the quiz. It will connect to the WikiData REST API through HTTPS calls, passing a Mongo Query Language (MQL) query to retrieve the data that will later be used as the questions of the game. The module is implemented using Node.js and uses Axios for making HTTP requests.

* **LLM AI Chat:**
This component connects to an external LLM API, Empathy, to provide hints to players. The module retrieves structured data from WikiData via the Question Generator and uses it to formulate meaningful prompts for the LLM. The LLM response is then passed back to the player through the main API.

* **Wichat Application Database:**
The questions and answers generated by the Question Generator module will be stored in a MongoDB database. It is supposed to be a unique database for the entire system, but containing several different collections for a series of purposes (one for user session data, other for quiz questions, other for statistics and game data...). The connection layer will use Mongoose.
8 changes: 4 additions & 4 deletions docs/src/diagrams/C4_business_model_diagram.puml
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

title Context Diagram of the Business Model for the System of the application (C4 Diagram - Level 1)
AddElementTag("Person", $bgColor="#darkgreen", $fontColor="#white")
AddElementTag("Internal system", $bgColor="#darkseagreen", $fontColor="#003300")
AddElementTag("External system", $bgColor="#gray", $fontColor="#white")
AddElementTag("Internal system", $bgColor="#DarkSeaGreen", $fontColor="#003300")
AddElementTag("External system", $bgColor="#DarkGray", $fontColor="#white")

'Containers
Person(player, Player,"A logged player that wants to play the game offered by wichat application", $tags="Person")
Container(wichat, "Wichat application system", "System that allows the users to register, play the game and interact with the application", $tags="Internal system")
Person(player, Player,"A logged player that wants to play the game offered by WiChat application", $tags="Person")
System(wichat, "Wichat application system", "System that allows the users to register, play the game and interact with the application", $tags="Internal system")
System_Ext(wikidata, "WikiData API", "API that contains the information used for the image quiz generation", $tags="External system")
System_Ext(llm_chat, "LLM AI API", "LLM helper that provides an AI to help the player, providing clues about the images", $tags="External system")

Expand Down
3 changes: 2 additions & 1 deletion docs/src/diagrams/Domain_Model.puml
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,5 @@ entity "Question" {
* createdAt: Date = now (expires in 30 min)
}

@enduml
@enduml

11 changes: 6 additions & 5 deletions docs/src/diagrams/S3_C4_Business_Context_Diagram.puml
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,24 @@ System_Boundary(quizGame, "WiChat Application") {
System(gateway, "WiChat Gateway Module", "Stands as a façade for the rest of the modules", "Internal system")
Container(llmChat, "LLM AI Chat", "Empathy", "Application service that works as an interface with the LLM API", "Internal system")
Container(auth, "Authentication Module", "", "Application module to manage the sessions and authentications", "Internal system")
Container(gameService, "Game Module", "Application module that provides the game logic", "Internal system")
Container(userservice, "User Module", "", "Application module to manage the users", "Internal system")
Container(gameService, "Game Module", "", "Application module that provides the game logic", "Internal system")
Container(questionGen, "Question Generator", "", "Application module that generates the questions of the game using information from Wikidata", "Internal system")
Container(authAPI, "Auth API", "Resource that provides session verification")
SystemDb(mongodb, "MongoDB Database", "Database to store the game questions, possible answers, the user data, rankings and other statistics")
}
System_Ext(wikidata, "WikiData API", "External resource to provide data for the questions and images")
System_Ext(llm, "LLM API", "External resource to provide hints")

Rel(user, wichat, "Uses")
Rel(user, wichat, "")
Rel(wichat, gateway, "Uses")
Rel(gateway, llmChat, "Provides")
Rel(gateway, auth, "Provides")
Rel(gateway, userservice, "Provides")
Rel(gateway, questionGen, "Provides")
Rel(gateway, gameService, "Provides")
Rel(llmChat, llm, "Connects to")
Rel(auth, authAPI, "Connects to")
Rel(authAPI, mongodb, "Stores data in")
Rel(userservice, mongodb, "Stores data in")
Rel(auth, mongodb, "Stores data in")
Rel(questionGen, mongodb, "Stores data in")
Rel(gameService, mongodb, "Stores data in")
Rel(questionGen, wikidata, "Collects data from")
Expand Down
10 changes: 3 additions & 7 deletions docs/src/diagrams/S3_C4_Technical_Context_Diagram.puml
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,20 @@

Person(user, "User", "Plays the quiz game")
System_Boundary(quizGame, "Quiz Game System") {
System(frontend, "Frontend", "React + JavaScript", "GUI for playing the game")
System(backend, "Backend", "Node.js", "Handles authentication, quiz logic, and API communication")
System(frontend, "Frontend", "GUI for playing the game\n[React + JavaScript]")
System(backend, "Backend", "Handles authentication, quiz logic, and API communication\n[Node.js]")
}
SystemDb(database, "Database", "MongoDB", "Stores users, quiz data and game information")
System_Ext(authAPI, "Authentication API", "Validates user authentication")
SystemDb(database, "Database", "Stores users, quiz data and game information\n[MongoDB]")
System_Ext(wikidata, "Wikidata API", "Provides quiz questions and answers")
System_Ext(llm, "LLM Chat API", "Provides hints based on quiz questions")
System_Ext(game, "Game API", "Provides users scores and statistics")

' User interactions
user --> frontend : "Plays the quiz"
frontend --> backend : "Requests quiz questions & hints"
backend --> database : "Stores application progress"

' External API calls
backend --> authAPI : "Validates login/register"
backend --> wikidata : "Fetches quiz questions"
backend --> llm : "Requests hint"
backend --> game : "Stores user progress"

@enduml