Connecting to REST data

Noodl is all about designing with data, creating prototypes that run on real data so you can test your prototypes with real users on real scenarios. Often this requires some help from a fellow coder (or finally taking that Javascript online course you have been thinking about), however we have added a few features that helps a little bit. Let's take a look at a few of these now.

Open Weather Map API

As an example we will use the Open Weather MAP API, this is a cloud service where you can look up the weather for certain locations. It is a great example of a REST cloud service as it uses many of the common patters you will find in other services.

You will find the Open Weather Map API here.

API Key

In most cases when accessing a REST cloud service you will need an API key, in this case you need to sign up and find the API key in the API keys section.

Take note of your API key as you will need it later.

The endpoint

REST services generally have an endpoint where you make your requests. This is nothing more than the base for all URLs you will use to fetch data from the service. The endpoint can usually be found in the documentation for the REST API, in our case the endpoint is:

http://api.openweathermap.org/data/2.5

The resource

The resource is generally what follows after the endpoint in the URL and in the REST pattern it should identify what you are trying to fetch or change (if it is a POST request).

In this guide we will try to fetch the forecast for a specified city, so we will use the /forecast resource. You can read more about the different resources available in the API documentation.

The REST node

When making request to a REST service it is a good idea to use the REST node. Start by creating a REST node and input the information we collected before.

Now the job of a REST node is to take the inputs of the node and reformat them into a REST request. This is all done in a small Javascript script that is attached to the REST node. To learn more about the REST node take a look at the reference documentation.

The script we will use for the REST node is shown below, copy this into the script for the node replacing the template script that is in there by default:

Code

define({
  // The input ports of the REST node, name of input and type
  inputs:{
      apiKey:'string',
      city: 'string'
  },
  
  // The output ports of the REST node, name of output and type
  outputs:{
      city:'string',
      country:'string',
      weather:'string',
      lat:'number',
      long:'number',
      windangle:'number',
      windspeed:'number',
      temperature:'number',
      humidity: 'number'
  },
  
  //Add custom code to setup the request object before the request
  //is made.
  //
  //*request.resource     contains the resource path of the request.
  //*request.method       contains the method, GET, POST, PUT or DELETE.
  //*request.headers      is a map where you can add additional headers.
  //*request.parameters   is a map the parameters that will be appended
  //                      to the url.
  //*request.content      contains the content of the request as a javascript
  //                      object.
  //
  // The inputs and outputs maps can also be accessed via *this.inputs and
  // *this.outputs.
  request:function(inputs,request) {        
    request.parameters.APPID = inputs.apiKey;
    request.parameters.q = inputs.city; 
    request.parameters.v = inputs.country;
  },
  
  // Add custom code to convert the response content to outputs
  //
  //*response.status    The status code of the response
  //*response.content   The content of the response as a javascript
  //                    object.
  //*response.request   The request object that resulted in the response.
  //
  // The inputs and outputs maps can also be accessed via *this.inputs and
  // *this.outputs.
  response:function(outputs,response) {
      outputs.city = response.content.city.name;
      outputs.country = response.content.city.country;
      outputs.lat = response.content.city.coord.lat;
      outputs.long = response.content.city.coord.lon;
      outputs.weather = response.content.list[2].weather[0].description;
      
      outputs.windangle = response.content.list[2].wind.deg;
      outputs.windspeed = response.content.list[2].wind.speed;
      
      outputs.temperature = response.content.list[2].main.temp;
      outputs.humidity = response.content.list[2].main.humidity;
      
  }
})

Now the REST node will have both inputs and outputs correlating to the data needed in the request and available in the response. Now you can provide the API Key and the city, then send a signal to the Fetch input of the REST node and it will perform the request to the cloud service.

First the request function above will be called, this function will format the request using the inputs of the node.

When the response is received it will parse as specified in the response function above and set the outputs of the node.

Once you have the REST node working it is a good pattern to create a component that contains the node so you don't have to repeat this work, or copy and paste the REST node. So if you need to change something in the request you only need to do it in one place.

This is just the basics of the REST node, with it you can expose cloud services and data to designers and developers in a great way to make it easy to design prototypes and experiments on live data.

Sign up to noodl newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.