Bless API Book

SWAPI - The Star Wars API

Entertainment
Beginner

Overview

All the Star Wars data you've ever wanted

Integration Guide

Step 1: Understanding the API

The Star Wars API (SWAPI) is a free, RESTful API that provides comprehensive data about the Star Wars universe. It doesn't require authentication and offers information about people, films, planets, species, vehicles, and starships.

Step 2: Set Up Your Project

Create the necessary files for your Star Wars Explorer application:

  • index.html - The HTML structure
  • styles.css - CSS for styling
  • script.js - JavaScript for API integration

Step 3: Implement the Code

Copy the following code into your project files:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Star Wars Explorer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Star Wars Explorer</h1>
    </header>
    
    <div class="category-selector">
      <button class="category-btn active" data-category="people">People</button>
      <button class="category-btn" data-category="films">Films</button>
      <button class="category-btn" data-category="planets">Planets</button>
      <button class="category-btn" data-category="species">Species</button>
      <button class="category-btn" data-category="vehicles">Vehicles</button>
      <button class="category-btn" data-category="starships">Starships</button>
    </div>
    
    <div class="search-container">
      <input type="number" id="id-input" min="1" placeholder="Enter ID">
      <button id="search-btn">Search</button>
    </div>
    
    <div class="results-container">
      <div id="results-card">
        <p class="initial-message">Select a category and enter an ID to explore Star Wars data</p>
      </div>
    </div>
    
    <div class="pagination">
      <button id="prev-btn" disabled>Previous</button>
      <span id="page-info">Page 1</span>
      <button id="next-btn">Next</button>
    </div>
    
    <div id="list-container" class="list-container"></div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

Step 4: Test Your Implementation

Open your HTML file in a browser to test your Star Wars Explorer application. You should be able to:

  • Browse different categories of Star Wars data
  • Search for specific items by ID
  • View detailed information about each item
  • Navigate through paginated lists of items

Error Handling

Common Errors

  • 404 Not Found: Invalid ID or resource not found
  • Network Errors: Connection issues or API downtime

Pagination

The SWAPI uses pagination for listing resources. Each page contains up to 10 items, and you need to navigate through pages to see all available data.

API Details

Base URL
https://swapi.dev/api
Authentication
None
Documentation
Official Docs

Endpoints

  • GET
    /people/{id}

    Get a specific person

    Parameters
    • id*
      number - The ID of the person to fetch
  • GET
    /films/{id}

    Get a specific film

    Parameters
    • id*
      number - The ID of the film to fetch
  • GET
    /planets/{id}

    Get a specific planet

    Parameters
    • id*
      number - The ID of the planet to fetch
  • GET
    /species/{id}

    Get a specific species

    Parameters
    • id*
      number - The ID of the species to fetch
  • GET
    /vehicles/{id}

    Get a specific vehicle

    Parameters
    • id*
      number - The ID of the vehicle to fetch
  • GET
    /starships/{id}

    Get a specific starship

    Parameters
    • id*
      number - The ID of the starship to fetch

Bless Network Resources