►
Description
In this video, you learn how to get started with Microsoft Teams Apps development using the Yo Teams generator. Come along on the ride to get you all up to speed on how to build awesome Teams apps.
Speaker: Wictor Wilén (Avanade) | @wictor
Supporting materials:
• Build your First Microsoft Teams App - https://docs.microsoft.com/en-us/microsoftteams/platform/tutorials/get-started-yeoman
• Yo Teams Generator Tutorial - https://github.com/pnp/generator-teams/wiki/Build-Your-First-Microsoft-Teams-App
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices (PnP) community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
Hi
everyone-
I'm
super-
excited
to
be
here
at
this
pnp
virtual
conference,
doing
it
from
my
home
today.
Hopefully
we
can
meet
in
person
going
forward
and
having
this
session
in
person,
but
this
session
for
the
pmp
varsity
conference.
This
first
of
a
kind-
hopefully
we
will
see
more-
is
all
about
the
microsoft
team
steps
generator,
yellow
teams.
A
A
Lead
from
one
workplace
been
there
for
six
years,
but
have
a
long
background
in
sharepoint
development,
but
has
found
microsoft
teams,
apps
development,
a
real
passion
of
mine,
I've
been
awarded
the
microsoft
mvp
award
11
times,
but
also
now
recently
been
awarded
the
microsoft
regional
director,
something
I'm
super
proud
of.
You
can
find
more
information
about
me,
my
postings
at
www.vic2million.sc,
but,
most
importantly,
you
will
find
most
of
my
communication
being
via
twitter
at
victor.
A
So
what's
this
session
all
about.
First
of
all,
we're
going
to
cover
sort
of
what
is
util
teams
and
why
you
should
use
it.
We
will
go
through
how
to
scaffold
out
the
project
and
what
capabilities
are
in
there
when
you
do
that
and
how
the
source
code
looks
like
and
also
how
you
build
and
deploy
this,
but
first
sort
of
what
is
your
teams,
and
why
should
I
care
so?
A
The
old
teams
were
originally
created
in
2017,
just
after
teams
was
announced,
because
I
needed
a
way
to
scaffold
out
my
projects
much
faster
and
currently,
and
it's
still
the
most
comprehensive
tips,
app
solution
generator
out
there
and
the
microsoft
teams
teams
announced
their
actual
teams
toolkit
at
build
a
couple
of
months
ago,
which
also
is
a
great
alternative
for
building
teams,
applications
and,
more
specifically,
if
you're
more
into
a
wizard
like
experience
as
we
used
to
with
a
visual
studio
and
also,
if
you
prefer,
to
use
javascript
or
typescript.
That's
the
way
to
go.
A
A
The
second
thing
you
need
to
install
a
couple
of
packages,
so
you
run
mbm,
install
yo
and
then
gulp,
cli
and
typescript,
and
preferably
install
them
globally.
So
yo
is
the
yo
team's
generator,
the
the
german
generator,
not
the
old
teams.
The
golf
cli
is
the
command
line
interface
for
golf,
and
then
we
want
typescript
as
well.
A
It's
a
very
wizard-like
interface,
even
though
it's
in
a
command
prompt
and
based
on
your
how
you
configure
your
application,
you
will
get
follow-up
questions,
so
we
can
scaffold
out
the
the
project,
as
you
prefer,
with
the
different
kind
of
artifacts.
There
are
a
couple
of
options
you
can
use.
First
of
all,
you
can
use
skip
install
if
you
want
to
run
it's
something.
Some
package
manager
such
as
yarn
or
anything
like
that,
and
it's
also
faster
scaffolding.
A
A
project,
if
you
don't
run
npm
install
so
skip
install,
can
make
your
scaffolding
faster
if
you
just
won't
inspect
the
files.
Another
thing,
if
you
don't
want
to
be
part
of
the
telemetry,
you
can
pass
in
no
telemetry
and
then
you,
the
german
teams,
will
not
send
telemetry
data
to
to
us.
The
telemetry
data
is,
of
course,
important,
and
because
that
sort
of
decides
on
what
kind
of
areas
we
need
to
invest
in
in
making
the
solution
better,
but
also
it
sends,
if
there's
any
exceptions
or
errors
and
anything
it
gets
sent
to
us.
A
We
can
understand
that
and
fix
that
for
future
releases.
But
of
course,
if
you
want
to
not
share
the
data,
of
course,
I
need
to
say
it
doesn't
send
anything
data
about
your
project
only
which
pieces
you
use
in
there.
For
instance,
if
you
scaffolding
at
the
tab
or
a
bot
or
etc,
but
no
details
on
your
actual
project,
so
don't
be
scared
about
that
enough.
Powerpoint
slides,
let's
get
into
it.
Let's
see
how
we
can
scaffold
an
app
with
your
teams.
A
A
A
So
let's
just
leave
it
as
bmp
demo.
Then
I
need
to
insert
my
company
that
should
be
preferably,
of
course,
your
company,
but
I
use
my
name
in
here
that
will
also
be
part
of
the
application.
When,
when
the
user
click
install,
they
will
see
the
developer's
name
or
the
company
name,
then
I
have
the
option
of
choosing
the
manifest.
The
manifest
is
the
instruction
set
to
microsoft
teams.
What
kind
of
features
and
functions
are
available.
A
I
highly
recommend
that
you
use
the
latest
version
so
1.7
in
this
case,
which
contains
some
new
updates
compared
to
1.6.
We
typically
in
the
old
teams
generator.
We
support
the
latest
version
and
the
latest
version
-1.
There
might
be
some
reasons
you
want
to
stick
with
the
v1.6
I'd
recommend
using
the
1.7
another
feature.
We
have
that
you
can
actually
run
the
if
you
already
scaffold
out
the
project
using,
for
instance,
jump
joint
generator
2.14.
A
You
can
run
this
command
again
and
upgrade
your
version
and
we'll
take
care
of
upgrading
the
different
files.
That's
required
to
to
go
to
that
version.
You
specify
there
are
also
the
opportunity
for
you
to
use
the
dev
preview,
which
is
sort
of
the
beta
version
of
the
manifest
and
the
features
in
microsoft
teams.
A
If
you
know
what
you're
doing
then
this
is
an
option
for
you
to
choose
as
well,
but
for
this
demo,
let's
choose
1.7
and
I
click
enter.
Then
there's
an
opportunity
for
you.
If
you
are
actually
partnering
partner,
you
can
insert
your
partner
id
in
here
and
that
will
sort
of
send
some
kind
of
telemetry
data
to
microsoft,
on
which
partner
builds,
apps,
etc.
I
don't
know
exactly
how
that
works,
but
I
I
think
it's
a
good
idea
to
have
your
partner
id
in
there.
A
If
you
have
a
partner
id
that
is
or
unless
you're
building
sort
of
the
test
projects
and
what
not.
But
if
you're,
building
things
for
clients
or
for
the
the
store
it's
good
to
have
your
partner
id
in
there,
then
the
most
important
selection
comes,
and
this
is
why
we
choose
what
features
do
we
want
in
our
in
our
project?
A
That's
also
depend
all
these
kind
of
questions
are
dependent
on
each
other.
So,
depending
on
what
feature
or
the
version
that
you
chose,
this
selection
might
change
in
here
I
can
go
up
and
down
and
with
the
space
choose
what
I
want
to
do
so,
let's
I
can
unselect
and
I
can
select
so
let's
use
a
tab
and
a
bot,
and
I
can
choose
all
of
them.
If
I
want
to
or
just
one
of
them,
I
can
also
run
your
teams
again
over
an
existing
project
to
add
additional
tabs
or
additional
messaging
extensions,
etc,
etc.
A
So
I
click
enter
once
when
I'm
done
and
then
the
second
thing
I
will
ask
for
where
do
you
want
to
host
this,
and
it
automatically
creates
an
url
for
you
in
this
case
pnp
virtual
conference
demo
actionwebsites.net,
you
might
have
your
contoso.com
domain
or
whatever
you
want
in
here
for
this
demo
you
can
choose
enter.
This
can
be
changed
afterwards.
All
most
of
these
settings
are
actually
stored
in
a
specific
configuration
or
environment
file
that
I
will
show
you
and
here's
something
that
came
in
schema
1.5.
A
If
I'm
not
mistaken,
would
you
like
to
show
a
loading
indicated
when
your
app
or
tab
loads?
So
you
can
choose
yes
or
no,
and
that's
specifically
important.
If
you
have
sort
of
single
sign-on
tabs,
it
will
take
a
second
or
two
before
you
have
the
token.
So
you
don't
have
to
create
your
own
loading
screen.
So
essentially
you
can
have
teams
generating
that
loading
screen
for
you.
So
let's
choose
yes
in
this
case,
and
this
is
a
new
feature
introduced
in
2.6
stone
scene.
A
If
you
want
to
personal
tabs
to
be
rendered
without
the
tab,
header
and
I'll
choose
no,
which
is
the
default
one
here
for
this
demo.
Another
great
feature
we
have
is
that
we
actually
include
the
test
framework
initial
test,
free
application,
so
assuming
you're,
building
out
and
read
enterprise
application.
You
of
course
want
to
have
testing
in
there,
so
we
can
opt
in
to
have
those
tests
by
clicking.
Yes,
I
choose
no
for
this
demo.
A
We
also
have
support
for
application
insights.
If
you
want
to
do
that,
so,
let's
use
no.
We
don't
need
that
for
this
demo
and
then
we
actually
come
into
the
different
kind
of
features,
depending
that's
actually
dependent
on
on
the
feature
selection
I
chose
about
so.
First
of
all,
I
have
a
tab.
What
should
the
name
of
my
tab
be,
so
we
call
it
pnp
vmp
tab
and
then
what
kind
of
tab
do
I
want
to
create?
Do
you
want
to
do
it
configurable
or
static
or
personal?
A
A
The
next
thing,
since
I
choose
a
configurable
one.
So
where
do
I
want
this
to
appear?
So
I
have
two
options,
essentially
in
a
team
or
in
the
team
channel
and
or
in
a
group
chat,
which
is
a
great
feature
when
we
actually
have
tabs
in
group
chats
as
well,
so
I
can
choose
both
one
or
of
them.
So,
let's
choose
in
group
chat
and
in
a
team,
then
we
have
a
feature
also
introduced
in
1.5.
A
If
you
want
to
single
line
single
sign-on
support,
that
requires
some
extra
setup
documentation
for
that
is
all
available
on
the
your
team's
wiki.
So
you
can
find
on
all
the
details
of
that.
If
you
want
to-
and
there's
also
some
restrictions
about
that,
if
you're
using
the
azure
website's
domain
that
you
need
to
read
in
the
official
documentation
for
this
demo,
let's
not
do
anything
and
sign
on
another
feature
here.
Do
I
want
this
tab?
This
is
a
tab
right.
We
can
actually
have
that.
A
The
option
of
have
using
this
tab
as
a
web
part
in
actual
international
sharepoint
online
as
well,
so
I
can
choose
just
just
for
that
one,
but
let's
opt
out
and
say
no,
so
that
was
all
the
tab
questions
now,
since
I
chose
the
bot
as
well,
I
can
choose
between
if
I
already
built
the
bot,
I
can
just
point
to
that
part
already
or
I
can
add
a
new
bot
framework
box
to
my
project.
So
let's
use
that
one
and
then
I
need,
of
course,
to
provide
a
name
for
the
bot.
Let's
accept
it.
A
That
is
as
it
is,
and,
of
course,
if
you're
building
a
bot,
you
need
to
go
into
the
bot
framework
portal
or
ash
report
of
the
region
that
register
that
about
channel
registration.
That's
where
you
get
this
id
for
the
box
for
now.
I
will
do
that
later
if
required.
So
I
click
enter
here.
This
guide
can
be
changed
and
modified
later
and
then
I
also
have
the
option
of
adding
a
static
tab
to
the
bot.
So
let's
click
yes
on
that
one
and
the
tab
needs
to
have
the
name.
A
So,
let's
call
it
faq
and
also
it
would
also
ask
me
for
file
support.
If
I
want
size
support
in
the
spot,
I
choose
no
for
now
and
once
that
is
done,
all
my
files
start
being
generated
and
these
are
all
being
created
locally
and
one
and
after
those
files
have
been
created,
we
will
start
installing
the
packages.
A
A
A
A
A
A
A
All
this
is
a
react
code.
We're
using
the
fluent
ui
react
north
star
as
the
design,
the
ux
framework.
We
also
use
the
teams.js
sdk
for
the
team's
interaction,
and
this
is
all
typescript,
html,
css,
sas,
etc
and
npm
components
for
the
client
side.
So
this
would
create
a
javascript
file
for
you
running
sort
of
the
client
inside
things
in
a
tab,
for
instance,
and
configuration
for
message,
extensions
and
task
modules
and
whatnot.
A
We
also
generate
the
server
side
component.
As
I
said,
there
are
many
scenarios
where
we
want
to
use
server-side
components
and
that
where
we
are
required
to
use
server-side
components
such
for
for
bots,
so
we
use
a
microsoft
bot
builder
4.8.
In
this
current
release,
4.9
is
coming
in
upcoming
releases,
but
of
course
this
is
all
open,
so
you
can
just
replace
it
with
whatever
version
you
prefer.
A
We
also
using
the
the
node
express
as
the
web
server,
which
has
a
lot
of
plugins.
If
you
want
to
add
features
such
as
ashraedy
sign-in,
logging,
telemetry
and
whatnot,
and
then
we
have
a
specific
component
called
express
msteam's
host,
which
makes
it
easier
for
you
to
essentially
create
a
bot
class
and
have
that
connected
to
the
express
server
and
that
interface
by
by
using
declarative
approach
on
the
classes
in
typescript
using
attributes.
Those
attributes
are
used
across
the
different
kind
of
tabs
box,
messaging
extensions,
etc,
etc,
and
also
this
site
is
typescript
as
well.
A
It's
running
node.
So
the
good
thing
is,
if
you're,
using
a
more
advanced
data
model,
both
the
client
side
and
server
side
can
reuse
the
same
kind
of
typescript
components
or
definitions.
I
would
say
we
also
created
the
teams
apps
manifest,
which
is
a
manifest
file
declared
in
json,
which
contains
pointers
to
all
the
different
kind
of
tabs,
the
bots,
connectors,
etc.
A
A
So
here's
where
I
go
and
paste
my
my
real
bot
id
once
I
registered
in
azure
portal,
there's
some
other
things
in
here
that
we
haven't
configured
for
this
application.
But
I'd
recommend
you
take
a
look
at
these
ng-rock
settings
and
which
are,
if
you
building
sort
specifically
around
bots.
If
you're
building
bots
you
will
you
can
use
ng-rock
to
publish
your
localhost
to
be
available
on
internet
using
a
real
domain
name.
A
Then
we
have
all
the
source
code
under
source
here,
there's
two
folders
the
app
and
the
manifest
and
start
with
manifest,
and
that's
where
your
sort
of
team's
application
are.
The
teams
application
is
fairly
thin.
It's
essentially
this
json
file
with
pointers
to
the
different
kind
of
endpoints.
So
if
we
take
a
look
at
this
one,
it's
dynamically
generated
based
on
your
settings,
and
you
can
also
see
we
have
these
replaceable
parameters
in
here
and
replacing
from
the
dmv
file,
application,
id
diversions,
package
names
and
here's
our
tab.
A
A
So
this
is
something
new
that
the
joe
teams
generate,
takes
care
of,
creating
and
updating.
If
you
run
it
more
times,
as
I
mentioned
before,
but
also
you
can
go
in
here
and
modify
and
fix
that
as
well.
We
have
the
two
icons
and
the
color
icon
and
the
outline
icon.
You
can,
of
course,
replace
them
in
the
app
folder.
We
have
a
set
of
folders
and
components.
First
of
all,
we
have
the
server.ts.
A
This
is
something
that's
generated
for
you
and
that
is
sort
of
set
up
the
setup
of
the
express
server
and
it
dynamically
load
in
all
the
bots
tabs,
etc.
That
is
required
for
this.
If
you
want
to
add
more
stuff
to
your
express
server,
this
is
where
you're
going
to
modify
or
and
add,
more
components
or
api's
or
the
authorization
authentication
all
those
kind
of
things.
A
A
All
of
these
are
essentially
just
web
pages
like
this,
so
you
can
modify
and
do
whatever
you
want
in
there,
and
also
since
it's
expressed,
you
can
use
server-side
rendering
if
you
want
to
and
switch
out
for
for
jade
or
other
kind
of
templating
mechanisms
under
scripts.
That
is
where
we
have
all
the
client-side
scripts.
So
in
this
case
we
created
a
tab
and
a
bot
and
the
bot
had
a
faq
page.
So
if
we
take
a
look
at
the
tab,
we
have
three
components
in
here.
We
have
the
actual
tab.
A
We
have
the
configuration
page
and
the
remove
page
and
those
are
all
react
components
using
the
fluent
ui
react
node
star,
and
this
is
how
we
scaffold
out,
and
this
is
what's.
This
is
how
we
set
up
the
the
page
in
the
tab.
We
just
registered
theme
handlers,
and
so
we
can
switch
back
forth
between
the
themes
we
initialize
the
application
and
also
then
finally
renders
out
the
application
here
and
the
same
kind
of
thing
for
our
faq
page
for
our
bots.
A
We
got
a
page
that
looks
fairly
similar
to
this
one,
but
where
you
can
go
in
and
modify
the
contents
of
your
your
actual
faq
page.
So
that's
what
scripts
do
under
the
other
two
folders
here
are
one
for
the
tab
and
for
the
tab.
It's
fairly
simple,
since
tabs
are
predominantly
client-side.
The
only
thing
we
do
there
is
add
an
attribute
to
this
pnp
tab
transmit,
which
makes
sure
that
these
pages
cannot
be
iframed
unless
you're
in
the
team's
team's
environment.
A
So
within
teams,
yes,
you
can
be
iframe,
but
you
can't
iframe
it
into
a
custom
application.
If
you
still
want
to
do
that,
you
just
remove
these
attributes
for
the
pot,
which
is
more
advanced.
This
is
where
we
scaffold
out
the
bot
that
inherits
from
the
team's
activity
handler.
So
this
is
where
you
can
go
in
and
modify
how
your
bot
will
work
and
sort
of
the
dialogue
for
that
bot.
A
So
that's
something
essentially
how
the
application
looks
like
it's
fairly,
simple,
where
you
find
all
the
files
under
source.
So
once
we
start
building
this,
it
will
create
two
new
folders
one
called
package,
and
one
called
this.
The
package
is
where
your
manifest
will
be,
with
the
replace
all
the
parameters
replaced
and
that's
what
you
upload
to
microsoft
teams
and
in
the
dist
folder
is
where
you
all
your
deployment
files
are
there
or
the
runtime
files
which
you
might
deploy
to
azure
or
whatever
you
want
to
host
this.
A
So
let's
finish
this
and
see
how
we
get
from
from
our
code
to
building
our
package
to
deploying
it
and
then
running
our
solution
to
do
this,
we
do
have
four
main
tasks.
To
do
that
so
gulp
build
will
just
build
the
solution,
so
you
can
verify
your
server
inside
and
client
side
code
works.
Gulp
manifest
will
create
the
actual
package.
Gulp
serp
will
build
and
create
the
manifest
and
everything
and
but
start
everything
on
localhost.
A
If
you
want
to
test
out
your
web
sort
of
the
tab,
etc
without
hosting
it
in
actual
teams,
as
I
mentioned,
ng-rock
is
super
important
if
you
want
to
deploy
things
or
test
things
in
microsoft,
teams
with
bots
etc.
So,
therefore,
we
have
a
specific
command
called
gulp
ndrock
serve
which
will
spin
up
ndrock
and
with
that
configuration,
and
if
you
don't
have
an
and
your
pay
subscription,
it
will
automatically
create
a
random
domain
name
for
you
and
you
can
upload
that
application
to
microsoft
teams.
A
A
Practice
to
build,
deploy
and
run
our
application.
We
need
to
run
golfbandyrock,
serve,
use,
ndrop2
and
host
our
application,
publish
it
on
the
public
internet.
It
will
take
you
a
few
seconds
up
to
a
minute,
the
first
time
you're
on
this
one.
But
as
you
can
see,
we
start
the
ndrop
first
then
we
package
the
manifest.
A
So
once
application
has
finished
and
it's
up
and
running
you
can
see,
the
server
is
running
on
port
3007.
Here
it's
public
published
on
the
public
internet
net
using
ng
rock.
We
go
over
to
microsoft
teams.
We
go
into
the
team
and
the
channel
here
and
we
side
the
application
by
uploading
a
custom
app.
A
We
navigate
to
the
the
folder
we
have
for
project
package
and
the
zip
file
here
is
what
we
upload.
Once
we
upload
that
one.
You
will
see
all
the
information
about
your
application,
you
can
click
add
and
we
will
have
the
application
in
our
teams
site
loaded
in
there.
You
can
of
course,
upload
it
to
the
app
store,
also
in
the
local
app
store.
If
you
want
to
now,
we
can
see
in
the
general
channel
we
get
the
bot
posting
and
the
the
hello
message.
A
Essentially
we
can
go
in
to
tabs
here,
click
on
add
we
will
find
our
tab
in
the
listing
and
it's
actually
called
pnp
demo.
That's
what
we
call
it
click
on
that
one
get
to
the
configuration
dialog
first,
where
I
can
understand
the
random
value.
So
this
is
just
a
sample.
Click
save
and
we
will
have
our
tab
visible
inside
our
teams.
A
That
is
it
folks.
Now
you
know
how
to
install
create
scaffold,
build
deploy
a
micro
teams
app
using
the
old
teams
generator,
and
I
think
this
is
the
interesting
point
here-
is
extremely
completely
comprehensive
solution
for
building
micro
teams
apps.
It
is
fully
open
source,
it's
driven
by
the
pmp
community,
so
all
contributions
are
welcome.
A
You
will
find
some
tutorials
and
more
demos
at
the
ak.msl
teams.
If
you
want
to
read
more
on
teams,
development
and
understanding,
sort
of
the
manifest
go
to
atm
teams
dev
and
then,
of
course,
we
have
a
great
series
of
five
minute
videos
on
the
pmp
youtube
channels.
You
can
go
there
and
check
out
more
videos.
A
Thank
you
for
listening
and
hope
faithfully.
You
learned
something
new
today
and,
of
course,
we're
looking
for
your
feedback,
so
we
can
do
this
more
often
so
go
in
there
and
rate
it
high
or
low,
depending
on
how
you
feel,
give
us
feedback
and
tell
us
what
you
want
to
see
more
in
the
next
pnp
virtual
conference.