Week 9 - Networking and APIs

Introduction to Networking

Client Server Model

TCP/IP Protocol

HTTP Protocol

URL Format

Web APIs

API Testing Tools

Using APIs

AI Responsible Use

Practice

Assignment

• Teachers

Back to core program

The URL Format

A URL stands for Uniform Resource Locator. In simple terms, a URL is like the street address of a resource on the internet. Just as a GPS needs a specific, unique address to find a location, your browser or API client needs a URL to find a specific file, data endpoint, or service hosted on a server.

Key Characteristics

1. Uniform: The structure and rules for URLs are standardized (defined by the Internet Engineering Task Force, or IETF). This means that every application, from a web browser to a JavaScript network request, interprets the address in the same way.
2. Resource: The thing being located. This could be a static file (like an image or an HTML page), or, in the case of APIs, a dynamic data endpoint (like a list of users or a place to submit a form).
3. Locator: It provides the specific mechanism (the scheme or protocol) and the location (authority and path) needed to access the resource.

URL Components Explained

A URL is essentially an address used by a web browser or application to locate a resource on the internet. While they can seem complex, they follow a predictable, structured format.

The general format is:

scheme://authority/path?query#fragment

Scheme (Protocol)

The scheme or protocol defines the set of rules used to retrieve the resource. It specifies how the browser should communicate with the server.

• Examples**:**
  • http: (HyperText Transfer Protocol)
  • https: (HyperText Transfer Protocol Secure - the standard for secure web traffic)

Authority (Host and Port)

The authority component is often prefixed with // and identifies the server hosting the resource. It is typically broken down into:

• Sub-components:
  • Host (Domain Name or IP Address): The name of the server, e.g., api.example.com or 192.0.2.1.
  • Port (Optional): A specific gate on the server to communicate through. If omitted, it defaults to the standard port for the protocol (e.g., 80 for HTTP, 443 for HTTPS).
    • Example: api.example.com:8080

Path

The path identifies the specific resource on the server. This often resembles the file structure of the server, but in modern web APIs, it often represents a hierarchy of resources.

• Example: In https://api.example.com/users/123/orders, the path is /users/123/orders. The path starts after the host and port, and ends before the first ? or #.

Query String (Optional)

The query string is used to pass additional parameters or data to the server, often to filter, sort, or paginate the requested resource. It begins with a question mark (?) and consists of key-value pairs separated by ampersands (&).

• Example: In .../products?category=electronics&sort=price, the query string is category=electronics&sort=price.
  • Keys: category, sort
  • Values: electronics, price

Fragment (Optional)

The fragment (or hash) component begins with a hash symbol (#) and is used to identify a specific section or portion of the resource. Critically, the fragment is usually processed by the browser and is NOT sent to the server in an HTTP request.

• Example: In .../document.html#section-3, the fragment is section-3. This tells the browser to scroll to the element with the ID section-3 on the page.

Example URL Breakdown

Let's look at a complete example:

https://dev.example.com:443/api/v1/users?active=true#profile-info

<aside> ⌨️

Hands on: Break down this URL into its components: https://deckofcards.com/api/deck/734iqo5k0u8b/draw/?count=1

</aside>

• Answer

URL Object in JavaScript

In JavaScript you can create a URL object from a string and then access its component parts as properties on this object. This works in browsers as well as in Node.js.

const myUrl = new URL('<http://example.com:8080/path?name=value#hash>');

console.log(myUrl.protocol); // Output: http:
console.log(myUrl.hostname); // Output: example.com
console.log(myUrl.port); // Output: 8080
console.log(myUrl.pathname); // Output: /path
console.log(myUrl.hash); // Output: #hash
console.log(myUrl.search); // Output: ?name=value

*https://hackyourfuture.net/*

Found a mistake or have a suggestion? Let us know in the feedback form.