►
From YouTube: Build your first Notification bot for Microsoft Teams with Teams Toolkit for Visual Studio Code
Description
In this 16-minute developer/designer focused demo, Garry Trinder asserts Notification bots are great for sending pro-active messages into Microsoft Teams. Interested? Let’s create this bot now! Install Teams Toolkit for Visual Studio Code and scaffold a project to create a Notification bot with HTTP and Timer Trigger (Azure Functions) and use TypeScript (or JavaScript). Inspect what the toolkit has provisioned, trigger the bot for the first time and wrap up with summary and resources. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 4, 2022.
Demo Presenter
• Garry Trinder (Microsoft) | @garrytrinder
Supporting materials
• Documentation - Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code
• Documentation - Create a new Teams project | https://learn.microsoft.com/microsoftteams/platform/toolkit/create-new-project?pivots=visual-studio-code
• Documentation - TeamsFx SDK | https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk
• Repo - Microsoft Teams Toolkit | https://github.com/OfficeDev/TeamsFx
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
Foreign,
this
session
is
going
to
cover
building
your
first
notification
bot
using
teams
toolkit
for
visual
studio
code.
A
little
bit
about
myself.
My
name
is
Gary
trinder
I'm,
a
senior
Cloud
developer
Advocate
at
Microsoft
focus
on
Microsoft,
365.,
yeah.
Basically,
I'll
leave
this
slide
in
there.
You
should
be
able
to
take
a
look,
and
if
you
want
to
contact
me,
ask
questions
yeah,
feel
free
to
to
reach
out
more
than
happy
to
answer
any
questions
that
you
might
have
quickly
just
to
cover
what
I'm
going
to
go
through
so
we'll
cover.
A
What
is
a
notification
bar
quickly
cover
team,
still
kit
for
visual
studio
code
and
then
I'll
actually
go
through.
Show
you
the
steps
of
how
you
can
create
your
first
bot
and
then
run
it
and
see
how
it
works
as
well
and
I'll
jump
in
and
just
show
you
how
this
bot
Works
what
packages
it's
using,
SDK,
wise
and
then
I'll
leave
you
with
some
resources
to
find
out
more
information.
A
But
hopefully,
at
the
end
of
this,
you
should
be
able
to
have
a
good
idea
of
what
a
notification
bot
is
and
go
and
build
one
in
your
own
tenant.
So
let's
get
started
then.
So
what
is
a
notification
bar?
Well,
a
notification.
Bot
really
is
a
great
way
of
being
able
to
extend
Microsoft
teams
and
with
the
ability
to
send
proactive
notifications
into
various
Microsoft
teams
locations
either
that
as
a
personal,
app,
that's
installed
in
the
user
context
or
a
a
team
Channel
or
a
chat
or
a
group
chat
as
well.
A
So
a
great
use
case
for
this
would
be
you
know
you
are
wanting
to
react
to
something
that's
happening
in
an
external
system.
When
that
happens,
you
want
to
send
a
message
into
a
certain
location,
so
people
can
see
it
and
format
that
you
know,
maybe
as
an
Adaptive
card,
with
some
buttons
to
get
some
immediate
action
on
that.
So
that
really
is
what
a
notification
bot
is
so
we're
going
to
go
through
and
use
teams
toolkit
for
visual
studio
code
to
build
our
notification
box
and
so
teams
talking
for
visual
studio
code.
A
If
you're
not
aware
is
a
extension,
that's
available
in
the
marketplace
that
you
can,
you
can
install
into
Visual
Studio
code
and
it
gives
you
the
ability
to
create
and
debug
and
run
and
publish
teams
apps.
So
it
comes
with
lots
of
project
templates.
Notification
bar
is
one
that
we're
going
to
look
at
and
it's
got
many
others
as
well,
and
you
may
have
may
have
heard
teams
toolkit
for
visual
studio
as
well.
A
That
is
a
enhancement
for
the
visual
studio
application
and
that
is
based
on
net
I'm,
not
going
to
go
through
that
today.
We
can
cover
that
in
another
call.
So
if
you're
really
interested
in
that,
please
let
me
know
in
the
chat
today:
it's
Visual
Studio
code,
so
we're
going
to
be
in
JavaScript
and
typescript
as
we
build
our
bot.
A
A
So
I
can
search
for
teams
toolkit
very
easy,
just
click
install
when
you've
installed
it.
You
get
the
team's
toolkit
icon
in
the
sidebar,
but
when
you
click
on
it,
you
get
a
few
options.
You
can
create
your
new
themes
app.
So
let's
do
that.
So
we
want
to
create
a
new
teams
app.
We
do
have
samples
we'll
go
into
it
now,
but
something
that
you
might
want
to
look
into
for
for
some
examples
of
apps
that
have
already
been
built.
A
So
we're
going
to
choose
a
notification
bot.
You
can
see.
There's
other
types
in
here
that
cover
command
Bots,
tabs,
SharePoint
framework
tabs
as
well
other
Bots,
and
so
there's
a
lot
of
capabilities
in
in
teams
toolkit
Visual,
Studio
code
for
building
other
types
of
apps.
But
let's
use
the
notification
box
template
for
now.
We've
got
four
different
options
that
we
can
choose.
We
have
the
the
first
option
is
a
restify
server
implementation,
which
is
a
HTTP
trigger.
A
So
this
is
you
sending
a
request,
HTTP
request
to
your
Bot
and
that
will
trigger
a
message
to
go
into
the
the
different
locations
in
Microsoft
teams
where
you've,
where
you've
installed
it.
The
next
three
are
all
Azure
function
base
we've
got
the
HTTP
trigger,
which
again
is
the
same
as
the
first
option.
It's
just
got
a
different
implementation.
We've
got
the
timer
trigger,
which
runs
on
a
schedule,
and
the
third
option
is
you
can
have
both.
A
So
when
you
create
that
project
you
can
have,
you
know,
messages
going
in
there,
everything
30
seconds
or
ad
hoc
when,
when
you
need
it,
so
let's
choose
that
one.
We
got
the
option
for
JavaScript
and
typescript
I'm
going
to
go
for
typescript
and
we
want
to
choose
a
location
where
we
want
to
ins
to
create
our
project.
So
let's
just
call
it
Community
call
hit
enter,
and
that
starts
the
scaffolding.
So
this
is
teams
talk
it
now
generating
our
project.
It's
fairly,
quick,
it's
actually
done
and
completed.
A
A
These
are
placeholder
values
that
will
get
injected
into
the
app
manifest.
So
you
can
come
in
here
and
you
can
create
your
own
properties
I'll,
get
to
that
bit
a
little
bit
later.
Project
settings,
which
is
some
internal
code
for
teams
toolkit.
You
shouldn't,
need
to
go
in
into
there,
but
this
is
kind
of
how
everything
is
is
controlled,
vs
code.
A
These
are
the
debug
profiles,
so
this
is
when
we
hit
F5
here's
basically,
where
all
the
magic
happens,
a
toolkit
where
we
do
a
lot
of
activities
and
pre-provisioning
to
allow
you
to
basically
get
your
Bot
up
and
running
as
as
fast
as
possible
and
I'll
go
into
more
detail,
and
actually
do
that
later
we
have
our
bot
folder.
So
this
is
where
our
source
code
is,
and
we
have
a
templates
folder
as
well.
So
this
templates
folder
provides
us
with
a
app
manifest
and
also
bicep
templates
for
deploying
and
provisioning
to
azure.
A
A
It
opens
up
the
Manifest
and
we
can
see
in
here
that
we've
got
a
teams
app
manifest
with
placeholder
values
in
there
that
get
injected
in
when
we
actually
run
our
app
and
the
toolkit
basically
handles
all
of
that
complexity
for
us
like
the
valid
domains
which
which
will
change
as
we
are
running
the
bot
through
development.
So
that's
how
you
can
get
to
your
your
manifest
a
couple.
Other
things
to
point
out
is
I've
already
installed.
A
Teams
toolkit
and
I've
authenticated
my
account
against
my
Microsoft
365
tenant,
so
that's
already
showing
as
signed
in
and
also
that
side
loading
is
enabled
that
needs
to
be
enabled
on
the
tenant
for
us
to
be
able
to
develop
against
it.
And
so,
if
you,
if
you've
got
a
Sandbox,
that's
done
for
you
automatically,
but
if
you're
using
another
type
of
tenant,
then
you
might
need
to
go
into
your
admin
settings
and
just
enable
that
that
side,
loading
for
for
this
to
work.
A
Okay,
let's
look
at
the
bot
code
because
that's
what
everyone
is
interested
in,
and
so
here
we
have
our
bot
as
in
Azure
function.
So
we've
got
three
functions:
a
message:
Handler
the
HTTP
trigger
and
the
timer
trigger
that
have
already
been
created.
So
if
you,
if
you're
familiar
with
using
Azure
functions,
this
should
be
again
pretty
familiar.
We've
got
the
definition
files
in
here
which
tells
us
that
this
is
a
HTTP
trigger.
Again
this
is
HTTP
the
different
endpoints
and
then
we've
got
our
timer
trigger
as
well.
A
That
is
by
default
running
every
30
seconds,
so
the
code
for
the
the
two
triggers
the
HTTP
trigger
and
the
timer
trigger
are
in
here.
So
this
is
where
our
logic
is
going
to
live
and
you
can
see
it's
just
a
standard,
Azure
function
that
is
being
invoked
here
and
we've
got
some
helpers
from
the
team's
toolkit.
A
What
this
actually
does
this
code
when
it
is
run,
it
will
go
and
get
all
the
locations
of
where
the
bot
has
been
installed
and
it
will
Loop
through
all
of
those
targets
and
it
will
send
in
an
Adaptive
card.
So
if
we
just
quickly
take
a
look
at
that,
we've
got
an
Adaptive
card
already
created
for
us,
and
so
we
can
see
that
we
have
a
model
for
card
data
which
describes
the
the
the
shape
of
our
data.
A
We
have
a
template,
which
is
this
notification
default
Json
file,
and
then
we
have
the
data
that
we
can
inject
into
that
at
at
runtime
to
render
Dynamic
values.
If
I
quickly
look
at
the
Adaptive
card,
you
can
see
that
we're
using
the
templating
placeholders
in
there
and
we
have
a
an
action
as
well
to
open
a
URL
one
folder
just
to
call
out.
So
we
have
this
internal
folder.
You
shouldn't
need
to
come
into
here,
but
it's
good
to
have
an
idea
of
what
lives
in
here.
A
At
the
end,
the
initialize
file
is
where
our
bot
is
actually
instantiated.
So
this
is
the
wrapper
that
the
teams
FX
SDK,
provides
us
with.
So
this
provides
a
nice
easy
contract
to
set
our
config,
so
our
bot
IDs
and
our
bot
passwords,
as
well
as
various
other
configurations
as
well,
and
so
it's
a
nice
way
of
being
able
to
see
okay,
where,
where
are
the
values
that
have
been
passed
into
my
bot
so
time
to
run
this
project?
A
I'm
not
going
to
do
that
on
this
one,
because
there's
a
number
of
checks
that
are
going
to
happen,
including
an
npm,
install,
and
we
don't
have
that
long
to
wait.
So
I've
already
gone
and
run
the
this.
This
bot
and
and
already
done
that
install
so
to
run.
This
bot
is
very
simple:
we
can
go
to
the
debug
Pane
and
we
can
choose
the
the
profile
for
the
browser
that
we
want.
So
I'm
going
to
use
Edge
and
I'm
going
to
hit
run,
and
we
can
see
here
if
I
just
expand
this.
A
You
can
see
that
there's
a
number
of
prerequisite
checks
that
are
happening
a
bit
fast,
but
essentially,
what
toolkit's
doing
is
it's
checking
the
node
versions.
It's
checking
that
you've
authenticated
with
the
r365
account.
It's
checking
that
you've
got
Azure
functions,
core
tools
installed
and
the
npm
is
there
as
as
well.
Additionally,
what
it's
also
doing
is
it's
going
off
to
the
bot
framework
and
it's
provisioning,
a
a
bot
in
the
service
for
us.
So
that's
where
the
the
ID
and
the
password
comes
from.
A
That's
that's
injected
into
our
config
when
Team
Store
kit
has
done
its
job,
it
will
open
up
the
browser
and
it
will
open
up
our
bot.
Now.
This
bot
has
two
triggers,
so
it
has
the
timer
trigger
and
it
also
has
the
HTTP
trigger
as
well.
So
we've
actually
seen,
we've
already
got
a
message
sent
in
the
the
timer
trigger
has
already
kicked
in.
This
is
the
side
loading
I
mentioned
before
we've
got
different
places
that
we
can
install
this
app
team
chat
or
actually
a
meeting.
A
If
you
just
click,
add
that
will
install
the
app
as
a
personal
app
into
the
user
context.
I'm
just
going
to
do
that
for
for
now,
and
we
should
see
that
we've
got
our
timer
triggered
event
that
has
come
through.
That
adaptive
card
has
has
been
sent
now.
I
mentioned
that
there's
a
HTTP
trigger.
If
I
go
back
to
visual
studio
code,
we
can
see
that
there's
an
endpoint
that
has
been
stood
up
for
us,
this
API
notification
endpoint.
A
It
has
handled
everything
for
us
that
we
need
to
get
started,
provided
us
with
the
two
ways
to
send
the
messages
into
teams
and
I'm
quickly,
going
to
just
jump
back
to
the
code,
so
the
in
in
this
example
here
we've
got
the
HTTP
triggered
notification,
we're
actually
getting
some
context
back.
That
says:
okay,
this
is
a
person
context
and
I'm
just
going
to
show
you
the
code
in
the
trigger
just
so
you
can
see
how
you
can
then
further
develop
this.
So
if
I
go
back
to
code.
A
So
we
can
see
here
that
we
get
a
type
map
from
the
target.
So
if
we
just
take
a
quick
look
at
the
Target,
so
this
is
essentially
our
bot
installation.
We've
got
access
to
various
methods
and
properties,
so
we
have
access
to
an
adapter.
So
this
is
the
underlying
bot
framework
adapter.
So
I
mentioned
the
the
SDK
is
providing
that
abstraction.
But
if
you
need
to
go
to
the
lower
level,
you
can
access
the
adapter.
Through
this
way
we
have
some
helper
functions
to
get
the
channels
in
a
particular
team,
get
team
details.
A
The
members
for
the
chat
on
the
team
help
us
for
sending
adaptive
card
or
sending
messages
as
well
as
text,
and
also
accessing
the
conversation
reference
as
well.
Another
way
of
accessing
that
that
underlying
API,
that's
provided
by
the
the
bot
framework
as
well
so
I'm
going
to
leave
that
there
because
we're
rushed
for
time.
A
I'm
quickly,
now
just
going
to
jump
back
to
the
slides,
okay.
So,
just
to
summarize
so
notification
Bots
great
for
sending
proactive
messages
into
different
teams.
Locations
two
toolkit
provides
the
quickest
way
to
get
started.
Developing
teams
apps
I've,
shown
a
notification
bot,
but
there's
you
know
plenty
of
different
scenarios
that
you
can
build
with
teams
talk
it
and
teams.
Fx
there
is,
is
providing
a
layer
of
abstraction
to
simplify
working
with
the
bot
framework,
which
is
really
really
useful.
A
Some
resources
to
learn
a
little
bit
more,
please
check
out
the
docs
for
teams
toolkit
and
also
teams,
FX
SDK
as
well
and
yeah.
Thank
you
very
much
for
listening.
Apologies.
I've
tried
to
get
through
this
as
quick
as
possible,
you'll
be
able
to
watch
it
back
on
the
catch
up
and
probably
slow
it
down
a
bit
but
yeah.
Thank
you
very
much.
If
any
questions
put
them
into
the
chat
and
I
will
definitely
do
my
best
to
answer
them
and
face
it
over
to
you.