Code Monkey home page Code Monkey logo

going-on-a-bear-hunt's Introduction

๐Ÿป Going on a Bear Hunt

author: - @astroash

Contents

  1. Prerequisites
  2. Introduction
  3. Path & FS
  4. URL & Querystring
  5. Request
  6. Http

Prerequisites

  • understanding of how to run a node server

Introduction

Node allows us to run Javascript outside of the browswer, and is often used to run servers. This workshop is designed to give you experience using a few useful core node modules.

but what is a core module?

A module is code that is written by others for you to use. Node comes with a number of pre written modules, named core modules, which hook into nodes process and allows you to do things you cannot do in vanilla javascript, such as talk to your file system. Core node modules are available in all node projects and do not need to be individually installed.

Setup

As this is a newly cloned repo we need to do a few steps:

  1. npm i - this will install any dependencies this project needs
  2. npm run start - this will start our server. It has been configured to run with nodemon so that the server will restart anytime you make changes.

The server will run on http://localhost:4000

If you want to know what the the endpoint should look like for any of the exercises run npm run solution and it will start a solutions branch server on http://localhost:5000

Exercise 1 - path & fs module

path

Node is able to access any file on your computer. To find the correct file you can either give it a relative path or an absolute path.

relative path - directions from your current location to the file you are trying to find.

  • ./ - start from current directory
  • ../ - go one directory up

absolute path - a path which includes the root directory

  • __dirname - the full path of the current directory

Path module is full of lots of handy methods to allow you to create and work with paths. Some key ones to know about: path.dirname() - gives the full directory of the passed file. ๐Ÿ“ see docs

path.join() creates a path by joining directories/file names and normalising. This can be used with __dirname to give an absolute path. ๐Ÿ“ see docs

path.extname() returns the extension of a file. ๐Ÿ“ see docs

fs

fs stands for file system. This module has lots of methods that allow to access files on your computer. Some key ones to know about: fs.readFile() - reads the contents of a file on your computer asynchronously. ๐Ÿ“ see docs fs.readFileSync() - same as above but synchronous. ๐Ÿ“ see docs

fs.writeFile() - write a file to your computer asynchronously. ๐Ÿ“ see docs fs.writeFileSync() - same as above but synchronous. ๐Ÿ“ see docs

Let's do it!

  • go to the handler for /one
  • import path & fs
  • create a string of the path to bear_one.jpeg
  • read the image using fs
  • set the content type to image/jpeg
  • return the image using response.end()

How do I know if I got it right?

  • On your browser, go to the route you just built a handler for and you should see a picture of a bear
  • If you get stuck, try using console.log in your server to see what is happening

Exercise 2 - url & querystring module

url

URLs are split up into lots of different parts:

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚                                              href                                              โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ protocol โ”‚  โ”‚        auth         โ”‚          host          โ”‚           path            โ”‚ hash  โ”‚
โ”‚          โ”‚  โ”‚                     โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค       โ”‚
โ”‚          โ”‚  โ”‚                     โ”‚    hostname     โ”‚ port โ”‚ pathname โ”‚     search     โ”‚       โ”‚
โ”‚          โ”‚  โ”‚                     โ”‚                 โ”‚      โ”‚          โ”œโ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค       โ”‚
โ”‚          โ”‚  โ”‚                     โ”‚                 โ”‚      โ”‚          โ”‚ โ”‚    query     โ”‚       โ”‚
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
โ”‚          โ”‚  โ”‚          โ”‚          โ”‚    hostname     โ”‚ port โ”‚          โ”‚                โ”‚       โ”‚
โ”‚          โ”‚  โ”‚          โ”‚          โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”ค          โ”‚                โ”‚       โ”‚
โ”‚ protocol โ”‚  โ”‚ username โ”‚ password โ”‚          host          โ”‚          โ”‚                โ”‚       โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค          โ”‚                โ”‚       โ”‚
โ”‚   origin    โ”‚                     โ”‚         origin         โ”‚ pathname โ”‚     search     โ”‚ hash  โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚                                              href                                              โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

url module is that gives you methods to work with URLs. You may have noticed we are using it in our router to get the pathname from requests.

url.parse() - parses a url into url object containing:

{
  protocol: string,
  slashes: string,
  auth: string,
  host: string,
  port: string,
  hostname: string,
  hash: string,
  search: string,
  query: string,
  pathname: string,
  path: string,
  href: string 
}

๐Ÿ“ see docs

querystring

Query strings are information sent to the server at the end of a url. They are used for insensitive data on GET requests such as search criteria. They start with a ? and are key value pairs separated by an &. They follow the format: <url>?<key>=<value>&<key2>=<value2>

querystring module offers methods for you to parse and stringify this type of data.

querystring.parse() - parses query strings into an object ๐Ÿ“ see docs

Let's do it

We are going to write this handler so that you can search for bears by querystring eg: /find?bear=one

  • go to the handler for /find
  • import path & fs & querystring & url
  • use url.parse() to get the search query from the url
  • use querystring.parse() to get the values from the query string
  • check the bear value of the parsed query string. If it is one to four return the correct bear image.
  • if there is no matching bear or no bear query given return a 400

How do I know if I got it right?

  • On your browser, go to the route you just built a handler for (including a querystring!)
  • What should the querystring be..?
  • If you've put the correct querystring you should see another picture of a bear!
  • There are 4 different pictures you can see depending on your querystring

Exercise 3a - request module

Request is a very popular module that helps to make HTTP requests as simple as possible and it is built around the Node HTTP core module. Here is a brilliant article on the Request module. This can be used for making api calls from your server. ๐Ÿ“ see docs

Making server side api calls is good for platforms that need an api key, as you can ensure it is kept secret!

Let's do it

We are going to write the /random handler to return a random bear gif.

  • install the request module npm i request
  • go to https://developers.giphy.com, sign up for an account and then create a new app on their site.
  • make an api call to giphy's random endpoint
  • return an html <img> element with with the src pointing to a gif on giphy which has a bear tag
Hint You can create the string html element by using template literals or adding the string together

How do I know if I got it right?

  • On your browser, go to the route you just built a handler for
  • You should see a random bear gif!

Exercise 3b - http module

But I thought that this workshop was about learning core node modules?

You're right! request is not a core module, as it does not come bundled with node. We are going to find out what this module is doing under the hood by rewriting it using the http.get method. ๐Ÿ“ see docs

I've read lots of node's documentation in this workshop already, I am feeling confident with node core modules!

Great! In that case, I'm not going help you!

EEP, but I am stuck...

๐ŸŒŸ Click here for a few hints ๐ŸŒŸ
  • read the docs
  • google for help
  • don't look at the solutions branch ๐Ÿคท๐Ÿฝโ€

Let's do it

  • In random.js instead of setting the function you just made out equal to module.exports, move it out of module.exports and give it a different name
  • Then set module.exports equal to a new function which does exactly the same thing, but using the http module instead of request!

How do I know if I got it right?

  • It should be exactly the same as 3a!

going-on-a-bear-hunt's People

Contributors

m4v15 avatar astroash avatar mattlub avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.