So you want to start coding?

Photo by Hanson Lu on Unsplash

This series of articles is written by a noob for noobs, a friendly guide considering the reader as a newcomer to the community of coders. It will introduce you to the most friendly resources of the neighbourhood, and make you feel quickly at home among us.

Several of my friends recently expressed the desire to start coding, and to realise an Ethereum application for the NGO domain they are working in: “where do I start? what must I learn? is it difficult?”

The answer is “no, learning to code not difficult, there are plenty of free tools to help, but you need some grit”.

It happens by coincidence that I started this trip not so long ago, and can still share my fresh memory of the track to follow. I don’t pretend to make you an expert but at least you’ll get your feet wet and be able to have fun coding. So fasten your seatbelt: here is the roadmap.

Learning Roadmap Milestones

The following diagram shows the different tools that you need to get familiar with when you start coding blockchain. You don’t really need to master them, only to be able to make your own cheat sheet. Don’t be scared off by the number of tools. You’ll get familiar with them easily.

Choose a development environment

Every programmer has their favorite development environment. I’ll explain my choice here. If you prefer another, feel free to change. What is important is the result, not the way to reach it.

The programming language

The programming language I’d recommand a beginner to use is JavaScript. Most of coding tutorials on Internet are in JavaScript so this is where you’ll find the most hand-holding. You can always switch to another programming language later.

The development host

The most comfortable development host is MacOS. Most of the time you’ll be using the MacOS’ underlying Berkeley Unix. A lot of developers use this configuration so most of the tutorials available for free on the Internet will assume that you use an Unix machine. The “civilized” part of the MacOS platform (browsers, Office, entertainment) is well integrated with the development part.

If a Mac is too expensive for your needs, try a Linux machine. Many Windows laptops can be delivered with Linux Ubuntu as the base operating system: https://www.slant.co/options/10700/alternatives/~system-76-lemur-alternatives. I have used a System 76 Linux laptop but finally reverted to my MacBook Pro after I discovered that most developers use MacOS.

If you cannot live without Windows, you may want to try WSL2 (Windows Subsystem for Linux). I have no experience with this and cannot comment but as a fast-forward, here is how to install the Ethereum development environment truffle on WSL2.

One side argument in favor of using MacOS: once you feel comfortable and start considering mobile development, the combination Android Studio and XCode mobile emulator is amazing: you’ll be able to have most iOS and Android mobiles directly on your desktop. Like this 😃 (credit the React Library of https://github.com/fangpenlin/avataaars)

Setup the deployment tools

There are 3 tools that you’ll need when coding, when installing required libraries and deploying your application for tests:

• an IDE, Interactive Development Environment: personally I use VSCode
• a package manager: on JavaScript it is natural to use npm the package manager of node.js
• (optional) a version control tool: use git

Good programming habits

When installing and using the tools, start with the following good habits:

1. follow exactly the steps of the installation guides; you’ll try variations later once this installation is successful
2. search for solution on Stack Exchange: for this, do a Google search of the error message, followed by stackexchange, like for example Pre-built binaries not found for fsevents@1.2. stackexchange. Write down the different answers and choose the most appropriate ones.

Install VSCode

VSCode gives you the following integrated tools:

• text editor with language-specific syntax checker: it indents automatically your code, tracks the matching parentheses and brackets and highlights keywords
• debugger
• terminal console
• git version control

Follow the installation instructions here.

Install nvm, NodeJS, npm

Node.js is a JavaScript runtime environment. As a beginner you may not need it directly, but you’ll use intensively its bundled package manager npm.

On Windows and Linux, the official tutorial recommands to use nvm (node version manager) to install nodejs. See the WSL2 link above.

If you don’t expect to switch between different versions of nodejs, you may want to use Homebrew to install nodejs directly. Once nodejs installed, you’ll also have npm and nvm installed in the bundle. See Homebrew installation guide.

Install git

A version control tool like git is useful even for a beginner to

• progress on new features while keeping a working version on the main branch
• show publicly on github what you have done
• use the gist feature of github to share snippets and obtain help from Stack Exchange

If you have used Homebrew to install node on your MacOS, use it also to install git by typing in Terminal the following command brew install git, or by donwloading the installer here:https://sourceforge.net/projects/git-osx-installer/files/.

Of the 3 tools (VSCode, npm and git), git is the most complex to use efficiently. The following drawing explains thegit commands that you’ll use the most.

Start coding

Simple code

This article is long enough, so the actual coding tools will be described in a next one. However, as a teaser and a reward if you have done the above installations, here is how to use VSCode and nodejs that you just installed to display the classical “Hello World”

1. in VSCode, create a new file and type the following piece of JavaScript code: console.log ('--------> My very first program: Hello World!');
2. save the file in any folder, for example myapp, under the name index.js
3. open the console, that is named “Terminal.app” in MacOS and type node index.js to execute the code.

You will see the following printed out on the console:

Maybe you want a more ambitious ending?

With not much effort, let’s be more ambitious and do a client-server application, displaying the same “Hello World” message in a browser instead of the console. This example is inspired from the Express tutorial. Express is a powerful tool to build quickly a client-server application in JavaScript.

1. Create a folder myapp as above and go there

kvutien@MBP18VTK-2 Tempo % mkdir myapp
kvutien@MBP18VTK-2 Tempo % cd myapp

2. tell npm to initialise the folder. It will create a package.json file with the default dependency parameters

kvutien@MBP18VTK-2 myapp % npm init --yes

3. tell npm to install the package express. For this, it will create a folder node_modules and put there the package express with all dependencies needed to build a client-server application.

kvutien@MBP18VTK-2 myapp % npm install express

4. In VSCode create and store in the folder myapp a file index.js with the following code. We will explain the JavaScript ES6 code in a next article.

const express = require(‘express’);
const app = express();
const port = 3000;

app.get(‘/’, (req, res) => {
res.send(‘- — — → My very first client-server program: Hello Folks!’)
});

app.listen(port, () => {
console.log(‘...’);
console.log(`- — -> Please open your browser at the following address: http://localhost:${port}`);
});

5. Make nodejs execute the code stored in index.js . It will launch a web server that serves the “hello World” string (more exactly - — — → My very first client-server program: Hello Folks!) on the port 3000. You’ll also see in terminal the prompt

Open your browser as a client and type the URL http://localhost:3000, you’ll indeed see the message of the server

That’s all folks.

In the next article, we’ll see the tools needed to code blockchain programs (dApps).