NoodlでHTTP通信する

## 前回
[スウェーデン発のプロトタイピングツールNoodlを触ってみた - Qiita](https://qiita.com/ryusukefuda/items/bafd6deb402f4277bdc7)

## HTTP通信
HTTP通信もできるっぽいのでそれを試してみる。

## 天気予報のAPIを使う
https://openweathermap.org/api
※ 事前にsign upしてAPIキーを取得しましょう。

## 手順

### 1.  REST Nodeを配置
- Request  
  - Resource: `/forecast`
  - Method: `GET`
- Backend
  - Endpoint: `http://api.openweathermap.org/data/2.5`
- Script

```
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;
      
  }
})

```

- Inputs
  - apiKey: `openweathermapのkey`
  - city: `tokyo`
 

### 2. 表示するtext nodeをroot配下に配置
- label名: `temperature`
- text: `tap here`

### 3. コネクト
- RootからREST
    - Source: `Tap`
    - Target: `Fetch`
- RESTからText
    - Source: `temperature`
    - Target: `text`

### 4. 実行
画面をタップすると数字が表示される

![Jun-09-2019 16-25-10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50232/f24bd103-251a-695b-1ba9-4009172e47de.gif)

このAPIは摂氏でも華氏でもなくケルビンで帰ってくるので値的には間違っていない。

## ここからが真骨頂
Noodlが面白いのはjsも動く。
ということでjsでケルビンから摂氏(℃)へ変換する。

### 5. jsのノードを追加して以下のコードを書く
runの中が単位を変換するコード。
単純にinputsのケルビンを摂氏へ変換してoutputsに返してる。

```
define({
    inputs: {
        kelvin: "string"
    },
    outputs: {
        result: "string"
    },
    destroy: function(inputs, outputs) {

    },
    setup: function(inputs, outputs) {

    },
    run: function(inputs, outputs, changedInputs) {
        if (inputs.kelvin !== undefined) {
            let kelvinNum = Number(inputs.kelvin);
            let degree = (kelvinNum - 273.15).toFixed(2);
            outputs.result = String(degree);
        } else {
            outputs.result = 'Tap Here !!'   
        }
    }
});
```

### 6. コネクト
- RESTからjs
    - Source: `temperature`
    - Target: `kelvin`
- JSからtext
    - Source: `result`
    - Target: `text`

## 7. 実行
いけた

![Jun-09-2019 17-08-33.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50232/097c9b70-1852-e030-978a-5ac4ec42f280.gif)

JSを使えるとなるともはや何でもいけるのでは感すごい。

## 次回
[NoodlでLチカしてみる - Qiita](https://qiita.com/ryusukefuda/items/a373b5cd3baff58a21de)