Skip to content

Commit a14a376

Browse files
jessiemongeon1jessiemongeon1
authored
Add files via upload
1 parent 5ffc390 commit a14a376

File tree

7 files changed

+1416
-1
lines changed

7 files changed

+1416
-1
lines changed

‎motoko/hello_world/BUILD.md

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# Continue building locally
2+
3+
Projects deployed through ICP Ninja are temporary; they will only be live for 20 minutes before they are removed. The command-line tool `dfx` can be used to continue building your ICP Ninja project. `dfx` can be used to deploy projects to the mainnet for long-term production use. It is designed specifically for building ICP smart contracts and supports every feature of the network.
4+
5+
To migrate your ICP Ninja project off of the web browser and develop it locally, follow these steps.
6+
7+
### 1. Install developer tools.
8+
9+
You can install the developer tools natively or develop using Dev Containers.
10+
11+
#### Option 1: Natively install developer tools
12+
13+
> Installing `dfx` natively is currently only supported on macOS and Linux systems. On Windows, it is recommended to use Dev Containers below.
14+
15+
1. Install `dfx` with the following command:
16+
17+
```
18+
sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"
19+
```
20+
21+
2. [Install NodeJS](https://nodejs.org/en/download/package-manager).
22+
23+
> On Apple Silicon (e.g., Apple M1 chip), make sure you have Rosetta installed (`softwareupdate --install-rosetta`).
24+
25+
3. For Rust projects, you will also need to:
26+
27+
- Install [Rust](https://doc.rust-lang.org/cargo/getting-started/installation.html#install-rust-and-cargo): `curl https://sh.rustup.rs -sSf | sh`
28+
- Install [candid-extractor](https://crates.io/crates/candid-extractor): `cargo install candid-extractor`
29+
30+
4. For Motoko projects, you will also need to:
31+
32+
- Install the Motoko package manager [Mops](https://docs.mops.one/quick-start#2-install-mops-cli): `npm i -g ic-mops`
33+
34+
Lastly, navigate into your project's directory that you downloaded from ICP Ninja.
35+
36+
#### Option 2: Dev Containers
37+
38+
Continue building your projects locally by installing the [Dev Container extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) in VS Code and [Docker](https://docs.docker.com/engine/install/).
39+
40+
Make sure Docker is running, then navigate into your project's directory that you downloaded from ICP Ninja and start the Dev Container by selecting `Dev-Containers: Reopen in Container` in VS Code's command palette (F1 or Ctrl+Shift+P).
41+
42+
> Note that local development ports (e.g. the ports used by `dfx` or `vite`) are forwarded from the Dev Container to your local machine. In the VS code terminal, use Cmd+Click on the displayed local URLs to open them in your browser. To view the current port mappings, click the "Ports" tab in the VS Code terminal window.
43+
44+
### 2. Create a local developer identity.
45+
46+
To manage your project's canisters, it is recommended that you create a local [developer identity](https://internetcomputer.org/docs/current/developer-docs/getting-started/accounts) rather than use the `dfx` default identity that is not stored securely.
47+
48+
To create a new identity, run the commands:
49+
50+
```
51+
dfx start --background
52+
dfx identity new IDENTITY_NAME
53+
dfx identity use IDENTITY_NAME
54+
```
55+
56+
Replace `IDENTITY_NAME` with your preferred identity name. The first command, `dfx start --background` starts the local `dfx` processes, then `dfx identity new` will create a new identity and return your identity's seed phase. Be sure to save this in a safe, secure location.
57+
58+
The third command, `dfx identity use` will tell `dfx` to use your new identity as the active identity. Any canister smart contracts created after running `dfx identity use` will be owned and controlled by the active identity.
59+
60+
Your identity will have a **principal ID** associated with it. Principal IDs are used to identify different entities on ICP, such as users and canisters.
61+
62+
[Learn more about ICP developer identities](https://internetcomputer.org/docs/current/developer-docs/getting-started/accounts).
63+
64+
### 3. Deploy the project locally.
65+
66+
Deploy your project to your local developer environment with the commands:
67+
68+
```
69+
dfx deploy
70+
```
71+
72+
Your project will be hosted on your local machine. The local canister URLs for your project will be shown in the terminal window as output of the `dfx deploy` command. You can open these URLs in your web browser to view the local instance of your project.
73+
74+
### 4. Obtain cycles.
75+
76+
To deploy your project to the mainnet for long term, public accessability, first you will need **[cycles](https://internetcomputer.org/docs/current/developer-docs/getting-started/cycles/overview)**. Cycles are used to pay for the resources your project uses on the mainnet, such as storage and compute.
77+
78+
> This cost model is known as ICP's [reverse gas model](https://internetcomputer.org/docs/current/developer-docs/gas-cost), where developers pay for their project's gas fees rather than users pay for their own gas fees. This model provides an enhanced end user experience since they do not need to hold tokens or sign transactions when using a dapp deployed on ICP.
79+
> Learn how much a project may cost by using the [pricing calculator](https://internetcomputer.org/docs/current/developer-docs/cost-estimations-and-examples).
80+
81+
Cycles can be obtained through:
82+
83+
- [Requesting a free cycles coupon](https://internetcomputer.org/docs/current/developer-docs/getting-started/cycles/cycles-faucet).
84+
85+
- [Converting ICP tokens into cycles using `dfx`](https://internetcomputer.org/docs/current/developer-docs/developer-tools/cli-tools/cli-reference/dfx-cycles#dfx-cycles-convert).
86+
87+
### 5. Deploy to the mainnet.
88+
89+
Once you have cycles to deploy your project to the mainnet, run the command:
90+
91+
```
92+
dfx deploy --network ic
93+
```
94+
95+
After your project has been deployed to the mainnet, it will continuously require cycles to pay for the resources it uses. You will need to [top up](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/topping-up/topping-up-canister) your project's canisters or set up automatic cycles management through a service such as [CycleOps](https://cycleops.dev/).
96+
97+
> If your project's canisters run out of cycles, they will be removed from the network.
98+
99+
## Next steps
100+
101+
Once your project has been deployed using `dfx`, you may want to learn about:
102+
103+
- [Making calls to canisters](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/call/overview).
104+
105+
- [Controlling a canister](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/maintain/control).
106+
107+
- [Canister logging](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/maintain/logs).
108+
109+
- [Canister settings](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/maintain/settings).
110+
111+
- Advanced features such as [Chain Fusion](https://internetcomputer.org/docs/current/developer-docs/multi-chain/overview), [randomness](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/advanced-features/randomness), [onchain signatures](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/signatures/t-ecdsa), or [timers](https://internetcomputer.org/docs/current/developer-docs/smart-contracts/advanced-features/periodic-tasks).
112+
113+
## Additional examples
114+
115+
Additional code examples and sample applications can be found in the [DFINITY examples repo](https://github.com/dfinity/examples).

‎motoko/hello_world/README.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,25 @@
1-
README
1+
# Hello, world!
2+
3+
![Hello, world!](/examples/_attachments/hello_world.png)
4+
5+
This simple example demonstrates how applications on ICP are structured using a backend smart contract and a frontend smart contract, and provides an introduction to the programming language Motoko.
6+
7+
This variation of "Hello, world!" is written in [Motoko](https://internetcomputer.org/docs/current/motoko/main/getting-started/motoko-introduction), a programming language designed specifically for developing smart contracts (referred to as **canisters**) on ICP.
8+
9+
### Project structure
10+
11+
The `/backend` folder contains the Motoko canister, `app.mo`. The `/frontend` folder contains web assets for the application's user interface. The user interface is written with plain JavaScript, but any frontend framework can be used.
12+
13+
Edit the `mops.toml` file to add [Motoko dependencies](https://mops.one/) to the project.
14+
15+
## Continue building locally
16+
17+
To migrate your ICP Ninja project off of the web browser and develop it locally, follow these steps.
18+
19+
### 1. Download your project from ICP Ninja using the 'Download files' button.
20+
21+
![ICP Ninja download](/examples/_attachments/icp_ninja_download_files.png)
22+
23+
### 2. Open the `BUILD.md` file for further instructions.
24+
25+
The `BUILD.md` file included in your download will provide information about using `dfx`.

‎motoko/hello_world/WELCOME.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Welcome to ICP Ninja!
2+
3+
ICP Ninja is a web-based integrated development environment (IDE) for the Internet Computer. It allows you to write code and deploy applications directly from your web browser.
4+
5+
It provides a platform for exploring example projects, writing code, and learning about the Internet Computer in a temporary, sandbox-like environment.
6+
7+
For users who may already be familiar with the Internet Computer or who would rather use more **advanced tooling** such as command-line development tools, please refer to the [ICP developer documentation](https://internetcomputer.org/docs/current/developer-docs/getting-started/overview-of-icp) to learn more.
8+
9+
## What is the Internet Computer?
10+
11+
The Internet Computer (ICP) is a decentralized compute platform that enables anyone to build and deploy an application using blockchain technology and advanced cryptography.
12+
13+
Applications are deployed on ICP as a type of smart contract called a **canister**. Canisters are tamperproof programs that can host the application’s entire backend, frontend, and data onchain.
14+
15+
To learn more about the Internet Computer, its features, and what you can build, please read the [What is ICP?](https://icp.ninja/what-is-icp) page.
16+
17+
## Glossary
18+
19+
Below are some commonly used terms that you will see throughout ICP Ninja and its example projects:
20+
21+
- **ICP**: Abbreviation for the Internet Computer, a decentralized compute platform that enables anyone to build and deploy an application using blockchain technology and advanced cryptography.
22+
23+
- **Blockchain**: A decentralized network comprised of computers located across the globe that run the blockchain's software. Each computer contributes their hardware resources, such as storage and compute, to be utilized by the users of the network. On the Internet Computer, each computer is called a node.
24+
25+
- **Gas**: A fee for using a blockchain network's resources.
26+
27+
- **Motoko**: A programming language designed specifically for creating applications on the Internet Computer. It is approachable for developers of all skill levels.
28+
29+
- **Smart contract**: A program deployed to a blockchain network.
30+
31+
- **Canister**: A smart contract deployed on the Internet Computer. Fullstack applications can be deployed to ICP using canisters. Sometimes referred to as a "canister smart contract."
32+
33+
## Using ICP Ninja
34+
35+
First, read this example's `README.md` file to learn more about the project's structure and features. It will provide an overview of what the example application does and what ICP features it uses.
36+
37+
Then, you can deploy this example directly to the Internet Computer network for free by clicking "Deploy" in the upper right corner.
38+
39+
To **download** or **reset** the project files, click the dropdown arrow next to the deploy button.
40+
41+
To make adjustments to this project, you can edit any file that is highlighted purple in the left file manager list. Then, redeploy your application to view your changes.
42+
43+
To edit files that are immutable in ICP Ninja, you can download the project's files using the "Download files" option, then follow the instructions in the `BUILD.md` file to continue building locally.

‎motoko/hello_world/dfx.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"canisters": {
3+
"backend": {
4+
"main": "backend/app.mo",
5+
"type": "motoko",
6+
"args": "--enhanced-orthogonal-persistence"
7+
},
8+
"frontend": {
9+
"dependencies": ["backend"],
10+
"frontend": {
11+
"entrypoint": "frontend/index.html"
12+
},
13+
"source": ["frontend/dist"],
14+
"type": "assets"
15+
}
16+
},
17+
"output_env_file": ".env",
18+
"defaults": {
19+
"build": {
20+
"packtool": "mops sources"
21+
}
22+
}
23+
}

‎motoko/hello_world/mops.toml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Motoko dependencies (https://mops.one/)
2+
3+
[dependencies]
4+
base = "0.13.2"

0 commit comments

Comments
 (0)