Skip to content

Commit

Permalink
Teamsfx toolkit migration nodejs samples (OfficeDev#949)
Browse files Browse the repository at this point in the history
* Teamsfx toolkit migration nodejs samples

* Readme Updated for Notification URL

* Readme updated for Notification URL

* Note Added In Reame for Notification URL

* Updated Note

* Added toolkit-icon main readme

---------

Co-authored-by: Mohammed Furquan <[email protected]>
  • Loading branch information
Harikrishnan-MSFT and Mohammed-MSFT authored Sep 25, 2023
1 parent 55ed5aa commit 66b7e7b
Show file tree
Hide file tree
Showing 18 changed files with 7,576 additions and 679 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
|8|Change Notification | This sample app demonstrates sending change notifications to user presence in Teams based on user presence status. | [View][graph-change-notification#cs] |[View][graph-change-notification#js] ![toolkit-icon](assets/toolkit-icon.png)
|9|Graph Pinned Message | This is a sample application which demonstrates how to pin messages in chat using Graph api. | [View][graph-pinned-message#cs]|[View][graph-pinned-message#js] ![toolkit-icon](assets/toolkit-icon.png) |
|10|Graph Bulk Meetings | This is an sample application which shows how to create Teams meetings in bulk using Graph api. | [View][graph-bulk-meetings#cs]|[View][graph-bulk-meetings#js]|
|11|Graph Meeting Notification | This is a sample application which demonstrates the use of online meeting subscription and sends you the notifications in chat using bot. | [View][graph-meeting-notification#cs]|[View][graph-meeting-notification#js]|
|11|Graph Meeting Notification | This is a sample application which demonstrates the use of online meeting subscription and sends you the notifications in chat using bot. | [View][graph-meeting-notification#cs]|[View][graph-meeting-notification#js] ![toolkit-icon](assets/toolkit-icon.png)|
|12|Change Notifications Team/Channel | This sample application which demonstrates use of Team/Channel subscription that will post notifications when user create/edit/delete team/channel using Graph api. | [View][change-notifications-team/channel#cs]|[View][change-notifications-team/channel#js]|


Expand Down
2 changes: 1 addition & 1 deletion samples/graph-meeting-notification/nodejs/.env
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
MicrosoftAppId=<<MicrosoftAppId>>
MicrosoftAppPassword=<<MicrosoftAppPassword>>
MicrosoftAppTenantId=<<MicrosoftAppTenantId>>
notificationUrl=<<BaseUrl>>/api/notifications
notificationUrl=
BaseUrl=<<BaseUrl>>
Base64EncodedCertificate= "<<Base64EncodedCertificate>>"
EncryptionCertificateId= "meeting-notification-certId"
Expand Down
43 changes: 43 additions & 0 deletions samples/graph-meeting-notification/nodejs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

#############

# TeamsFx files
env/.env.*.user
env/.env.local
.localConfigs
appManifest/build
/build

# dependencies
node_modules/

# misc
.env
.deployment
.DS_Store

# build
lib/
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"recommendations": [
"TeamsDevApp.ms-teams-vscode-extension"
]
}
73 changes: 73 additions & 0 deletions samples/graph-meeting-notification/nodejs/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch App (Edge)",
"type": "msedge",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Local Service"
],
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
},
{
"name": "Launch App (Chrome)",
"type": "chrome",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Local Service"
],
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
},
{
"name": "Attach to Local Service",
"type": "node",
"request": "attach",
"port": 9239,
"restart": true,
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
}
],
"compounds": [
{
"name": "Debug (Edge)",
"configurations": [
"Launch App (Edge)",
"Attach to Local Service"
],
"preLaunchTask": "Start Teams App Locally",
"presentation": {
"group": "all",
"order": 1
},
"stopAll": true
},
{
"name": "Debug (Chrome)",
"configurations": [
"Launch App (Chrome)",
"Attach to Local Service"
],
"preLaunchTask": "Start Teams App Locally",
"presentation": {
"group": "all",
"order": 2
},
"stopAll": true
}
]
}
11 changes: 11 additions & 0 deletions samples/graph-meeting-notification/nodejs/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"debug.onTaskErrors": "abort",
"json.schemas": [
{
"fileMatch": [
"/aad.*.json"
],
"schema": {}
}
]
}
105 changes: 105 additions & 0 deletions samples/graph-meeting-notification/nodejs/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
// This file is automatically generated by Teams Toolkit.
// The teamsfx tasks defined in this file require Teams Toolkit version >= 5.0.0.
// See https://aka.ms/teamsfx-tasks for details on how to customize each task.
{
"version": "2.0.0",
"tasks": [
{
"label": "Start Teams App Locally",
"dependsOn": [
"Validate prerequisites",
"Start local tunnel",
"Provision",
"Deploy",
"Start application"
],
"dependsOrder": "sequence"
},
{
// Check all required prerequisites.
// See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args.
"label": "Validate prerequisites",
"type": "teamsfx",
"command": "debug-check-prerequisites",
"args": {
"prerequisites": [
"nodejs", // Validate if Node.js is installed.
"m365Account", // Sign-in prompt for Microsoft 365 account, then validate if the account enables the sideloading permission.
"portOccupancy" // Validate available ports to ensure those debug ones are not occupied.
],
"portOccupancy": [
3978, // app service port
9239 // app inspector port for Node.js debugger
]
}
},
{
// Start the local tunnel service to forward public URL to local port and inspect traffic.
// See https://aka.ms/teamsfx-tasks/local-tunnel for the detailed args definitions.
"label": "Start local tunnel",
"type": "teamsfx",
"command": "debug-start-local-tunnel",
"args": {
"type": "dev-tunnel",
"ports": [
{
"portNumber": 3978,
"protocol": "https",
"access": "public",
"writeToEnvironmentFile": {
"endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
"domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
}
}
],
"env": "local"
},
"isBackground": true,
"problemMatcher": "$teamsfx-local-tunnel-watch"
},
{
// Create the debug resources.
// See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
"label": "Provision",
"type": "teamsfx",
"command": "provision",
"args": {
"env": "local"
}
},
{
// Build project.
// See See https://aka.ms/teamsfx-tasks/deploy to know the details and how to customize the args.
"label": "Deploy",
"type": "teamsfx",
"command": "deploy",
"args": {
"env": "local"
}
},
{
"label": "Start application",
"type": "shell",
"command": "npm run dev:teamsfx",
"isBackground": true,
"options": {
"cwd": "${workspaceFolder}"
},
"problemMatcher": {
"pattern": [
{
"regexp": "^.*$",
"file": 0,
"location": 1,
"message": 2
}
],
"background": {
"activeOnStart": true,
"beginsPattern": "[nodemon] starting",
"endsPattern": "Server listening to:"
}
}
}
]
}
16 changes: 16 additions & 0 deletions samples/graph-meeting-notification/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,20 @@ This is a sample application which demonstrates use of online meeting subscripti
- [NodeJS](https://nodejs.org/en/)
- [dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) or [ngrok](https://ngrok.com/) latest version or equivalent tunnelling solution
- [M365 developer account](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant) or access to a Teams account with the appropriate permissions to install an app.
- [Teams Toolkit for VS Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) or [TeamsFx CLI](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-cli?pivots=version-one)

## Run the app (Using Teams Toolkit for Visual Studio Code)

The simplest way to run this sample in Teams is to use Teams Toolkit for Visual Studio Code.

1. Ensure you have downloaded and installed [Visual Studio Code](https://code.visualstudio.com/docs/setup/setup-overview)
1. Install the [Teams Toolkit extension](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension)
1. Select **File > Open Folder** in VS Code and choose this samples directory from the repo
1. Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps
1. Select **Debug > Start Debugging** or **F5** to run the app in a Teams web client.
1. In the browser that launches, select the **Add** button to install the app to Teams.

> If you do not have permission to upload custom apps (sideloading), Teams Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.
### Register your application with Azure AD

Expand Down Expand Up @@ -96,6 +110,8 @@ To include resource data of graph notifications, this Graph API require self-sig
Update configuration with the ```MicrosoftAppId```, ```MicrosoftAppPassword```, ```MicrosoftAppTenantId```,
```Base64EncodedCertificate```, ```EncryptionCertificateId```, ```PRIVATE_KEY_PATH```

**Note** : ```notificationUrl``` will be updated automatically from `teamsapp.local.yml` file when you run application by teams toolkit. And when you run locally through `npm start` then your notificationUrl will be like : `https://1234.ngrok-free.app/api/notifications` and if you are using dev tunnels, your notificationUrl will be like: `https://12345.devtunnels.ms/api/notifications`.

### Instruction for .env
1. Provide `MicrosoftAppId`, `MicrosoftAppPassword` and `MicrosoftAppTenantId` in the .env that is created in Azure.
2. Provide the ngrok url as `BaseUrl` in appsetting on which application is running on. E.g. if you are using ngrok it would be something like `https://1234.ngrok-free.app` and if you are using dev tunnels, your URL will be like: https://12345.devtunnels.ms.
Expand Down
Loading

0 comments on commit 66b7e7b

Please sign in to comment.