API Sketching Example

Sketching the Onboarding API

Like the pencil sketches Gehry uses to explore possible building designs, we can create API sketches to explore our API designs. For example, in the Onboarding API project we’ve been working on over the past several chapters, we have the startOnboarding action defined in our ALPS document when we added action elements. Let’s walk through a sample design sprint for just this one element of our API.

For starters, our ALPS document includes the following element that describes the startOnboarding action:

...
{"id" : "startOnboarding", "type" : "unsafe", "rt" : "wip"}
...

Now, we need to turn that into an actual message that would be sent from the API provider to an API client application. One possible API response might look like this:

{
"startOnboarding" : "http://api.example.org/start"
}

From this example, we simply translated the startOnboarding action in the ALPS document into a name-value pair in a JSON message. That certainly works. But as we look at it, quite a bit of information is missing (or assumed). Maybe we should add a bit more content to the message to make it easier to understand.

Here’s the next sketch for the startOnboarding action:

{
  "link" : {"id" : "startOnboarding", "href" : "http://api.example.org/start"}
}

This is a bit easier to read and understand. We created a link element in the message that contains the id element from the ALPS document and created an href element to identify the actual URL.

Again, as we look at this sketch, it might occur to us that our response messages are likely to have several link elements in them. Maybe this sketch is better:

{
  "links" : [
    {"id" : "startOnboarding", "href" : "http://api.example.org/start"} 
  ]
}

Now we have an array of links, each with their own id and href values.

Something else that is missing from this message is some indication of its type—what kind of message is this response? For that, we’d like to add another named element at the root of the response, which looks like this:

{
  "onboarding" : {
    "links" : [
      {"id" : "startOnboarding", "href" : "http://api.example.org/start"}
    ] 
  }
}

It’s clear that this is an onboarding message. That can come in handy for API consumer applications that need to know what type of response message they have in order to know how to parse the incoming data and/or render it on a screen.

How about we jump ahead a bit? The following design actually looks close to the final design to use for the Onboarding API: