NoodlでJSON BOXを使ってみた

# 今回やること
JSON BOXをNoodlで使う
https://jsonbox.io/

![スクリーンショット 2020-12-05 10.57.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/efda3443-1d16-6064-62e9-ec219afd5c46.png)


## JSON BOXとは
HTTPリクエストでJSONデータの追加・更新・取得などができるサービス。
無料で、30日間だけ保管してくれます。簡易的にDB使いたい時に便利です。

JSON BOXのDoc
https://github.com/vasanthv/jsonbox#readme

# NoodlでJSON BOX

## 新しいJSON BOX IDを取得
https://jsonbox.io/ にアクセスするだけで、新しくJSON BOXが生成されます。
ドメインの下の`box_XXXXXX` がJSONBOXのIDです。
`https://jsonbox.io/【これがJSON BOX ID】`

## POST: 新しくデータを追加
新しくデータを追加したい時に使います。
同じデータでも、POSTで送ると別のIDが割り振られた違うデータになります。

### RESTノードの設定
Resource: JSON BOXのID
Method: POST
Endpoint: `https://jsonbox.io`

### RESTノードの中身
```javascript

define({
	// The input ports of the REST node, name of input and type
	inputs:{
	    //ExampleInput:'number',
	    name:'string',
	    age:'number',
	    countory:'string'
	},
	
	// The output ports of the REST node, name of output and type
	outputs:{
	    //ExampleOutput:'string',
	},
	
	request:function(inputs,request) {
	    request.headers = {
	        dataType: "json",
            contentType: "application/json"};
	    request.content ={
	        name: inputs.name,
	        age: inputs.age,
	        countory: inputs.countory
	    }
	    
	},
	
	response:function(outputs,response) {
	}
})

```

## GET: 登録したデータの取得
登録したデータの一覧を取得します。

### RESTノードの設定
Resource: JSON BOXのID
Method: GET
Endpoint: `https://jsonbox.io`

### RESTノードの中身
```javascript
define({
	// The input ports of the REST node, name of input and type
	inputs:{
	    //ExampleInput:'number',
	},
	
	// The output ports of the REST node, name of output and type
	outputs:{
	    //ExampleOutput:'string',
	},

	request:function(inputs,request) {
	    request.headers = {"content-type": "application/json"};
	    
	},
	
	response:function(outputs,response) {
	    console.log(response.content);
	}
})

```

### 結果
![スクリーンショット 2020-12-05 10.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/627106e7-91d5-ea20-66fc-30604fda519f.png)

### IDを指定して、特定のデータだけ取り出したい時
RESTノードの設定をこのように変更すると、特定の一個を取り出すことができます。

![スクリーンショット 2020-12-05 11.26.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/3b5a7d63-0ee7-aee6-171a-e9d455589db1.png)


Resource: `/【自分のBOX ID】/【データのID】`

```javascript

define({
	// The input ports of the REST node, name of input and type
	inputs:{
	    //ExampleInput:'number',
	},
	
	// The output ports of the REST node, name of output and type
	outputs:{
	    //ExampleOutput:'string',
	    name:'string',
	    age:'number',
	    countory:'string'
	},
	
	request:function(inputs,request) {
	    request.headers = {"content-type": "application/json"};
	    
	},

	response:function(outputs,response) {
	    console.log(response.content);
	    outputs.name = response.content.name;
	    outputs.age = response.content.age;
	    outputs.countory = response.content.countory;
	}
})


```


## PUT: データの更新
更新したいデータのIDを指定して、登録したデータの更新をします。
データのIDはGETで確かめてください。

![スクリーンショット 2020-12-05 10.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/bd4d6c88-4a38-0464-603e-70b7fd65aaac.png)


### RESTノードの設定
Resource: `/【自分のBOX ID】/【データのID】`
Method: PUT
Endpoint: `https://jsonbox.io`

### RESTノードの中身
```javascript
define({
	// The input ports of the REST node, name of input and type
	inputs:{
	    //ExampleInput:'number',
	    name:'string',
	    age:'number',
	    countory:'string'
	},
	
	// The output ports of the REST node, name of output and type
	outputs:{
	    //ExampleOutput:'string',
	},
	
	request:function(inputs,request) {
	    request.headers = {
	        dataType: "json",
            contentType: "application/json"};
	    request.content ={
	        name: inputs.name,
	        age: inputs.age,
	        countory: inputs.countory
	    }
	    
	},
	
	response:function(outputs,response) {
	}
})

```

### 結果
PUTで更新したあと、GETしてください。
きちんと修正が反映されていれば成功です。
![スクリーンショット 2020-12-05 11.13.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/a3027bfc-217b-d93d-43ca-6e5b6f047fd0.png)

# 完成！
NoodlからJSON BOXを作ることができました！