From Zero to Motoko
This article was written for all the people who want to start developing on the Internet Computer but are at level 0 of programmation.
If that’s the case : I really encourage you to take the Internet Computer as a unique chance to start your path of developer.
When you start there are a lot of concepts you are going to miss, before you have that small knowledge base everything will feel complicated, but that’s a hurdle you can surpass!
I’m going to write a series of small articles and maybe some videos on the things I wish I had known before starting out.
Let’s start!
What is the Internet Computer to begin ?
Well there are a lot of different answers but for today we just need the most basic answer I could find.
The Internet Computer is a platform that will provide you both computer power and storage. You will be able to deploy your back end and your front end on the Internet Computer.
Wait what is back end and front end?
Every application is composed of two “parts”:
- The front-end is the part of the app that is displayed to the users.
- The back end is basically where the data of all users is stored.
As an example : on Twitter if you click on a post and like it then two things will happened:
- Some code will execute on your front-end so you’ll get a nice animation,
- A message will be sent to the back-end indicating that you have liked the post number 542334.
Every front-end that is displayed will need data: on Twitter we would need the posts, the number of retweets for each post, the user who posted, the number of likes….
This data is requested by the front-end to the back-end.
How does it work on the Internet Computer ?
On the Internet Computer you have canisters : they are pieces of software that contain your code and your variables. You can think of them as mini computers.
One canister will contain your front-end and one canister will contain your back-end.
When do we use Motoko?
Motoko is a language used to write the back-end code.
I don’t want to expand too much on why it’s a good language for the Internet Computer but it was designed by the Dfinity Foundation to ingrate as good as possible with the canister model.
We still don’t know where the name Motoko comes from but it’s a question I’m working on.
What tools do we use for the front-end ?
There are 3 tools you need to build a front-end:
- HTML : how my front-end is structured.
- CSS : how my front-end is designed/colored.
- Javascript : how my front-end is animated.
HTML and CSS are not really language of programmation, but they are used to describe how your front-end/web page looks like.
Javascript is a language of programmation. When I was saying that your front-end code would sometimes request data from your back end, what I really meant is that the Javascript code will request some data to your back-end canister.
You are probably going to hear names likes Angular/React/VueJS.
Those are frameworks; if you are starting you don’t need those tools, they are used to “structure” the front-end development process in a way that will help with bigger projects and managing your code, but behind the scenes the 3 pillars of front end development are always HTML/CSS/Javascript.
You are ready to look at the code of an application on the Internet Computer.
I’ve generated a project called “School” for you.
This project was generated by dfx which is a tool you use in your terminal to create a new project, interact with your canisters and manage your existing projects.
I’ve run the command “dfx new School” and it automatically creates a project which contains a few files to explore.
In the next article I’ll explain step by step how to install and use it. (Whether you are a Mac user, a Linux user or even a Windows user I promise!)
For the moment : let’s take a look at the files.
We have a “src” folder and a bunch of other files.
Other files are basically configuration files for different dependencies our project depends on; we aren’t going to focus on for now.
Let’s see what else is inside our source folder!
We can see that we have 2 new folders one called “school” and an other called “school_assets”.
This is our back-end and our front-end!
The folder called school contains the code that will be installed inside the canister that will be used for the back end. We have an unique file called main.mo (.mo is the extension for Motoko files).
The second folder called “school_assets” contains all the files and code that will be installed inside our asset_canister.
This folder contains two new folders.
Again let’s see what is inside!
Inside the source folder we have our file index.html and index.js (.js is for Javascript files).
To sum up inside our asset_canister we have an HTML file a CSS file and a Javascript file (and some images/texts).
I told you earlier that is everything we need for the front end!
We are ready to deploy our application
I’m going to use the dfx tool I’ve talked about and create a “replica” of the Internet Computer with my computer so we can deploy our project.
(Your computer is going to “simulate” a network for you, but everything is fake of course.)
The command I use is “dfx start” (on the first line)
After that we can see a bunch of text, we do not need to care about.
Just look at the last third lines. What does third lines means is that:
We have created a replica and we can access it if we visite http://localhost:64018 (won’t work on your computer)
This means we are going to make an http request at the following address localhost:64018.
Localhost represents your machine (because the replica is on your machine).
64018 is just a port (A port is like a channel of communication. An address can have multiple ports to allow multiples users to connect at the same time).
The other address 127.0.0.1:8000 will be used for our canisters.
127.0.0.1 is also the local address of your machine and again 8000 is a port.
Let’s try!
You can see I’ve used my browser to make the HTTP request (I use the term HTTP request but basically I’ve just copied http://localhost:64018 in the search bar) and it shows me a dashboard of my replica.
We can see a bunch of different information and there is a section canister where we can see we have no canister inside!
Let’s fix that and deploy our project then.
This time I’ll use the command “dfx deploy”
To be fair with you the command “dfx deploy” do a bunch of different operations that sets up our canisters.
A next article will focus on using dfx and I’ll explain in detail but for the moment we just need to know that our canisters are deployed and ready to be used!
Again let’s make an HTTP request :
I said earlier that we were going to use
But we need to specify the canister ID we want to access, so we will just add it as a parameter.
To add a parameter to an HTTP request we just need to add a question mark, the name of the parameter and its value.
?canisterId= rrkah-fqaaa-aaaaa-aaaaq-cai
(I’ve chosen the ID of the back-end canister)
Hence our complete request looks like this:
http://127.0.0.1:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai
Let’s see!
Well we have nothing…
Do you know why ?
Because we made a request to the back-end canister !
(I’m not saying the back-end canister doesn’t exist I’m just saying it has nothing to show us)
We need to check what the front-end has for us.
Let’s change the id.
We have our front-end!
Now if we enter our name and click the button what is gonna happen is our Javascript code running in our browser is going to request a response to the back-end canister who will respond.
Let’s review what we’ve seen
Distinctions between back-end and front-end.
Back-end : Motoko
Front-end : Javascript/HTML/CSS
How a folder is structured and all the files it contains.
HTTP request
Local address.
I hope this article was useful at least a bit and wish you a good day. See you next time.
