Documentation (#7)

* WIP - Added initial documentation

- Added darft version of how to run the solution locally

* WIP - Updated documentation

 - Added how to run the solution in azure
 - Updated how to run the solution locally with the steps to build and run the solution

* Updated how to run the solution locally

- Added steps to upload the package into teams
- Added steps to quickly test the extension

* Updated prerequisites

* Updated how to run the solution in Azure

* Updated manifests and documentation

* Updated repository reference

* Updated manifests

README.md

@@ -1,4 +1,4 @@
-# Web UI for the Broadcast Development Kit (WIP)
+# Web UI for the Broadcast Development Kit
 
 This repository contains a sample [application for Teams meetings](https://docs.microsoft.com/en-us/microsoftteams/platform/overview) to control the [Broadcast Development Kit](https://github.com/microsoft/Teams-Broadcast-Extension) solution. This application can be loaded into Teams as an in-meeting app to use within the Teams client. 
 
@@ -6,10 +6,6 @@ This Teams app is developed as a single page application (SPA) in React and Type
 
 ![Screenshot of the web UI](docs/common/images/cover.png)
 
-## Getting started
-
-TBD
-
 ## Exploring the repository
 
 The repository is structured in the following directories:
@@ -19,8 +15,17 @@ The repository is structured in the following directories:
 - **docs**: Contains the documentation on the solution (TBC).
 
 ## Dependencies
+- This is not an standalone application. It requires an instance of the [Broadcast Development Kit](https://github.com/microsoft/Teams-Broadcast-Extension) to work with. Check the documentation in that repository to run the **Broadcast Development Kit** (either locally or in the cloud) before using this application.
+- [Node JS and npm](docs/how-to-install-nodejs-and-npm/readme.md)
+- An Office 365 tenant and a team configured with Allow uploading custom apps enabled. For more information, see [prepare your Office 365 tenant](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant).
 
-This is not an standalone application. It requires an instance of the [Broadcast Development Kit](https://github.com/microsoft/Teams-Broadcast-Extension) to work with. Check the documentation in that repository to run the **Broadcast Development Kit** (either locally or in the cloud) before using this application.
+## How to run the solution locally
+To run the solution in a local environment please follow the guide listed below:
+- [How to run the solution locally](docs/how-to-run-the-solution-locally/README.md)
+
+## How to run the solution in Azure
+To run the solution in Azure please follow the guide listed below:
+- [How to run the solution in Azure](docs/how-to-run-the-solution-in-azure/README.md)
 
 ## Contributing
 

docs/how-to-install-nodejs-and-npm/readme.md

@@ -0,0 +1,24 @@
+## How to install Node.js and npm
+
+1. Check if you already have Node.js and npm installed by running in the terminal the following commands
+
+```bash
+node -v
+```
+
+```bash
+npm -v
+```
+
+You will get a message (version number may change depending on the installed version) like the following: 
+
+|![node.js and npm versions](images/node_version.png)|
+|:--:|
+|*node.js and npm installed versions*|
+
+> You can open a console by pressing `Win + R` keys, write `cmd` in the `Open` input and press `Ok`
+
+If Node.js and/or npm are/is not installed, proceed with the following step.
+
+2. Download [node.js](https://nodejs.org/en/) and [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). If you use the [node.js installer](https://nodejs.org/en/download/), npm is already included so you don't need to download them separately. After that, you can run the commands mentioned in the step **1** and verify that were correctly installed.
+

docs/how-to-run-the-solution-in-azure/README.md

@@ -0,0 +1,328 @@
+# How to run the solution in Azure
+
+## Getting Started
+The objective of this document is to explain the necessary steps to configure and run the Teams Meeting extension solution in Azure. This includes:
+
+  - [Create a new App Registration](#create-a-new-app-registration)
+  - [Create a new Azure Storage Account](#create-a-new-azure-storage-account)
+  - [Install and Build the solution](#install-and-build-the-solution)
+  - [Configure the Solution](#configure-the-solution)
+  - [Upload the build to the storage container](#upload-the-build-to-the-storage-container)
+  - [Zip and upload the manifest to Microsft Teams meeting](#zip-and-upload-the-manifest-to-microsft-teams-meeting)
+  - [Test the Solution](#test-the-solution)
+
+### Create a new App Registration
+Create a new [App Registration](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) in Azure for the solution.
+
+- `Name`: Any meaningful name (e.g: `broadcasterappextension`).
+- `Authentication`:
+  - `Platform configurations`: Single-page application (the Redirect URLs will be configured later).
+  - `Implicit grant and hybrid flows`: Select both “Access tokens” and “ID tokens”.
+  - `Supported account types`: Accounts in any organizational directory (Any Azure AD directory – Multitenant)
+- `Certificates and clients`: None.
+- `Token configuration`: Press on `Add groups claim` and `Save` a new one with following configuration. Keep `Emit groups as role claims` **unchecked** for all types.
+  - `Id`: Group ID.
+  - `Access`: Group ID.
+  - `SAML`: Group ID.
+- `API permissions`: Add the following Microsoft Graph permissions to this application.
+
+API / Permission name  | Type | Admin consent
+---------|----------|---------
+ email | Delegated | No
+ offline_access  | Delegated | No
+ openid | Delegated | No
+ profile | Delegated | No
+ User.Read | Delegated | No
+
+ Also add the following permission which is the API scope that had to be created when [configuring the backend](https://github.com/microsoft/Teams-Broadcast-Extension/blob/main/docs/how-to-run-the-solution-in-azure/app_registrations.md#expose-an-api-1) `ManagementApi` app registration.
+
+ API / Permission name  | Type | Admin consent
+---------|----------|---------
+ access_as_producer | Delegated | No
+
+  - `Expose an API`: Skip this section for now. It will be configured later once the extension is ready to be used.
+  - `App roles`: None.
+
+After creating this App Registration copy the app ID and modify the Manifest of the App Registration created to the [Management API](https://github.com/microsoft/Teams-Broadcast-Extension/blob/main/docs/how-to-run-the-solution-in-azure/app_registrations.md#how-to-setup-management-api-application-registration) adding the following property:
+
+```json
+"knownClientApplications": ["{{applicationId}}"]
+```
+Placeholder | Description
+---------|----------
+applicationId | Client Id of the App Registration created for the spa.
+
+### Create a new Azure Storage Account
+
+[Create](https://docs.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal) an Storage Account that will be used to host the Meeting Extension single-page solution.
+
+  - `Name`: Any meaningful name (e.g: `broadcastextension`).
+  - `Region`: same region as the rest of the resources.
+  - `Performance`: Standard.
+  - `Redundancy`:  Locally-redundant storage (LRS).
+
+Leave the rest of the settings as-is. Once this Storage Account is created, go to the Static website menu in the Data management section of the storage account. In it, change the following settings:
+
+- `Static website`: Enabled.
+- `Index document name`: index.html
+- `Error document path`: index.html
+
+|![Static Website configuration](images/static_website.png)|
+|:--:|
+|*Static Website Configuration*|
+
+>Copy the value of `Primary endpoint` that will appear after pressing save, this value is needed later on to configure the solution.
+
+### Install and build the solution
+1. Go to the main directory of the solution open a terminal in that directory and enter the command `npm i`. It will start the installation of the packages used by the solution which may take a few seconds.
+
+|![npm i running](images/installing.png)|
+|:--:|
+|*`npm i` command is running*|
+
+>You can open a terminal in a particular directory by holding down the ***shift*** key and right clicking on an empty space and selecting the option `Open PowerShell window here`.
+>![Open PowerShell window here](images/open_console.png)
+
+Once finished you will notice that a directory called node_modules and a package-lock.json file have been created.
+
+2. In the same terminal enter the following command: `npm run build`.
+
+After a few seconds the build of the solution will be finished and a new `build` directory will be created in the root directory of the solution. The terminal will display a message like the following:
+
+|![Terminal after finishing the build](images/build.png)|
+|:--:|
+|*Terminal after finishing the build*|
+
+
+### Configure the solution
+
+#### Configure the App Registration
+
+**1.** In the Azure Portal, go to the App registration created above. Click on the menu option `Authentication` of the `Manage` section and Add a new [Redirect URI](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app#add-a-redirect-uri) with the following values:
+- ```json
+  {{`primaryEndpoint`}}/auth/start
+  ```
+- ```json
+  {{`primaryEndpoint`}}/auth/end
+  ```
+
+(e.g:`https://broadcastextension.z22.web.core.windows.net/auth/start` and `https://broadcastextension.z22.web.core.windows.net/auth/end`)
+
+**2.** Go to the `Expose an API` option in the `Manage` section menu of the App Registration. Click on the `Set` link and add the following value:
+
+```json
+api://{{primaryEndpointWithoutProtocol}}/{{spaClientId}}
+```
+
+Placeholder | Description
+---------|----------
+primaryEndpointWithoutProtocol | `Primary endpoint` without the protocol (`https://`) copied from `Static website` menu of Storage Account (e.g: `broadcastextension.z22.web.core.windows.net`)
+spaClientId | Client Id of the App Registration of this frontend solution.
+
+|![Expose an API](images/expose_an_api.png)|
+|:--:|
+|*Expose an API*|
+
+Press on the `+ Add a scope` button and create a new scope with the following data:
+- `Scope name`: "access_as_producer"
+- `Who can consent?`: Admin and users
+- `Admin consent display name`: "Access Broadcaster as Admin"
+- `Admin consent description`: "Allow the app to read the signed-in user's profile"
+- `User consent display name`: "Access Broadcaster as user"
+- `User consent description`: "Allow the app to read the signed-in user's profile"
+
+Press on the `+ Add a client application` button and fill with the following values and check the Authorized scope:
+- `1fec8e78-bce4-4aaf-ab1b-5451cc387264`
+- `5e3ce6c0-2b1f-4285-8d4b-75ee78787346`
+
+|![add a client application](images/add_client_application.png)|
+|:--:|
+|*Add a client application*|
+
+#### Setup the config.json file
+
+Open the `config.json` file located in the `build` folder of the solution's root directory (created in the [previous step](#install-and-build-the-solution)) and edit the following parameters:
+
+```json
+{
+  "buildNumber": "0.0.0",
+  "apiBaseUrl": "https://{{apiBaseUrl}}/api",
+  "featureFlags": {
+    "DISABLE_AUTHENTICATION": {
+      "description": "Disable authentication flow when true",
+      "isActive": false
+    }
+  },
+  "authConfig": {
+    "domain": "{{domain}}",
+    "instance": "https://login.microsoftonline.com/",
+    "tenantId": "{{tenantId}}",
+    "groupId": "{{groupId}}",
+    "spaClientId": "{{spaClientId}}",
+    "clientId": "{{clientId}}",
+  }
+}
+
+```
+
+Placeholder | Description
+---------|----------
+ apiBaseUrl | Base url of the Management API hosted in Azure.
+ spaClientId | Client Id of the App Registration of this frontend solution.
+ clientId | Client Id of the App Registration of the ManagementApi.
+ groupId | ObjectId of the group created on Azure.
+ tenantId | Azure account Tenant Id.
+ domain | Domain of your organization. (e.g: `mydomain.com`)
+
+#### Setup the application package
+
+Go to the manifest folder in the root directory of the solution and edit the `manifest.json` file, which we are going to use to create the [App package](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/apps-package), with the following values:
+
+```json
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.9",
+  "id": "{{spaClientId}}",
+  "version": "0.0.1",
+  "packageName": "text",
+  "webApplicationInfo": {
+    "id": "{{spaClientId}}",
+    "resource": "{{apiExposed}}"
+  },
+  "developer": {
+    "name": "Microsoft",
+    "websiteUrl": "https://{{primaryEndpointWithoutProtocol}}/call/join",
+    "privacyUrl": "https://{{primaryEndpointWithoutProtocol}}/privacy.html",
+    "termsOfUseUrl": "https://{{primaryEndpointWithoutProtocol}}/tou.html"
+  },
+  "name": {
+    "short": "Broadcast Development Kit",
+    "full": "Broadcast Development Kit for Teams"
+  },
+  "description": {
+    "short": "Operate the Broadcast Development Kit for Teams inside your teams meeting",
+    "full": "This extension allows you to use the Broadcast Development kit for Teams solution you have deployed for your Office 365 tenant directly within Teams"
+  },
+  "icons": {
+    "outline": "icon-outline.png",
+    "color": "icon-color.png"
+  },
+  "accentColor": "#D85028",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{{primaryEndpointWithoutProtocol}}/config",
+      "canUpdateConfiguration": false,
+      "scopes": [
+        "groupchat"
+      ],
+      "context": [
+        "meetingChatTab",
+        "meetingDetailsTab",
+        "meetingSidePanel"
+      ]
+    }
+  ],
+  "staticTabs": [],
+  "bots": [],
+  "connectors": [],
+  "composeExtensions": [],
+  "permissions": ["identity", "messageTeamMembers"],
+  "validDomains": ["{{primaryEndpointWithoutProtocol}}"]
+}
+```
+
+Placeholder | Description
+---------|----------
+spaClientId | Client Id of the App Registration of this frontend solution.
+apiExposed | API exposed in the App Registration (`api://{{primaryEndpointWithoutProtocol}}/{{spaClientId}}`)
+primaryEndpointWithoutProtocol | `Primary endpoint` without the protocol (`https://`) copied from `Static website` menu of Storage Account (e.g: `broadcastextension.z22.web.core.windows.net`)
+
+### Upload the build to the storage container
+Open the created Storage Account go to the `Access keys` menu in the `Security + Networking` section, click on the `Show keys` button and copy the `Connection string`.
+
+|![Copy the Connection string](images/connection_string.png)|
+|:--:|
+|*Copy the `Connection string` of the Storage Account*|
+
+Install and open [Microsoft Azure Storage Explorer](https://azure.microsoft.com/en-us/features/storage-explorer/). After that, click on the Connect button, select `Storage account or service`, choose the `Connection string (key o SAS)` option and click `Next`.
+
+|![Connect to the Storage Account](images/connect_storage_explorer.png)|
+|:--:|
+|*Connect to the Storage account using the Connection String*|
+
+In the `Connection string` field enter the connection string copied from the Storage Account and confirm the following steps.
+
+The created storage account will appear inside the `Storage Accounts` of the Storage Explorer. Inside blob containers you will find the `$web` container.
+
+|![$web container in Storage Explorer](images/storage_explorer.png)|
+|:--:|
+|*Open the `$web` container of the Storage Account*|
+
+Copy the files from the `build` folder generated by the solution and upload it to the `$web` container by dragging the files to it. After a few seconds the files will finish being loaded into the container and will appear inside it.
+
+|![Drag the build files into the container](images/upload_build.png)|
+|:--:|
+|*Drag the content of the `build` folder into the `$web` container*|
+### Zip and upload the manifest to Microsft Teams meeting
+Go to the manifest folder in the root directory of the solution. Select all files in the folder and right-click on them. Select `Send to` and then `Compressed (zipped) folder`. A new file named `manifest.zip` will be created.
+
+|![Zip Manifest files](images/zip.png)|
+|:--:|
+|*Zip files in manifest*|
+
+[Create](https://support.microsoft.com/en-us/office/schedule-a-meeting-in-teams-943507a9-8583-4c58-b5d2-8ec8265e04e5) a new microsoft teams meeting and click on the `+` button located at the top of the chat header of this meeting.
+
+|![Press `+` Button](images/teams_manage_app.png)|
+|:--:|
+|*Press `+` Button*|
+
+A new window will open, select `Manage apps` in the bottom right corner of it.
+
+|![Add a tab Window](images/teams_manage_app_2.png)|
+|:--:|
+|*Add a tab Window*|
+
+On the meeting chat a new tab will open called `Manage apps` in the bottom right corner click on `Upload a custom app` and select the `manifest.zip` file we have created previously
+
+|![Upload a custom app](images/teams_manage_app_3.png)|
+|:--:|
+|*Press on `Upload a custom app` button*|
+
+A new window will open with details of the application, click on the `add` button.
+
+|![Details window](images/add_manifest.png)|
+|:--:|
+|*Click on the `add` button*|
+
+Join the meeting and click on the three dots button on the top menu, choose the option `+ Add an app` and there choose `Broadcast Development kit` application.
+
+|![Add the app into the meeting](images/add_an_app.png)|
+|:--:|
+|*Add the app into the meeting*|
+
+A new window will open, press `save` to add the application.
+
+|![Press save](images/broadcast_popup.png)|
+|:--:|
+|*Press save to add the app*|
+
+### Test the solution
+
+Once you configured the extension in the Teams meeting, and ran the local backend, click on the `Join Meeting` button to invite the bot into the meeting.
+
+|![Join Meeting](images/test_extension.png)|
+|:--:|
+|*Join Meeting*|
+
+After a few seconds, the bot will join into the meeting, and you will see dashboard with the meeting participants and other options.
+
+|![In meeting](images/test_extension_2.png)|
+|:--:|
+|*In meeting*|
+
+In the image below, we can see an SRT extraction of a meeting participant.
+
+|![SRT extraction example](images/test_extension_3.png)|
+|:--:|
+|*SRT extraction example*|
+

docs/how-to-run-the-solution-locally/README.md

@@ -0,0 +1,284 @@
+# How to run the solution locally
+
+## Getting Started
+The objective of this document is to explain the necessary steps to configure and run the Teams Meeting extension solution in a local environment. This includes:
+
+  - [Install and configure ngrok](#install-and-configure-ngrok)
+  - [Install the solution packages](#install-the-solution-packages)
+  - [Configure the solution](#configure-the-solution)
+  - [Build and run the Solution](#build-and-run-the-solution)
+  - [Test the solution](#test-the-solution)
+
+## Install and configure ngrok
+To run the solution locally you need to establish a secure tunnel between Microsoft Teams and our extension. Microsoft Teams is a cloud-based product, and it requires our extension content be available from the cloud using HTTPS endpoints. 
+
+For this purpose, you use [ngrok](https://ngrok.com/), a reverse proxy software tool that creates a tunnel to our locally running web server's publicly available HTTPS endpoints.
+
+Because the frontend solution has a dependency with [Broadcasts Protocols for Teams](https://github.com/microsoft/Teams-Broadcast-Extension) (backend solution from here) that also requires Ngrok, and Ngrok's free accounts only allow us to run just one instance at the same time, we recommend you to create new account to get the required token to run an Ngrok instance. If you haven't downloaded Ngrok yet, you can donwload it from [here](https://www.ngrok.com/download)
+
+Login into your new Ngrok account and in the left menu, in the `Getting Started` section, select the option `Your Authtoken` and copy it. We will use this token to configure our instance of ngrok.
+
+|![Ngrok AuthToken](images/ngrok_authtoken.png)|
+|:--:|
+|*Copy the Ngrok Authtoken*|
+
+After that, go to the directory where you unziped the `ngrok.exe` file and create a new config file with a different name that the one you use to run the ngrok instance for the backend solution.
+
+**Creating config file**
+
+1. Open vscode
+2. Go to File -> New file (or press Ctrl+N)
+
+|![Ngrok Config File](images/ngrok_create_config_file_1.png)|
+|:--:|
+|*Create new file*|
+
+3. Select yaml as language
+
+|![Ngrok Config File](images/ngrok_create_config_file_2.png)|
+|:--:|
+|*Select language*|
+
+4. Copy the following configuration into the yaml file and replace the text `{{PUT YOUR AUTHTOKEN HERE}}` with the value of the authtoken copied earlier from the Ngrok dashboard.
+
+```json
+authtoken: {{PUT YOUR AUTHTOKEN HERE}}
+tunnels:
+ extension:
+  addr: 3000
+  proto: http
+
+```
+
+|![Ngrok Config File](images/ngrok_create_config_file_3.png)|
+|:--:|
+|*Config file example*|
+
+5. Go to File -> Save (or press Ctrl+S), enter the name of your file (ngrok-extension.yml in this example) and save it in ngrok's folder
+
+|![Ngrok Config File](images/ngrok_create_config_file_4.png)|
+|:--:|
+|*Save file*|
+
+|![Ngrok Config File](images/ngrok_create_config_file_5.png)|
+|:--:|
+|*Example result*|
+
+>You only need to perform this initial configuration of ngrok the first time you configure the solution, then you do not need to repeat it again.
+  
+## Install the solution packages
+
+Before configuring and running the solution, it is necessary to install its dependencies. To do so, go to the main directory of the solution, open a terminal window enter the command `npm i`. It will start to install the packages required by the solution.
+
+|![npm i running](images/installing-packages.png)|
+|:--:|
+|*Example of `npm i` command running*|
+
+Once finished you will notice that a directory called node_modules and a package-lock.json file have been created.
+
+## Configure the Solution
+
+ To run the solution, you must have the backend solution running locally, and use the `config.json` as is.
+
+```json
+{
+  "buildNumber": "0.0.0",
+  "apiBaseUrl": "https://localhost:8442/api",
+  "releaseDummyVariable": "empty",
+  "featureFlags": {
+    "DISABLE_AUTHENTICATION": {
+      "description": "Disable authentication flow when true",
+      "isActive": true
+    }
+  }
+}
+```
+
+
+## Build and run the Solution
+
+> NOTE: You must have follow all the steps every time you want to run the solution locally.
+
+
+### Run your application in localhost
+To run your application, go to the main directory of the solution, open a terminal window and enter the the following command:
+
+```bash
+npm run start
+```
+
+|![npm run start](images/run-application-npm-run-start-example.png)|
+|:--:|
+|*Example of `npm run start` command running*|
+
+After that, a browser tab will open, and an error message will be displayed. If you open the Developer Tools (`Ctrl+Shift+I` in Microsoft Edge), you will see the error's datail. This is because the meeting extension depends on the Microsoft Teams SDK, and it cannot be initialized outside a teams context. To properly use the extension, you will need to install the extension in a Microsoft Teams meeting.
+
+|![Locahost example](images/running-solution-localhost.png)|
+|:--:|
+|*Example of application running in localhost*|
+
+### Create the application package
+To install the extension, you must create the application package. It is a zip folder that contains the following required files:
+
+- A full color icon measuring 192 x 192 pixels.
+- A transparent outline icon measuring 32 x 32 pixels.
+- A manifest.json file that specifies the attributes of your app.
+
+[More info about Microsoft Teams app package](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/apps-package)
+
+Before creating the package, you need to modify manually the manifest to specify the `HOSTNAME` url (base url where the extension is going to pull the content of the SPA). Because you need to establish a secure channel between Microsoft Teams and the extension (as mentioned [here](#Install-and-configure-ngrok)), you must run ngrok to create a tunnel to our locally running web server and expose it as a publicly available HTTPS endpoint.
+
+Go to the directory where you put ngrok, open a windows terminal and run the following command
+
+```bash
+ngrok start --all --config ngrok-extension.yml
+```
+
+Or, if you added ngrok to the `PATH` environment variable, open a windows terminal and run the following command
+
+```bash
+ngrok start --all --config {configFilePath}\ngrok-extension.yml
+```
+
+where `{configFilePath}` is the path where you put the ngrok tool. E.g.: `c:\ngrok'.
+
+|![Ngrok command example](images/running-ngrok-example.png)|
+|:--:|
+|*Example of ngrok command*|
+
+|![Ngrok command example](images/running-ngrok-example-2.png)|
+|:--:|
+|*Example of ngrok running*|
+
+Create a `manifest.json` file under `/manifests/local` using the template you have below, replace `{{HOSTNAME}}` with the ngrok url (without HTTP/HTTPS://) and save it.
+
+```json
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.9",
+  "id": "00000000-0000-0000-0000-000000000000",
+  "version": "0.0.1",
+  "packageName": "text",
+  "webApplicationInfo": {
+    "id": "00000000-0000-0000-0000-000000000000",
+    "resource": "api://{{HOSTNAME}}/00000000-0000-0000-0000-000000000000"
+  },
+  "developer": {
+    "name": "Microsoft",
+    "websiteUrl": "https://{{HOSTNAME}}/call/join",
+    "privacyUrl": "https://{{HOSTNAME}}/privacy.html",
+    "termsOfUseUrl": "https://{{HOSTNAME}}/tou.html"
+  },
+  "name": {
+    "short": "Broadcast Development Kit",
+    "full": "Broadcast Development Kit for Teams"
+  },
+  "description": {
+    "short": "Operate the Broadcast Development Kit for Teams inside your teams meeting",
+    "full": "This extension allows you to use the Broadcast Development Kit for Teams solution you have deployed for your Office 365 tenant directly within Teams"
+  },
+  "icons": {
+    "outline": "icon-outline.png",
+    "color": "icon-color.png"
+  },
+  "accentColor": "#D85028",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{{HOSTNAME}}/config",
+      "canUpdateConfiguration": false,
+      "scopes": [
+        "groupchat"
+      ],
+      "context": [
+        "meetingChatTab",
+        "meetingDetailsTab",
+        "meetingSidePanel"
+      ]
+    }
+  ],
+  "staticTabs": [],
+  "bots": [],
+  "connectors": [],
+  "composeExtensions": [],
+  "permissions": [
+    "identity",
+    "messageTeamMembers"
+  ],
+  "validDomains": [
+    "{{HOSTNAME}}"
+  ]
+}
+
+```
+
+Finally, you can create the zip package with the files you have under `/manifests/local`
+
+|![Create zip package example](images/create-package-example.png)|
+|:--:|
+|*Example of create zip package using 7zip*|
+
+### Upload your application to Teams
+
+[Create](https://support.microsoft.com/en-us/office/schedule-a-meeting-in-teams-943507a9-8583-4c58-b5d2-8ec8265e04e5) a new Microsoft Teams meeting and join. Once you are inside the meeting, click on the three dots button `( ... )` and then on `+ Add an app`.
+
+|![`+` Add an app](images/add_an_app.png)|
+|:--:|
+|*`+` Add an app*|
+
+A pop up will open, select `Manage apps` in the bottom left corner of it.
+
+|![Add an app pop up](images/add_an_app_2.png)|
+|:--:|
+|*Add an app pop up*|
+
+A new window will open, select `Upload a custom app` in the bottom right corner of it  and select the `local.zip` file you have created previously.
+
+|![Upload a custom app](images/add_an_app_3.png)|
+|:--:|
+|*Upload a custom app*|
+
+A new pop up will open with details of the application, click on the `add` button.
+
+|![Upload a custom app](images/add_an_app_4.png)|
+|:--:|
+|*Upload a custom app*|
+
+After adding the app, inside the meeting click on the three dots button `( ... )`. The pop up will prompt the extension you added. Click on the extension to add it
+
+|![Add an app into the meeting](images/add_an_app_5.png)|
+|:--:|
+|*Add an app into the meeting*|
+
+A new pop up will open, press `save` to add the application.
+
+|![Add an app into the meeting](images/add_an_app_6.png)|
+|:--:|
+|*Add an app into the meeting*|
+
+Finally, the extension will be displayed as a side panel in the righht side of the meeting.
+
+|![Side panel extension](images/add_an_app_7.png)|
+|:--:|
+|*Side panel extension*|
+
+
+## Test the solution
+
+Once you configured the extension in the Teams meeting, and ran the local backend, click on the `Join Meeting` button to invite the bot into the meeting.
+
+|![Join Meeting](images/test_extension.png)|
+|:--:|
+|*Join Meeting*|
+
+After a few seconds, the bot will join into the meeting, and you will see dashboard with the meeting participants and other options.
+
+|![In meeting](images/test_extension_2.png)|
+|:--:|
+|*In meeting*|
+
+In the image below, you can see an SRT extraction of a meeting participant.
+
+|![SRT extraction example](images/test_extension_3.png)|
+|:--:|
+|*SRT extraction example*|
+

docs/pull_request_template.md

@@ -0,0 +1,14 @@
+## Purpose
+_Describe the problem or feature in addition to a link to the issues._
+
+## Approach
+_How does this change address the problem?_
+
+#### Open Questions and Pre-Merge TODOs
+- [ ] Use github checklists. When solved, check the box and explain the answer.
+
+## Optional
+### Learning
+_Describe the research stage_
+
+_Links to blog posts, patterns, libraries or addons used to solve this problem_

manifests/default/manifest.json

@@ -15,12 +15,12 @@
     "termsOfUseUrl": ""
   },
   "name": {
-    "short": "Broadcast Protocols",
-    "full": "Broadcast Protocols for Teams"
+    "short": "Broadcast Development Kit",
+    "full": "Broadcast Development Kit for Teams"
   },
   "description": {
-    "short": "Operate the Broadcast Protocols for Teams inside your teams meeting",
-    "full": "This extension allows you to use the Broadcast Protocols for Teams solution you have deployed for your Office 365 tenant directly within Teams"
+    "short": "Operate the Broadcast Development Kit for Teams inside your teams meeting",
+    "full": "This extension allows you to use the Broadcast Development Kit for Teams solution you have deployed for your Office 365 tenant directly within Teams"
   },
   "icons": {
     "outline": "icon-outline.png",
@@ -45,6 +45,11 @@
   "bots": [],
   "connectors": [],
   "composeExtensions": [],
-  "permissions": ["identity", "messageTeamMembers"],
-  "validDomains": [""]
+  "permissions": [
+    "identity",
+    "messageTeamMembers"
+  ],
+  "validDomains": [
+    ""
+  ]
 }

manifests/local/manifest.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.9",
+  "id": "00000000-0000-0000-0000-000000000000",
+  "version": "0.0.1",
+  "packageName": "text",
+  "webApplicationInfo": {
+    "id": "00000000-0000-0000-0000-000000000000",
+    "resource": "api://{{HOSTNAME}}/00000000-0000-0000-0000-000000000000"
+  },
+  "developer": {
+    "name": "Microsoft",
+    "websiteUrl": "https://{{HOSTNAME}}/call/join",
+    "privacyUrl": "https://{{HOSTNAME}}/privacy.html",
+    "termsOfUseUrl": "https://{{HOSTNAME}}/tou.html"
+  },
+  "name": {
+    "short": "Broadcast Development Kit",
+    "full": "Broadcast Development Kit for Teams"
+  },
+  "description": {
+    "short": "Operate the Broadcast Development Kit for Teams inside your teams meeting",
+    "full": "This extension allows you to use the Broadcast Development Kit for Teams solution you have deployed for your Office 365 tenant directly within Teams"
+  },
+  "icons": {
+    "outline": "icon-outline.png",
+    "color": "icon-color.png"
+  },
+  "accentColor": "#D85028",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{{HOSTNAME}}/config",
+      "canUpdateConfiguration": false,
+      "scopes": [
+        "groupchat"
+      ],
+      "context": [
+        "meetingChatTab",
+        "meetingDetailsTab",
+        "meetingSidePanel"
+      ]
+    }
+  ],
+  "staticTabs": [],
+  "bots": [],
+  "connectors": [],
+  "composeExtensions": [],
+  "permissions": [
+    "identity",
+    "messageTeamMembers"
+  ],
+  "validDomains": [
+    "{{HOSTNAME}}"
+  ]
+}