Communicating on the Web

Instagram would be pretty terrible if you had to manually copy your photos to your friend's phone when you wanted to share them. Modern applications need to be able to communicate information between devices over the internet.

Gmail doesn't just store your emails in variables on your computer, it stores them on computers in their data centers
You don't lose your Slack messages if you drop your computer in a lake, those messages exist on Slack's servers

How Does Web Communication Work?

When two computers communicate with each other, they need to use the same rules. An English speaker can't communicate verbally with a Japanese speaker, similarly, two computers need to speak the same language to communicate.

This "language" that computers use is called a protocol. The most popular protocol for web communication is HTTP, which stands for Hypertext Transfer Protocol.

Jello

Throughout this course, we'll be building parts of an online issue tracking app called "Jello". It's a typical issue tracker with one key difference: this time it's good, actually.

Assignment

Take a look at the getIssueData function. It retrieves issues from Jello's servers via HTTP.

I also wrote a logIssues function for you. Call logIssues with an argument of the issues variable returned from getIssueData.

Tip

Notice how none of the data that is logged to the console was generated within our code! That's because the data we retrieved is being sent over the internet from our servers via HTTP!

import type { Issue } from "./types";

const issues = await getIssueData();

logIssues();

// don't touch below this line

async function getIssueData(): Promise<Issue[]> {

const apiKey = generateKey();

const response = await fetch(

"https://api.boot.dev/v1/courses_rest_api/learn-http/issues",

{

method: "GET",

mode: "cors",

headers: {

"X-API-Key": apiKey,

"Content-Type": "application/json",

);

return response.json();

}

function generateKey(): string {

const characters = "ABCDEF0123456789";

let result = "";

for (let i = 0; i < 16; i++) {

result += characters.charAt(Math.floor(Math.random() * characters.length));

}

return result;

}

function logIssues(issues: Issue[]): void {

for (const issue of issues) {

console.log(issue.title);