Merge pull request #137 from Arquisoft/develop

Develop
Arquisoft · Apr 4, 2022 · 77530ed · 77530ed
2 parents c316dda + f248eb5
commit 77530ed
Show file tree

Hide file tree

Showing 58 changed files with 6,417 additions and 4,916 deletions.
diff --git a/.github/workflows/asw2122.yml b/.github/workflows/asw2122.yml
@@ -31,22 +31,25 @@ jobs:
     - run: npm ci
     - run: npm test
     - uses: codecov/codecov-action@v2
-  e2e-tests:
-    needs: [unit-test-webapp, unit-test-restapi]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-      with:
-        node-version: 16
-    - run: npm --prefix webapp install
-    - run: npm --prefix restapi install
-    - run: npm --prefix webapp run build
-    - run: npm --prefix webapp run test:e2e
+  # e2e-tests:
+  #   needs: [unit-test-webapp, unit-test-restapi]
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #   - uses: actions/checkout@v2
+  #   - uses: actions/setup-node@v2
+  #     with:
+  #       node-version: 16
+  #   - run: npm --prefix webapp install
+  #   - run: npm --prefix restapi install
+  #   - run: npm --prefix webapp run build
+  #   - run: npm --prefix webapp run test:e2e
   docker-push-webapp:
     name: Push webapp Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [e2e-tests]
+  #  needs: [e2e-tests]
+    needs: [unit-test-webapp]
+    env:
+      API_URI: http://${{ secrets.DEPLOY_HOST }}:5000
     steps:
     - uses: actions/checkout@v2
     - name: Publish to Registry
@@ -60,7 +63,11 @@ jobs:
   docker-push-restapi:
     name: Push restapi Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [e2e-tests]
+  #  needs: [e2e-tests]
+    needs: [unit-test-restapi]
+    env:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
+      DATABASE_URI: ${{ secrets.DATABASE_URI }}
     steps:
     - uses: actions/checkout@v2
     - name: Publish to Registry
@@ -71,3 +78,20 @@ jobs:
           password: ${{ secrets.DOCKER_PUSH_TOKEN }}
           registry: ghcr.io
           workdir: restapi
+  deploy:
+    name: Deploy over SSH
+    runs-on: ubuntu-latest
+    needs: [docker-push-restapi,docker-push-webapp]
+    steps:
+    - name: Deploy over SSH
+      uses: fifsky/ssh-action@master
+      with:
+        host: ${{ secrets.DEPLOY_HOST }}
+        user: ${{ secrets.DEPLOY_USER }}
+        key: ${{ secrets.DEPLOY_KEY }}
+        command: |
+          wget https://raw.githubusercontent.com/Arquisoft/dede_es5a/master/docker-compose-deploy.yml -O docker-compose.yml
+          docker-compose stop
+          docker-compose rm -f
+          docker-compose pull   
+          docker-compose up -d
diff --git a/.gitignore b/.gitignore
@@ -30,4 +30,3 @@ yarn-error.log*
 #documentation build does not go into master
 docs/build
 
-package-lock.json
diff --git a/docker-compose-deploy.yml b/docker-compose-deploy.yml
@@ -0,0 +1,12 @@
+version: '3.5'
+services:
+  restapi:
+    image: ghcr.io/arquisoft/dede_es5a/restapi:latest
+    ports:
+      - "5000:5000"
+  webapp:
+    image: ghcr.io/arquisoft/dede_es5a/webapp:latest
+    ports:
+      - "3000:3000"
+    depends_on: 
+      - restapi
diff --git a/docs/01_introduction_and_goals.adoc b/docs/01_introduction_and_goals.adoc
@@ -12,13 +12,52 @@ Describes the relevant requirements and the driving forces that software archite
 
 === Requirements Overview
 
-The following diagram represents the functional requirements of the application... (Link here Use Case diagram).
+The following diagram represents the functional requirements of the application.
+
+[plantuml,"Sequence requirements_use_case_digram",png]
+----
+@startuml
+
+actor Client as client
+
+package ArquiSocks {
+  usecase "Add to cart" as addToCart
+  usecase "Place order" as placeOrder
+  usecase "Login" as login
+  usecase "Signin" as signin
+  usecase "View orders" as viewOrders
+  usecase "View products" as viewProducts
+}
+
+cloud Database
+cloud SolidPod
+cloud MapsAPI
+
+client --> viewProducts
+client --> addToCart
+client --> placeOrder
+client --> login
+client --> signin
+client --> viewOrders
+
+Database -u-> viewProducts
+Database -u-> placeOrder
+Database -u-> viewOrders
+Database -u-> signin
+Database -u-> login
+SolidPod -u--> login
+SolidPod -u--> signin
+SolidPod -u--> placeOrder
+MapsAPI -u--> placeOrder
+
+@enduml
+----
 
 List of requirements:
 
 * The system will emulate an online shop where the users will be able to select and buy products.
 * The system will calculate the shipping costs of the selected products based on the shipping information provided by the 
