Node.js - Intro

Flipped classroom videos

• What happens when you open a webpage - Class 1

• What is node js and how to use it - Class 1

• Working with the terminal

• Node.js project structure

Teacher comments

• Design

• Fedt med aflevering af movie. Der er nogle af jer der virkelig begynder at lave opgaverne til jeres egne

• https://github.com/nicklasdean/ITA22F/tree/master/webteknologi/movie-website

• Jeg forventer at alle kommer igennem level 1

  • Hvis i kommer længere så er det godt klaret

img

Learning objectives

• Client server relationship

• Working with the terminal

• Node.js project

  • package.json

  • npm

  • Installing libraries

    • node_modules

  • Importing libraries

  • Creating libraries

  • Nodemon

  • Scripts in package.json

Working with the terminal

When we start working on the backend we start working in the terminal.

The terminal is another way of working with out Operating system. It can feel a bit overwhelming in the beginning.

For working with node.js we need to be able to move around different folders. Let's learn a few commands to do that:

• pwd - This will tell where in the system you are right now. Here is an example: /Users/benjamin-hughes/Documents/projects/

• cd - Means change directory. If i wanted to move into a folder called ITA22-1-sem i would write cd ITA22-1-sem

• cd .. - This means go to the parent folder. If i in the /Users/benjamin-hughes/Documents/projects/ folder wrote cd .. i would be in the /Users/benjamin-hughes/Documents/ folder. You can do this multiple times: cd ../..

• ls - means list. This command will list all the files and folders in the current directory

Hint: When writing in the terminal use tab to autocomplete folder names or file names

Client server relationship

When we load any page in the internet we send a request and get a response back. When we worked with fetch we were sending requests and working with the response that was JSON. When we load a "normal" webpage we send a request and get HTML back that the browser then renders. So far we have been working with the client, also called the frontend. Here we work with html, css and javascript.

We now have to dive into the backend aswell. That means receiving requests and responding to those requests!

Client server relationship

Node.js

Node.js is a tool for running javascript on your computer. Instead of running javascript in your browser we can run it on our computer alone.

To check if you have node.js installed open a terminal and write the following: node -v. This should log out a string like v15.8.0

Running javascript using node.js

To run some javascript code we need to first create a javascript file. Let's do that:

simple-log.js

console.log(5 * 10);

To run the javascript file open a terminal in the same directory as the file. Use cd to navigate to the correct folder! Make sure you can see simple-log.js using the ls command in the terminal

Now run node simple-log.js

50 should now be logged in the terminal

Creating a node project using package.json

The way to run a file above is the most simple way. You simply run the file. Often times when working with node.js we have a project. To create a new node project, navigate to a new folder where you want a new project and run npm init. npm stands for Node Package Manager

Now the terminal will ask lots of questions. You dont have to write anything but just press enter. If you in the terminal write ls you will see that a new file called package.jsonhas been created. This file is a file that has meta data about your project. It should look like this:

