Skip to content

Commit 855f12c

Browse files
authored
[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 <>
1 parent 7bad155 commit 855f12c

File tree

9 files changed

+337
-585
lines changed

9 files changed

+337
-585
lines changed
+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
MicrosoftAppId=
22
MicrosoftAppPassword=
3+
#This sample does not use AI and therefore an AI service key is not required.

js/samples/01.messaging.a.echoBot/README.md

+46-125
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,11 @@
22

33
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.
44

5-
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
5+
## Showcase
66

7-
<!-- code_chunk_output -->
8-
9-
- [Teams Echo Bot](#teams-echo-bot)
10-
- [Setting up the sample](#setting-up-the-sample)
11-
- [Interacting with the bot](#interacting-with-the-bot)
12-
- [Multiple ways to test](#multiple-ways-to-test)
13-
- [Using Teams Toolkit for Visual Studio Code](#using-teams-toolkit-for-visual-studio-code)
14-
- [Using Teams Toolkit CLI](#using-teams-toolkit-cli)
15-
- [Manually upload the app to a Teams desktop client](#manually-upload-the-app-to-a-teams-desktop-client)
16-
- [Testing in BotFramework Emulator](#testing-in-botframework-emulator)
17-
- [Testing in BotFramework Emulator](#testing-in-botframework-emulator-1)
18-
- [Directions](#directions)
19-
- [Deploy the bot to Azure](#deploy-the-bot-to-azure)
20-
- [Further reading](#further-reading)
21-
22-
<!-- /code_chunk_output -->
7+
- The bot echos back any message it receives. That's it!
8+
- This app is the bot-equivalent of 'Hello world'.
9+
- The minimum setup shows how to set up a bot with the Teams AI SDK.
2310

2411
## Setting up the sample
2512

@@ -29,152 +16,86 @@ This sample shows how to incorporate a basic conversational flow into a Microsof
2916
git clone https://github.com/Microsoft/teams-ai.git
3017
```
3118

32-
2. In the root JavaScript folder, install and build all dependencies
19+
1. If you do not have `yarn` installed, install it globally
20+
21+
```bash
22+
npm install -g [email protected]
23+
```
24+
25+
1. In the root **JavaScript folder**, install and build all dependencies
3326

3427
```bash
3528
cd teams-ai/js
36-
yarn install
29+
yarn install #only needs to be run once, after clone or remote pull
3730
yarn build
3831
```
3932

40-
3. In a terminal, navigate to the sample root.
33+
1. In a terminal, navigate to the sample root.
4134

4235
```bash
43-
cd teams-ai/js/samples/01.messaging.a.echobot/
36+
cd samples/<this-sample-folder>/
4437
yarn start
4538
```
4639

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).
5241

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
5443

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 for your bot. It also provides a debugging experience in VS Code that allows you to test your bot in a Teams web client.
5645

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
6047

6148
1. Ensure you have downloaded and installed [Visual Studio Code](https://code.visualstudio.com/docs/setup/setup-overview)
6249
1. Install the [Teams Toolkit extension](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension)
50+
51+
### Run the sample
6352
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).
6657
1. In the browser that launches, select the **Add** button to install the app to Teams.
6758

6859
> 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.
6960

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 for the 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 times in 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
14062

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
14266

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.
14668

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.
14870

149-
## Testing in BotFramework Emulator
71+
### Manual resource management and uploading to Teams
15072

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.
15274

153-
### Directions
75+
These directions are useful if you do not wish to use Teams Toolkit or you already have resources created and deployed.
15476

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.
15878

159-
```bash
160-
yarn start
161-
```
79+
### BotFramework Emulator
16280

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.
16482

165-
![Bot Framework setup menu with a localhost url endpoint added under Bot URL](https://github.com/microsoft/teams-ai/assets/14900841/6c4f29bc-3e5c-4df1-b618-2b5a590e420e)
83+
[Running BF Emulator](../../../getting-started/OTHER/BOTFRAMEWORK-EMULATOR.md) directions provide instructions on how to run the bot in Emulator.
16684

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.
17086

17187
## Deploy the bot to Azure
17288

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 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.
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) for more info on hosting your app in Azure with Teams Toolkit.
17493

17594
Alternatively, you can learn more about deploying a bot to Azure manually in the [Deploy your bot to Azure](https://aka.ms/azuredeployment) documentation.
17695

17796
## Further reading
17897

179-
- [Teams Toolkit overview](https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/teams-toolkit-fundamentals)
180-
- [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
100+
- [Teams Toolkit overview](https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals)
101+
- [How Microsoft Teams bots work](https://docs.microsoft.com/azure/bot-service/bot-builder-basics-teams?view=azure-bot-service-4.0&tabs=javascript)

0 commit comments

Comments
 (0)