Introduction to APIs

🎯 Learning Objectives

By the end of this lesson, you will:

• Understand what APIs are and why we need them
• Learn how APIs work in everyday apps
• Make your first API request using a browser
• Understand the GET method for reading data
• View API responses and understand what you're seeing

ℹ️ Info What is an API? API stands for Application Programming Interface. It's a way for different computer programs to talk to each other and share information. Think of it like a menu at a restaurant - it tells you what you can order and how to ask for it!

🍕 The Restaurant Analogy

Imagine you're at a restaurant:

Real Example: Weather App

When you check the weather on your phone:

1. You open the weather app (that's the client)
2. The app asks for weather data (makes an API request)
3. Weather service sends back data (API response)
4. App shows you the weather (displays the data)

🌟 APIs You Use Every Day

You're already using APIs without knowing it!

💡 Fun Fact When you "Sign in with Google" on a website, that website is using Google's API to check who you are!

🌐 Your First API Call

Using Your Browser

The easiest way to see an API in action is using your browser! Your browser can make GET requests just by visiting a URL.

Try this:

1. Open a new browser tab
2. Copy and paste this URL: https://api.github.com/users/octocat
3. Press Enter

You should see something like this:

{
  "login": "octocat",
  "name": "The Octocat",
  "company": "@github",
  "location": "San Francisco",
  "bio": "GitHub's mascot"
}

Congratulations! You just made your first API call! 🎉

📖 Understanding What You See

What you're seeing is called JSON (JavaScript Object Notation). It's how APIs send data:

{
  "name": "Alex",        // Text (called a string)
  "age": 14,            // Number
  "isStudent": true,    // Boolean (true/false)
  "favoriteColors": ["blue", "green"]  // List (called an array)
}

JSON looks like this:

• Uses {} for objects (groups of information)
• Uses [] for arrays (lists of things)
• Has "key": "value" pairs (like "name": "Alex")

🔍 The GET Method

GET is the simplest API method. It just reads information without changing anything.

Think of GET like:

• Reading a book - you look at it but don't change it
• Checking the time - you see it but don't change the clock
• Looking at a photo - you view it but don't edit it

Safe to Try

GET requests are safe because they:

• ✅ Only read data
• ✅ Don't change anything
• ✅ Can be repeated safely
• ✅ Work in your browser

🎮 Fun APIs to Try

Copy these URLs into your browser to see real API responses:

What to Look For

When you try these APIs, notice:

• The data comes in JSON format
• Each API returns different information
• The structure is always key-value pairs
• Some have nested objects or arrays

🛠️ APIs vs Websites

🎯 Practice: Exploring APIs

Challenge One: GitHub User API

Try changing the username in this URL:

https://api.github.com/users/[username]

Replace [username] with:

• torvalds (Linux creator)
• gvanrossum (Python creator)
• Your own GitHub username if you have one!

Challenge 2: Number Facts

This API gives fun facts about numbers:

http://numbersapi.com/42/trivia?json

Try changing 42 to:

• Your age
• Your lucky number
• The current year

What You Should See

Each API returns different data, but it's always structured. Look for:

• Text values in quotes: "like this"
• Numbers without quotes: 42
• Lists in square brackets: ["item1", "item2"]
• Objects in curly braces: {"key": "value"}

📚 Summary

Today you learned:

• APIs let programs share data with each other
• GET requests read data without changing it
• JSON is the format APIs use to send data
• You can test APIs right in your browser
• APIs power all your favorite apps

Great job! You've taken your first step into the world of APIs. In the next lesson, we'll learn how to use JavaScript to make API calls and display the data on a webpage!

🚀 Next Lesson Preview

In Concept 02, you'll learn to:

• Make API calls with JavaScript
• Display API data on a webpage
• Handle API responses properly
• Build your first weather widget!