Skip to content

Commit

Permalink
Update Readme for release branch (#1047)
Browse files Browse the repository at this point in the history
* fix: readmes for bots and msg exts

* fix: readmes for messaging extensions

* fix: tab readmes

* fix: readmes for functions
  • Loading branch information
zhenyasav committed May 17, 2021
1 parent a387695 commit 5549d4f
Show file tree
Hide file tree
Showing 10 changed files with 241 additions and 242 deletions.
49 changes: 22 additions & 27 deletions templates/bot-msgext/js/default/README.md
Original file line number Diff line number Diff line change
@@ -1,76 +1,71 @@
# Build Bots and Messaging Extensions for Teams

A _Bot_ also referred to as a chatbot or conversational bot is an app that runs simple and repetitive automated tasks performed by the users, such as customer service or support staff. Examples of bots in everyday use include, bots that provide information about the weather, make dinner reservations, or provide travel information. A bot interaction can be a quick question and answer, or it can be a complex conversation that provides access to services.
A Messaging Extension allows users to interact with your web service while composing messages in the Microsoft Teams client. Users can invoke your web service to assist message composition, from the message compose box, or from the search bar.

A _Messaging Extension_ allows users to interact with your web service through buttons and forms in the Microsoft Teams client. They can search, or initiate actions, in an external system from the compose message area, the command box, or directly from a message.
Messaging Extensions are implemented on top of the Bot support architecture within Teams.

This is a simple hello world application with both Bot and Message extension capabilities. You can learn how to build a Teams app with Bot and Message Extension at the same time.
A bot, chatbot, or conversational bot is an app that responds to simple commands sent in chat and replies in meaningful ways. Examples of bots in everyday use include: bots that notify about build failures, bots that provide information about the weather or bus schedules, or provide travel information. A bot interaction can be a quick question and answer, or it can be a complex conversation. Being a cloud application, a bot can provide valuable and secure access to cloud services and corporate resources.

This is a simple hello world application with both Bot and Message extension capabilities.

## Prerequisites

- [Node.js](https://nodejs.org/en/)
- An M365 account, if you do not have M365 account, apply one from [M365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)
- Teams Toolkit or TeamsFx CLI
- [NodeJS](https://nodejs.org/en/)
- An M365 account. If you do not have M365 account, apply one from [M365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)
- [Teams Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) or [TeamsFx CLI](https://aka.ms/teamsfx-cli)

## Create an application

- From Visual Studio Code, there are two ways to create a new bot and messaging extension, select `Create New Project` in the left panel or directly open the command palette and select `Teams: Create New Project`.
- From TeamsFx CLI, run command `teamsfx new` to create a new bot and messaging extension.
- From Visual Studio Code, open command palette and select `Teams - Start a new project`. Or from the CLI, (after `npm install -g teamsfx`) run command `teamsfx new`.
- Choose the messaging extension capability from the prompts.
> Note: You have the option to reuse an existing bot by entering the credential manually. But make sure that bot is not associated with any AAD apps.
## Debug

Start debugging the project by hitting the `F5` key. Alternatively use the `Run Panel` in Visual Studio Code and click the `Start Debugging` green arrow button.
Start debugging the project by hitting the `F5` key in Visual Studio Code. Alternatively use the `Run and Debug Activity Panel` in Visual Studio Code and click the `Start Debugging` green arrow button.

## Build

- From Visual Studio Code: open the command palette and select `Teams: Build Teams Package`.
- From TeamsFx CLI: run command `teamsfx build` in the project directory.
- Alternatively, from the command line run `teamsfx build` in the project directory.

## Validate manifest file

To check that your manifest file is valid or not:
To check that your manifest file is valid:

- From Visual Studio Code: open the command palette and select: `Teams: Validate App Manifest File`.
- From TeamsFx CLI: run command `teamsfx validate` in your project directory.

## Deploy to Azure

Deploy your project to Azure when it’s ready by following these steps:

1. Log in to your Azure account
2. Select an active subscription
3. Provision your application resources in the cloud
4. Deploy your application to the cloud

You can do this using the Teams Toolkit in Visual Studio Code or using the TeamsFx CLI:
Deploy your project to Azure by following these steps:

| Using Teams Toolkit | Using TeamsFx CLI |
| From Visual Studio Code | Using TeamsFx CLI |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>Open Teams Toolkit, and sign into Azure by clicking the `Sign in to Azure` under the `ACCOUNT` section from sidebar.</li> <li>After you signed in, select a subscription under your account.</li><li>Open the command palette and select: `Teams: Provision in the Cloud`.</li><li>Open the command palette and select: `Teams: Deploy to the Cloud`.</li></ul> | <ul> <li>Run command `teamsfx account login azure`.</li> <li>Run command `teamsfx account set --subscription $subscriptionid`.</li> <li> Run command `teamsfx provision`.</li> <li>Run command: `teamsfx deploy`. </li></ul> |
| <ul><li>Open Teams Toolkit, and sign into Azure by clicking the `Sign in to Azure` under the `ACCOUNT` section from sidebar.</li> <li>After you signed in, select a subscription under your account.</li><li>Open the command palette and select: `Teams: Provision in the Cloud`.</li><li>Open the command palette and select: `Teams: Deploy to the Cloud`.</li></ul> | <ul> <li>Run command `teamsfx account login azure`.</li> <li>Run command `teamsfx account set --subscription <your-subscription-id>`.</li> <li> Run command `teamsfx provision`.</li> <li>Run command: `teamsfx deploy`. </li></ul> |

> Note: This may incur costs in your Azure Subscription.
> Note: Provisioning and deployment may incur charges to your Azure Subscription.
## Publish to Teams

Once deployed, you may want to submit your application to your organization's internal app store. Your app will be submitted for admin approval.
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 command palette and select: `Teams: Publish to Teams`.
- From TeamsFx CLI: run command `teamsfx publish` in your project directory.

## Use the App

Once the app is published to Teams (or in local preview mode), you can start playing around with it and here is something you should know about how to use the messaging extension part. The template provides some simple functionalities:
This template provides some sample functionality:

- You can search `npm` packages.
- You can search for `npm` packages from the search bar.
- You can create and send an adaptive card.
![CreateCard](./images/AdaptiveCard.png)
- You can share a message in an adaptive card form.
![ShareMessage](./images/ShareMessage.png)
- You can paste a link with monitored domain (`.botframwork.com` is monitored in this template) and a card will be rendered.
- You can paste a link that "unfurls" (`.botframwork.com` is monitored in this template) and a card will be rendered.
![ComposeArea](./images/LinkUnfurlingImage.png)

To trigger these functionalities, there are multiple entry points:
To trigger these functions, there are multiple entry points:

- `@mention` Your messaging extension, from the `search box area`.
![AtBotFromSearch](./images/AtBotFromSearch.png)
Expand Down
49 changes: 22 additions & 27 deletions templates/bot-msgext/ts/default/README.md
Original file line number Diff line number Diff line change
@@ -1,76 +1,71 @@
# Build Bots and Messaging Extensions for Teams

A _Bot_ also referred to as a chatbot or conversational bot is an app that runs simple and repetitive automated tasks performed by the users, such as customer service or support staff. Examples of bots in everyday use include, bots that provide information about the weather, make dinner reservations, or provide travel information. A bot interaction can be a quick question and answer, or it can be a complex conversation that provides access to services.
A Messaging Extension allows users to interact with your web service while composing messages in the Microsoft Teams client. Users can invoke your web service to assist message composition, from the message compose box, or from the search bar.

A _Messaging Extension_ allows users to interact with your web service through buttons and forms in the Microsoft Teams client. They can search, or initiate actions, in an external system from the compose message area, the command box, or directly from a message.
Messaging Extensions are implemented on top of the Bot support architecture within Teams.

This is a simple hello world application with both Bot and Message extension capabilities. You can learn how to build a Teams app with Bot and Message Extension at the same time.
A bot, chatbot, or conversational bot is an app that responds to simple commands sent in chat and replies in meaningful ways. Examples of bots in everyday use include: bots that notify about build failures, bots that provide information about the weather or bus schedules, or provide travel information. A bot interaction can be a quick question and answer, or it can be a complex conversation. Being a cloud application, a bot can provide valuable and secure access to cloud services and corporate resources.

This is a simple hello world application with both Bot and Message extension capabilities.

## Prerequisites

- [Node.js](https://nodejs.org/en/)
- An M365 account, if you do not have M365 account, apply one from [M365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)
- Teams Toolkit or TeamsFx CLI
- [NodeJS](https://nodejs.org/en/)
- An M365 account. If you do not have M365 account, apply one from [M365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)
- [Teams Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) or [TeamsFx CLI](https://aka.ms/teamsfx-cli)

## Create an application

- From Visual Studio Code, there are two ways to create a new bot and messaging extension, select `Create New Project` in the left panel or directly open the command palette and select `Teams: Create New Project`.
- From TeamsFx CLI, run command `teamsfx new` to create a new bot and messaging extension.
- From Visual Studio Code, open command palette and select `Teams - Start a new project`. Or from the CLI, (after `npm install -g teamsfx`) run command `teamsfx new`.
- Choose the messaging extension capability from the prompts.
> Note: You have the option to reuse an existing bot by entering the credential manually. But make sure that bot is not associated with any AAD apps.
## Debug

Start debugging the project by hitting the `F5` key. Alternatively use the `Run Panel` in Visual Studio Code and click the `Start Debugging` green arrow button.
Start debugging the project by hitting the `F5` key in Visual Studio Code. Alternatively use the `Run and Debug Activity Panel` in Visual Studio Code and click the `Start Debugging` green arrow button.

## Build

- From Visual Studio Code: open the command palette and select `Teams: Build Teams Package`.
- From TeamsFx CLI: run command `teamsfx build` in the project directory.
- Alternatively, from the command line run `teamsfx build` in the project directory.

## Validate manifest file

To check that your manifest file is valid or not:
To check that your manifest file is valid:

- From Visual Studio Code: open the command palette and select: `Teams: Validate App Manifest File`.
- From TeamsFx CLI: run command `teamsfx validate` in your project directory.

## Deploy to Azure

Deploy your project to Azure when it’s ready by following these steps:

1. Log in to your Azure account
2. Select an active subscription
3. Provision your application resources in the cloud
4. Deploy your application to the cloud

You can do this using the Teams Toolkit in Visual Studio Code or using the TeamsFx CLI:
Deploy your project to Azure by following these steps:

| Using Teams Toolkit | Using TeamsFx CLI |
| From Visual Studio Code | Using TeamsFx CLI |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>Open Teams Toolkit, and sign into Azure by clicking the `Sign in to Azure` under the `ACCOUNT` section from sidebar.</li> <li>After you signed in, select a subscription under your account.</li><li>Open the command palette and select: `Teams: Provision in the Cloud`.</li><li>Open the command palette and select: `Teams: Deploy to the Cloud`.</li></ul> | <ul> <li>Run command `teamsfx account login azure`.</li> <li>Run command `teamsfx account set --subscription $subscriptionid`.</li> <li> Run command `teamsfx provision`.</li> <li>Run command: `teamsfx deploy`. </li></ul> |
| <ul><li>Open Teams Toolkit, and sign into Azure by clicking the `Sign in to Azure` under the `ACCOUNT` section from sidebar.</li> <li>After you signed in, select a subscription under your account.</li><li>Open the command palette and select: `Teams: Provision in the Cloud`.</li><li>Open the command palette and select: `Teams: Deploy to the Cloud`.</li></ul> | <ul> <li>Run command `teamsfx account login azure`.</li> <li>Run command `teamsfx account set --subscription <your-subscription-id>`.</li> <li> Run command `teamsfx provision`.</li> <li>Run command: `teamsfx deploy`. </li></ul> |

> Note: This may incur costs in your Azure Subscription.
> Note: Provisioning and deployment may incur charges to your Azure Subscription.
## Publish to Teams

Once deployed, you may want to submit your application to your organization's internal app store. Your app will be submitted for admin approval.
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 command palette and select: `Teams: Publish to Teams`.
- From TeamsFx CLI: run command `teamsfx publish` in your project directory.

## Use the App

Once the app is published to Teams (or in local preview mode), you can start playing around with it and here is something you should know about how to use the messaging extension part. The template provides some simple functionalities:
This template provides some sample functionality:

- You can search `npm` packages.
- You can search for `npm` packages from the search bar.
- You can create and send an adaptive card.
![CreateCard](./images/AdaptiveCard.png)
- You can share a message in an adaptive card form.
![ShareMessage](./images/ShareMessage.png)
- You can paste a link with monitored domain (`.botframwork.com` is monitored in this template) and a card will be rendered.
- You can paste a link that "unfurls" (`.botframwork.com` is monitored in this template) and a card will be rendered.
![ComposeArea](./images/LinkUnfurlingImage.png)

To trigger these functionalities, there are multiple entry points:
To trigger these functions, there are multiple entry points:

- `@mention` Your messaging extension, from the `search box area`.
![AtBotFromSearch](./images/AtBotFromSearch.png)
Expand Down
Loading

0 comments on commit 5549d4f

Please sign in to comment.