# CrowdWire

## Index
[Toc]

## Context

With the emergence of Covid-19 all around the World, many people, companies and organizations started adopting remote procedures like video-conferences to continue doing the commons tasks they used to do "in person". Therefore, the search and use of these types of systems that allow video and voice calls has increased a lot.

## Problem

Most of the current video communication systems are limited in the sense that they do not provide a remote interactive environment, side conversations, nor visualization that mimics real life behaviours. Besides this, the ones that do, are not open source projects.

## Goals

With this work, we aim to provide an interactive way of doing virtual meetings, online conferences and classes, capable of scaling up to a number of active users, that should be close enough to host conferences.
Also, we want to simulate a real-life communication experience by taking into consideration users' proximity, as this component is one of the most rewarding thing in real life meetings.
In order to do so, we are looking forward to develop a web application with a game-like interface that allows to create and customize environments and invite other users.
As a solution to part of the problem, we intend to do a open-source project, so that people are able to use and contribute to it.

## Tasks

Module Backend (Bruno Bastos, Mário Silva, Daniel Gomes)
- Task 1: Identify the databases that will be used according to its use cases (Bruno Bastos)
- Task 2: Create the database schema (Bruno Bastos,Mário Silva)
- Task 3: Develop the API and its endpoints (Daniel Gomes, Bruno Bastos)
- Task 4: Integrate with the Communications logic (Bruno Bastos, Mário Silva)

Module Frontend (Leandro Silva, Pedro Tavares)
- Task 1: Provide a static interface with an embedded game framework (Leandro Silva, Pedro Tavares)
- Task 2: Create the required communication services with the backend (Leandro Silva, Pedro Tavares)
- Task 3: Create dynamic pages and present information in real time where needed (Leandro Silva, Pedro Tavares)

Module Communications (Mário Silva, Daniel Gomes)
- Task 1: Investigate WebRTC technology to perform video and voice calls (Mário Silva)
- Task 2: Create the communications Service (Mário Silva)
- Task 3: Integrate this microservice with the backend and frontend (Mário Silva, Daniel Gomes)

Module Infrastructure (Daniel Gomes, Mário Silva)
- Task 1: Identify the technologies that are needed to deploy every micro-service (Daniel Gomes)
- Task 2: Investigate how to increase the communications service availability in the production environment (Daniel Gomes)
- Task 3: CI Pipeline (Daniel Gomes, Mário Silva)
- Task 4: CD Pipeline (Daniel Gomes)

Module World-Editor (Leandro Silva, Pedro Tavares)
- Task 1: Provide the user with a map editor and material to create and edit its personal world (Leandro Silva, Pedro Tavares)
- Task 2: Allow users to upload sprites to their editor (Leandro Silva)

## Expected Results

In the final result, we expect to have a fully functional web application capable of performing video and voice calls that may be used in many different ways, providing to the end users other kind of interaction with each other.

The end application should allow the user to create and edit their own worlds and invite friends, co-workers or guests depending on the world's intent, which can go from speeches to workplaces, conferences, classes or maybe even playgrounds.

Finally, this platform should be scalable enough to host video-conferences with dimensions of an event like Students@Deti.

## Related Work