-    user's pod.
+    user's pod. The price will be calculated based on distance between distribution center and client's address.
 * The system will show the user the total price for the products selected.
 * The system will register the user's order and will proceed with the shipping.
 * The system will show the user a list of all its orders.

diff --git a/docs/03_system_scope_and_context.adoc b/docs/03_system_scope_and_context.adoc
@@ -39,12 +39,12 @@ Alternatively (or additionally) you can use a table.
 The title of the table is the name of your system, the three columns contain the name of the communication partner, the inputs, and the outputs.
 ****
 
-image:business_context_diagram.png["Business Context of DeDe"]
+image:business_context_diagram.png["Business Context of ArquiSocks"]
 
 * **Client**: the main target that should pay attention to our products, he has to interact with the shop and buy products.
 * **Database**: the infrastructure that stores the orders generated by the client and all the information related to them.
 * **Solid pod**: external storage which guarantees client's privacy and personal data management.
-* **Shipping Business**: external service of the distribution business which is going to be the responsible of calculating the price of order's shipping. This cost will be based on distance from client's address and distribution centre.
+* **Maps API**: external service of a maps' provider which is going to be the responsible of calculating the distance between client's address and distribution center address. This distance will be used in order to calculate the price of the order.
 
 
 
@@ -64,10 +64,10 @@ together with a mapping table showing the relationships between channels and inp
 
 ****
 
-image:technical_context_diagram.png["Technical Context of DeDe"]
+image:technical_context_diagram.png["Technical Context of ArquiSocks"]
 
 * **Web browser**: the application used by the client to reach a connection to the shop. It could be an application such as firefox or chrome.
 * **Database**: the infrastructure that stores all the information related to the shop. Orders, products, etc...
 * **Solid pod**: external storage which guarantees client's privacy and personal data management. We will accede it using http requests to the web using an API key.
-* **Webapp**: it refers to the UI of the application. It will be the visible part of DeDe developed using React.js.
+* **Webapp**: it refers to the UI of the application. It will be the visible part of the shop called ArquiSocks developed using React.js.
 * **Restapi**: it is a server based on Node.js and Express that receives requests by the webapp. It will return json objects in order to satisfy webapp's needs. 
diff --git a/docs/04_solution_strategy.adoc b/docs/04_solution_strategy.adoc
@@ -32,11 +32,12 @@ Refer to details in the following sections.
 |Visual Studio Code, WebStorm as IDE or a text editor|At the moment, everyone can use any IDE that supports Typescript and React. Or even, it is possible to use a text editor instead of an IDE. Because the project continues working regardless of the used tool. However, an agreement may be fine to avoid potential problems.
 |===
 
+[options="header"]
 .Decisions about the top-level decomposition of the system
-* Possibilities:
-. Layered Architecture,
-. MVC Architecture,
-. or something hybrid.
+|===
+|Decision|Reason
+|Layered Architecture|Usage of MERN architecture allows us to easily build a 3-tier architecture entirely using only TypeScript and JSON.
+|===
 
 [options="header"]
 .Decisions on how to achieve quality goals

diff --git a/docs/05_building_block_view.adoc b/docs/05_building_block_view.adoc
@@ -56,89 +56,32 @@ 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.
 
 ****
+Building block view shows the static decomposition of the system into building blocks, it includes libraries, modules, components... And also the dependencies among them.
 
-_**<Overview Diagram>**_
+image:whitebox_overall_system.png["Whitebox Overall System of ArquiSocks"]
 
 Motivation::
 
-_<text explanation>_
-
+This diagram shows the relations of the application among many others systems. It also shows dependency relations with clients. This diagram provides readers a general static vision of the project.
 
 Contained Building Blocks::
-_<Description of contained building block (black boxes)>_
+|===
+|Building block |Description
+| _Client_ | Interacts with the application. He also takes care of his data using pods. 
+| _Database System_ | Service to store data. It is used through mongoDB atlas. Packages (npm): mongodb, mongoose.
+| _Solid infrastructure_ | Mechanism to store data taking care of privacy. Packages (npm): inrupt/solid-ui-react
+| _Maps API_ | API which allow us to manage distances and many other aspects related to addresses.
+| _ArquiSocks_ | The main core of the application.
+|===
 
 Important Interfaces::
-_<Description of important interfaces>_
-
-[role="arc42help"]
-****
-Insert your explanations of black boxes from level 1:
-
-If you use tabular form you will only describe your black boxes with name and
-responsibility according to the following schema:
-
-[cols="1,2" options="header"]
 |===
