Internet Computer (Web 3) application

The firs generation of the internet, Web 1, gave us the freedom to access any data on the internet anywhere. And the second one, Web 2, allowed us not only just to comsume the data but also to create contents. With the advent of the internet computer, we are on the verge of being the owner of the contents we have created.

 

Web 3 is a new paradigm that distributes the one giant internet system to small individual computers to prevent the internet from being controlled by a small number of moguls. In a sense, it is like a democratized version of the internet.

Core Concepts

1. Canister

Canister is similar to a project folder. It contains the application code to run the application and the status from the previous running.

2. Cycle

Operating a site globally takes resources such as storages and bandwidth. In the internet computer, a cycle is the resource to power the application globally. It fuels the canister.

Implementation

Setting up Ubuntu

WSL Installation

Node.js installation

Open the search bar on your computer. And open Ubuntu.

Install the npm with nvm (this is a package manager that you can install different versions of npm easily).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Run the command below to activate 'nvm'

source ~/.bashrc

Install the 'npm'

nvm install <version>

After the installation, run this command to varify if it was successful and check the version.

 

node -v

DFX Installation

DFX is a SDK (Softwar Development Kit) for the internet computer to work on the local environment. Open the search bar again and open 'Ubuntu' command line (You don't have to open a new one if one is open already).

Run the command below to install DFX.

DFX_VERSION=0.11.1 sh -ci "$(curl -sSL https://internetcomputer.org/install.sh)"

When completed, you will see the path at the bottom.

Copy the path and paste the path in the <path> part instead and run the command.

export PATH=$PATH:<path>

export PATH=$PATH:/home/lilijk/bin/dfx

---

※ You can check if it was successful with this command (If you see the path, it mean it was successful).

echo "${PATH//:/$'\n'}"

---

Close and open the Ubuntu terminal again and run this command to verify. If you see the version number then it is done.

dfx -v

---

※ Note that you have to close and open a new Ubuntu terminal for this to work.

---

Creating an Application

Open the search bar again and open 'Ubuntu' command line (You don't have to open a new one if one is open already).

Create a folder.

mkdir <projectName>

And move into the folder.

cd <projectName>

Start a new application by running the command below. Note that you cannot use '-' in the name so use the camel case or an under bar to differetiate words.

dfx new <appName>

Move into the application.

cd <applicationName>

Open a code editor.

code .

---

※ You can also open the application from the VS Code

Click the bottom left icon

Select 'New WSL Window' in the opened search bar.

A new editor will pop up with the message that says 'Ubuntu'

Go to 'File' -> 'Open Folder' then select the application. It is done!

※ Colorizer Extension installation for motoko in VS Code

Go to the extention menu and search motoko

motoko

Click 'Install in WSL:Ubuntu'

After installation you will see the visual effects that the extension provides.

Before the Extension

After the Extension

---

Run

 

Run the command below (You have to in the application folder. If not cd into it)

dfx start

※ A .dfx folder will be created.

Leave the terminal running and open another by clicking the '+' or split button on the right

Deploy the application

dfx deploy

※ You will see the dist folder after deployment.

Then, finally, run this command.

npm start

If you see this message at the bottom, it is a good sign.

Scroll up and find the 'On Your Network:' then click the URL to open the application.

Wow! that was lots of set up but now, we are done and successful!

---

References

nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions (github.com)

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

Installing the SDK | Internet Computer

Installing the SDK | Internet Computer

What is Web3 and why is it important? | ethereum.org

Home | ethereum.org

https://internetcomputer.org/docs/current/tutorials/deploy_sample_app

Deploy sample code | Internet Computer