View
1
Download
0
Category
Preview:
Citation preview
Microsoft Teams Developer Overview
Tom Jebo
Agenda
What is Microsoft Teams?
Tab Overview
Design & Config
API
Bot Overview
Design
Build
Conversation
Events
Actionable Messages
Activity Feed
Compose Extensions
Apps and Side Load
Office Store
Resources
Chat-based workspace in Office 365
Build apps with a rich set of capabilities to enable these higher-performing teams
Extension Points in Teams
Reach your users in their chats, channels, notifications, and personal workspace
Available now
Bots
Help users get
tasks done in
conversations
Connectors
Post rich updates to
channels
Tabs
Surface rich
content within
Teams
Office
Store
Drive engagement
by submitting
your app to the
Office Store
Actionable
Messages
Add rich
interaction to your
connector cards
Activity
Feed
Engage users
via feed
notifications
Compose
Extensions
Allow users to query
and share rich cards
in conversations
Available in Developer Preview
Microsoft Teams Extension Points
Reach your users in their chats, channels, notifications, and personal workspace
Available now
Bots
Help users get
tasks done in
conversations
Connectors
Post rich updates
to channels
Tabs
Surface rich
content within
Teams
Demo
Tab code/feature walkthrough
Tab Design
Relevance – channels are specific
Static – personal experience
Scope – provide boundaries that make sense
Access – Office Groups, streamlined access
Bots – reaching out, being helpful
Tab Considerations
Configurable vs Static
Configuration(required), reconfiguration, removal
Content – HTML based, hosted
Manifest – JSON based
Package – manifest.json + 2 icons
Tab Content
Requirements:
- Secure https endpoint
- Allow iframe
- https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js
- call microsoftTeams.initialize();
Demo
Tab code/feature walkthrough
Configuration
<html><body> <form>
<input> type=…
configUrl
Save
microsoftTeams.settings.setSettings({entityId, contentUrl, suggestedTabName, websiteUrl, removeUrl})
microsoftTeams.settings.setValidityState(true)
Tab Auth Considerations
Authentication
1. Silent – existing Azure AD token
2. Pop-up – non-AAD - microsoftTeams.authentication.Authenticate()
- microsoftTeams.authentication.Success/Failure()
Deep Linking
• Get and Copy link
• Generation
microsoftTeams.shareDeepLink()
https://teams.microsoft.com/l/entity/<appId>/<entityId>?webUrl=<entityWebUrl>&label=<entityLabel>&context=<context>
• Share
https://teams.microsoft.com/l/entity/
fe4a8eba-2a31-4737-8e33-e5fae6fee194/
tasklist123?webUrl=https://tasklist.example.com/123
&label=Task List 123
&context={"canvasUrl": "https://tab.tasklist.example.com/123","channelId": "19:cbe3683f25094106b826c9cada3afbe0@thread.skype"}
Example Deep LinkappId
entityWebUrl
context
Teams js API
getContextinitializenavigateCrossDomainregisterOnThemeChangeHandlershareDeepLink
microsoftTeams
https://msdn.microsoft.com/en-us/microsoft-teams/jslibraryauthenticatenotifyFailurenotifySuccess
microsoftTeams.authentication
getSettingsregisterOnRemoveHandlerregisterOnSaveHandlersetSettingssetValidityState
microsoftTeams.settings
https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js
Bots
Interact in both Team conversations or 1:1
Built using Microsoft Bot Framework
Complete tasks via basic commands, menu or natural language
Rich Microsoft Teams features, e.g.
✓ Input menus
✓ Dynamic message updates
✓ Integrate with tabs
Demo
Bot Demo
Bot Design
Intelligent vs CLI
Be responsive – respond to every message
Say hello – use bot events.
Drive users as much as possible
Narrow scope
Use regular expressions
Still can be intelligent (i.e. LUIS)
Bot Framework
Build the code: https://aka.ms/bf-createsdkbot
Register at https://dev.botframework.com/
Provide information about the bot
Icon, name, handle, description, msg URL,
admin account.
Get Microsoft App ID and secret/password
Highly recommend Azure Bot Service!
https://docs.microsoft.com/en-us/bot-framework/azure/azure-bot-service-quickstart
Build a Bot
Build the code using Teams extension for BotBuilder
C#: Install-Package Microsoft.Bot.Connector.Teams
using Microsoft.Bot.Connector.Teams.SampleBot.Shared;
javascript: npm i botbuilder-teams
var builder = require("botbuilder");
REST APIs: https://docs.botframework.com/en-us/restapi/connector/#navtitle
Develop your way
Scopes: team vs personalHow your bot is added counts
Demo
Bot Demo
Microsoft Teams
Bot Conversations Basics
Activity object (type message)
text = “hello”
channelId (always “msteams”)
from.id – unique to user
channelData.tenant.id – AAD
channelData.channel.id & name*
conversationData.id and isGroup*
entities*
Receiving:
TeamsChannelData channelData = activity.GetChannelData<TeamsChannelData>(); stringtenantId = channelData.Tenant.Id;
Bot Conversation Creation
Add vs @mention – provides id’s for creating conversations and other operations
Channel – enumerate team roster.
Conversations created with unique user/tenant ID
bot.beginDialog() / CreateConversation()
/conversations/ (1:1) /conversations/{conversationId}/activities/ (channel)
Example 1:1 Conversation Starter
Id of the target User
Id of the Channel
Id of the Conversation
Bot Conversations Basics
Sending/Reply:
Activity reply = activity.CreateReply($"You sent {activity.Text} which was {length} characters");
await connector.Conversations.ReplyToActivityAsync(reply);
await connector.Conversations.SendToConversationAsync((Activity)newMessage);
/v3/conversations/<conversationId>/activities/<activityId>/
Example reply with @mention
Bot Conversations Basics
NEW! Message Update:
/v3/conversations/<conversationId>/activities/<activityId>/
origAttachment.content.subtitle = 'Assigned to Tom Jebo’; var updatedMsg = new builder.Message()
.address(address)
.textFormat(builder.TextFormat.markdown)
.addAttachment(origAttachment)
.toMessage(); session.connector.update(updatedMsg, function(err, addresses)
{ if (err) { console.log(`Could not update the message`); }
Update method or REST endpoint
Events for Bots
Team member or Bot addition/removed
- to a team
- for personal context
Channel updates
Team name updates
Example: Bot added for personal context
- conversationUpdate- membersAdded- no channelData.team property
Possible action:Welcome message for uservs. team…
Send Cards
Property Type Description
title Rich text Title of the card. Maximum 2 lines
subtitle Rich text Subtitle of the card. Maximum 2 lines
text Rich text Text appears just below the subtitle
images: [] Array of imagesImage displayed at top of card. Aspectratio 1:1 (square)
buttons: []Array of action objects
Set of actions applicable to the current card. Maximum 6.
tap Action objectThis action will be activated when the user taps on the card itself
Demo
Bot code/feature walkthrough
Newer Features in Teams Extensions
Reach your users in their chats, channels, notifications, and personal workspace
Office
Store
Drive engagement
by submitting
your app to the
Office Store
Actionable
Messages
Add rich
interaction to your
connector cards
Activity
Feed
Engage users
via feed
notifications
Compose
Extensions
Allow users to query
and share rich cards
in conversations
Available in Developer Preview
Connectors with Actionable Messages
Push rich interactive cards into channels
Users can take quick actions like comment, select options, set a date
Uses incoming webhook API
Fully supported in both Teams and Outlook
Office365 Connectors in Teams
Office365 Connectors with Actions!
No need to leave Teams channel conversations
Stay focused and take quick actions
Demo
Messages with Actions
Microsoft Teams
Connector Service
Connector or Bot
Connector/Actionable Message Architecture
Data, Service,
Etc…
message
1 message
1 event
send card
2 response
Microsoft Teams
Connector Service
Connector or Bot
Connector/Actionable Message Architecture
Data, Service,
Etc…
http post
1
send update card
2
Demo
Messages with Actions
Activity feed
Notify users personally via the activity feed
Same API as sending bot messages
Deep link straight into tabs
Demo
Notifications in the Activity Feed
Compose Extensions
Personalize Teams Compose box with your App & Services content
Users can query and insert your app content into conversations
You can reuse services you built for Bots or Tabs
Demo
Compose extension in action
Microsoft Teams
Connector ServiceYour Bot Code
Bot Builder SDK
Compose Extension Architecture
Data, Service,
invoke/searchCmd
1 send request
composeExtension.attachments[…]
3 response
2 Query
Compose Extension Design
Optimize search results – keep it responsive!
Optimize cards – useful, attractive and shareable.
Compose Request Activity
• message type “invoke”
• name composeExtension/query
• value.commandId (e.g. “searchCmd”)
• value.parameters (name, value, skip, count)
• other properties same for @ and message
Compose Response
• composeExtension object
• composeExtension.type (“result”)
• composeExtension.attachmentLayout (“list” or “grid”)
• composeExtension.attachments
Cards:
Thumbnail
Hero
O365 connector
Authentication
1. Query secure resource
2. Check Teams userid
3. Needs auth, return login action
4. notifySuccess ( security code)
Demo
Compose extension in code
Microsoft Teams is open!
Register and submit your app today to the Office Store
Microsoft Teams App = Tabs, Connector, Actionable Messages, Activity Feed, Bots & Compose Extensions
Your app will be ready in the Developer Preview once approved
Demo
Apps in Teams
Office Store
Create a developer account
Register in the Seller Dashboard
Submit zip package to the Office Store
https://msdn.microsoft.com/en-us/microsoft-teams/submission
New Features Summary
Actionable Messages on Connector cards
User Notifications (Activity Feed)
Compose Extensions
Office Store
App Platform
Wrap-up
All these features and more in Developer Preview
Submit your app: aka.ms/SubmitTeamsApp
Resources
https://dev.office.com/microsoft-teams/explore-microsoft-teams
https://dev.office.com/microsoft-teams/ + tabs | bots | composeextenstions | activityfeed | connectors
https://msdn.microsoft.com/en-us/microsoft-teams/samples https://aka.ms/bf-createsdkbot
https://dev.botframework.com/
https://docs.microsoft.com/en-us/bot-framework/azure/azure-bot-service-quickstart
Suggestions:
mailto://microsoftteamsdev@microsoft.com
Problems:
StackOverflow "microsoft-teams“
https://aka.ms/microsoftteamsplatformsuggestions
Thank You!Questions?
Recommended