Merge pull request #333 from bptlab/282_update_wiki

282 update wiki

frontend/src/components/multiPageComponents/HeaderNavbar/HeaderNavbar.jsx

@@ -51,7 +51,7 @@ const HeaderNavbar = (props) => {
             <img
               style={{ height: '3rem' }}
               src='/logo/logoCta.png'
-              alt='ark_automate Icon'
+              alt='Ark Automate Icon'
             />
           </Link>
         </Menu.Item>

wiki/Coding-Standards.md

@@ -67,12 +67,15 @@ Another Code Formatting Tool being used is [Prettier](https://prettier.io/). Her
 - "Single Source of Truth" is abbreviated with `Ssot` or `ssot` (don't use `SSoT` or `SSOT`)
 - use `Robot` in all cases instead of `Bot`
 - use `Application` in all cases instead of `App` (in context of supported RPA Applications)
+- use **hyphens** for CSS-classes and CSS-ids consistently
+   - For example, don't call the class `buttonBackground` and instead call it `button-background`.
 
 ### General Code-Style
 - Do not use double empty lines
 - Space after openning bracket and before closing bracket (Goal: `import { Space } from AntD`)
 - Always use single-quotation marks
 - We use only arrow functions. Please do not use the `function` keyword.
+- Try to use only relative units (vw,vh,rem,%) to size elements with css and **not** absolut units (px)
 
 ### Documentation
 Please do not use inline comments to explain the idea behind a variable or a function. Only use those for sources where you found a special solution or workaround or for especially complex code snippets. Further comments regarding the documentation with JSDoc are also ok/appreciated.

wiki/Database-and-Communication.md

@@ -10,9 +10,7 @@ In the backend please use the mongoose module to make a callout to the database
 ## Models
 
 If you are planning on creating a new document type (called model from now on), please create a javascript file in the modules directory on the server side. There you can specify the schema for objects of that type and also create the model and specify, which collection should be used if not that of the name of the model that you specify.
-This can be a bit confusing at first, but I guess you could think of it like this: The schema defines what fields are of what type. The model then assigns this a name and registers it for use. Mongoose will always try to retrieve objects from the remote db from a collection which has the same name as the one specified when creating the model, but this can be overwritten as I mentioned.
-
-For getting into mongoose I can really recommend [the official getting started](https://mongoosejs.com/docs/index.html) as well as a youtube video which can be found [here](https://www.youtube.com/watch?v=5e1NEdfs4is). It creates a first request through express and shows how mongoose can be used in that context. Also the code is linked in the description of that video if you are interested in trying it out for yourself.
+This can be a bit confusing at first, but you could think of it like this: The schema defines what fields are of what type. The model then assigns this a name and registers it for use. Mongoose will always try to retrieve objects from the remote db from a collection which has the same name as the one specified when creating the model, but this can be overwritten as mentioned.
 
 ## Testing
 

wiki/Documentation-Communication-Local-Client.md

@@ -0,0 +1,18 @@
+# How the approach with socket.io was implemented on our platform
+
+**Desktop app:**
+Here we implemented a CLI that reads the userId the user enters, saves the userId and uses the userId as an authentication for the communication with the web app server. Once started, the desktop app connects with the server by using a socket connection. A socket connection is this bidirectional connection that exist between every client and server. Moreover we use the userId the user entered and ask the server if this socket connection can join the room userId (we have one room for every userId). Once the socket connection was added to the userId room we wait for robots to be executed. Because we are in the userId room we receive robot execution jobs of web frontends that are connected to the same room.
+
+**Database/Server:**
+We implemented a jobs collection in MongoDB as well as a Mongoose jobs model. Every job has a robotId, a userId, a status (waiting/executing/success/failed) and an array of parameters that contains the arguments the user entered in the web frontend when starting the robot execution.
+
+**Server:**
+Sets up a server and socket instance, establishes socket connection with the web frontend and the desktop app, groups sockets by userIds (by using the room concept), reacts on robot execution commands and forwards this command to the desktop app and updates the jobs collection in MongoDB continiously.
+
+**Web Frontend:**
+Connects with the server using a socket connection. Also, like the dektop app, we join a userId specific room whenever the robot overview is rendered. Additionally, we send a robot execution job to the backend when the user clicks on the play button in the robot container.
+
+## Why we Use Socket.io
+
+In the end, we decided for socket.io as it is open-cource, well-supported, 'easy' to use, robust and websocket based enabling a bidirectional communication.
+To get started it is recommended reading [this](https://socket.io/docs/v4/index.html) introduction to socket.io. Especially these two subpages [1](https://socket.io/docs/v4/server-socket-instance/) & [2](https://socket.io/docs/v4/client-socket-instance/) are relevant for this usecase.

wiki/Documentation-Corporate-Identity.md

@@ -18,7 +18,7 @@
 
 ![](https://via.placeholder.com/15/FF6B00/000000?text=+) color-background-cta: #FF6B00
 
-How to use this color schema:
+**How to use this color schema:**
 
 - color-primary: This is the primary color of our brand. It is used for important elements (e.g headlines)
 - color-primary-inverted: Is the main color complementing the primary color. For example, it can be used for the header/footer.
@@ -38,6 +38,6 @@ How to use this color schema:
   font-weight: 400;
 - Font-Size: 1rem
 
-## Random
+## Miscellaneous
 
 - Border-Radius: 5px

wiki/Documentation-Single-Source-of-Truth.md

@@ -2,7 +2,7 @@
 
 ## What do we need a SSoT for?
 
-The goal of Ark_automate is to have multiple interfaces altering/showing the same robot. For each robot, there will be a properties panel to change attributes, a view of the current .robot code and possibly multiple modeling interfaces.
+The goal of Ark Automate is to have multiple interfaces altering/showing the same robot. For each robot, there will be a properties panel to change attributes, a view of the current .robot code and possibly multiple modeling interfaces.
 The user selects the modeling language he/she prefers and starts modeling the behavior of the robot (at least for now the user has to pre-select the modeling language). At the same time, the user can view/change the .robot code of the bot and/or update attributes via the property panel.
 To achieve that we need a single-source-of-truth(SSoT) for each robot. In the SSoT all necessary information is saved so that changes can be automatically applied to every interface.
 
@@ -77,7 +77,7 @@ No intermediate events are currently supported.
 
 ### Overview SSOT hierarchy
 
-![](https://i.imgur.com/7yOqDZv.png)
+![image](https://user-images.githubusercontent.com/36270527/120194098-705e4b00-c21d-11eb-9301-937447369e93.png)
 
 ### Component: HEADER
 
@@ -114,7 +114,7 @@ User information about a robot (creator, released for etc.) is stored in an addi
 }
 ```
 
-**parameter object extending the INSTRUCTION:**
+**Parameter Object Extending the INSTRUCTION Element**
 
 ```json
 {

wiki/Home.md

@@ -1,29 +1,23 @@
-# Welcome to the Ark_automate wiki!
+# Welcome to the Ark Automate wiki!
 
-Ark_automate is an open-source RPA tool that uses several modeling languages to create bots.
+Ark Automate is an open-source RPA tool that uses several modeling languages to create bots.
 
 In our Wiki you can find the following:
 
-- our [vision](https://github.com/bptlab/ark_automate/wiki/Vision-for-Ark-automate) for this project including a [pitch](https://github.com/bptlab/ark_automate/wiki/Vision-for-Ark-automate#Pitch), the [features to be implemented](https://github.com/bptlab/ark_automate/wiki/Vision-for-Ark-automate#Until-summer-2021-we-want-to-implement-a-first-working-web-app-for-our-use-case) in the summer of 2021, the [architecture](https://github.com/bptlab/ark_automate/wiki/Vision-for-Ark-automate#Architecture) and the [user interaction](https://github.com/bptlab/ark_automate/wiki/Vision-for-Ark-automate#Using-Ark_automate)
-- documentation regarding [the structure](https://github.com/bptlab/ark_automate/wiki/Documentation-Folder-structure) of this project
-- our [code documentation](https://github.com/bptlab/ark_automate/wiki/Documentation-Folder-structure) hostet on GitHub Pages grouped by modules and classes
-- documentation regarding [our single source of truth](https://github.com/bptlab/ark_automate/wiki/Documentation-single-source-of-truth)
-- documentation the [corporate identity of Ark_automate](https://github.com/bptlab/ark_automate/wiki/Documentation-Corporate-Identity)
-- documentation regarding our [team work](https://github.com/bptlab/ark_automate/wiki/Team-Scrum-process)
-- concepts on how we think users to interact with [the bots](https://github.com/bptlab/ark_automate/wiki/concept-Starting-and-orchestrating-Bots)
-- our own guides to learn how to
-  - write [code documentation](https://github.com/bptlab/ark_automate/wiki/How-to-write-code-documentation)
-  - write [tests](https://github.com/bptlab/ark_automate/wiki/How-to-write-tests)
-  - sytle [our components using css](https://github.com/bptlab/ark_automate/wiki/How-to-style-using-css)
+- our [vision](https://github.com/bptlab/ark_automate/wiki/Vision-for-Ark-automate) for this project including a pitch, the architecture and the user interaction
+- our [code documentation](https://bptlab.github.io/ark_automate/) hostet on GitHub Pages grouped by modules and classes
+- documentation regarding [the structure](https://github.com/bptlab/ark_automate/wiki/Documentation-Folder-Structure) of this project
+- documentation regarding [our single source of truth](https://github.com/bptlab/ark_automate/wiki/Documentation-Single-Source-of-Truth)
+- documentation the [corporate identity of Ark Automate](https://github.com/bptlab/ark_automate/wiki/Documentation-Corporate-Identity)
 
 ## API documentation
 
-The OpenApi documentation of the offered API can be found when fetching the /docs route from the running backend, which is up to date with everything in the Code, as it is generated at runtime.
+The OpenApi documentation of the offered API can be found when fetching the `/docs` route from the running backend, which is up to date with everything in the Code, as it is generated at runtime.
 WHen running a local version of the software you can access the documentation using `localhost:5000/docs`
 
 ## How to contribute to the wiki
 
-To contribute a page to the wiki, please create a markdown file in the `wiki` directory or edit an existing one. It will automatically be deployed as a wiki page once it is pushed onto the DEV branch.  
+To contribute a page to the wiki, please create a markdown file in the `/wiki` directory or edit an existing one. It will automatically be deployed as a wiki page once it is pushed onto the DEV branch.  
 The page title will have the same name as the filename of your created file and will show hyphens as empty spaces. Therefore, we ask you to not use empty spaces in your filenames.
 
 > The deployment of wiki pages will overwrite the existing pages, so if you want to persist your article in the wiki, please go the route of creating a markdown file.