---
tags: devtools2021
---
# Preparing Your Machines: Getting Started (60 mins)

Today's schedule:
- 0900-1000 **Preparation**:
- Introduction (15 mins)
- Install Node (15 mins)
- Install Code (15 mins)
- Install Git and Create Github Repository (15 mins)
- 1000-1230 **Collaborate and Develop**:
- Git Basics + Exercise (60 mins)
- Making Changes and Fixing Errors + Exercise (60 mins)
- Colaboration + Exercise (30 mins)
- 1230-1300 **Quick Lunch**
- 1300-1500 **Fundamentals of Operating System**:
- AWS Setup and Deploy + Exercise (60 mins)
- Introduction to Operating System (60 mins)
- The OS and the Kernel
- OS Services
- The File System
- 1500-1700 **The Internet**:
- The Internet Layering Model (45 mins)
- Transfer Layer Protocols: TCP and UDP (15 mins)
- Network Layer Protocols: Network-Address Translation and IP (15 mins)
- Application Layer Protocol: Domain Name System + Exercise: AWS Route 53 (45 mins)

## Introduction (15 mins)
Requirements:
- [Node](https://nodejs.org/en/download/): run a simple HTTP server
- [Github](https://desktop.github.com): great version controlling and collaboration tool
- [Visual Studio Code](https://code.visualstudio.com/download): fully customisable code editor
- [Wireshark](https://www.wireshark.org): network protocol analyser
- `tcpdump` (in remote machine)

### Background Motivation

Suppose we are a team working on a project that requires a Web Server (or any other server for public clients to use). **What are the things we should consider beforehand and potential challenges?**

We certainly need at the very least:
- Collaboration tools: _we can't be sending the code back and forth via email or chat apps_. 
- A reliable **Computer** to **run** the code: _sure we can use our PC, but it has to run 24/7, 365 days a year, how do we make sure such reliability?_
- A suitable **Operating System** that can actually run the code: _Windows App cant run on macOS, and vice versa. We also need to ensure dependency packages are all installed properly_. 
- **Tools** to monitor the server and maintain the code: _How do we know if it is running fine? Has it crashed? Do we need to restart the computer? If yes, how do we run the app again?_ 
- **Security Measures**: _is the network traffic encrypted or prone to cyberattacks?_

### Learning Objectives
To tackle the challenges above, we will be learning how to use:
1. `git` and Github for version control and collaboration
2. AWS EC2 and AWS Cloud9 to deploy our code reliably in the cloud
3. Capture packets using `tcpdump`
4. Analyse the output in terminal or using Wireshark

And in order to reasonably understand what goes on under the hood, we will dive into the basics of Operating System, mainly a brief introduction in each of the following topics:

#### Operating System
1. Operating System Kernel (UNIX) and Services
1. Accessing OS Services via Command Line Interpreters (Shell brief introduction)
1. The OS Storage Hierarchy
2. Virtualisation: Memory and Processes
3. Communication between processes: Sockets
4. File Systems: Navigating the file system using CLI

#### Computer Networks
1. The Internet layering model
2. Transport layer protocol: TCP and UDP
3. IP Addressing and subnetting
4. Basics of Network-Address Translation and Firewalls
5. Application layer protocol: HTTP (will learn more about HTTPs and SSH in the next lesson)
6. Domain Name Server for IP-hostname translation

At the end of this lesson, you should be able to **collaborate** with others when working on a project using `git` and **deploy** your code in a remote server properly such that the server can start **receiving** public client requests. You will also learn how to **access** the server using it's public **IP** or **domain** name.

### Heads up for Day2
At the end of Day1, you will realise that there's *zero* security measure implemented at our server side. The process of setting up and running the code remotely is also a *tedious* one that has to be repeated each time the remote machine is restarted. In the next lesson (Day2), we will learn how to **automate** restart processes by writing appropriate scripts. We will also learn how basic **asymmetric encryption** works and how it can secure the communication between client and server.

Now let's get started.

# Install Node.js (15 mins)

Install [Node](https://nodejs.org/en/download/) on your machine. Follow the instructions provided in the website depending on your OS. After installation is successful, **test** it by typing`node -v` and then `npm -v` in the command prompt. You should see its version printed out like this:

node -v
npm-v

Output (your version might differ and that's alright):

v15.14.0
7.7.6

# Install Visual Studio Code (15 mins)

Install [VSCode](https://code.visualstudio.com) for optimum coding experience. It is a **very powerful** text editor with plenty of extensions that you can use. You're free to use other code editors of your choice if you wish.

Once Code is installed, create a new folder called `DevTools` somewhere in your file system. Open VSCode and click `File >> Open Workspace`, then find the `DevTools` folder you've just created. This allow Code to access everything in `DevTools`.

Create a **new** file called `server.js` and save it in `DevTools` with the following content:

const http = require("http");

const host = '0.0.0.0';
const port = 8000;

const requestListener = function (req, res) {
    res.writeHead(200);
    res.end("My first server!");
};

const server = http.createServer(requestListener);
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});

Save the file and run it via **Code [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)** using the command `node <filename>`:

node server.js

Output: `Server is running on http://0.0.0.0:8000`

Code's integrated terminal conveniently starts from the **root** of your workspace, so you don't have to spend too much time navigating to the current path.

> Tips: You can use VSCode native terminal by searching for "*terminal*" in the command palette (press cmd+3 macOS or ctrl+3 for Windows). The command palette is an extremely powerful interface which allows you to have access to all of the functionality of VS Code, such as code execution, multiple copy or cut, peek definition, replace symbol, and much more. Each of these tools have their own dedicate **keyboard shortcut**, you can read them [here](https://code.visualstudio.com/docs/getstarted/keybindings). You can also **customise** your own keyboard rules to have your own shortcuts.

To test that everything is working, paste the link http://0.0.0.0:8000 to your web browser and you should see something like this:

> Press `ctrl+c` to quit running `node server.js` in the command prompt.

With this, we have run our first web server. There might be many questions that float around right now:
1. What is the command prompt? The interface where we can magically enter commands like `node <filename>`.
2. What is `http`?
3. How does `server.js` work? What does each instruction mean?
4. What is `0.0.0.0` and what is `8000`?
5. ....any others? Type it in the chat.

We will try to answer all these questions by the end of Day1, and point to you more details so that you can read them by yourselves after today. For now, let's get back on track and imagine that we need to work with others in our team to improve the web server.

This webserver is so simple, it just sends a plaintext and it doesn't even utilise [HTML](https://en.wikipedia.org/wiki/HTML).
> HTML is the standard markup language for documents designed to be displayed in a web browser.

Your teammate wanted to test if the webserver can send some HTML response by changing `const requestListener` only:

const requestListener = function (req, res) {
    res.setHeader("Content-Type", "text/html");
    res.writeHead(200);
    res.end(`<html><body><h1>This is HTML</h1></body></html>`);
};

How would you like your teammate to send this to you?

# Install Git and Create Github Repository (15 mins)

## Git
Git is an Open Source Distributed Version Control System. In short, it is a **content tracker** which allows you to track any changes in all your files:
- Many developers can have a local copy and add code in parallel without conflicts
- Developers can see version histories and unroll to previous "states" if project requirements change over time
- Developers can "branch out" and work on different versions of the project at the same time

The diagram below illustrates how Git works:


* **Local Workspace** (or working directory) refers to the current working folder in your computer. It can contain any files that you have.
* **Staging area** is a temp area containing the files that are going to be a part of the **next commit**, which lets git know what changes in the file are going to occur for the next commit.
> Imagine a box. You can put stuff into the box. You can take stuff out of the box. This box is the staging area of Git.
* **Repository**: Repositories in GIT contain a collection of files of various different versions of a Project. "Local" repository is in your computer, and remote repository is situated in some other server.
> In other words, it is a database containing all the information needed to retain and manage the revisions and history of a project

Repositories are stored in the working directory, specifically the . git/ subdirectory inside the Working Directory (usually hidden, you have to enable view on hidden files). Here's a sample screenshot inside ~/Desktop/FundamentalDevTools as the root working directory of all these `.js` files.


Don't worry, we will get to try this out ourselves very soon.

## Create a remote repository on Github
Finally, you can store your files in the "cloud" (we call this remote repository / server). This is what Github is for.
> GitHub, Inc. is a provider of Internet hosting for software development and version control using Git.

There are other alternatives as well, such as [BitBucket](https://bitbucket.org/product) and [GitLab](https://about.gitlab.com). It comes down to preference.

**Create an account** on Github.com if you haven't already, and then **create a new repository** called `FundamentalDevelopmentTools`. Follow [this](https://docs.github.com/en/get-started/quickstart/create-a-repo) instruction up to Step 6. Here's some suggested settings:

* Select `.gitignore` template as anything that sounds familiar to you. We will edit this later.
* You can tick "add a README file" so we can write some summary for others who visit our repo
* Choose your repo to be "public"

Click "Create repository" and you shall see something like this:

You have just create a **remote repository** with 1 commit: the addition of these two files `.gitignore` and `README.md` into this remote repository.

Now we have everything we need to start collaborating with Git. Go to [this guide](https://hackmd.io/@Crimsonlycans/H1y_B04Wt#Init) to proceed.