►
From YouTube: Getting started with Teams Toolkit .NET
Description
In this 13-minute demo, Thomy gives a comprehensive overview on Microsoft Teams Toolkit for Visual Studio including a comprehensive demo.
📽️ Presenter: Thomy Goelles (Solvion) | @thomyg
Resources:
✔️ https://github.com/OfficeDev/TeamsFx
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog
A
A
A
What
we
are
using
to
do
that
is
something
called
blazer.
So
what
is
blazer
blaze
is
a
single
page
application
development
framework
and
the
nameplace
has
a
combination
of
the
words
browser
and
razer.net
html
view
generation.
Engine
blazer
lets
you
build
interactive
web
uis
using
c-sharp
instead
of
javascript
blazer
apps
are
composed
of
reusable
web
ui
components
implemented
using
c-sharp,
html
and
css.
A
Both
client
and
server
code
is
written
in
c-sharp,
allowing
you
to
share
code
in
libraries.
Blazer
can
run
client-sides
you
shop
code
directly
in
the
browser
using
webassembly,
because
it's
real.net
running
on
webassembly.
You
can
reuse
code
and
libraries
from
server-side
parts
of
your
application.
Alternatively,
laser
can
run
your
client
logic
on
the
server
client.
Ui
events
are
sent
back
to
the
server
using
signalr
once
execution
completes
the
required
ui
changes
are
sent
to
the
client
and
merged
into
the
dom
for
more
information
check
out
the
url
on
the
bottom
blazer.net.
A
Next
to
blazer
the
big
topic
of
this
video
is
the
team's
toolkit
and
the
team's
toolkit
actually
is
part
of
something
that
is
called
the
microsoft
teams
framework
or
teams.
Fx.
A
teams
toolkit
actually
only
is
the
ide
extension
for
visual
studio
code
or
visual
studio.
So
there
is
a
teams
toolkit
for
racer
studio
code
that
uses
javascript
to
create
all
those
things
mentioned
here
in
this
list,
and
we
will
use
visual
studio
and
net
and
blazer
to
create
only
a
couple
of
the
elements
of
this
list.
A
A
We
will
use
the
identity
mechanisms
of
the
teams
fx
and
the
microsoft
teams
toolkit
to
have
a
single
line
authentication
to
microsoft
graph
and,
of
course,
we
will
have
a
look
at
the
laser
support
of
all
those
things.
I
highly
recommend
you
to
check
out
the
link
on
the
bottom
github.com
forward,
slash
office,
dev
forward,
slash
teamsfx.
This
is
actually
the
repository
of
the
whole
team's
toolkit.
A
There
is
a
part
for
javascript
world
and
under
packages
and
dotnet
sdk
there,
you
can
see
the
efforts
and
the
changes
that
are
made
to
the
visual
studio
extension,
a
big
big,
big,
emphasize
on
the
word
preview.
Here
we
are
still
in
a
preview
phase
of
the
whole
toolkit.
So
it's
not
ga
it's
not
general
available,
there's
not
yet
the
release
version
present,
but
we
expect
it
to
be
there
in
the
coming
months.
So
you
can
check
out
what
will
be
available
to
you
as
a
developer
in
the
future
already
today.
A
One
last
thing
actually
is
the
installation
of
the
themes
toolkit
that
different
between
visual
studio,
2019
and
visual
studio
2022
in
2019.
It's
a
classic
wishes
studio
extension.
So
you
need
to
go
to
your
menu
extension
and
search
for
teams
toolkit.
But
since
february
15
you
can
install
visual
studio
2022
in
the
version
17.1.0,
and
there
is
actually
a
component
in
the
visual
studio
installer.
You
need
to
open
up
your
installer
click
to
the
asp.net
and
web
development
section
here
and
then
find
the
yeah
check
box
with
microsoft
teams,
development
tools.
A
A
This
is
the
correct
version
and
I
will
create
a
new
project.
I
will
select
the
microsoft
teams
app
template
here.
That's
the
template!
Actually,
we
got
from
the
component
that
we
installed
earlier
click
on
next
and
give
it
a
creative
name
teams,
toolkit
intro
all
right
create,
and
this
screen
already
is
the
part
of
the
wizard
for
your
team's
application.
So
we
want
to
create
a
tab.
That's
the
only
artifact
we
are
able
to
create
by
now.
There
will
be
in
the
future,
but
of
course
I
will
select
an
account.
A
I'm
going
from
a
microsoft.
365
developer
account
because
I
will
need
permissions
to
create
an
azure
active
directory
application
and
also
a
teams
application
the
team
developer
tenant.
So
I
select
my
account
here
and
you
can
click
here
if
you
don't
have
a
developer
tenant
yet,
and
I
highly
recommend
to
create
one
click
on
create,
wait
for
a
couple
of
seconds
for
visual
studio
to
scaffold
out
the
project,
and
here
we
are
so
we
got
our
themes.
Toolkit
project
with
a
typical
blazer,
blazerish
structure
of
files
here
and
we
are
gonna
immediately.
A
A
A
We
will
have
a
look
at
the
code
in
a
couple
of
seconds.
Second
part
of
the
demo
is
that
there
is
an
authorized
button
down
here.
Until
now,
we
are
only
using
the
context
from
teams.
We
are
not
talking
to
microsoft
graph.
If
I
click
on
authorize
here,
yep,
the
toolkit
opens
up
a
consent
screen
because
we
created
a
new
azure
id
application
registration
with
with
installing
or
scaffolding
our
project
same
name
jtk
intro.
A
A
How
is
that
done?
Let's
head
over
to
visual
studio,
I
will
stop
the
debugging
for
a
second
and
let's
dive
into
the
code,
to
give
you
an
overview
introduction
to
the
team's
toolkit.
So,
first
of
all
in
the
app
settings
you
see
that
the
toolkit
created
a
client
id
and
created
all
the
different
and
necessary
configuration
steps
for
our
endpoint,
the
authority,
tab,
endpoint
and
all
the
configuration
based
on
two
things:
the
name
we
provided
in
the
wizard
and
the
actually
account
we
used.
A
So
when
scaffolding,
the
project,
it
immediately
created
those
artifacts
and
we're
up
and
running
with
just
pressing
f5.
So
that's
step
one
if
you're,
actually
looking
for
the
credential
or
the
secret,
just
small
tip.
Look
at
manage
user
secrets.
It's
in
there
in
terms
of
structure.
We
are
creating
a
tab,
so
there
is
a
tab.
A
Razor
page,
that's
pretty
pretty
simple,
a
div
with
just
a
welcome
component,
because
the
toolkit
already
uses
a
lot
of
laser
components
in
my
component
folder
I
have
a
welcome.razer
file
that
actually
is
the
first
screen
of
the
demo
and
in
there
we
saw
that
it
greeted
me
with
my
name,
and
here
we
are
current
user
username
or
an
error
message.
If
there's
a
problem
and
how
did
it
receive
my
name
or
yeah?
Look
at
it.
A
Actually,
this
is
the
line
here.
Await
teams,
user
credential
get
user
info
async,
so
this
team's
user
credential
is
actually
an
object
that
you
get
from
the
team's
toolkit.
So
that's
something
the
library
provides
you
with.
You
just
need
to
call
that
and
you
get
the
basic
user
information
if
you
want
to
go
out
to
the
graph
and
get
more
data
next
to
just
the
basic
name.
A
You
see
here.
Basically,
it's
already
again
using
a
couple
of
components.
So
this
is
the
button
here
where
we
clicked
on
it
to
authorize,
and
then
we
have
a
profile
card.
The
profile
card
basically
gets
provided
with
the
data
from
our
graph
call
and
is
actually
responsible
for
rendering
the
picture
and
the
email
address,
but
we
want
to
look
at
the
actually
graph
call.
A
A
It's
pretty
simple
graph
get
graph
service,
client
and
the
get
graph
service.
Client
method
actually
uses
a
ms
graph
of
provider
with
the
team's
user
credential
and
our
scopes.
That
is
something
that
you
get
from
the
microsoft
teams
toolkit
as
well.
So
this
is
a
class
that
you
can
use
or
an
off
provider
that
you
can
use
from
the
library
and
hand
it
over
to
the
graph
service
client,
so
creating
a
new
graph
service
client
with
the
set
provider.
So
it's
implementing
the
interface
that
is
used
by
the
net
library
of
microsoft.
A
Graph
from
there
we
just
get
a
regular
graph
service
client
from
the
net
library.
So
there's
a
nuget
reference
to
the
net
library
of
microsoft
graph
in
the
project
as
well
and
with
that
graph
client,
it's
pretty
standard
graph
dot
me
dot,
request,
get
async
and
then,
of
course,
a
little
bit
of
marshalling
to
get
the
actual
picture
from
the
base64
encoded
string
to
get
an
image
and
that's
the
picture
so
pretty
pretty
straightforward
to
call
the
graph.
A
If
you
want
to
call
other
endpoints,
you
would
need
to
go
to
your
azure
id
environment,
configure
additional
permissions
position,
scopes
and,
of
course,
add
those
also
here
to
the
scope,
and
then
you
can
call
whatever
you
are
allowed
to,
where
you
want
to
add
the
graph
and
use
it
in
the
microsoft
teams
toolkit.
Okay,
that's
it
from
an
introduction
point
of
view.
So
short
recap:
what
did
we
saw
today?
We
talked
about
what
is
blazer.
A
We
talked
about
what
is
the
microsoft
teams
toolkit
for
visual
studio,
so
this
structure
over
here
how
to
install
the
toolkit
and
we
did
a
short
demo,
pressing
f5
and
seeing
the
experience
that
is
instantly
available
after
installing
and
using
the
template
with
that.
Thank
you
for
attention
and
happy
coding.