Week 12 - Express & APIs

Back-end learning is still thoroughly blowing my mind. A lot of things are going on every time you click something on a webpage and I find this truly fascinating. It has the same spark for me as when I realised how JavaScript could bring such interactivity to websites...

So, what did week 12 look like?

The internet & all who sail in her!

The internet is, for want of a better word, huge. A vast network of cables (underwater and underground) which connects the world. This network web is built on client-server relationships, which send and receive requests as we interact with the internet. Information is passed around computer networks using Internet Protocol Suite (IP/TCP) which is a set of rules detailing how computers transfer that information. This information is referred to as messages, which are broken into smaller chunks called packets. Routers are used to move packets, they understand, manipulate and act based on the data received; as they read the data they calculate the most efficient way to get the data to the destination.

The world wide web is the primary mode of transferring data, identified by URLs (Uniform Resource Locators) and transferred via HTTP (Hypertext Transfer Protocol), over the internet.

Request and Response, Servers and Clients

In HTTP, a client sends a request to a server and waits for a response, this transaction finishes when a response is received or a request times out. A client is anything (smartphone, tablet, laptop etc.) which can request a resource from a server. Servers contain the resources and functionality to send and receive data with other computers on a network. Servers sit at the endpoint of a network and process the requests and then deliver the information to the specified address. A web server is a server which processes HTTP requests and sends contents to the web (there are other types of servers).

There are different types of HTTP requests you can make:

GET - request to retrieve a resource
POST - request to create a resource on server
PUT - completely replace resource on server
PATCH - partially update resource on server
DELETE - delete resource from server

To practise our understanding of GET and POST requests we downloaded Postman and did the API challenge here

Web APIs

API stands Application Programming Interface and a Web API means you are interacting with the system via the web. For a far more eloquent explanation of API, please see this freeCodeCamp article. Web APIs are useful, clever tools which have several benefits. Firstly, they provide added security as there is no direct interaction with the database, the only interaction is via the HTTP requests. Another benefit of putting some software behind an API is that HTTP protocol can be utilised in any language, so long as they have the means to make HTTP requests (e.g. Postman). A further benefit is that all the heavy work (logic, data handling etc.) is done by the server, so the client is simply rendering what the API tells it to do.

Express

We were tasked with created an API with Express which is a Node framework, available on NPM npm install express . We also installed Nodemon which is also useful but not vital (it restarts the node application when file changes are detected).

We learned how to start an Express server on localhost:3000:

const express = require('express');

const app = express();

app.listen(3000);

This code sits in your root folder of your app, in an index.js file.

First we have our import, requiring the Express module. Then we declare an app instance, assigned to an instance of the Express API which this means you have a web server instance ready to go. Finally we listen for incoming requests on a certain port on localhost which is the hostname for your own computer. It allows you to access a server running on your computer. Normally localhost points to IP address 127.0.0.1. On top of IP addresses there are ports and each service is accessible via a dedicated port. The port being used above is port:3000.

Routing is the basic aspect of designing APIs because it provides set ways of interacting with the service. To create a route you need a path and a HTTP method. Express supports methods that correspond to all HTTP request methods (see above). This creates an end-point, a route that can be used by the consumer. A route contains a call-back function which defines what happens when the end-point is hit.

Route definition syntax: app.METHOD(PATH, HANDLER)

app.get('/', function (req, res) {
  res.send('GET request to the homepage')
});

We practised this all further with Postman, sending GET and POST requests between different servers which really helped to clarify our understanding of what was happening. Express is a really cool tool, for a more comprehensive run down please go here here.

Here's to week 13 of bootcamp!

My Key Take Aways

Read the code in articles - I don't intend to be facetious with this, but really, read the code blocks. In fact, you could even write them out, put them in your code editor or console. If the article you're reading asks you to code along with them (as a lot of the back-end ones do), do it. The muscle memory and doing the action will help a lot.

Have fun with it - Back-end will probably continue to be mega for me forever, because it's a very big, very abstract thing. The magic going on "under the hood" as they say is pretty incredible so enjoy the learning and find a few projects which excite you!

Acknowledge it - We've been learning a lot, and actually it's pretty exhausting to be a constant state of "not getting it". 3 months ago I didn't even know what an API was, or how a server worked. That's complicated stuff learned in a very short space of time round of applause Keep going, well done!

Jennifer Cant