1 of 53

{{Intro.to.APIs}}

Bit Project X Postman

2 of 53

Reimagining the Classroom

Leveraging technology to rethink the way we teach

bitproject.org/join

3 of 53

Presenters

Kevin VuongDeveloper Relations�Bit Project

Jefferson ChhenDeveloper�Bit Project

Michelle HuDeveloper�Bit Project

Daniel KimPresident�Bit Project

4 of 53

{{Intro to APIs}}

  • What are APIs?
  • Using Postman to Test Endpoints
  • Creating Postman Collections
  • BitBloxs
  • Collection Runners

5 of 53

Before we get started:

Download Postman!

getpostman.com/downloads

6 of 53

Why are APIs Useful?Easy Data Access

Data APIs make authenticated access to all kinds of data easy!

7 of 53

Make a Postman Account!

8 of 53

What is an API?

APIs allow programs to interact with each other without exposing source code

9 of 53

Why are APIs Useful?Faster Development

You don’t need to build everything from scratch.

Makes development easier and faster!

10 of 53

What is a RESTful API?

RESTful APIs allow programs to communicate with each other using HTTP (Hypertext Transfer Protocol) Requests

HTTP

Server

Webpage

11 of 53

HTTP Methods

GET: retrieves data

POST: assigns a value to an empty object

PUT: re-assign/ change a value

DELETE: gets rid of an existing value

12 of 53

Endpoints

  • Endpoint is the receiving end of all your API requests. �
  • It takes a request + data and returns a response.�
  • Endpoints will always return a status code

Status Code

13 of 53

API Testing Game

bitbloxs.herokuapp.com

14 of 53

  • Fill adjacent squares with your team’s color using API
  • Try to get the biggest blob, the most amount of connected squares with your team’s color
  • Notice, some commands can’t do certain actions.

Objective

15 of 53

  • Four colors for four teams: orange, yellow, blue and green
  • Get the most connected squares for your color
  • Volunteers will each lead a team - split into groups
  • ~15 minutes, final result only decided when time is up

Rules

16 of 53

What is cURL?

cURL is a command-line tool for getting or sending data including files using URL syntax.

17 of 53

Open your

Terminal/Command Prompt

18 of 53

GET Requests

We use a GET request when we want to query a collection of data or a specific piece of data

GET requests return a data object (usually in JSON) and a 200 status code

curl --location --request GET "https://bitbloxs.herokuapp.com/boxes?api_key=thisistheapikey"

19 of 53

POST Requests

POST requests are used to send data to the server. It creates a new object.

  • You are “posting” data to the API
  • POST requests generally don’t return data, just a 200 status code

curl --location --request POST "https://bitbloxs.herokuapp.com/change/23/yellow?api_key=thisistheapikey"

20 of 53

PUT Requests

A PUT request is used to change existing data

In contrast to POST, which creates new data

curl --location --request PUT "https://bitbloxs.herokuapp.com/change/23/blue?api_key=thisistheapikey"

21 of 53

DELETE Requests Explained

A DELETE method is used to delete existing data

curl --location --request DELETE "https://bitbloxs.herokuapp.com/delete/23?api_key=thisistheapikey"

22 of 53

What is Postman?

Postman is a collaboration platform for API development.

Makes testing APIs super simple!

23 of 53

Postman FeaturesEasy Testing

Postman allows easy API testing with a click of a button.

No need to use curl command!

24 of 53

Postman FeaturesMock Server

Configuration of mock servers allow for simulation of endpoints without implementing an actual back-end.

This is good for visualizing the data that you would get.

25 of 53

Postman Features

Collections

Postman also allows you to organize a set of API requests.

This makes it quick and easy access to see/edit/delete a request.

26 of 53

Creating a New Collection

27 of 53

Create a Collection

We are going to create a request to get a single box’s color

28 of 53

Postman Features

Environments

Environments allow easy switching between, development and production servers. Environments let you customize requests using variables so you can easily switch between different setups without changing your requests.

29 of 53

Creating an Environment

Click the gear icon. Then, click ADD

30 of 53

Postman FeaturesCredentials

Variables in a Postman collection can be used in the entire collection - allows you to encapsulate sensitive data

31 of 53

Create Variables for your Credentials

Our URL is

https://bitbloxs.herokuapp.com

32 of 53

Create Variables for your Credentials

An API Key is required to access an API. Our API’s key is thisistheapikey

33 of 53

Open Collection

Make sure that you click the menu icon on the bottom left to open the menu!

34 of 53

Creating a GET Request

35 of 53

Use Authentication

36 of 53

Creating the route

input the following link:

{{url}}boxes/22

37 of 53

Postman FeaturesDocumentation

Postman also auto generates beautiful documentation.

This makes it quick and easy for developers to understand all of the features of an API.

38 of 53

Let’s Explore

explore.postman.com/templates/4301

Click View Documentation

39 of 53

Importing Collections

Click the Run in Postman button

40 of 53

Open Collection

Make sure that you click the menu icon on the bottom left to open the menu!

41 of 53

Set Environment

Make sure the environment is set to “Deploy”

42 of 53

Experiment with Postman

In the collection click the “Get all boxes” request. �Click the send button and see what happens!

43 of 53

Experiment with Postman

44 of 53

POST in Postman

Double click the Change color request in the collection.

Your Postman client should look like this

45 of 53

POST in Postman

On the link, replace <string:color> to either blue, orange, green, or yellow.

Your link should look something like this.

46 of 53

POST in Postman

On the link, replace <int:box_id> with a number from 1 to 400.

Your link should look something like this.

After this step, click the Send button!

47 of 53

Psst

Repeat for Put/Delete

Requests

48 of 53

BitBloxs.herokuapp.com

May the best team win!

49 of 53

HOW TO

WIN

50 of 53

Postman FeaturesCollection Runner

Collections are groups of requests that can be run together as a series of requests, against a corresponding environment.

Click the Runner Button

51 of 53

Postman FeaturesCollection Runner

Configure the POST route to look something like this.

Replace {{box_id}} with the number and add the color you want.

52 of 53

How we use Postman

  • Simulating backend service for Frontend Developers
  • Testing endpoints without using curl

53 of 53

Apply here!

Developer Relations meeting now - stick around!

apply.bitproject.org