You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[JS] chore: Reorganize first three JS samples (#677)
## Linked issues
#minor (Samples docs updates)
## Details
Provide a list of your changes here. If you are fixing a bug, please
provide steps to reproduce the bug.
#### Change details
- Rename first three samples within the TTK yml, manifest, and bicep
files as appropriate
- Reorganize documentation to link to global getting-started docs from
#676
- Add note that `yarn` must be globally installed
- [x] My code follows the style guidelines of this project
- I have checked for/fixed spelling, linting, and other errors
- I have commented my code for clarity
- I have made corresponding changes to the documentation (we use
[TypeDoc](https://typedoc.org/) to document our code)
- My changes generate no new warnings
---------
Co-authored-by: Corina Gum <>
Copy file name to clipboardExpand all lines: js/samples/01.messaging.a.echoBot/README.md
+46-125
Original file line number
Diff line number
Diff line change
@@ -2,24 +2,11 @@
2
2
3
3
This sample shows how to incorporate a basic conversational flow into a Microsoft Teams application using [Bot Framework](https://dev.botframework.com) and the Teams AI SDK.
1. In the root **JavaScript folder**, install and build all dependencies
33
26
34
27
```bash
35
28
cd teams-ai/js
36
-
yarn install
29
+
yarn install#only needs to be run once, after clone or remote pull
37
30
yarn build
38
31
```
39
32
40
-
3. In a terminal, navigate to the sample root.
33
+
1. In a terminal, navigate to the sample root.
41
34
42
35
```bash
43
-
cdteams-ai/js/samples/01.messaging.a.echobot/
36
+
cd samples/<this-sample-folder>/
44
37
yarn start
45
38
```
46
39
47
-
## Interacting with the bot
48
-
49
-
You can interact with this bot by sending it a message, which will echo back to you.
50
-
51
-
## Multiple ways to test
40
+
The easiest and fastest way to get up and running is with Teams Toolkit as your development guide. To use Teams Toolkit to continue setup and debugging, please continue below. To read about other options, skip to [Other ways to run the sample](#other-ways-to-run-the-sample).
52
41
53
-
The easiest and fastest way to get up and running is with Teams Toolkit as your development guide. To use Teams Toolkit to continue setup and debugging, please continue below.
42
+
## Teams Toolkit for Visual Studio Code
54
43
55
-
Otherwise, if you only want to run the bot locally and build manually, please jump to the [BotFramework Emulator](#testing-in-BotFramework-emulator) section.
44
+
Teams Toolkit automates the setup of Azure Bot Resources and provides a local development environment foryour bot. It also provides a debugging experiencein VS Code that allows you to test your bot in a Teams web client.
56
45
57
-
### Using Teams Toolkit for Visual Studio Code
58
-
59
-
The simplest way to run this sample in Teams is to use Teams Toolkit for Visual Studio Code.
46
+
### Prerequisites
60
47
61
48
1. Ensure you have downloaded and installed [Visual Studio Code](https://code.visualstudio.com/docs/setup/setup-overview)
62
49
1. Install the [Teams Toolkit extension](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension)
50
+
51
+
### Run the sample
63
52
1. Select **File > Open Folder**in VS Code and choose this sample's directory from the repo
64
-
1. Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps
65
-
1. Select **Debug > Start Debugging** or **F5** to run the app in a Teams web client.
53
+
- Running the debugger from the root of the repo will not work - you must open a new window at the sample's root.
54
+
1. Using the TTK extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps to Teams.
55
+
1. Further, detailed instructions can be found at [Getting Started - Teams Toolkit](https://github.com/microsoft/teams-ai/tree/main/getting-started/OTHER/TEAMS-TOOLKIT.md)
56
+
1. Select **Debug > Start Debugging** or **F5** to run the app in a Teams web client (in Microsoft Edge).
66
57
1. In the browser that launches, selectthe**Add** button to install the app to Teams.
67
58
68
59
> 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.
69
60
70
-
### Using Teams Toolkit CLI
71
-
72
-
You can also use the Teams Toolkit CLI to run this sample.
73
-
74
-
1. Install the CLI
75
-
76
-
```bash
77
-
npm install -g @microsoft/teamsfx-cli
78
-
```
79
-
80
-
1. Open a second shell instance and run ngrok tunneling service - point to port 3978
81
-
82
-
```bash
83
-
ngrok http --host-header=rewrite 3978
84
-
```
85
-
86
-
1. Copy the ngrok URL and put the URL and domain in the `/env/env.local` file
87
-
88
-
```bash
89
-
BOT_ENDPOINT=https://{ngrok-url}.ngrok.io
90
-
BOT_DOMAIN={ngrok-url}.ngrok.io
91
-
```
92
-
93
-
1. In the repository directory, run the Teams Toolkit CLI commands to automate the setup needed for the app
94
-
95
-
```bash
96
-
cd teams-ai/js/samples/01.messaging.a.echobot/
97
-
teamsfx provision --env local
98
-
99
-
```
100
-
101
-
1. Next, use the CLI to validate and create an app package
102
-
103
-
```bash
104
-
teamsfx deploy --env local
105
-
```
106
-
107
-
1. Finally, use the CLI to preview the app in Teams
108
-
109
-
```bash
110
-
teamsfx preview --env local
111
-
```
112
-
113
-
### Manually upload the app to a Teams desktop client
114
-
115
-
> If you used Teams Toolkit in the above steps, you can [upload a custom app](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/deploy-and-publish/apps-upload) to a desktop client using the `/appPackage/appPackage.local.zip` file created by the tools and skip to step 6.
116
-
117
-
1. In a terminal, navigate to `teams-ai/js/samples/01.messaging.a.echobot/`
118
-
119
-
```bash
120
-
cd teams-ai/js/samples/01.messaging.a.echobot/
121
-
```
122
-
123
-
1. Run ngrok tunneling service - point to port 3978
124
-
125
-
```bash
126
-
ngrok http --host-header=rewrite 3978
127
-
```
128
-
129
-
1. Create [Bot Framework registration resource](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration) in Azure
130
-
131
-
- Use the current `https` URL you were given by running ngrok. Append with the path `/api/messages` used by this sample.
132
-
- Ensure that you've [enabled the Teams Channel](https://docs.microsoft.com/en-us/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0)
133
-
134
-
1. Update the `.env` configuration forthe bot to use the Microsoft App Id and App Password from the Bot Framework registration. (Note the App Password is referred to as the "client secret"in the Azure Portal and you can always create a new client secret anytime.)
135
-
136
-
1. **_This step is specific to Teams._**
137
-
138
-
- **Edit** the `manifest.json` contained in the `appPackage` folder to replace your Microsoft App Id (that was created when you registered your bot earlier) _everywhere_ you see the place holder string `${{TEAMS_APP_ID}}` (depending on the scenario the Microsoft App Id may occur multiple timesin the `manifest.json`). If you haven't created an Azure app service yet, you can use your bot id for the above. You're bot id should be pasted in where you see `${{BOT_ID}}`. Replace everywhere you see `${{BOT_DOMAIN}}` with the domain part of the URL created by your tunneling solution.
139
-
- **Zip** up the contents of the `appPackage` folder to create a `manifest.zip`
61
+
## Interacting with the bot
140
62
141
-
1. Run your app from the command line:
63
+
In the chat window of the Teams client, you can interact with the bot by sending it a message. The bot will echo back the message you sent.
64
+
## Other ways to run the sample
65
+
### Teams Toolkit CLI
142
66
143
-
```bash
144
-
yarn start
145
-
```
67
+
[TeamsFx command line interface](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-cli?pivots=version-two) is a text-based command line interface that accelerates Teams application development. It aims to provide keyboard centric experience while building Teams applications.
146
68
147
-
1. [Upload the app](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/deploy-and-publish/apps-upload) file (manifest.zip created in the previous step) in Teams.
69
+
Navigate to [Teams Toolkit CLI](https://github.com/microsoft/teams-ai/tree/main/getting-started/OTHER/TEAMS-TOOLKIT.md#teams-toolkit-cli) for setup instructions.
148
70
149
-
## Testing in BotFramework Emulator
71
+
### Manual resource management and uploading to Teams
150
72
151
-
[Bot Framework Emulator](https://github.com/microsoft/BotFramework-Emulator) Allows testing bots independently from Channels when developing your bot. If you do not wish to use Teams Toolkit, please follow the steps below to test your bot in Emulator.
73
+
[Manual resource setup](../../../getting-started/OTHER/MANUAL-RESOURCE-SETUP.md) provides instructions on how to manually create the Azure Bot Resources and upload the app to Teams.
152
74
153
-
### Directions
75
+
These directions are useful if you do not wish to use Teams Toolkit or you already have resources created and deployed.
154
76
155
-
1. Download and install [Bot Framework Emulator](https://github.com/microsoft/BotFramework-Emulator)
156
-
2. Launch Bot Framework Emulator
157
-
3. Run the app you are in the directory for.
77
+
If you are doing manual setup, you can ignore the `env` folder entirely.
158
78
159
-
```bash
160
-
yarn start
161
-
```
79
+
### BotFramework Emulator
162
80
163
-
4. Add your app's messaging endpoint to the "Open a Bot" dialog. The endpoint your localhost endpoint with the path `/api/messages` appended. It should look something like this: `http://localhost:3978/api/messages`.
81
+
[Bot Framework Emulator](https://github.com/microsoft/BotFramework-Emulator) Allows testing bots independently from channels when developing your bot if you do not wish to use Teams Toolkit.
164
82
165
-

83
+
[Running BF Emulator](../../../getting-started/OTHER/BOTFRAMEWORK-EMULATOR.md) directions provide instructions on how to run the bot in Emulator.
166
84
167
-
- In order to test remote apps, you will need to use a tunneling service like ngrok along with an Microsoft App Id and password pasted into the dialog shown above.
168
-
- Channel-specific features (For example, Teams Message Extensions) are not supported in Emulator and therefore not fully-testable.
169
-
- If you are building, testing and publishing your app manually to Azure, you will need to put your credentials in the `.env` file.
85
+
> Note: Emulator is channel-agnostic, meaning that features specific to Teams will not be testable in Emulator.
170
86
171
87
## Deploy the bot to Azure
172
88
173
-
You can use Teams Toolkit for VS Code or CLI to host the bot in Azure. The sample includes Bicep templates in the `/infra` directory which are used by the tools to create resources in Azure. Use the **Provision** and **Deploy** menus of the Teams Toolkit extension or from the CLI with `teamsfx provision` and `teamsfx deploy`. [Visit the documentation](https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/provision) for more info on hosting your app in Azure with Teams Toolkit.
89
+
You can use Teams Toolkit forVS Code or CLI to host the botin Azure. The sample includes Bicep templates in the `/infra` directory which are used by the tools to create resources in Azure.
90
+
* Use the **Provision** and **Deploy** menus of the Teams Toolkit extension
91
+
* Run CLI commands `teamsfx provision` and `teamsfx deploy`.
92
+
* [Visit the documentation](https://learn.microsoft.com/microsoftteams/platform/toolkit/provision) formore info on hosting your appin Azure with Teams Toolkit.
174
93
175
94
Alternatively, you can learn more about deploying a bot to Azure manually in the [Deploy your bot to Azure](https://aka.ms/azuredeployment) documentation.
- [How Microsoft Teams bots work](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-basics-teams?view=azure-bot-service-4.0&tabs=javascript)
98
+
- [Getting started with Teams AI](../../../getting-started/README.md)
99
+
- Introduces the Teams AI Library and reviews bot and AI-related concepts
0 commit comments