-
Notifications
You must be signed in to change notification settings - Fork 505
/
sbs-send-proactive.yml
275 lines (170 loc) · 15.4 KB
/
sbs-send-proactive.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
### YamlMime:Tutorial
title: Send Proactive Messages
metadata:
title: Create Bot to Send Proactive Messages
description: In this module, learn how to send proactive messages, such as welcome messages, scheduled messages, and notifications from a bot.
audience: Developer
level: Beginner
ms.date: 06/23/2021
ms.topic: interactive-tutorial
nextTutorialHref: ./bots/how-to/conversations/send-proactive-messages.md
nextTutorialTitle: Read more on proactive messages
ms.custom: mvc
ms.localizationpriority: high
items:
- durationInMinutes: 1
content: |
A proactive message is a message sent by a bot in response to simple commands sent in the chat from a user. The message response can be in one of the following formats:
- Welcome messages
- Scheduled messages
- Notifications
This step-by-step guide helps you to send a proactive message from a bot. You'll see the following output:
:::image type="content" source="~/assets/images/proactive-scenario/proactive-msg-result.png" alt-text="Screenshot shows the proactive hello message in Teams chat.":::
- title: Prerequisites
durationInMinutes: 2
content: |
Ensure that you install the following tools for building and deploying your apps.
| | Install | For using |
| --- | --- | --- |
| | [Microsoft Visual Studio Code](https://code.visualstudio.com/download) | JavaScript or TypeScript, build environments. Use the latest version. |
| | [Microsoft Teams Toolkit](#install-teams-toolkit) | Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version.|
| | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type).|
| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Teams to collaborate with everyone you work with through apps for chat, meetings, call and all in one place.|
| | [Microsoft Edge](https://www.microsoft.com/edge/) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. |
| | [Microsoft 365 developer account](/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant) | Access to Teams account with the appropriate permissions to install an app. |
[!INCLUDE [Set up prerequisites](includes/get-started/prepare-teams-toolkit.md)]
- title: Build Proactive Message bot
durationInMinutes: 3
content: |
To build proactive message bot using Visual Studio Code, follow these steps:
1. Open Visual Studio Code.
1. Select the Teams Toolkit :::image type="icon" source="../msteams-platform/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code Activity Bar.
1. In the left pane, select **View Samples**.
:::image type="content" source="../msteams-platform/assets/images/proactive-scenario/view-sample-1.png" alt-text="Screenshot shows the View Samples option in Visual Studio Activity Bar.":::
1. From the list of samples, select **Proactive Messaging**. A prebuilt sample that's ready for debugging opens.
:::image type="content" source="../msteams-platform/assets/images/proactive-scenario/select-proactive-msg.png" alt-text="Screenshot shows the prebuilt Proactive Messaging bot sample in the list of samples.":::
1. Select **Create**.
:::image type="content" source="../msteams-platform/assets/images/proactive-scenario/create-proactive-bot.png" alt-text="Screenshot shows the Create option to create a proactive messaging bot.":::
1. Select **Default folder** to store your project root folder in the default location.
:::image type="content" source="../msteams-platform/assets/images/sbs-notification-bot/select-default-location.png" alt-text="Screenshot shows the option to select the default location.":::
If you want to change the default location, perform the following steps:
1. Select **Browse**.
:::image type="content" source="../msteams-platform/assets/images/sbs-notification-bot/select-browse.png" alt-text="Screenshot shows the option to browse the location.":::
1. Select the location for project workspace.
1. Select **Select Folder**.
:::image type="content" source="../msteams-platform/assets/images/sbs-notification-bot/select-folder.png" alt-text="Screenshot shows the option to select the folder.":::
The proactive message bot is created in a few seconds and displays the proactive message bot successful dialog in the lower-right corner with the option to debug:
:::image type="content" source="../msteams-platform/assets/images/proactive-scenario/proactive-bot-created.png" alt-text="Screenshot shows the proactive message bot created."lightbox="../msteams-platform/assets/images/proactive-scenario/proact-bot-created-1.png"::::::
1. Select **Run and Debug** :::image type="icon" source="../msteams-platform/assets/images/proactive-scenario/run-debug-icon.png"::: icon from the top-left corner.
1. Select **Debug (Edge)** or **Debug (Chrome)** from the dropdown list.
:::image type="content" source="../msteams-platform/assets/images/proactive-scenario/debug-option-edge.png" alt-text="Screenshot shows the debugging options to choose from.":::
When debugging is successful, you'll be prompted to upload the proactive message bot to Teams on your local machine.
1. From the dropdown next to **Add**, select **Add to a team** or **Add to a chat** or **Add to a meeting**.
:::image type="content" source="~/assets/images/proactive-scenario/add-to-teams.png" alt-text="Screenshot shows the option to add bot to Teams.":::
1. Enter the name of a chat or team in the search field and select **Set up a bot**.
:::image type="content" source="~/assets/images/proactive-scenario/proactive-bot-setup.png" alt-text="Screenshot shows the option to set up the bot.":::
The proactive message bot app is uploaded to Teams client and the following message appears in response to the message sent.
:::image type="content" source="~/assets/images/proactive-scenario/proactive-msg-sent.png" alt-text="Screenshot shows the proactive message bot response in the chat.":::
1. Copy and paste the URL or navigate to the URL in browser. A proactive hello message is triggered and shared in the chat.
:::image type="content" source="~/assets/images/proactive-scenario/pro-msg-browser.png" alt-text="Screenshot shows the browser that triggers bot to respond with a proactive message in Teams.":::
1. Go to Teams. You'll receive a **proactive hello** message from the bot.
:::image type="content" source="~/assets/images/proactive-scenario/pro-msg-response.png" alt-text="Screenshot shows the bot response on the chat.":::
## Take a tour of the source code
Teams Toolkit provides components for building an app. After creating the project, you can view the project folders and files in the **EXPLORER** area of Visual Studio Code.
:::image type="content" source="~/assets/images/proactive-scenario/file-structure.png" alt-text="Screenshot shows the structure tab.":::
The new project folder contains the following content:
| Folder / File | Contents |
| - | - |
| `.vscode/` | Visual Studio Code files for debugging. |
| `appManifest/` | Templates for the app manifest (previously called Teams app manifest). |
| `env/`| Name / value pairs are stored in environment files and used by `teamsapp.yml` to customize the provisioning and deployment rules. |
| `manifest.json` | App manifest for publishing through the Developer Portal for Teams is stored in `Properties/manifest.json`. |
| `teamsapp.yml` | Main project file describes your app configuration and defines the set of actions to run in each lifecycle stage. |
| `teamsapp.local.yml`| This overrides `teamsapp.yml` with actions that enable local execution and debugging. |
- title: Deploy your Proactive message bot
durationInMinutes: 1
content: |
You've learnt to build and run Teams app with proactive message bot capability. Let's deploy the first app with proactive message bot capability on Azure using Teams Toolkit.
## Sign in to your Azure account
Use your account to access the Microsoft Azure portal and provision new cloud resources to support your app.
1. Open Visual Studio Code.
1. Open the project folder where you created the proactive message bot app.
1. Select the Teams Toolkit :::image type="icon" source="../msteams-platform/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code Activity Bar.
1. Select **Sign in to Azure** using your credentials.
> [!TIP]
> If you have the AZURE ACCOUNT extension installed and are using the same account, you can skip this step.
Your default web browser opens to let you sign in to the account.
1. Close the browser when prompted and return to Visual Studio Code.
The **ACCOUNTS** section of the sidebar shows the two accounts separately. It also lists the number of usable Azure subscriptions available to you. Ensure that you have at least one usable Azure subscription available. If not, sign out and use a different account.
## Deploy your app to Azure
Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you'll deploy the bot app.
<br>
<br>
<details>
<summary>What's the difference between Provision and Deploy?</summary>
<br>
<b>Provision</b> creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, and JavaScript) is copied to the resources. <b>Deploy</b> copies the code for your app to the resources you created during provisioning. It's common to deploy multiple times without provisioning new resources. Since provisioning can take some time to complete, it's separate from deployment.
</details>
<br>
# [Visual Studio Code](#tab/vscode)
1. Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code Activity Bar.
1. Select **Provision** under **LIFECYCLE**.
:::image type="content" source="~/assets/images/sbs-command-bot/provision-cloud.png" alt-text="Screenshot shows the provisioning commands.":::
1. Select one of the existing subscriptions.
:::image type="content" source="~/assets/images/proactive-scenario/select-subscription.png" alt-text="Screenshot shows the subscription option for provisioning.":::
1. Select an existing resource group or create new resource group. For more information, see [create resource group](/azure/azure-resource-manager/management/manage-resource-groups-portal#create-resource-groups).
:::image type="content" source="~/assets/images/proactive-scenario/select-resource-group.png" alt-text="Screenshot show the resource group option for provisioning.":::
> [!NOTE]
> A dialog appears mentioning that costs might be incurred when running resources in Azure.
1. Select **Provision**.
:::image type="content" source="~/assets/images/sbs-command-bot/provision-confirm1.png" alt-text="Screenshot of the provisioning dialog.":::
The provisioning process creates resources in the Azure cloud. You can monitor the progress in the dialogs that appear in lower-right corner. After few minutes, the following dialog appears:
:::image type="content" source="~/assets/images/proactive-scenario/deploy-provision-proactive.png" alt-text="Screenshot shows the provisioning complete dialog.":::
1. Select **Deploy** under **LIFECYCLE**.
:::image type="content" source="~/assets/images/sbs-command-bot/deploy-cloud.png" alt-text="Screenshot shows the Deploy option under LIFECYCLE.":::
1. Select **Deploy**.
:::image type="content" source="~/assets/images/sbs-command-bot/Deploy-confirm.png" alt-text="Screenshot shows the confirmation dialog to deploy.":::
Deployment takes some time. You can monitor the progress in the dialogs that appear in lower-right corner. After a few minutes, the following dialog appears.
:::image type="content" source="~/assets/images/proactive-scenario/deploy-confirmation-proactive.png" alt-text="Screenshot shows the deployment confirmation dialog.":::
1. Open the debug panel (**Ctrl+Shift+D** / **⌘⇧-D** or **View** > **Run**) from Visual Studio Code.
1. Select **Launch Remote (Edge)** from the launch configuration dropdown list.
:::image type="content" source="~/assets/images/proactive-scenario/debug-option-remote.png" alt-text="Screenshot shows the remote debug option highlighted.":::
When debugging is successful, you'll be prompted to upload the proactive message bot app to Teams.
1. From the dropdown next to **Add**, select **Add to a team** or **Add to a chat** or **Add to a meeting**.
:::image type="content" source="~/assets/images/proactive-scenario/add-to-teams.png" alt-text="Screenshot shows the option to add bot to Teams.":::
1. Enter the name of a chat or team in the search field and select **Set up a bot**.
:::image type="content" source="~/assets/images/proactive-scenario/proactive-bot-setup.png" alt-text="Screenshot shows the option to set up the bot.":::
The proactive message bot app is uploaded to Teams client and the following message appears in response to the message sent.
:::image type="content" source="~/assets/images/proactive-scenario/proactive-msg-sent.png" alt-text="Screenshot shows the proactive message bot response in the chat.":::
1. Copy and paste the URL or navigate to the URL in browser. A proactive hello message is triggered and shared in the chat.
:::image type="content" source="~/assets/images/proactive-scenario/pro-msg-browser.png" alt-text="Screenshot shows the browser that triggers bot to respond with a proactive message in Teams.":::
1. Go to Teams. You'll receive a **proactive hello** message from the bot.
:::image type="content" source="~/assets/images/proactive-scenario/pro-msg-response.png" alt-text="Screenshot shows the bot response on the chat.":::
# [Command Line](#tab/cli)
In your terminal window:
1. Run `teamsfx new` to create new project.
``` bash
teamsfx new
```
1. Run `teamsfx provision` to create azure resource.
``` bash
teamsfx provision
```
1. Run `teamsfx deploy` to deploy the app.
``` bash
teamsfx deploy
```
1. Run `teamsfx preview` to run the app.
``` bash
teamsfx preview
```
---
- title: Complete challenge
durationInMinutes: 3
content: |
Did you come up with something like this?
:::image type="content" source="~/assets/images/proactive-scenario/proactive-msg-result.png" alt-text="Screenshot shows the proactive hello message.":::
- content: |
You've completed the scenario.
* You can send notifications on a daily basis or request for feedback from users on a periodic basis.
* You can handle throttling limits to avoid multiple notifications.