ICP Beginner Guide - Chapter one

ICP Beginners Intro - Chapter 1

Welcome to a series on developing apps on the Internet Computer! A number of chapters will take you through the steps to create a blog application. This guide covers the main logic inherent in many different web applications, dives into a bit of data modelling and explains the main steps during the deployment process. This approach shows the Internet Computer enthusiast, you, Motoko and the command line tool dfx in action.

In this first chapter, you will set up the project, learn about the basic folder structure and deploy a basic Motoko code snippet. By the end of this chapter, a simple application running on the internet computer will give you the response “Hello on ICP” and you will understand in more detail how the seemingly unstoppable and monopolistic cloud computing expansion could be challenged by Dfinity.

This guide is intended for Motoko beginners and aims to get you started quickly with a basic blogging app. The official resources should be explored for more detailed follows up and can be found Dfinity’s documentation section.

Select your linux option, install Node and VSCode

Ready to fire up your Dfinity? Let’s do it. The command line tool works on any linux based system. All latest operating systems have a linux option.

Linux option advice

We require to use linux set up a developing environment that is similar across different operating systems.

Another requirement to get started is to install Node on your system. Overall, I recommend to get acquainted with your terminal and use it as this is what all developers do:

sudo apt install nodejs

In case of the Windows Subsystem for Linux (WSL) you need to type the command into the right terminal. The easiest way to open the Microsoft Store Ubuntu App is through the Windows Start Menu. You may also want to install Windows Terminal, but don’t get distracted now 😀.

You should then also check that the installation worked. Review both the version of node and npm with the followings commands.

node -v
npm -v

As I don’t want to force you to use a specific editor, you may want to skip this step. This series will assume that you have VSCode installed. You can download the latest version on the official website code.visualstudio.com. After you have installed VSCode, you may have to enable the code command in your terminal as described in the relevant docs section.

Install Dfinity on your machine

As described in the official docs, the developers at Dfinity have prepared an installation script to install the command line tools of Dfinity. The tools are called dfx and stand for distributed effects. This is consistent given that Dfinity aims to introduce us to distributed infinity.

sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"

If you experience any installing errors, you may want to uninstall dfx and repeat the step above to reinstall dfx. For this purposes, you can use the uninstall script in the .cache folder.

~/.cache/dfinity/uninstall.sh

Once you install Dfinity’s developer tools, you are allocated an wallet id and a cycle balance. We are not diving into this now. However, keep in mind that anybody who watches your app will hit the cycle balance as you are consuming computation power. There is plenty of computation power at this point and you should not worry about this now.

Start your work with an existing hello app

So now that you mastered your setup to get started, we will work out how to use existing apps on the Internet Computer, the Open Web, and make them fit your needs.

Go back to your terminal and get into a directory in which you want to set up the app directory. In my case I created a ic-projects folder in my home directory. Then let’s use the command line tool. Optionally, you may want to get your acquainted with dfx and first check the version and the command line help information.

dfx --help
dfx --version

If your version is lower than 0.6.13 or you just want to upgrade a previously installed older version, here is the command to upgrade.

dfx upgrade

Now let’s finally hit the command that actually sets up your web app folder.

dfx new hello

Inspect the folder structure and your connection

We have just created a folder that is called hello and is based on the hello app on the Internet Computer. Go into the folder with the change directory command.

cd hello

You may want to open the folder and check the files. I personally recommend to use code . Alternatively, you can also inspect the folder with the Windows Explorer explorer . or the Mac Finder open ..

As you will probably notice, there is dfx.json configuration file that links you up with the Internet Computer web address: https://gw.dfinity.network. Try to ping it with your command line tool.

dfx ping ic

The expected result will provide you the same information as illustrated below.

{
  "ic_api_version": "0.13.1"  "impl_hash": "cb7fecc95c9c64e589708ece4342726d8e77ab833139b1547e7f7cf8253ce1ad"  "impl_version": "2020-11-13_RC00"
}

Write Motoko!

The hello app sends you an output that is dependent on your input. So we are going to change the output a little bit in the main source folder file src/hello/main.mo. The line highlighted in red is the original version and the line highlighted in green shows you what you have to change. Also note that we are using the input from the user with the variable name in the code below. The series will explain you in subsequent chapters how the syntax works. A variable is a storage location and can assume a value in a specific format. In this case the type is Text and you will be able to provide an input value for the variable name with any character that you can find on your keyboard.

actor {
    public func greet(name : Text) : async Text {
      return "Hello, " # name # "!";
      return "Hello on ICP, " # name # "!";
    };
};

We have done all the work. That’s really all the work needed for this basic app. You can potentially also think for large apps the require some tweaks and given that you can load existing apps quite easily in your code editor and change is quite a different refreshing approach.

Deploy the app and check it in your browser

Now let’s deploy the app on the Internet Computer with this command.

dfx deploy --network ic

The build and deployment process will start and use Node in the background to generate the build files in the .dfx directory. The output will also show you the canister ids.

Deploying all canisters.
All canisters have already been created.
Building canisters...
Building frontend...
Installing canisters...
Installing code for canister hello, with canister_id 3c7jb-myaaa-aaaab-qacoa-cai
Installing code for canister hello_assets, with canister_id vouz7-tqaaa-aaaab-aaccq-cai
Deployed canisters.

Now it is time to check your new app. Take the second canister id pointing to your frontend assets canister and spin it up in your browser with the ic0.app suffix, e.g. https://vouz7-tqaaa-aaaab-aaccq-cai.ic0.app. You will be asked for your input and then the greeting text will reflect what you have defined in the source code and what you provided as input value.

Let’s connect

Did you like the tutorial or would like something mentioned in particular. Follow me on twitter and send me your comments. Let’s build something that others can build on.

ICP news

ICP news is the blockchain magazine to observe evolving Internet Crypto Principles.