►
From YouTube: ZOK ⚡ Cohort 1, Community Demo
Description
Link to slides and resources: https://rb.gy/50z8l
From UI to ZK. Introduction for front-end developers to SnarkyJS zkApps.
Overview of zkApps and how to build them from a front end perspective.
Introduction to zero knowledge, and provide recourses for self studying.
Demo: build a simple zkApps utilizing reusable components with ZOK
A
Thiago
the
recording
has
started
hello,
everyone
watching
the
recording
and
anyone
here
right
now
in
the
room.
Welcome
today
we
have
Santiago
from
Zuck
he's
going
to
be
doing
his
community
demo
from
from
cohort
one
his
project
from
cohort
one
and
he's
zoc,
so
I'm
going
to
give
you
the
floor
Santiago
and
thank
you
for
doing
this
for
us
today.
B
Well,
welcome
and
thank
you
all
for
your
time
and
I
appreciate
that,
so
what
we're
gonna
look
at
today,
it's
a
an
introduction
to
serial
knowledge,
an
overview
in
general
and
especially
from
a
front
end
perspective
students,
snarky,
GS,
now
01
GS,
based
on
typescript,
it's
very
easy
for
front-end
developers
to
get
onto
and
jump
basically.
But
there
are
some
very
specific
things
about
your
knowledge
and
building
with
Mina
that
we
learn
through
ourselves.
B
B
What
is
see
your
knowledge
briefly
and
common
misconceptions:
we're
gonna
see
some
different
examples
from
cohort
one
and
the
examples
from
Mina,
the
minasa
docs
and
finally,
we're
gonna
see
suck
so
first
off
hard
choices,
easy
life,
easy
choices,
hard
life,
and
this
is
true
for
everything
also
for
developing.
So
this
is
regarding.
B
Knowledge,
so,
in
order
to
understand
serenology
mathematics,
you
need
to
have
a
base
on
cryptography
and
for
to
have
a
base
on
cryptography.
You
need
to
understand
mathematics,
so
it
is
very
important
to
even
though
you're
gonna
treat
most
likely
things
as
a
black
boxes.
It
is
good.
It's
a
good
thing
to
understand.
B
What's
going
on
at
least
from
you
know
briefly,
and
we're
gonna
see
why
now
so,
fundamentals
having
strong
fundamental
is
essential
and
again
this
all
works
as
as
onions,
so
you've
got
to
understand
basic
principles
of
mathematics
like
What's
a
prime
number,
and
then
with
that,
then
you
understand.
What's
cryptography
and
with
christography
thing
you
can
understand
these
Central
ledgers
and
once
you
understand
that,
then
you
can
drop
into
serial
knowledge.
And
if
you
skip
one
of
these
steps,
then
you're
gonna
miss
you
know
some
fundamentals
and
you
can
have
gaps
in
your
knowledge.
B
So
it's
even
though
it's
hard
and
it
might
be
lazy,
I'm,
not
sure
what
everyone's
background
is.
But
myself
my
background
is
in
medicine.
So
when
I
got
into
all,
this
I
had
to
start
from
Syria,
basically
and
review
a
lot
of
basic
math
that
I
had
forgotten.
So
it's
always
a
very
good
investment.
I
I'm
gonna
show
some
resources
at
use
for
myself
and
it
is
a
good
investment
to
to
have
some
math
background.
B
Let
me
check
is
Lambda
class
math
survival
kit
for
developers
so
get
up,
read
through
this
and
try
to
understand
everything,
and
if
you
don't
understand
something,
jumped
off
that
and
go
into
a
rabbit
hole
into
into
your
able
to
understand
this.
Full
blog
posts
and
I'll
say
that
you'll
have
a
big
fundamentals
for
cryptography
in
general.
B
B
Pdf
I'll
share
that
with
everyone
shortly
and
we've
got
links
all
everywhere
here,
so
it
is
meant
for.
For
that
code,
words
I'm,
not
sure,
if
anyone's
familiar
with
that,
but
it's
great
resource
for
learning
coding
and
it
has
a
bunch
of
problems
regarding
math
and
cryptography.
So
you
could
use
the
the
flag,
cryptography
and
just
jump
onto
a
bunch
of
cryptography,
kudos
and
then
another
great
book.
It's
a
real
world
cryptography
great
book,
I
highly
recommend
it.
You
don't
have
to
know
any
mathematics
to
to
read
that
book
non.
B
This
other
resources,
loyalty
through
everything
from
the
ground
up
basically
blockchain
and
student
knowledge
programming,
Bitcoin
space
on
Python,
and
you
write
Bitcoin
basically
and
it's
I've
learned
a
lot.
I
haven't
done
the
whole
book,
but
the
first
few
chapters
go
through
single.
Kick
photography.
B
Cryptographic
signatures
protocols
and
you
will
have
Bitcoin
from
the
ground
up
great
and
another
great
resource
for
serenology
genetics.
It
is
paper
but
Max
betskus
it.
It
is
meant
to
explain
serial
knowledge
for
non-math
people
and
it
goes
very
deep
into
it
and
it's
so
easy
and
it
it
goes
from
every
fundamental
like,
for
example,
a
model
of
mathematics.
It
tells
you
about
polynomials
and
it
built
everything
up.
It's
a
paper.
B
B
So
we're
going
to
give
a
very
big
example,
so
I'm
sure
everyone
has
played
with
Wally.
So
let's
say
I
wanna
demonstrate
some
of
the
the
Brewer
and
I
want
to
prove
to
a
verifier
that
I
know
where
one
is
without
showing
where
wall
is
so
what
we
can
do
is
wrap.
Where
is
wallybook
put
a
paper
over
it
with
a
hole
and
show
where
a
wall
is
and
in
that
way,
basically
I'm
able
to
prove
and
convince
you
that
I
know
where
what
it
is
without
showing.
B
Actually,
where
is
and
some
properties
of
your
knowledge
that
it
needs
to
be
complete,
it
needs
to
be
sound
and
it's
to
obviously
use
your
knowledge
so
completeness.
If
a
statement
is
true,
then
the
plural
can
contain
solidifier
soundness.
So
we
are
not
crazy.
Achieving
Brewer
can
accomplish
a
verifier
of
a
false
statement
and
serial
knowledge,
the
interaction
all
the
reveals
if
a
statement
is
true
and
nothing
else
now.
Lastly,
I'll
say
Tara:
there
are
a
bunch
of
protocols
regarding
serial
knowledge
equals
it's
very
early.
B
I'll,
say
I,
think
it's
from
the
80s
85,
since
they
were
introduced
in
cryptography,
but
in
Nina
and
in
General,
within
the
the
blockchain
space,
where
mostly
gonna
use
non-interactive
serial
knowledge
proofs.
What
does
text
mean?
It's
not
interactive.
Non-Interactive
means
that
the
proverb
and
the
verifier
you
don't
have
to
go
back
and
forth.
In
order
to
prove
this
statement,
the
Brewer
generates
a
proof
on
one
end,
and
then
it
only
sends
that
proof
to
the
verifier
and
the
verify
is
able
to
verify
the
proof
without
going
back
and
forward.
B
So
one
branch
of
non-interactive
Serial
knowledge
proof
is
zero
knowledge.
Snacks,
which
stands
for
non-interactive
argument
of
knowledge,
so
means
that
the
profile
is
very
small
and
so
transferring
them
it's
a
very,
very
easy.
I've
got
not
interactive,
which
we
mentioned,
what
it
is
and
the
argument
of
knowledge.
So,
basically
we're
able
to
prove.
B
We
know
something
in
as
soon
matter
and
in
a
non-interactive
way
and
so
Minaj
space
of
pseudo
analysis,
snarks
I
believe
it's
called
I,
think
it's
kimichi
or
is
it
everyone
I
think
the
other
one
is
pickles
I,
don't
know
why
things
so
this
crazy
thing
is
so
complicated,
but
just
to
place
you
on
a
map.
We've
got
City
knowledge,
city
knowledge.
We
got
nothing
to
active
proof
and
in
most
likely
you're
gonna
be
using
Sears
you're
gonna
be
using
snarks
most
likely
if
you're,
interacting
with
blockchains.
B
So
what
are
some
use
cases
and
some
misconceptions
about
them,
so
we
can
use
a
serial
knowledge
for
two
things.
You
know
big
big
as
Big
Ideas.
What
is
privacy
so
am
I
able
to
know
something
without
revealing
what
I
know
a
good
case
will
be
I
want
to
demonstrate
to
you.
I
have
a
good
credit
score
without
showing
that
credit
score.
I
want
to
post
a
message
onto
a
board
without
revealing
who
I
am
I
want
to
cast
about
without
revealing
my
identity
and
so
on.
B
So
that's
a
very
common
use
case
for
privacy,
but
then
you
may
ask
okay,
but
I
know
there
are
other
protocols
using
synonyms
for
as
a
roll
up
or
as
an
L2.
So
people
may
confuse
themselves
and
think
that
there
is
privacy
involved,
but
it
really
there
are
two
different
use
cases.
So
that's
a
very
common
misconceptions,
so
you
can
use
them
for
privacy
as
we
mentioned,
but
you
also
you
can
do
step
to
compress
information,
and
this
is
where
L2
and
roll
ups
and
zero
knowledge
ebms
coming.
So
let's,
for
example,
a
Rob.
B
The
way
it
goes
is
you
got
a
bunch
of
transactions
and
you
wanna
prove
those
transactions
that
that
computation
happen.
So
you
can
use
serial
knowledge
to
in
a
certain
way,
compress
all
those
transactions
and
demonstrate
they
happen
with
the
proof,
so
in
that
sense,
you're
able
to
compress
and
show
that
large
amount
of
computations
happen
without
actually
running
that
computation
again.
So
that's
that's
why
they
are
very
useful
for
wraps.
B
So
we're
gonna
dive
in
a
little
bit
onto
tabs
and
I'll
say
that
Mina
I'm,
not
sure
I,
don't
think
Minister
first
use
case
or
the
first
application
for
see
the
knowledge
daps,
because
you
can
also
do
them
in
ethereum,
for
example,
or
other
EVMS,
and
the
way
we'll
go
to
the
following.
You
need
approval
function
and
every
five
function
all
right.
The
function
takes
a
private
input
and
a
public
input,
or
only
private
inputs.
B
So
in
the
case
we're
trying
to
do
this,
this
in
ethereum,
you
will
use,
for
example,
silicon.
That
is
a
circuit
language
for
generating
probes.
Basically-
and
you
can
do
that
on
your
computer
and
then
have
the
verify
it
in
a
smart
contract
and
it
works
that
that
paradigma
in,
like
in
the
structure,
it's
very
similar
to
snack
house
Nike,
JS
works.
B
B
Language,
it's
very
complicated
and
they
see
lights
like
the
the
barrier
of
Entry.
It's
very
large,
so
mini
makes
this
a
lot
easier,
but
the
paradigma
it's
the
same.
You
got
approver
that
is
going
around
more
most
likely
on
your
web
browser
and
then
we're
going
to
send
the
proof
and
it's
going
to
be
a
contract.
That's
going
to
verify
that
proof
and
lastly,
I'll
say
that
there
is
one
particular
thing
about
the
previous
function:
that's
very
intensive
in
computation.
B
So
it's
if
you're
gonna
run
that
in
your
browser,
it's
it's
gonna,
be
heading
on
load,
so
you're
gonna
take
care
of
that.
As
a
friend
and
developer,
you
can
watch
out
for
the
the
the
building
at
either
the
the
build
of
the
the
the
contract
and
also
when
you
run
the
the
proof
it
might
Cloud
your
web
browser
since,
since
the
browser
has
only
one
one
thread,
so
you're
gonna
do
something
very
intensive.
You
can
clock
everything
and
there
are
ways
around
that
or
we're
gonna
show
a
bit
later.
B
Knowledge
this
taken
from
the
dogs
I,
have
encourage
you
to
go
into
the
Mina
documentation
and
go
through
it
all
pretty
good
and
he'll
explain
everything
in
detail,
but
as
a
review,
so
CK
apps
consist
of
two
parts:
one
smart
contract
and
a
user
interface
for
users
to
interact
with
the
the
ad.
The
time
smart
contractors
to
recall,
waiting
in
o1js-
and
it
turns
cylinders
out-
refers
to
the
UI
plus
the
smart
contract.
One
thing
that
I
had
to
you
know
change
in
the
the
concepts
is
coming
from.
Ethereum
development
set
the
contract.
B
It's
running
on
your
browser
like
the
contracts
not
on
the
chain.
You
are
running
everything
on
your
browser,
your
generating
improved
and
then
you're,
sending
the
proof
to
your
to
the
network,
alongside
with
the
state
transitions,
so
minutes,
gonna
validate
that
that
prove
its
value
and
if
it's
so
then
it'll
add
the
appropriate
transaction.
Alongside
the
the
the
proof.
B
B
We
can
see
that
defined
as
R
and
it
extends
much
contract.
It
binds
a
State
field,
that's
num,
and
then
it
initializes
when
the
contract
is
deployed,
and
then
it
has
a
simple
update
function.
That
gets
gets
this
day
and
it
adds
two
to
it
and
then
it
sets
the
new
state.
Basically,
so
it's
very
very
simple-
and
this
is
going
to
be
alongside
the
UI,
so
at
least
up
for
me,
it's
something
I
have
to
change
in
the
thing
in
the
in
the
way,
I
saw
things
work
out.
B
This
is
all
gonna
be
in
the
browser.
Basically,
so
that's
the
contract,
and
this
is
the
UI,
so
this
will
work
of
a
worker.
So
for
those
that
don't
know,
workers
in
the
web
browser
had
a
way
to.
If
you
will
simulate
multiple
threats,
so
you
could
delegate
some
computation
onto
a
worker
and
then
it'll
run
on
a
thread
and
then
that
would
unclog
your
main
thread.
B
So
you
could
have
your
your
app
work,
basically
I'm,
not
sure
if
I'm
assuming
this
is
a
very
common
thing,
that
everyone
had
as
a
front
a
development
from
ends.
So
you
have,
for
example,
a
very
heavy
for
Loop
and
and
then
everything
just
stops.
Working
and
you've
got
a
proxy
browser
open
it
again
what
happened?
Well,
you
clocked
the
the
thread
on
the
web
browser.
B
So
if
your
proof,
if
your
proof
function
say
hey,
then
you're
gonna
most
likely
give
the
users
travel
and
if
you
don't,
if
they
don't
have
a
Mac
implant,
then
yeah
most
people
don't
explode
it.
You
got
a
bill
for
most
use
cases,
they
might
be
phones.
This
must
be
all
PCS.
So
this
here
is
a
good
practice.
I
think
I'm
later
there
will
be
other
links
to
other
examples,
I'm
not
sure
they're
losing
workers.
B
B
So
we
got
the
the
worker
and
we're
gonna
look
at
some
functions
now,
so
we
got
load
contract,
it
would
import
the
contact
which
is
looked
at
and
it
will
City
that
add
and
then
we
got
compiled.
This
is
what
I
mentioned
that
may
take
a
long
time.
You
gotta
compile
the
contract
before
using
it,
and
then
we
got
any
worker
in
instances.
Did
that
contract?
How
we're
gonna
pass
the
the
keep
to
it
in
order
for
us
to
know
where
we're
gonna
call
that
contract
from
and
then
get
Nam.
B
B
B
B
C
B
They
get
the
proof
of
that
transaction
again.
This
will
be
highly
intensive
in
computation
and
then
they
send
the
transaction
alongside
the
the
extent
change.
If
any
and
yeah
I
hardly
encourage
everyone,
that's
going
to
build
a
front
end
to
go
through
this
understand
it
well
and
try
to
use
it
as
a
template.
B
So
also
cohort
white
examples:
I
went
through
these
pseudo
knowledge
dubs
for
cohort
one
and
I
looked
at
some
examples
that
go
into
the
how
they
manage
state.
For
example,
here
we
go
zero
nodes
humans.
We
could
use
your
knowledge
and
they
got
their
own
instance
and
they
do
things
a
little
bit
differently.
So
you
might
want
to
look
into
this
list
of
examples
to
you
know,
get
ideas
and
understand
a
little
better,
how
you
might
go
about
doing
things
and
not
you
know,
reinvent
the
wheel
and
they
might
be.
D
B
B
B
So,
basically
the
idea
it's
you're
able
to
describe
and
model
data
installed
and
of
that
you're
able
to
create
instructions,
and
you
start
through
your
application
so
for
front-end
developers,
you're
able
to
describe
data
that
you're
you'll
be
able
to
use
both
in
the
front
end
and
in
and
in
in
contracts
in
structs,
so
we're
gonna,
maybe
to
abstract.
So
we're
gonna
see
an
example.
Now.
B
B
The
link,
so
we
got
this
this
track
here
again,
it's
gonna
be
a
number
it's
gonna,
be
it
has
to
be
greater
than
one
so
and
other
examples.
The
field
strip,
for
example,
where
we're
able
to
describe
it
should
be
created.
It
should
be
less
than
10
greater
than
less
than
one
and
five
so
of
this
you're
able
to
construct
s.
So
we
are
going
to
see
how
so
we're
gonna
go.
B
One
sort
and
we're
gonna
specify
this
file
I'm
trying
to
build
the
distracts
for
us,
so
we're
gonna
go
to
the
square
one
and
we're
gonna
see
that
off
that
very
simple
case,
which
was
this
one,
the
bill
or
struct
here.
So
we
see
it
has
a
a
a
Constructor
in
initializes,
the
the
state,
and
it
has
a
check.
B
B
C
Yeah,
a
really
good
presentation,
a
very,
very
good
presentation
and
very
interesting
project
Santiago.
If
anybody
asks
if,
if
nobody
asks
a
question,
I
will
go
there.
So
it's
very
interesting
and
and
how
are
you
doing
the
transformation
from
traditional
typescript
structure,
for
example
a
date
or
a
number
to
a
mapping
that
to
a
particular
001
I
would
say
it
is
sorry
for
that
I
got
I
got
that
in
my
mind,
to
a
data
type,
because
it's
I
think
it's
quite
complex
to
do
that.
B
B
It's
a
code
generation
tool.
Basically
it
goes
first
off
you
got
the
the
schema,
the
schema
this
process
into
a
Json,
so
we
got
a
description
of
what
it
looks
like
in
in
Json
and
then
we
grab
that
Json
and
we're
able
to
interpret
it
here
and
the
magic
happens.
Within
the
code
generation
tool
uses
typescript
API
in
order
to
interpret
the
Json
and
based
off
that,
then
we
construct
the
the
strap,
so
the
type
typescript
API
will
go.
Okay,
so
I
see
you
got
less
than
greater
than
then.
C
B
E
B
A
A
A
A
Soon,
well,
thank
you
so
much
Santiago
for
your
presentation
and
Ignacio
for
your
help
and
support
with
zoc.
This
was
incredible.
I'm,
so
glad
we
got
to
have
the
community
demo
and
also
like
Yasmine,
said
before.
I
really
I
really
appreciated
how
you
were
able
to
walk
us
through
everything
in
this
demo
Santiago
it
was.
It
was
great
to
follow
and
I
can't
wait
for
others
to
also
watch
and
also
try
it
out
and
I.
Think
that's
it
for
this
community
demo.