Skip to content

Commit

Permalink
Add tooltips for first three Dev Journey levels
Browse files Browse the repository at this point in the history
  • Loading branch information
jessiemongeon1 committed Jun 28, 2024
1 parent 1d87705 commit e457b0b
Show file tree
Hide file tree
Showing 26 changed files with 61 additions and 41 deletions.
6 changes: 4 additions & 2 deletions docs/tutorials/developer-journey/level-0/01-ic-overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ keywords: [beginner, tutorial, developer journey, introduction, overview]


import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";


# 0.1 Overview of the Internet Computer

Expand All @@ -15,7 +17,7 @@ import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";

The **Internet Computer Protocol (ICP)** is a secure and transparent blockchain-based network that can be used to host data and programs. Programs and their data hosted on ICP are referred to as **decentralized applications**, often abbreviated to **dapps**.

Dapps are created by the development and deployment of **smart contracts**, which are known as **canisters** on ICP. Each canister is hosted on an independent blockchain network running on **nodes** called a **subnet**.
Dapps are created by the development and deployment of **smart contracts**, which are known as **canisters** on ICP. Each <GlossaryTooltip>canister</GlossaryTooltip> is hosted on an independent blockchain network running on **nodes** called a **subnet**.

These terms will be explained a bit further in the next section, [Internet Computer terminology](/docs/current/tutorials/developer-journey/level-0/ic-terms).

Expand Down Expand Up @@ -60,7 +62,7 @@ The message routing layer receives a block of messages from the consensus layer,

The execution layer is responsible for executing canister smart contract code. Execution is done using WebAssembly (Wasm). There is a Wasm virtual machine that runs on each node that is responsible for this process. Wasm is used since Wasm bytecode can be executed deterministically.

Messages that have been inducted into canister queues on the subnet are executed by the execution layer until either all messages in the queue have been executed or until the cycles limit for the round has been reached.
Messages that have been inducted into canister queues on the subnet are executed by the execution layer until either all messages in the queue have been executed or until the <GlossaryTooltip>cycles</GlossaryTooltip> limit for the round has been reached.