{
  "name": "new-node-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Installing libraries

Let's say we wanted to work with emojis in node.js. Let's install a library that works with emojis. To find a library we can go to https://www.npmjs.com/ and search for it. If we search for emoji node then this library pops up: https://www.npmjs.com/package/node-emoji in the right side of the page it says that this is the homepage of node-emoji.

In the beginning of the site it says:

Once you have that set-up, just run npm install --save node-emoji in your project directory. 🚢

We have set-up our node project above (using npm init).

Let's run npm install --save node-emoji

This will do 3 things:

1. Create a folder called node_modules - This is where you find the folders and files relevant for a library

2. Create a file called package-lock.json - this will keep track of the individual versions of the libraries you use

3. Added the following to the package.json file

"dependencies": {
  "node-emoji": "^1.11.0"
}

The dependencies key keeps track of the libraries we have installed in our project.

Importing libraries

Now to use the node-emoji library create a new javascript file, let's call it log-random-emoji.js. To see how we use the library we can go to their website. Here we can see that they import the library with the follwoing code:

var emoji = require('node-emoji');

Let's use their random method to get a random emoji:

const emoji = require('node-emoji');
console.log(emoji.random());

To run this file use node log-random-emoji.js

This will log out a random emoji like the following

{ key: 'battery', emoji: '🔋' }

Creating your own libraries

To create your own library simply create a javascript file:

simple-library.js

module.exports = "hello";

module.exports will export what it is assigned to. It can be assigned to any javascript type like function, object, array

Import it like described above using the path for the file

main.js

const helloString = require('./simple-library.js');
console.log(helloString); // hello

The ./ part means to find the location of simple-library.js relative to the path of the main.js file. In other words main.js and simple-library.js is in the same folder

CleanShot-2022-10-21-at-10.33.40

Nodemon

Instead of all the time going to the terminal and write node log-random-emoji.js. We can instead run the file every time a change happens in the javascript file.

Let's first install Nodemon: npm install -g nodemon The -g means we install nodemon globally so we can use it in all the node projects we might create.

Now instead of running node log-random-emoji.js we run nodemon log-random-emoji.js. Now every time you save your javascript file nodemon will run the file 🎉

Scripts

In the package.json file we can create some shortcuts so that we can standardize how to run our application

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev": "nodemon log-random-emoji.js",
	"start": "node log-random-emoji.js"
},

Now when we are in our application folder in our terminal we can write fx npm run dev. This will the run nodemon log-random-emoji.js. So a sort of shortcut.

In node.js project we often use npm run dev or npm run watch when we are developing our application.

📝 Exercises

📝 Exercise - level 1

From scratch create your own node.js project complete with

• A javascript file

• A package.json file

• The node-emoji library installed

• Scripts set up so we can develop using npm run dev

📝 Exercise - level 1

Search for an emoji using the node-emoji library and log that out

📝 Exercise - level 1

Write a module that exports a function that can add two numbers together

Example:

const addFunction = require('./add-function.js');

console.log(addFunction(1, 4)); // 5
console.log(addFunction(10, 25)); // 35

📝 Exercise - level 1

Write a module that exports a function that will give you a specific number of rocket emojis

Example:

const getRockets = require('./get-rockets.js');

console.log(getRockets(4)); // 🚀🚀🚀🚀

📝 Exercise - level 1

Write a module that exports a function that checks whether a name occurs in a list.

const isElementInArray = require('./is-element-in-array.js');

const names = ["Hans", "Amalie", "Jens"];
// Does the string "hans" exist in the array names
console.log(isElementInArray(names, "hans")); // true
console.log(isElementInArray(names, "Johanne")); // false

Exercise - level 2

Write a function sums all the numbers in an array

const numbers = [5, 67, 8, 9, 10];
console.log(sumOfArray(numbers)); // 99

Exercise - level 2

Write a function that sums all the user ages:

const users = [{
 	name: 'Hans',
  age: 24
}, {
  name: 'Amalie',
  age: 31 
}];
console.log(sumOfUsers(users)); // 55

📝 Exercise - level 3

Write a function that takes a 3 digit integer n and compute the sum of the digits of n

Example:

console.log(getSumOfnumber(334)); // 10
console.log(getSumOfnumber(121)); // 4

📝 Exercise - level 3

Skriv en function der kan finde og returnere antal strenge, som indeholder en bestemt bogstavssekvens i et array

console.log(findOccurence("banan", "an")); // 2
console.log(findOccurence("hahaha", "ha")); // 3
console.log(findOccurence("hipster", "hej")); // 0

📝 Exercise - level 3

Create a function that given two strings find whether the strings are anagrams of each other or not.

console.log(isAnagram('abcd', 'dabc')); // true
console.log(isAnagram('workattech', 'worach')); // false

📝 Exercise - level 3

Write a function that returns the largest number in the array

const prices = [1000, 255, 5890];
consoel.log(getLargestNumber(prices)); // 5890

📝 Exercise - level 3

Write a function that returns the longest string in an array

const names = ["Ib", "Per", "Hans"];
consoel.log(getLongestName(names)); // Hans

📝 Exercise - level 3

Write a function that finds the longest palindromic substring of a given string.