Hoppscotch

This activity will take you through using Hoppscotch, a browser-based API client.

You can use Hoppscotch to try out APIs without writing code! It’s a great way to see how APIs work and test different endpoints.

Get Started with Hoppscotch

1. Install the Hoppscotch Browser Extension:
   • Chrome
   • Firefox
   • Edge
   • This allows us to bypass “CORS” restrictions (we’ll talk about this)
2. Navigate to hoppscotch.io and bookmark it.
3. Create a new GET request:
   • In the URL field, enter: https://dog.ceo/api/breeds/image/random
   • Click Send.
4. You should see a JSON response (below) containing a random dog image URL:

   {
     "message": "https://images.dog.ceo/breeds/labrador/n02099712_6586.jpg",
     "status": "success"
   }
   

5. Most APIs return JSON data, which is easy to read and work with. You can also view the response in “Raw” format or as “Preview” (if it’s an image or HTML).

Authenticating with Canvas

Many APIs require authentication (or an API key) to make requests. For example, the Canvas API allows you to access data from your Canvas account, but you need to generate an API token first.

1. In a new tab, go to your User Settings in Canvas.

   • Scroll down to the “Approved Integrations” section and click “+ New Access Token” button.
   • Describe the purpose of the token (e.g., “CS 343 Activity” or “Hoppscotch)
   • Give it a relatively short expiration date, like the end of today’s class. You can always make another token later.
   • Click the “Generate Token” button.
   • Copy the token and (temporarily) paste it in a text file or somewhere local.

2. Log out of Canvas to ensure that your browser doesn’t automatically authenticate for you.

3. Open Hoppscotch and create a new GET request:

   • URL: https://canvas.jmu.edu/api/v1/courses
   • Try pressing the “Send” button. This should give you a “Network Error”.

   • If you open the JS developer console, you should see an error about CORS (Cross-Origin Resource Sharing).

     What is CORS?

     CORS is a security feature where browsers block requests to different domains (like canvas.jmu.edu) unless the server explicitly allows it.

     This is so that sketchywebsite.com can’t just access the API of Canvas or your bank and steal your data.

     Want to read more? CORS is actually a mitigation to prevent a much worse problem called Cross-Site Request Forgery (CSRF).

4. This is why we needed the browser extension! It allows us to bypass CORS restrictions for Hoppscotch.

   • In the Network Error, under “Interceptor”, select “Browser Extension”. This will allow the request to go through.
   • Now click “Send”. You should get a response, but it should be an “unauthenticated” error.
   • If you don’t get an error, it’s possible you’re still logged in to Canvas. Please log out and try again.

5. In Hoppscotch, go to the “Authorization” tab and select “Bearer” as the type.

   • Underneath, paste your Canvas API token into the “Token” field.
   • This adds an “Authorization” header to your request with the value Bearer YOUR_TOKEN_HERE (hop over to the “Headers” tab to see it).

6. Now click “Send” again. You should get a successful response with a list of your courses in Canvas!

7. Let’s modify our request parameters to only show completed courses!

   • Take a look at the Canvas API documentation for “List your courses”
   • Look for a request parameter called “enrollment_state”.
   • In Hoppscotch, you can add this as a query parameter directly to the URL, like this: https://canvas.jmu.edu/api/v1/courses?enrollment_state=completed
   • Or, you can go to the “Parameters” tab and add it as a key-value pair:
     • Key: enrollment_state
     • Value: completed

8. Click “Send” again. Now you should only see courses that you’ve completed!

Authentication and query parameters are common when working with APIs, so it’s important to understand how to use them. Hoppscotch makes it easy to test different parameters and see how the API responds.

Try Other APIs

If you have time, explore other free public APIs using Hoppscotch. Here are some options:

API	Description
RhymeBrain	Word rhymes
Pokémon API	Pokémon data
Advice Slip	Random advice
Open Meteo Weather	Weather data

Pick an API from the list and test an endpoint in Hoppscotch and your browser console. Try modifying the parameters to see how APIs respond to different inputs.

Note

The autogenerated code from Hoppscotch:

const url = 'https://picsum.photos/id/0/info';
const options = {method: 'GET'};

try {
  const response = await fetch(url, options);
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error(error);
}

Can written more concisely:

fetch('https://picsum.photos/id/0/info')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));