Merge pull request #146 from Arquisoft/develop

final commit
Arquisoft · May 1, 2023 · 758b5fa · 758b5fa
2 parents 4bc9528 + 21fb266
commit 758b5fa
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 146 deletions.
diff --git a/docs/02_architecture_constraints.adoc b/docs/02_architecture_constraints.adoc
@@ -22,8 +22,8 @@ conventions (e.g. programming or versioning guidelines, documentation or naming
 |=======================
 |Name|Description
 |React| We will use React framework to develop the frontend of the application.
-|JavaScript| It will be used on the frontend but also on the backend to work with SOLID pods and NodeJS.
-|NodeJS| Node.js is designed to build network applications and it will be used as the backend of our application. It is based on JavaScript and it is event-driven.
+|JavaScript| It will be used on the frontend but also on the backend to work with SOLID pods.
+|Bootstrap| We will use Bootstrap to make a responsive interface.
 |SOLID| We will use SOLID to store users information using PODs, giving this data more privacy. This is a requirement.
 |GitHub| We will use GitHub to update the changes of the source code.
 |Docker + Netlify| We will deploy our application using Netlify.

diff --git a/docs/04_solution_strategy.adoc b/docs/04_solution_strategy.adoc
@@ -28,8 +28,6 @@ We have chosen to use the next technologies on the app:
 
 * **SOLID**: is an acronym that refers to five good and essential principles for the design of a software architecture (**S**ingle Responsibility, **O**pen/Closed, **L**iskov Substitution, **I**nterface Segregation and **D**ependency Inversion). With this principles the user knows that all his "sensitive data" is safe and decentralized. We use it because it is required on the project.
 
-* **Node js**: is a Javascript execution environment controlled by events, what makes it light and efficient. It is also a nice option for reactive web apps because it's able to provide a big amount of simultaneous conections with high performance (big scalability). 
-
 * *Javascript*: is an interpreted programming language based on prototypes, imperative and dynamic. We will use it on both frontend and backend.
 
 * **CSS**: is a graphic programming language oriented to define the repesentation of a document. We will use it as part of the frontend of the app.
@@ -43,7 +41,7 @@ We have chosen to use the next technologies on the app:
 * **Bootstrap**: is a framework that provides a collection of tools to simplify the use of html and css in the application.
 
 === Why this technologies?
-* React, CSS, Javascript and NodeJS were chosen to reach a good level of usability and accesibility.
+* React, CSS and Javascript were chosen to reach a good level of usability and accesibility.
 * Github was chosen for version control and organization and communication between the team.
 * Bootstrap was chosen because the facilities it provides and to have a nice, clean and responsive view to the web app.
 * Netlify was chosen because of its deployment, which it's very easy and it automaticaly builds when updating the app. 
diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc
@@ -56,7 +56,7 @@ Since there are so many ways to specify interfaces why do not provide a specific
 In the best case you will get away with examples or simple signatures.
 
 ****
-Here, the app is represented as a whitebox. Inside of it we can see the three layers of MVC (Model View Controller) convention in black boxes:
+Here, the app is represented as a whitebox. Inside of it we can see the component-based architecture in black boxes:
 
 
 [role="arc42help"]
@@ -79,9 +79,9 @@ image::Whitebox_Overall_System.png[]
 
 |=======================
 |Name|Responsability
-|**Model**| Stores/gets data from personal pods. Defines business model and also gives information to the view layer to represent it.
-|**View**| Process the data sent by Model layer and represents it on the web. This layer is the one which interacts with the final user.
-|**Controller**|This layer receives the inputs from users and manages the interactions between View layer and Model layer.
+|**Utils**| Stores/gets data from personal pods, images... Gives information to the component.
+|**Store**| Stores/gets the context of the user to the correct functionality of the component.
+|**Components**| Is the final view of the application and interacts with the final user, self managed.
 |=======================
 
 === Building block view - Level 2

diff --git a/docs/09_design_decisions.adoc b/docs/09_design_decisions.adoc
@@ -27,9 +27,9 @@ Various options:
 
 |=======================
 |*Decision*|*Details*|*Advantages*|*Disadvantages*
-|Architecture | We will use MVC as the architecture design. | We will have a very well structured code separarated by Model, View and Controller.| The separation in layers makes the application more complex.
+|Architecture | We will use component-based architecture (CBA) as the architecture design. | We will have a very well structured code separarated by components.| The separation in components makes the application complicated.
 |OpenStreetMaps API| We will use the API to create the map. | It's free, not like the Google Maps API.| It's the first time using it, we'll have to adapt.
 |Netlify| We use them to deploy the application.| It's free and it provides a very fast deployment. | The general cloud computing issues as backup protection.
-|CSS+Bootstrap| We use it to add a nice look to the application.| It's a well known stylesheet languaje for the team. | Different browsers work different, we have to take care of it.|
+|CSS+Bootstrap| We use it to add a nice look to the application.| It's a well known stylesheet languaje for the team, responsive. | Different browsers work different, we have to take care of it.|
 |=======================
 
diff --git a/docs/12_glossary.adoc b/docs/12_glossary.adoc
@@ -33,7 +33,7 @@ Potentially more columns in case you need translations.
 |	Framework	|	Tool that provides ready-made components or solutions that are customized in order to speed up development
 |	Frontend	|	Part of computer programming that focuses on the coding and creation of elements and features that will then be seen by the user.
 |	GitHub	|	Code hosting platform for version control and collaboration.
-|	MVC	|	Pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software's business logic and display.
+|	Component-based Architecture	| Process of building software based on reusable components. Structure of components that contains other smaller components.
 |	POD	|	Pods are like secure personal web servers for data. When data is stored in someone's Pod, they control which people and applications can access it.
 |	SOLID	|	SOLID is an acronym for the first five object-oriented design principleS. These principles establish practices that lend to developing software with considerations for maintaining and extending as the project grows.
 |   Bootstrap   |  A multiplatform library, open source toolbox to design web applications.

diff --git a/docs/13_test.adoc b/docs/13_test.adoc
@@ -0,0 +1,59 @@
+[[section-test]]
+== Test
+In this section we are going to test the application. We will use the following
+technologies for testing:
+[options="header"]
+|===
+|Name|Description
+|Sonarcloud | Checks the code coverage and quality for the application tests.
+|Cucumber | Technology used for behavior driven development (BDD) to write acceptance tests for the application.
+|Gatling | Technology used for load testing the application.
+|===
+
+
+We are going to analyze the results of the Gatling tests in the following section.
+
+[[section-sonarcloud]]
+=== Sonarcloud
+Sonarcloud allows us to check the code coverage and quality of the application. The following image shows the results of the Sonarcloud tests:
+
+image::sonarcloud_test.png[]
+
+We can see how we have a 80% of code coverage for the application. We can also see that the code quality is good, with 0 bugs and 0 security vulnerabilities. We can also see that the code duplication is 1.1% which seems to be a good value thinking that the application hasn't been developed by a single person and a refactor of the code has never been done.
+
+
+[[section-gatling]]
+=== Gatling
+After running the Gatling tests, we can analyze the results. After analyzing the results, we can see that the application at 100 active users and 50 requests per second has a response time of 0.8 seconds for a 40% of success rate. The following image shows the results of the Gatling tests:
+
+image::test_gatling.png[] 
+Maybe the success rate is not the best, but we can see that the response time is very good. We have to take into account that the application is running in a free instance of Netlify, so the performance is not the best. If we want to improve the performance, we can migrate the application to another cloud provider, like AWS, Azure or Google Cloud. We also need to take into account that the test have been run
+
+when a lot of traffic has been generated to Inrupt POD provider. This can affect the results of the tests.
+
+
+[[section-usability]]
+=== Usability
+In this section we are going to have a look at the usability of the application. We have done a usability test with 5 users. The following table shows the results of the usability test:
+[options="header"]
+|===
+| Question | Luis | Carmen | Paula | Ana | David | Average
+| Is the application intuitive? | 10 | 10 | 9 | 8 | 7 | 8.8
+| Is the application easy to use? | 10 | 10 | 8 | 9 | 7 | 8.8
+| Is the application attractive? | 8 | 9 | 10 | 10 | 9 | 9.2
+| Is the application fast? | 7 | 6 | 7 | 8 | 8 | 7.2
+| Is the application accessible? | 9 | 9 | 9 | 9 | 8 | 8.8
+| Is the application useful? | 10 | 10 | 8 | 9 | 9 | 9.2
+| How would you rate the application? | 9 | 10 | 10 | 10 | 10 | 9.8
+|===
+
+We can see that overall the application has a good user rate. The users have rated the application with a 9.8 out of 10. The users have also rated the application as intuitive, easy to use, attractive, accessible and useful. The only thing that the users have not rated very well is the speed of the application. The found themselves waiting for the application to load some times.
+
+The users have the following age:
+* Luis: 60
+* Carmen: 55
+* Paula: 19
+* Ana: 66
+* David: 22
+
+We can see that the users are from different ages, so we can say that the application is suitable for all ages.
diff --git a/docs/images/Deployment2.png b/docs/images/Deployment2.png
diff --git a/docs/images/Whitebox_Overall_System.png b/docs/images/Whitebox_Overall_System.png
diff --git a/docs/images/building_block_view.png b/docs/images/building_block_view.png
diff --git a/docs/images/sonarcloud_test.png b/docs/images/sonarcloud_test.png
diff --git a/docs/images/test_gatling.png b/docs/images/test_gatling.png
diff --git a/docs/index.adoc b/docs/index.adoc
@@ -91,6 +91,11 @@ include::11_technical_risks.adoc[]
 // 12. Glossary
 include::12_glossary.adoc[]
 
+<<<<
+// 13. Test
+include::13_test.adoc[]
+
+
 <<<<
 // About
 include::about-arc42.adoc[]