[Want to go further into this topic?](https://internetcomputer.org/how-it-works/execution-layer/)

Expand Down
5 changes: 3 additions & 2 deletions docs/tutorials/developer-journey/level-0/02-ic-terms.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ keywords: [beginner, tutorial, developer journey, terminology, glossary]
---

import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

# 0.2 Internet Computer terminology

Expand All @@ -20,11 +21,11 @@ This page introduces some of the most commonly used terminology that developers

- **Agent:** An agent is a library used to make calls to the Internet Computer public interface. Examples of external agents include the JavaScript and Rust agents.

- **Certified variables:** A certified variable is a piece of data that a canister stores in the subnet's canonical state during the processing of an update or inter-canister call. This data is used when a query call is made, so that the canister can return a certificate to the user to prove the data's value.
- **Certified variables:** A certified variable is a piece of data that a <GlossaryTooltip>canister</GlossaryTooltip> stores in the <GlossaryTooltip>subnet</GlossaryTooltip>'s canonical state during the processing of an update or inter-canister call. This data is used when a query call is made, so that the canister can return a certificate to the user to prove the data's value.

- **Chain-key cryptography:** Chain-key cryptography is an array of advanced cryptographic mechanisms which allow ICP to achieve scalability and functionalities that aren't possible on other blockchain networks. These cryptographic protocols help orchestrate the nodes that make up ICP. One example of chain-key cryptography is ICP's single public key, which allows any device to verify the authenticity of artifacts from ICP.

- **Cycles**: A cycle in regards to ICP is a unit of measurement used for resources consumed by a canister. These resources include compute processing power, memory, storage, and network bandwidth. Cycles are consumed for every execution performed by a canister that has been deployed on the mainnet. The ICP's utility token ICP can be converted into cycles and transferred into a canister to be used to pay for that canister's consumed resources. ICP can be converted to cycles using the current price of ICP measured in [XDR](https://internetcomputer.org/docs/current/references/glossary#xdr), where one trillion cycles corresponds to one XDR. XDR is the currency code for special drawing rights (SDR), which are supplementary foreign exchange assets defined and maintained by the International Monetary Fund (IMF).
- **Cycles**: A cycle in regards to ICP is a unit of measurement used for resources consumed by a canister. These resources include compute processing power, memory, storage, and network bandwidth. Cycles are consumed for every execution performed by a canister that has been deployed on the mainnet. The ICP's utility token ICP can be converted into <GlossaryTooltip>cycles</GlossaryTooltip> and transferred into a canister to be used to pay for that canister's consumed resources. ICP can be converted to cycles using the current price of ICP measured in [XDR](https://internetcomputer.org/docs/current/references/glossary#xdr), where one trillion cycles corresponds to one XDR. XDR is the currency code for special drawing rights (SDR), which are supplementary foreign exchange assets defined and maintained by the International Monetary Fund (IMF).

- **Decentralized application (dapp):** A decentralized application (dapp) refers to a canister or several interoperable canisters that provide a program or service that has been deployed on the Internet Computer.

Expand Down
3 changes: 2 additions & 1 deletion docs/tutorials/developer-journey/level-0/03-dev-env.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ keywords: [beginner, tutorial, developer journey, dev env, developer environment
---

import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

# 0.3 Developer environment setup

Expand All @@ -24,7 +25,7 @@ To follow along with the developer journey and develop on the Internet Computer,

#### Why does this matter?

You will need an internet connection to download a few different tools and packages, as described further in this document. You will also need an internet connection whenever you plan to deploy your canister to the mainnet. You do not need an internet connection to deploy your canister to your local canister execution environment.
You will need an internet connection to download a few different tools and packages, as described further in this document. You will also need an internet connection whenever you plan to deploy your <GlossaryTooltip>canister</GlossaryTooltip> to the mainnet. You do not need an internet connection to deploy your canister to your local canister execution environment.

### Confirm you have access to a command line interface (CLI) on your local macOS or Linux computer

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ keywords: [beginner, tutorial, developer journey, introduction, canisters]
---

import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

# 0.4 Introduction to canisters

Expand All @@ -12,7 +13,7 @@ import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";

## Overview

Smart contracts on the Internet Computer are known as **canisters**. A canister contains both the source code and software state. A canister's source code is compiled into a WebAssembly module and is associated with a module of stable memory.
Smart contracts on the Internet Computer are known as **canisters**. A <GlossaryTooltip>canister</GlossaryTooltip> contains both the source code and software state. A canister's source code is compiled into a WebAssembly module and is associated with a module of stable memory.

When a dapp is written to be deployed on ICP, the source code is compiled into a WebAssembly module. Then, that WebAssembly module is deployed and executed inside of the canister. Once a canister is deployed, end-users can interact with the canister through the CLI or through a frontend client such as a web browser.

Expand Down Expand Up @@ -73,7 +74,7 @@ Additionally, controllers can update the canister code by submitting a new Wasm

## Cycles and resource charges

A canister's controller is responsible for ensuring the canister contains enough **cycles**. Cycles are used to pay for the canister's resources, such as memory, computational power, and network bandwidth. Each operation that is performed by a canister on the mainnet has a cost of cycles. A canister has a local cycles account that is used to store the canister's cycles.
A canister's controller is responsible for ensuring the canister contains enough **<GlossaryTooltip>cycles</GlossaryTooltip>**. Cycles are used to pay for the canister's resources, such as memory, computational power, and network bandwidth. Each operation that is performed by a canister on the mainnet has a cost of cycles. A canister has a local cycles account that is used to store the canister's cycles.

For memory usage, the system keeps track of all memory used by the canister and regularly charges the canister's cycles account. This charging happens at regular intervals for efficiency.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ keywords: [beginner, tutorial, developer journey, introduction, languages]
---

import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

# 0.5 Introduction to languages

Expand All @@ -14,7 +15,7 @@ import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";

When developing canisters, the most common development workflow is to use a software development kit (SDK). The Internet Computer SDK is the most commonly used, which natively supports Motoko and Rust out of the box.

Since ICP supports dapps that have been compiled into WebAssembly modules, many different programming languages can be used for canister development. However, a canister development kit (CDK) needs to be used. A CDK is an adapter used by the IC SDK that provides a programming language with the necessary features and tools required to create and manage canisters. The IC SDK comes bundled with CDKs for Motoko and Rust. Additionally, there are several community created CDKs for additional languages, such as Python and TypeScript, that can be installed separately.
Since ICP supports dapps that have been compiled into WebAssembly modules, many different programming languages can be used for <GlossaryTooltip>canister</GlossaryTooltip> development. However, a canister development kit (CDK) needs to be used. A CDK is an adapter used by the IC SDK that provides a programming language with the necessary features and tools required to create and manage canisters. The IC SDK comes bundled with CDKs for Motoko and Rust. Additionally, there are several community created CDKs for additional languages, such as Python and TypeScript, that can be installed separately.

It is possible to use multiple languages within a single dapp's development. Different canisters can communicate to one another using the Candid language, which is an interface description language (IDL) used by ICP canisters, allowing for multiple canisters in different languages to share and exchange information.

Expand Down
5 changes: 3 additions & 2 deletions docs/tutorials/developer-journey/level-0/06-intro-dfx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ keywords: [beginner, tutorial, developer journey, introduction, dfx]

import DfxNewSnippet from "/src/components/Snippets/DfxNewSnippet.mdx";
import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

# 0.6 Introduction to dfx

Expand All @@ -29,9 +30,9 @@ dfx [subcommand] [flag]

The following is a list of the essential `dfx` subcommands that you'll be using throughout the developer journey series. For the full list of all possible subcommands, check out the [dfx reference documentation](/docs/current/developer-docs/developer-tools/cli-tools/cli-reference/dfx-parent).

- `build`: Used to build the canister output from the project's source code.
- `build`: Used to build the <GlossaryTooltip>canister</GlossaryTooltip> output from the project's source code.
- `canister`: Used to manage deployed canisters.
- `cycles`: Used to manage the cycles balance for your identity.
- `cycles`: Used to manage the <GlossaryTooltip>cycles</GlossaryTooltip> balance for your identity.
- `deploy`: Deploys one or all canisters from the project's source code. By default, all canisters are deployed.
- `help`: Returns usage information for a specific subcommand.
- `identity`: Used to create and manage identities.
Expand Down
5 changes: 3 additions & 2 deletions docs/tutorials/developer-journey/level-1/1.1-live-demo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
import '/src/components/CenterImages/center.scss';



# 1.1 Exploring a live demo

<MarkdownChipRow labels={["Beginner", "Tutorial"]} />
Expand All @@ -15,13 +16,13 @@ import '/src/components/CenterImages/center.scss';

## Overview

In the previous segment of our developer journey, introduction to `dfx`, you created a new `dfx` project using the default 'Hello, world' template and looked into the project's structure and code. However, you didn't build or deploy the canister.
In the previous segment of our developer journey, introduction to `dfx`, you created a new `dfx` project using the default 'Hello, world' template and looked into the project's structure and code. However, you didn't build or deploy the <GlossaryTooltip>canister</GlossaryTooltip>.

In this tutorial, you'll deploy the `hello_world_backend` canister from [0.6: Introduction to dfx](/docs/current/tutorials/developer-journey/level-0/intro-dfx) to the Motoko playground.

## What is the Motoko playground?

The Motoko playground is a development environment that hosts a 'canister pool' that canisters can be deployed to. When canisters are deployed to the Motoko playground, they temporarily borrow resources from the pool and are allotted a small amount of cycles that can be used during the canister's deployment. Canisters deployed to the playground can run for 20 minutes; after 20 minutes, the canister will be uninstalled and the resources borrowed are returned to the playground's canister pool.
The Motoko playground is a development environment that hosts a 'canister pool' that canisters can be deployed to. When canisters are deployed to the Motoko playground, they temporarily borrow resources from the pool and are allotted a small amount of <GlossaryTooltip>cycles</GlossaryTooltip> that can be used during the canister's deployment. Canisters deployed to the playground can run for 20 minutes; after 20 minutes, the canister will be uninstalled and the resources borrowed are returned to the playground's canister pool.

:::info
While the Motoko playground has 'Motoko' in the title, it can be used to deploy canisters written in any development language, not just Motoko.
Expand Down
3 changes: 2 additions & 1 deletion docs/tutorials/developer-journey/level-1/1.2-motoko-lvl1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ keywords: [beginner, tutorial, developer journey, motoko]
---

import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";

# 1.2 Motoko level 1

Expand All @@ -16,7 +17,7 @@ Motoko is a programming language that has been developed and optimized for creat

## Basic concepts and terms

In previous modules, you've been introduced to and briefly discussed actors, and how each canister smart contract is represented by an actor. Within Motoko, the term actor is used to refer to any canister, regardless of the canister's language (Motoko, Rust, etc.). Motoko is designed specifically to make actors easy to write and use once the canister has been deployed.
In previous modules, you've been introduced to and briefly discussed actors, and how each <GlossaryTooltip>canister</GlossaryTooltip> smart contract is represented by an actor. Within Motoko, the term actor is used to refer to any canister, regardless of the canister's language (Motoko, Rust, etc.). Motoko is designed specifically to make actors easy to write and use once the canister has been deployed.

With actors in mind, the following terms and concepts are essential to be aware of. Many of these concepts apply to several different programming languages, though you'll be focusing on their application within Motoko.

Expand Down
8 changes: 5 additions & 3 deletions docs/tutorials/developer-journey/level-1/1.3-first-dapp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ keywords: [beginner, tutorial, developer journey, first dapp]
import DfxNewSnippet from "/src/components/Snippets/DfxNewSnippet.mdx";
import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
import '/src/components/CenterImages/center.scss';
import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";


# 1.3 Developing your first dapp

Expand All @@ -14,7 +16,7 @@ import '/src/components/CenterImages/center.scss';

## Overview

At this point in your developer journey, you've covered the fundamentals of canister development and deployed the default 'Hello, world' project template on the Motoko playground. It's time to get into writing code and developing your own first dapp!
At this point in your developer journey, you've covered the fundamentals of <GlossaryTooltip>canister</GlossaryTooltip> development and deployed the default 'Hello, world' project template on the Motoko playground. It's time to get into writing code and developing your own first dapp!

For this tutorial, you'll be creating a poll dapp that includes both a backend canister and a frontend canister. To recap, backend canisters are used to host the dapp's smart contract code, while frontend canisters are used to host user interface assets, such as HTML and CSS.

Expand Down Expand Up @@ -160,7 +162,7 @@ This `getQuestion` method takes the current value of the `question` variable and

### Query calls vs. update calls

A **query call** is executed on one node of a subnet. It is not possible to use query calls to alter data.
A **query call** is executed on one node of a <GlossaryTooltip>subnet</GlossaryTooltip>. It is not possible to use query calls to alter data.

An **update call** is executed on all nodes of a subnet. The result must pass through consensus on the subnet and has the ability to alter data.

Expand Down Expand Up @@ -795,7 +797,7 @@ Did you get stuck somewhere in this tutorial, or feel like you need additional h

## Next steps

In this tutorial, you only deployed our dapp to your local environment. In the next module, you'll acquire cycles in order for you to deploy your dapp to the Internet Computer mainnet.
In this tutorial, you only deployed our dapp to your local environment. In the next module, you'll acquire <GlossaryTooltip>cycles</GlossaryTooltip> in order for you to deploy your dapp to the Internet Computer mainnet.

- [1.4 Acquiring and using cycles](/docs/current/tutorials/developer-journey/level-1/1.4-using-cycles).

Loading

0 comments on commit e457b0b

Please sign in to comment.