CSE 154

Exercise 1: Posting with Postman

Recall how you would need to make API calls:

For GET requests, you can directly visit the URL on your browser and see the response.

For POST requests, that would be a bit more complicated. We've told you to test your POSTs by creating fetch calls with FormData. (See the slides below)

The following testing code is enough to make a POST request:

        // data parameters gets appended in FormData for POST requests (not in the url!)
        let params =  new FormData();
        params.append("location", "Equestira");
        params.append("group", "CSE 154 Wonderlads");
        params.append("members", "8");
        // make a POST request to httpbin.org/post with parameters attached
        fetch("https://httpbin.org/post", {method: "POST", body: params});
            

JS

Running the code above in the Chrome Developer Tools console will yield a POST request.
You can view the server response under the Network tab (click the image to the right for a larger view).

Now there is an another way to test your APIs. Instead of venturing with the Chrome Developer tools or experimenting the URLs (which can be error prone at times), we can make calls with a dedicated program.

Introducing... Postman!

Ready, Set, Postman!

1. To download Postman, visit https://www.getpostman.com/ and click on Download the App button.
2. Under your operating system, click on the download button. Download will begin shortly.
3. Depending on which operating system,
   • For Macintosh: you will need to unzip the zip and drag Postman to your Applications folder.
   • For Windows, you will need to double click the executable and follow the installation process.

4. Once Postman is launched, you will need to skip signing in by clicking on the "Skip signing in and take me straight to the app" link at the very bottom of the login form.

5. Close this welcome screen and you will be ready to make requests!

Making GET requests

The simplest of the request can be performed with Postman. By typing the URL into the bar and clicking on Send will make a GET request to the server.

Example 1 - GET the course website (https://courses.cs.washington.edu/courses/cse154/19sp/)

You can also insert query parameters (the stuff that goes after the url) to your GET request. They go into the Params input boxes.

Example 2 - GET https://httpbin.org/get w/ params: pony=rainbowdash and pokemon=ponyta

Most of the time you will be looking at the Body tab to see the output from the server. Occasionally you will need to see if the server is sending the correct Content-Type header. The headers can be accessed from the Headers tab.

Example 3 - Viewing headers

Practicing GET requests

Can you do the following?

• Send a request to GET your favorite site. (if you don't have an example, go for
  http://www.csszengarden.com/) Admire their HTML source. (Solution)
• Send a GET request to
  https://courses.cs.washington.edu/courses/cse154/webservices/postmantest/get.php
  (Solution)
• Send a GET request to
  https://courses.cs.washington.edu/courses/cse154/webservices/postmantest/getwithparams.php (Solution)
  • Looks like the server has rejected because we're missing parameters. Send a request with a user parameter of the value ponyta. (Solution)
  • Oof so close! How about setting the user as rainbowdash? (Solution)

Making POST requests

Building POST requests on Postman is no more difficult than creating GET requests. Select POST from the dropdown list to the left of the URL box. Enter a POST URL into the box and hit send. You've just made your first POST request on Postman!

Example 4 - Making a POST request to https://httpbin.org/post

Since POST requests uses FormData instead of query parameters, we need to switch to the body tab in Postman. Select form-data from the radio buttons and enter your parameters.

Example 5 - Making a POST request to https://httpbin.org/post with data: name=rainbowdash, coolness=20-percent-cooler, and postman=rocks!

Practicing POST requests

Can you do the following?

• Make a post request to https://courses.cs.washington.edu/courses/cse154/webservices/postmantest/post.php
  (Solution)
• Make a post request to https://courses.cs.washington.edu/courses/cse154/webservices/postmantest/postwithparams.php.
  (Solution)
  • Let's try logging in with user as rainbowdash. (Solution)
  • Rainbow Dash has told me her password is ponyta. Set the password FormData as ponyta. (Solution)

Exercise 2: Posting with Fetch

Great work! Now it's time to try to replicate what you just did using JavaScript!

Note: One popular strategy for working with APIs is to use Postman to understand the API you are working with then duplicate the request with JavaScript.

Posting With Fetch

We have created a starter project for you to work with. It contains all the HTML and CSS needed as well as a starter JS file.

All you should need to do is make a POST request to the API with rainbowdash's username and password as you did in Postman.

https://courses.cs.washington.edu/courses/cse154/webservices/postmantest/postwithparams.php

Solution