►
From YouTube: UCAN Build Apps with IPFS - Chris Anderson, Alan Shaw
Description
Learn how content addressed user-centric protocols like IPFS, DID, and UCAN will change the web, and how to build Node.js applications using them.
The web3.storage team will share the latest APIs and walk you through building your own application data model. Start with DID-based self-sovereign auth, a great opportunity to learn about the next wave of digital identity, and write code to upload files as well as JSON objects. They'll discuss IPFS data structures like IPLD trees and graphs, and how they can be used in applications.
A
Okay,
we're
going
to
go
through
the
intro
kind
of
quickly
so
that
we
have
time
to
do
some
Hands-On
keyboard
stuff.
At
the
end,
one
thing
you
can
do
right
now
to
save
yourself
some
time
later
is
clone
this
GitHub
repo
and
run
npm
install
if
you
plan
on
doing
Hands-On,
keyboard
stuff
and
that's
got
like
the
stages-
we're
going
to
do
like
a
Build
Together
thing,
but
maybe
you
feel
lazy,
and
you
just
want
to
look
at
the
commits
in
that
repo.
A
So
it's
a
good
idea
to
scan
this
QR
code
while
it's
on
the
screen
so
yeah.
What
we'll
do
is
talk
a
little
bit
about
the
background,
we'll
talk
about
a
couple
of
our
apis
and
then
we'll
do
some
coding
and
get
down.
You
know
into
the
editor,
so
web3
storage
is
the
easiest
way
to
store
your
data
on
the
decentralized
web.
It's
the
easiest
way
to
upload
to
ipfs
and
it's
the
web
scale
way
and
the
way
that
makes
it
fast
enough
for
the
application
experience
that
your
users
are
looking
for.
A
A
So
the
solution
is
unlocking
the
data
layer
allowing
you
to
have
data
anywhere
and
by
looking
data
up
by
CID
I'm
sure
most
of
y'all
are
familiar
with
ipfs
and
the
verifiable
data
retrieval
that
it
enables.
We
think
that
those
properties
plus
the
performance
and
scale
and
price
that
we
offer
make
a
better
application
platform
than
web2.
A
So
we
have
a
handful
of
apis
today,
we're
going
to
focus
on
W3
up,
but
you
also
get
access
to
our
high-speed
Gateway
W3
link,
which
uses
a
global
content
delivery
Network.
So
any
files
or
images
you
upload
to
web3
storage
are
going
to
be
delivered
to
your
end
users
with
the
you
know,
speed
and
latency.
That
is
best
in
class,
so
you're
not
making
any
compromises.
A
We're
growing
fast,
mostly
just
want
to
share
this
to
to
show
you
know
early
on
one
of
the
things
that
triggered
our
growth
was
the
nft
community
decided
that
ipfs
is
the
right
way
to
store
verifiable
data
for
good
reasons,
and
that
got
us
a
lot
of
early
growth.
But
since
then,
we've
been
growing
across
the
board
with
you
know
all
kinds
of
web3
applications
and
web
2
as
well.
A
A
Ipfs
you're
familiar
with
it's
for
looking
up
content
by
content
identifier
and
what
it
means
in
this
context
is
that
you
write
apps
that
talk
about
what
the
data
is
not
where
the
data
is.
That's
why
the
data
can
be
anywhere.
You
can
pull
a
block
from
whoever's
got
it
fastest
did
is
a
web
standard
for
device,
identity
and
the
job
it
does
here
is
non-extractable
key
pairs,
so
just
like
in
the
previous
talk.
A
We
think
that
Keys
should
be
tied
to
devices,
and
that
gives
you
a
more
robust
user
identity
and
then
the
last
protocol
on
the
screen
is
you
can,
which
is
relatively
new,
but
a
lot
of
folks
in
the
ecosystem
are
using
it.
We
had
blue
sky
on
the
stage
earlier
today,
they're
using
ucan
Visions
here
also
they're
using
ucan,
and
what
is
it?
It's
like
a
JWT.
What's
a
JWT,
it's
a
cookie!
A
So
what
ucans
are
is
similar,
but
it's
not
just
the
service
that
must
sign
it,
but
also
the
client
and
that's
enabled
by
the
client
having
private
keys
on
hand,
and
it
means
that
if
your
ucan
gets
copied
somewhere
away
from
you,
it's
not
an
attack,
vector
or
security
hole,
because
it's
your
private
key.
That
makes
that
you
can
have
the
ability
to
be
invoked.
A
So
we
use
that
as
the
atom
of
delegation,
which
is
how
you
would
say
taking
account
from
this
device
and
make
it
show
up
also
on
this
account
on
this
other
device
or
how
you
would
allow
your
end
users
to
upload
to
your
your
services
account,
instead
of
creating
their
own
account.
So
we'll
talk
later
and
get
into
exercises
about
how
you
can
set
up
like
either
an
app
paid
or
a
user
paid
storage
account
model
as
well
as
Hybrid
models.
A
So
again,
what
does
this
mean?
It
means
you
can
have
data
anywhere.
It's
universally
addressable.
You
can
get
that
data
by
CID
from
us.
You
can
get
it
from
anyone
else
in
the
ipfs
network
and
because
those
cids
are
immutable.
They're
super
fast
to
cash,
like
I
mentioned
we're
in
the
global
CD
and
so
data
you
upload
to
us
is
going
to
be
as
fast
as
data
put
anywhere
on.
You
know,
sort
of
the
forward-looking
side
of
this
with
verifiable
data
that
could
be
anywhere
and
with
the
ucan
execution
model.
A
It
opens
the
door
for
serverless
to
move
from
the
cathedral
to
the
bazaar.
So
today,
if
you're
writing
a
serverless
function,
there's
just
a
handful
of
places.
You'd
go
to
execute
it,
but
what
this
opens
up
is
the
ability
for
anyone
to
stand
up
an
API
that
can
play
in
the
ecosystem
and
be
serverless
for
your
application.
A
So
we'll
talk
about
the
W3
up
API
first,
and
this
is
the
like
base
API,
that
the
other
clients
use.
So
it's
improvement
over
our
previous
API
is
streaming
car
file
generation.
We'll
talk
more
about
car
files
in
a
minute
what
it
means
for
you
is
any
size
file.
Any
complexity
of
directory
can
be
uploaded
in
a
streaming
Manner
and
it's
not
going
to
overwhelm
the
client
or
the
server.
It's
verifiable
like
deeply
verifiable
in
the
sense
that
the
data's
not
just
stored
underneath
identifiers.
A
But
you
know
the
content
identifier
before
we
do
so.
You
can
make
sure
that
your
data
Integrity
is
maintained
through
the
whole
pipeline.
You
could
do
things
like
queue
up
the
CID
you're
about
to
upload
into
another
system
and
then
have
that
system
wait
for
the
upload
to
finish,
and
then
the
delegation
that
I
talked
about
allows
you
to
have
all
those
different
business
models.
A
So
when
you
use
it
it's
as
easy
as
the
upload
command
and
that's
what
we're
about
to
do.
If
you
want
to
go
through
this
quick
start
with
us,
this
is
a
more
lightweight
npm
install.
So
we
didn't
need
to
do
it
earlier,
but
yeah.
If
you
want
to
do
this,
then
you'll
be
set
up
with
an
account
and
I'll
walk
you
through
the
experience.
You'd.
Have
you
know
on
your
laptop?
A
If
you
did
do
this,
so
the
first
line,
installs
the
command
line
tool
W3
up
ID
generates
the
local
key
pair,
so
it
just
creates
the
identifier
or
public
private
keypad.
That's
going
to
be
used
for
the
ucan
operations
and
in
the
app
paid
model.
You
don't
need
to
do
the
next
step
right
or
that
the
user
doesn't
need
to
do
the
next
step.
They
could
register
with
your
app
instead
of
with
web3
storage
we'll
get
into
that
later.
But
in
this
model
this
is
going
to
be
a
lot
like
the
user
paid
model.
Developer.
A
Standing
up
accounts
want
to
own
those
accounts
when
they're
doing
it
on
the
CLI,
so
you'll
do
W3
up
register
and
that
sends
you
an
email
and
when
you
click
the
link
in
the
email,
the
register
command
completes,
so
that
same
API
feel
is
what
you'll
get
like
in
the
web.
Ui
as
well
as
in
the
client,
because,
what's
happening
under
the
hood,
is
the
register.
A
Command
is
just
awaiting
for
the
process
to
finish
and
in
your
code,
you'll
just
sit
on
that
await
until
the
user
clicks,
the
link
in
the
email
and
then
your
app
picks
back
up
again,
once
you're
registered,
you
can
run
W3
up,
who
am
I
to
see
who
your
account,
you
know
account.
Information
is,
and
then
this
last
command
the
Bold
one
is
what
you'd
use
all
the
time
upload
your
you
know
create
react
app,
build
or
your
images,
your
nft
drop
or
whatever
it
is.
You
want
to
upload.
B
B
Generate
a
a
kind
of
a
keeper
which
is,
as
you
probably
well
know,
like
a
public
and
private
key
and
that
gets
us
a
decentralized
identity
which
is
Super
Rad
and
then
next
up,
we
send
a
ucan
invocation
to
register
that
did
with
the
service.
We
call
this
W3
access
because
it
gives
you
access
to
use
the
service,
and
so
this
is
a
one
time
thing
per
device,
but
once
you
are
registered,
you
can
build
a
dag
from
your
files
or
data
in
a
tag.
B
So
maybe,
like
that's
101
for
you
ipfs
guys,
but
anyway,
the
file
format
that
we
use
to
actually
transfer
a
dag
to
us
over
HTTP
is
a
car
file
and
car
stands
for
Content
addressed
archive,
so
kind
of
like
guitar.
But
it's
a
car.
That's
why
there
are
cars
on
the
screen
right
now,
because
you
know
what
cars
are
but
anyway.
So
what
we
do
is
we
pack
that
dag
into
the
car
and
then
we
split
it
into
multiple
chunks
depending
on
the
size
it
might
just
be.
B
It
might
be
able
to
fit
into
one
chunk,
but
we
might
need
to
chunk
it
up
cool
and
then
so,
once
we've
got
kind
of
chunks,
then
what
we
do
is
we
ask
our
service
where
we
should
actually
upload
that
data
and
we
get
back
a
signed,
URL
and
and
then
we
upload
our
chunks
every
every
Chunk.
We
ask
for
a
signed
URL,
and
so
we
can
go
direct
to
the
place
where
it's
it's
gonna
live
and
they
go
into.
B
They
go
into
buckets,
and
this
could
be
any
kind
of
bucket.
Really
it
doesn't
have
to
be
the
same
one,
each
time
they
they
can
be
like
S3
buckets,
they
can
use
cloudflare
R2
buckets
as
well,
but
either
way
like
it's
it.
The
service,
that's
providing
the
buckets
is
the
thing
that's
providing
the
scalability
here,
which
is
rad.
It
means
we
don't
have
to
worry
about
that
so
much
but
anyway,
so
once
they've
got
into
buckets.
B
Finally,
our
our
implementation
of
ipfs
elastic
ipfs
comes
along
and
indexes
the
blocks
in
the
car
that
was
uploaded
to
the
bucket
and
so
elastic
vessels
are
implementation
that
runs
in
the
cloud
and
once
the
blocks
are
indexed,
they
are
available
to
the
ipfs
network
and
on
HTTP
IBS
HTTP
gateways,
so
that's
cool
yeah.
So,
finally,
the
final
thing
that
needs
to
be
done
is
we
just
send
a
request
to
register
and
upload
as
a
collection
of
car
files,
which
are,
which
is
the
chunks
that
we
send.
B
So
that's
the
final
thing
that
happens,
but
why?
Why
is
this
cool?
Well,
aside
from
the
kind
of
small
touch
points
at
like
access
and
then
the
signed
URLs,
the
you're,
basically
uploading
data
directly
to
to
buckets,
which
is
rad
and
like
I,
said
that
scales
to
as
much
as
kind
of
Amazon
or
cloudflare
can
scale
so
like
big
scale.
So
that
helps
us
because
we
have
a
lot
of
stuff
coming
in
and
it
needs
to.
B
B
Oh,
it's
me
again,
okay
w3ui!
So
this
is
a
library
of
components
for
building
interfaces
and,
if
you're
familiar
with
tan
stack,
you'll
feel
right
at
home
here,
they're
they're
headless,
so
they
don't
actually
have
anything
to
say
about
how
it
things
look,
but
they
what
they
do
is
they
provide
idiomatic
kind
of
components
and
for
a
variety
of
popular
Frameworks
and
there's
also
core
components.
So
you
can
literally
just
use
like
native
JS,
if
you
like,
so
we
so
yeah
yeah.
Here
we
go.
A
B
So
the
URL
is
beta
dot,
UI,
dot,
web
free.storage
I.
Think
if
you
want
to
go
and
check
it
out,
but
yeah,
so
the
Frameworks
that
are
current
they're.
Currently
there
are
like
react
view
solid,
I,
think
we're
about
to
support,
react
native
and
felt
so
yeah.
You,
too,
you
build
your
app
in
your
framework
and
if
you
want
to
use
w
web
free
stuff
to
store
your
users
data,
then
you
can
pick
one
of
these
off
the
shelf
and
it
integrates
nicely
in
your
app
gives
you
the
Primitives.
B
B
We've
got
an
uploader
component
which,
like
I,
said
it
helps
with
that
creation,
side
of
things
the
car
splitting
and
uploading
and
then
an
uploads
listing
components
so
which
like
helps
you
list
out
the
the
cids
of
data
that
you
previously
uploaded.
Essentially
so
pretty
simple,
yeah
I
said
that
the
Frameworks
that
we
support
already
and
the
code
sandbox
yeah
you
pointed
out
already
so
we're
all
good.
A
There's
a
preview
of
what
you'll
do
you'll
start
from
one
of
the
example
apps
that
comes
with
w3ui,
like
the
one
you
just
saw
in
the
code
sandbox
and
then
we'll
add
a
web
camera
to
it,
change
it.
So
the
web
camera
data
is
getting
uploaded
and
then
list
the
photos.
So
you
get
an
experience
like
the
one
that
happens
when
we
click
this
link.
A
A
B
So
what
I
recommend
you
do
is
check
her
out
check
out
the
First
Resource
in
the
links
there,
which
has
a
more
step-by-step
like
information
on
how
to
do
that
and
then
the
second
challenge
in
the
node.js
track
is
to
create
a
HTTP
API.
That
essentially
does
the
same
thing.
So
you
pass
it
a
a
a
a
decentralized
identifier
and
it
will
delegate
capability
to
that
identifier
to
do
uploads,
and
then
you
can
use
that
to
actually
do
uploads.
A
So
that
code
is
what
enables
you
as
a
developer,
to
do
the
app
paid
model.
So
what
we
wanted
when
we
created
all
this
is
that
you
could
have
some
single
page
app
or
whatever
react.
App
drop
our
components
into
it
as
a
developer,
have
uploads
working
right
away
and
like
never
have
to
pay
a
bill
or
anything,
and
so
that's
the
default
flow.
Your
users
get
prompted
to
create
web
3
storage
accounts.
Probably
90
of
them
live
in
the
free
tier
forever
and
you
don't
have
to
have
a
web.
B
Cool
okay
answer:
the
second
track:
if
you're
a
bit
more
front-end
focused,
is
this
one's
for
you,
and
so
this
is
using
the
W
free
UI
components
that
we
just
showed
build
a
selfie
app
where
you
can
capture
images
from
your
browser
and
upload
them
to
W3.
Sorry,
web
free
dot,
storage
and
that's
what
Jay
Chris
demoed
a
second
ago,
and
it's
actually
going
to
be
walking
through
building
that
app
on
stage
with
you
today,
but
yeah
check
check
it
out.
Choose
your
challenge:
choose
your
adventure
and.
A
This
slide
should
be
printed
out
on
your
table,
so
I'm
not
gonna,
leave
it
on
the
screen,
but
I
will
leave
this
on
the
screen
because
we
brought
Wi-Fi
for
folks
who
are
feeling
crunched
so
I'll
just
leave
that
up
for
a
couple
of
minutes,
while
y'all
are
deciding
if
you're,
which
Adventure
you're
doing
and
then
I'll
kick
off
the
front.
End
Adventure
on
the
screen
question.
A
Can
you
bring
your
own
Keys?
That's
a
great
question
so,
where
we're
at
today
is
we've
got
the
keys
that
we've
got
so
we
can
proof
of
concept
it,
but
we're
like
actively
working
on
adding
support
for
passkey
like
touch
ID
face
ID
and
I
mean
I.
Guess
the
guy,
who
really
knows
which
Keys
you
can
bring,
is
sit
right
next
to
you.
A
A
What
I've
done
to
create
this
app
is
I
just
took
the
file
upload
app
out
of
the
w3ui
repo
has
a
bunch
of
examples
and
you
don't
need
to
go
get
it
from
that
repo,
because
if
you
clone
to
the
repo
from
that
QR
code
at
the
beginning,
it's
just
going
to
be
the
first
commit.
So
you
could
just
roll
back
to
that.
If
you
want
to
see
it
and
I'll
do
that
again,
so
that
I
start
from
scratch
here.
A
A
A
So,
while
that
npm
is
installing
I'll,
give
you
a
little
sense
of
what's
going
on
in
app.js
and
content,
page
app.js
is
where
the
react
providers
are
triggered.
So
it's
these
wrappers
that
essentially
repaint
when
you're
authenticated
or
when
the
uploader
is
ready
or
when
we
know
who
you
are
and
then
the
content
page
is
rendered
inside
of
there
I'm
going
to
go
ahead
and
do
a
quick,
styling
change,
while
I'm
in
here,
because
I
know
we're
going
to
want
to
take
that
vertical
height
off
of
the
app
and.
A
This
behavior
is
similar
to
the
behavior
that
you
would
see
if
you
were
to
go
through
the
rest
of
this
app.
So
this
is
basically
what
the
app
that
I'm
npm
installing
looks
like
when
it's
running
it'll
be
a
screen
that
pops
up
asks
you
for
your
email
address
and
then
sends
you
an
email
when
you
register.
A
So
that's
the
behavior
of
this
app
and
what's
happening
is
that
it's
having
a
react
hook
to
bring
the
uploader
into
scope
and
then
it
essentially
just
calls
upload
or
upload
file
with
the
file
that
comes
off
the
browser's
form
UI
and
the
CID
is
what
you
expect.
It's.
What
you'd
use
to
compose
a
link
to
your
upload
on
the
Gateway.
A
B
A
A
A
A
A
A
A
A
A
A
A
A
A
So
to
do
the
back
end
delegation
you're,
going
to
use
the
profile
flag
on
the
CLI,
which
is
just
like
a
profile
in
Chrome
or
Firefox.
It
allows
you
to
have
different
sets
of
configs,
so
you
can
pretend
to
be
different
people,
while
you're
working
so
I'm
going
to
create
a
profile
called
another,
and
now
I
have
a
new
profile
and
what
we're
going
to
do
is
instead
of.
A
A
A
A
A
What's
that
yeah
I,
just
we've
only
ever
uploaded
to
One
account
so
now,
I'm
back
acting
as
the
main
actor
listing,
my
own
account
and
I
could
see
the
new
upload
that
was
just
done
so
I
think
that's
the
whole
second
challenge.
This
can
be
done
in
code
as
well,
and
on
that
page,
that's
printed
out.
There's
a
link
to
this
GitHub
repo,
which
is
like
a
function,
an
API
endpoint.
That
would
give
your
end
users
access
to
your
account.