Getting Started with Developer Dashboard Sample

Note: We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!

This warning will be removed when the samples are ready for production.

Important: Please be advised that access tokens are stored in sessionStorage for you by default. This can make it possible for malicious code in your app (or code pasted into a console on your page) to access APIs at the same privilege level as your client application. Please ensure you only request the minimum necessary scopes from your client application, and perform any sensitive operations from server side code that your client has to authenticate with. Microsoft Teams supports the ability to run web-based UI inside "custom tabs" that users can install either for just themselves (personal tabs) or within a team or group chat context.

Developer Team Dashboard shows you how to build a tab with Code Helper, Azure DevOps work items, GitHub issues and Planner tasks to accelerate developer team collaboration and productivity.

dev-dashboard-demo.mp4

Table of Content

1. Prerequisites
2. What will you learn in this sample?
3. Try the Sample with Visual Studio Code Extension
   • Azure DevOps Work Items
   • GitHub Issues
   • Planner Tasks
   • Code Helper with Azure OpenAI Service
4. Edit the Manifest
5. Deploy to Azure
6. Package
7. Publish to Microsoft Teams
8. Architecture
9. Code Structure
10. Code of Conduct

Prerequisites

• NodeJS, fully tested on NodeJS 14, 16
• An M365 account. If you do not have M365 account, apply one from M365 developer program
• Teams Toolkit Visual Studio Code Extension or TeamsFx CLI

What will you learn in this sample?

• How to use TeamsFx to embed a canvas containing multiple cards that provide an overview of data or content in your tab app.
• How to use TeamsFx to build frontend hosting on Azure for your tab app.
• How to use TeamsFx to build backend hosting on Azure for your tab app.
• How to use DevOps, GitHub, Azure OpenAI and Microsoft Graph APIs in TeamsFx to get access to variety of data.

Try the Sample with Visual Studio Code Extension

Here are the instructions to run the sample in Visual Studio Code. You can also try to run the app using TeamsFx CLI tool, refer to Try the Sample with TeamsFx CLI

1. Clone the repo to your local workspace or directly download the source code.
2. Download Visual Studio Code and install Teams Toolkit Visual Studio Code Extension.
3. Open the project in Visual Studio Code.

Before running this project, make sure to configure integrated features in the Developer Assist Dashboard. Follow the steps to complete the configuration.

Azure DevOps Work Items
This widget displays DevOps Work Items including the title, type, assigned to and state of the work item.

To integrate DevOps Work Items in the dashboard, follow the instructions:

1. Login to Azure DevOps and select the project you want to configure in the Developer Assist Dashboard. Copy the organization name and project name from the project url as shown below:
2. In Azure DevOps, select User settings and then select Personal access token. Select + New token to create a new personal access token, give a name to your token, select Read permission for Work Items and Create.
3. Open ./src/configs.ts file:
   • Add the values of ORGANIZATION_NAME and PROJECT_NAME with your organization name and project name.
   • Add the value of DEVOPS_PERSONAL_ACCESS_TOKEN with your personal access token.

---

GitHub Issues
This widget displays GitHub issues including the title, status and the url of the GitHub issue. This widget also includes creating a new issue:

To integrate GitHub issues in the dashboard, follow the instructions:

1. Login to GitHub and select Settings > Developer settings > Personal access token. Select Generate new token to create new personal access token. Give a name to your token, select the repositories you want to access. Under Repository permissions, give Read and write access to Issues.
2. Open ./src/configs.ts file:
   • Add the value of GITHUB_PERSONAL_ACCESS_TOKEN with your personal access token.
   • Add the values of REPOSITORY_OWNER_NAME and REPOSITORY_NAME with your GitHub username and your repository name.

---

Planner Tasks
This widget displays Planner tasks including the title of the task. This widget also includes creating a new task functionality:

To integrate Planner tasks in the dashboard, follow the instructions:

1. Login to Microsoft Planner and select the plan you want to integrate, copy the Plan Id from the URL:
2. Open ./src/configs.ts file:
   • Add the value of PLAN_ID with your plan id.
   • Add the value of BUCKET_ID with

Code Helper with Azure OpenAI Service
This widget displays a Code Helper that responds user's code related questions with a code snippet:

To integrate Code Helper in the dashboard, follow the instructions

1. Login to Azure Portal to create a new API key. Create new Azure OpenAI Service, and then go to your Azure OpenAI Service resource. Select Keys and Endpoints, copy the key and the endpoint.
2. Open ./src/configs.ts file:
   • Add the value of OPENAI_API_KEY with your Azure OpenAI API Key.
   • Add the value of OPENAI_ENDPOINT_NAME with your Azure OpenAI endpoint name.

---

After completing the integration of the features, you may start debugging the project by hitting the F5 key in Visual Studio Code.**

The first time you run this sample, you need to login to consent some delegated permissions. If you don't see the consent page, please check if your browser blocks the pop-up window.

Edit the Manifest

You can find the Teams manifest in appPackage folder. The templates contains:

• manifest.json: Manifest file for Teams app running locally and remotely.

Both file contains template arguments with {...} statements which will be replaced at build time. You may add any extra properties or permissions you require to this file. See the schema reference for more.

Deploy to Azure

Deploy your project to Azure by following these steps:

From Visual Studio Code

From TeamsFx CLI

Open Teams Toolkit, and sign into Azure by clicking the Sign in to Azure under the ACCOUNTS section from sidebar. After you signed in, select a subscription under your account. Open the Teams Toolkit and click Provision in the cloud from DEPLOYMENT section or open the command palette and select: Teams: Provision in the cloud. Open the Teams Toolkit and click Deploy to the cloud or open the command palette and select: Teams: Deploy to the cloud.

Run command teamsfx account login azure. Run command teamsfx account set --subscription <your-subscription-id>. Run command teamsfx provision. Run command: teamsfx deploy.

Note: Provisioning and deployment may incur charges to your Azure Subscription.

Package

• From Visual Studio Code: open the command palette and select Teams: Zip Teams metadata package.
• Alternatively, from the command line run teamsfx package in the project directory.

Publish to Microsoft Teams

Once deployed, you may want to distribute your application to your organization's internal app store in Teams. Your app will be submitted for admin approval.

• From Visual Studio Code: open the Teams Toolkit and click Publish to Teams or open the command palette and select: Teams: Publish to Teams.
• From TeamsFx CLI: run command teamsfx publish in your project directory.

Architecture

• The frontend is a react tab app hosted on Azure Storage.
• The Backend server is hosted on Azure Function for managing posts in the tab app.

Code Structure

• You can check app configuration in teamsapp.*.yml files
• You can check app environment information in: env
• You will find frontend code in: src/views/widgets
• You will find backend code in: src/services

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct.

For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.