Encode x ICH: Intro to Building on the IC in Motoko

Intro to building on the IC in
Motoko
Get started with the DFX and Motoko

DFINITY Confidential: For Internal Use Only
Not Mac User?
The command line examples in
this presentation are based on
the macOS Terminal. Using
another OS? No problem!
Other operating systems:
Linux: Generally same as macOS,
but can be different for
some distributions
macOS (M1): It may be necessary to
use Rosetta
Windows: Use WSL2

What is the
Internet
Computer?

What is the Internet Computer?
The Internet Computer is a
blockchain that enables
developers to build and deploy
secure, autonomous, unstoppable
and tamper-proof software,
running at web speed, and
capable of scaling without limits.
On-chain
The entire dapp is running on-chain, which means that
you are not only storing and retrieving data on
blockchain, you are running your entire dapp on
blockchain.
Smart contracts
The Internet Computer deploys dapps as canister
smart contracts, which contains frontend and backend
code, dependencies and the state of the dapp.
Programming
Motoko is native language for the Internet Computer,
but other languages are also supported. Any language
that can be compiled into WebAssembly can be used.

DFINITY
Canister SDK

DFINITY Canister SDK
Create and deploy canister smart contracts
with the canister SDK

The SDK provides tools, sample code, and documentation to help you create
canister smart contract dapps and deploy them on the Internet Computer
blockchain mainnet.
Install the SDK:

Verify the SDK installation:
DFX is the SDK’s command-line execution environment, and a list of the available
commands can be found in the documentation’s Getting Started section.

Motoko

The Motoko programming
language is a new, modern and
type safe language for
developers who want to build
the next generation of
decentralized applications to run
on the Internet Computer
blockchain network.
What is
Motoko?

Motoko concepts
The Actor model
In Motoko a canister smart contract is
expressed as an actor.
An actor is an autonomous object
that fully encapsulates its state and
communicates with other actors only
through asynchronous messages.

Motoko concepts
Futures
Motoko supports asynchronous
programming, and makes it much
simpler by applying a sequential
style.
Asynchronous function calls return a
future, and the await construct allows
you to suspend execution until a
future has completed.

Motoko concepts
Memory persistence
The state of a Motoko actor, including its in-memory data
structures, can survive indefinitely.
Actor state does not need to be explicitly "restored" and
"saved" to external storage, with every message.
The state is preserved across calls, even though the state
of the actor is replicated across many Internet Computer
node machines.

Motoko concepts
Autogenerated IDL files
Candid provides a language-agnostic
way to interact with canisters, which
means the backend functions are
exposed to other canisters, web
browsers, other program languages
and command-line commands.

Let’s build a
dapp!

Let’s build a dapp
We are going to build a simple counter website, where a counter is increased
every time we click a button.

What we will do
● Create new canister smart contract using the
SDK (DFX)
● Use the default project as a template as the
starting point for the new project
● Add backend functions for a counter (count,
get count and reset count)
● Implement backend functions in the frontend
● Deploy the canister smart contract locally
● Test backend with Candid UI and command
line using DFX, and test frontend in browser
What we will learn:
● Use the SDK for creating a canister smart
contract, testing the backend and
deploying the canister smart contract
● Use the SDK for testing the backend
● Create backend functions in Motoko
● Testing the backend using Candid UI
● Implement backend functions in the
frontend, using plain Javascript.

[ DEMO ]

Step 1: Create new project using DFX
Run this command to create project:
DFX will create a new directory called hack, and in this directory you will find all
the files, both frontend, backend, configurations etc. for the default project. The
default project can be deployed without any changes as it is.

The src directory will contain the
default frontend and backend code.
The dfx.json file contains the
canister configuration. It defines the
canister(s), where the source code for
the canister(s) is located, the type of
canister(s) and which version of DFX
the project was created with.

Step 2: Modify the backend
As the first step, let’s add a few
backend functions. The existing code
from the default project is not needed,
so the greet() function is deleted.
At the top a variable counter is
defined to hold the counter value.
The functions count(), getCount()
and reset() are added.

The function count()increments the
counter variable. The function
getCount() returns the value of the
counter variable. The function
reset() resets the counter value.
Note: Motoko is a strongly typed
language, so the type is always
defined. Also, all functions are called
asynchronously.

Step 3: Test backend
If we deploy the project to the local network we can at this point test the backend,
so let’s do that. First start the local network:
The --background is not needed if the local network is started in another
terminal.

Now the local network is running, deploy the canisters:
When the canisters have been deployed, there are two easy ways to test the
backend. The first method is to use DFX to call the backend functions, which have
been exposed by Candid, and he second method is to use the Candid UI.

DFX has a subset of commands for
canister operations, and one of them
enables us to call the public functions we
added to the main Motoko file in step 2.
The command is:
dfx canister call <project> <func>
Example:
The initial value is 0, and count will increment value and return 1,
getCount will return the current value and reset will set the value to 0.

The Candid UI provides an easy, user
friendly interface for testing the backend.
The UI is automatically generated, and the
canister ID can be found in the
canister_ids.json file. The localhost
version of the canister_ids.json file
can be found in:
.dfx/local/canister_ids.json

Step 4: Modify the frontend
The default project has an index.html
file with page HTML and an index.js
file with an implementation of the
backend functions.
For this demo the changes to the
index.html file is minor. The button is
kept and so is the section showing
the result, just simplified.

The existing event listener for button click is modified to call the count() function,
and an event listener for page load is added to get the initial value of the counter
with getCount(). The backend functions are still imported through the Candid
interface.

Step 5: Test Frontend
The canisters are re-deployed, which will
update the canisters, using the same dfx
deploy command as in step 2.
The URL for the frontend is depending on
the canister ID. As described before, get the
canister ID from the canister_IDs.json
file, look for the assets canister. The URL will
look like this:
https://<canister ID>.localhost:8000

Thank you!
smartcontracts.org
forum.dfinity.org
Dfinity Dev Official (Discord)

Encode x ICH: Intro to Building on the IC in Motoko

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Encode x ICH: Intro to Building on the IC in Motoko

Ähnlich wie Encode x ICH: Intro to Building on the IC in Motoko (20)

Mehr von KlaraOrban

Mehr von KlaraOrban (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Encode x ICH: Intro to Building on the IC in Motoko