The following system is really interesting and inspiring in the context of our project:
- [**Gather.town**](https://gather.town/)
- [**DogeHouse**](https://dogehouse.tv/)

## Calendar

### 1st Milestone
- Planning...
- Set up docs platforms tools..
- Develop a prototype
- Research technologies and define the system architecture
- Start testing and developing shortly each area/framework individually

### 2nd Milestone
- Basic User movement on predefined maps
- Basic Video and voice communication
- Text Chat feature

### 3rd Milestone
- World-Editor
- Full Integration of each micro-service
- Proximity video and voice chatting with high availability
- CI/CD
- File Exchange feature

### 4th Milestone
- Map and User Permissions well integrated
- Stress Testing to all features
- Integrate additional features

## Communication

Backlog Management: For backlog management we decided to use Jira since it is a widely used tool by a lot of Companies as a project Management tool that allows bug/issue tracking.
Git Platform: For the Git platform, we have chosen GitHub since we are very acquainted with it.
Git Standards:
- For each new feature create a new branch.
- For each fix create a new branch.
- Never merge directly, always make pull requests and identify at least one person to check (review) that pull request before merging the PR.
- New feature branch: For each new feature create a branch following the standard, example: feature-frontend-feature-name.
- New Issue branch: For each fix create a branch following the standard, example: hotfix-frontend-fix-name.
- Follow the Good Practices stablished for most of the Open Source Projects.
- Always have instructions for running all services on local host.
- For each pull request it's assigned a member to revise the code and merge it, we decided to use a Round Robin policy for the assignment of the reviewer.

Team Communication: For intra-team communication we are using Discord, since every member is familiarized with the tool and, we have integrated it with Jira and GitHub for continuous updates on our repository.

## Team Roles

**Product Owner**: Leandro Silva
**DevOps Master**: Daniel Gomes
**Architect**: Bruno Bastos
**Lead Developer**: Mário Silva
**Project Manager**: Pedro Tavares
**Advisor**: Diogo Gomes

## Project Calendar

### Actors
In the context of our system we identified the following actors:
- Admin: Corresponds to the administrators of the Platform, which will make use of a specific and simple Dashboard that presents some statistics and information of the platform.
- Guest: User that does not have an account. These types of users usually only want to get to know the platform, or are invited to participate in scenarios like conferences. This actor can enter worlds, communicate with other guests or registered users through both text and voice messaging. Besides this, they are able to interact with the world and its differenct functionalities like file sharing.
- Registered User: User that has a registered accound.Besides the functionalities of Guest Users, this actor is allowed to create, edit and manage worlds, as well as add friends or invite them to it or atributing different kinds of roles.

### Personas

| Name | Details | Goals |
| :--: |:-- |:-- |
| Alice | Professor, 33 years old,lives in Aveiro.With the current pandemic situation that the world lives in, she has been struggling to make her classes similar to the "in person" ones. | Wants to teach in a more interactive way in order to make the students more interested in the classes. |
| John | 45 years old, resident in Porto, Team Manager of a remote Software company and needs to communicate with the rest of the team | Wants to organize remote meetings with the team members, sharing valuable information or documents. |
| David | 16 years old teenager, lives in Porto and is a really sociable person, that misses his friends and seems frustrated due to the lack of contact that the pandemic provided. | Wants to meet with his friends in this platform so that they have fun remotely, simulating a live presence with them. |
Mary | 24 years old, lives in Coimbra. Gives motivational speeches in conferences with hundreds of people. | Wants to host a meeting for a large number of people and wants them to feel a more realistic depth to their presences.

### Use Cases

#### Guest Users

| Use Case | Description | Priority
| -------- | -------- | -------- |
| Broadcast voice and video | A User with broadcast permission is able to share its voice and video with all users inside a room. | High |
| Share screen | A user with broadcast permission or when interacting with an object is able to share it's screen to the ones around. | Medium |
| Interact with objects | Every user is able to interact with objects, such as a whiteboard, games, videos, etc. Some might be used by multiple users at the same time (whiteboards, etc). | High |
Share files | A user is able to share a file with all users or the ones specified by him.| High |
| Proximity Chat | A user is able to communicate through voice/chat/video to ones near him. | High |
| Search Public Worlds | Search from all the public worlds based on their characteristics (ex.meetings, conferences, classes, etc.) | Low |

#### Registered Users

| Use Case | Description | Priority |
| --------- | -------- | -------- |
| Assign User roles | Inside a world, the world administrator might want to give some permissions to a group of users (teachers or speakers, for example) and in order to do so, they create roles and assign that role the permissions associated. | High |
| World Creation | A user is able to create and edit a world in order to host events, meetings, classes, and others or choose a default map.| High|
| View joined worlds | Be able to search worlds that you already joined. | Low |
| Edit profile | Customize name and avatar. | Medium
| Kick/Ban user from world | Some users may be able to ban or kick due to misbehavior. | Medium |
|Create conference areas| Areas where only a few users are allowed to speak and share video data, others can only receive their data and have to request to share theirs if they want.| High |
| Invite to World | Invitations link can be used to allow new users to get inside a world. | Medium |

#### Admin
| Use Case | Description | Priority |
| -------- | -------- | -------- |
| Delete worlds | An admin might want to delete world due to inactivity or world reports. | Low |
| Ban users |Due to bad conduct a user may be banned.|Medium|
| View Report | Admin wants to know the reasons given for the report requests.| Low |
|View Statistics| Check what are the stats relative to worlds and users. | Medium |

### User Stories

- As Alice I want to be able to connect with my students in a room, where all of them can hear/see me.
- As Alice I want to be able to share my screen, so that all students can see the exercises.
- As Alice I do not want to lose too much time creating and customizing a map, therefore it would be nice to have default classroom maps.
- As Alice I want to have some kind of whiteboard in order to make it easy to explain some subjects to the students.
- As John I need to invite my team to a private worlds, so that only the invited people can join it.
- As John I would like to have a text Chat mechanism, so that I can share links in a simple way.
- As John I need to share documents with my team, so that these documents can only be seen by the team.
- As John I want to edit my profile so that I am able to control information associated with my account.
- As David I would like to be able to hear and see my friends' cameras everytime they are close to me in the map.
- As David I want to turn off my camera and microphone when I need to be out for a while.
- As David I want to customize my World Avatar, so that I can represent myself in this system.
- As David I want to be able to invite my friends to my map, so that we can communicate with each other.
- As Mary I want to talk to everyone in the room, so that I can give a speech.
- As Mary I want to be able to give permission for someone who raised their hand to talk, so that they can share their opinion on my speeches.

### Requirements Gathering

In order to get a better idea on how to solve the problems already mentioned that we intend to approach, we started by using and searching through **Gather.town** as it is our main source of inspiration, and, consequently, understanding its main functionalities and provided services.Besides **Gather.town** we are also keeping up with **Doge House**'s progress.
Secondly, our approach consisted in discussing and brainstorming ideas that we could implement into our system, which included ideas that we could reuse from the related work, as well as the limits and boundaries of our system.
Finally, after the gathering of this kind of information, we discussed our ideas with our Advisor, Diogo Gomes, which was an extremely important step since it gave us a wider vision on how we could tackle some of the adversities in the development of our system, as for example:
- Use of a Container Orchestration Tool, so that we could replicate our services and balance the load on them in real time, especially the Media Service that must be available for any user.
- Use of a Game engine to speed up the developement on the UI, as well as WebSockets to retrieve data in Real Time.

All our decisions that we made during the development of this system, have been written in a LogBook.

### Functional Requirements
- **Business Rules**
-- Distinct use cases for Guests, Registered Users and Administrators
-- In each world, every user, registered or not, has roles associated with permissions for each one. These roles should be completely editable, but there must be some by default:
- **Member**: Default role which has the following permissions: Proximity chat, movement, file sharing, perform kick or ban requests, use tools.
- **Speaker**: Can do everything a **Member** can and can also so speak to an entire conference room and give permission to speak.
- **Moderator**: edit map, delete world, edit users roles and consequently its permissions.
- **Authentication and Authorization level**:
-- Users can be logged in or join as guest.
-- Implementation of external login services (GoogleAuth).
-- Guests have limited access to functionalities.
-- Any world created can be public or private. Public worlds can be visible and accessed by anyone, while private can only be accessed by an invitation link.
- **Administrative Functions**:
-- The platform administrators should be able to access an admin page, to visualize statistics or manage the platform itself.
-- Any registered User that has created a world, has an administrative role, in terms of business logic, towards it.
- **Reporting**:
-- As our Platform will be open source, users will be able to report any issues, errors on our GitHub.
- **In-world**:
-- It's possible to communicate by text, video, or voice.
-- Users can move freely and interact with the world's objects.
-- Users may have the option to speak to the entire room.
-- The users are associated with roles in order to be able to perform certain actions exclusive to that role.
-- Share files.
- **World Creation and Edition**:
-- After creation, the world's attributes (name, tags, description...) can be edited.
-- Kick, ban or unban user from world is possible if allowed by the role.

### Non-functional Requirements
In terms of Non-functional requirements, we want to assure that our system has a great usability, performance, availability, scalibility, recoverability, compatibility.

# My first HackMD note(change me!)

###### tags: `Tag(change me!)`

> This note is yours, feel free to play around. :video_game:
> Type on the left :arrow_left: and see the rendered result on the right. :arrow_right: https://hackmd.io/09R75XnRTm6WUQoRcjlT4Q?both#

## :memo: Where do I start?

### Step 1: Change the title and add a tag

- [x] Create my first HackMD note (this one!)
- [x] Change its title
- [x] Add a tag

:rocket:

### Step 2: Write something in Markdown

Let's try it out!
Apply different styling to this paragraph:
**HackMD gets everyone on the same page with Markdown.** ==Real-time collaborate on any documentation in markdown.== Capture fleeting ideas and formalize tribal knowledge.

- [x] **Bold**
- [x] *Italic*
- [x] Super^script^
- [ ] Sub~script~
- [ ] ~~Crossed~~
- [x] ==Highlight==

:::info
:bulb: **Hint:** You can also apply styling from the toolbar at the top :arrow_upper_left: of the editing area.

:::

> Drag-n-drop image from your file system to the editor to paste it!

### Step 3: Invite your team to collaborate!

Click on the <i class="fa fa-share-alt"></i> **Sharing** menu :arrow_upper_right: and invite your team to collaborate on this note!


- [ ] Register and sign-in to HackMD (to use advanced features :tada: )
- [ ] Set Permalink for this note
- [ ] Copy and share the link with your team

:::info
:pushpin: Want to learn more? ➜ [HackMD Tutorials](https://hackmd.io/c/tutorials)
:::

---

## BONUS: More cool ways to HackMD!

- Table

| Features | Tutorials |
| ----------------- |:----------------------- |
| GitHub Sync | [:link:][GitHub-Sync] |
| Browser Extension | [:link:][HackMD-it] |
| Book Mode | [:link:][Book-mode] |
| Slide Mode | [:link:][Slide-mode] |
| Share & Publish | [:link:][Share-Publish] |

[GitHub-Sync]: https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github
[HackMD-it]: https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it
[Book-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book
[Slide-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck
[Share-Publish]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note

- LaTeX for formulas

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$

- Code block with color and line numbers：

var s = "JavaScript syntax highlighting";
alert(s);

- UML diagrams

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?

- Auto-generated Table of Content
[ToC]

> Leave in-line comments! [color=#3b75c6]

- Embed YouTube Videos

{%youtube PJuNmlE74BQ %}

> Put your cursor right behind an empty bracket {} :arrow_left: and see all your choices.

- And MORE ➜ [HackMD Tutorials](https://hackmd.io/c/tutorials)