LoginSignup
7

More than 3 years have passed since last update.

NoodlでHTTP通信する

Last updated at Posted at 2019-06-23

前回

スウェーデン発のプロトタイピングツールNoodlを触ってみた - Qiita

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

この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

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

次回

NoodlでLチカしてみる - Qiita

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7