-| **Name** | **Responsibility**
-| _<black box 1>_ | _<Text>_
-| _<black box 2>_ | _<Text>_
+|Interface |Description
+| _nodo-fetch_ | Allow us to make asynchronous requests to the maps API so we can get information about coordinates and distances among many addresses. 
+| _mongodb and  mongoose_ | Optimize database connections and data management
+| _inrupt/solid-ui-react_ | Dependency which allows us to have a connection to solid. In this way we can get information from the pods.
 |===
 
-
-
-If you use a list of black box descriptions then you fill in a separate black box template for every important building block .
-Its headline is the name of the black box.
-****
-
-
-==== <Name black box 1>
-
-[role="arc42help"]
-****
-Here you describe <black box 1>
-according the the following black box template:
-
-* Purpose/Responsibility
-* Interface(s), when they are not extracted as separate paragraphs. This interfaces may include qualities and performance characteristics.
-* (Optional) Quality-/Performance characteristics of the black box, e.g.availability, run time behavior, ....
-* (Optional) directory/file location
-* (Optional) Fulfilled requirements (if you need traceability to requirements).
-* (Optional) Open issues/problems/risks
-
-****
-
-_<Purpose/Responsibility>_
-
-_<Interface(s)>_
-
-_<(Optional) Quality/Performance Characteristics>_
-
-_<(Optional) Directory/File Location>_
-
-_<(Optional) Fulfilled Requirements>_
-
-_<(optional) Open Issues/Problems/Risks>_
-
-
-
-
-==== <Name black box 2>
-
-_<black box template>_
-
-==== <Name black box n>
-
-_<black box template>_
-
-
-==== <Name interface 1>
-
-...
-
-==== <Name interface m>
-
-
-
 === Level 2
 
 [role="arc42help"]
@@ -150,28 +93,28 @@ Please prefer relevance over completeness. Specify important, surprising, risky,
 Leave out normal, simple, boring or standardized parts of your system
 ****
 
-==== White Box _<building block 1>_
-
-[role="arc42help"]
-****
-...describes the internal structure of _building block 1_.
-****
+==== White Box _ArquiSocks_
 
-_<white box template>_
+image:whitebox_arquisocks.png["Whitebox ArquiSocks"]
 
-==== White Box _<building block 2>_
-
-
-_<white box template>_
-
-...
-
-==== White Box _<building block m>_
+Motivation::
 
+This diagram shows the relations between the restapi and the webapp. Both building blocks will be explained more detailed in next paragraphs.
 
-_<white box template>_
+Contained Building Blocks::
+|===
+|Building block |Description
+| _React_ | Library used in order to improve development of Graphic User Interfaces. 
+| _Webapp_ | Contains the GUI of the application which is useful for clients usability. 
+| _Restapi_ | Contains controllers (routers) in order to manage CRUD requests. Generates responses to the requests.
 
+|===
 
+Important Interfaces::
+|===
+|Interface |Description
+| _Server_ | this element has the responsibility of manage requests of application's clients. These requests come from the webapp.
+|===
 
 === Level 3
 
@@ -183,24 +126,36 @@ When you need more detailed levels of your architecture please copy this
 part of arc42 for additional levels.
 ****
 
+==== White Box _Restapi_
 
-==== White Box <_building block x.1_>
-
-[role="arc42help"]
-****
-Specifies the internal structure of _building block x.1_.
-****
-
+image:whitebox_restapi.png["Whitebox Restapi"]
 
-_<white box template>_
+Motivation::
 
+This diagram shows the relations among restapi components and libraries used.
 
-==== White Box <_building block x.2_>
+Contained Building Blocks::
+|===
+|Building block |Description
+| _Models_ | Stores classes which represent objects from database. Packages (npm): mongodb.
+| _Routes_ | Admin requests and redirect to the service. Includes business logic. Packages (npm): express, mongodb.
+| _Service_ | Connects to database. Packages (npm): mongoose, dotenv.
+| _Server_ | Manage users' requests. Packages (npm): express, dotenv.
+|===
 
-_<white box template>_
+==== White Box _Webapp_
 
+image:whitebox_webapp.png["Whitebox Webapp"]
 
+Motivation::
 
-==== White Box <_building block y.1_>
+This diagram shows the relations among webapp components and libraries used. The main lirary is mui used for optimize the development of many components.
 
-_<white box template>_
+Contained Building Blocks::
+|===
+|Building block |Description
+| _Api_ | Contains functions to connect with the restapi.
+| _App_ | The main page of the web. Packages (npm): mui.
+| _Components_ | Contains all of the components of the webapp, from the cart to the products list. Packages (npm): mui.
+| _Contexts_ | It is like the session of the user, it stores products selected.
+|===
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,4 +30,3 @@ yarn-error.log*
		#documentation build does not go into master
		docs/build

		package-lock.json