enebular로 만든 REST API를 Noodl에서 두드려 보았습니다.

7529 단어 enebularNoodlREST-API
이제부터 enebular를 시작하겠습니다! ! 그래서,
enebular로 간이적으로 API를 만들고 Noodl에서 두드려 보았습니다!

enebular로 만든 REST API를 Noodl로 두드려 보았다 피 c. 라고 r. 이 m/k 그 qzPfgVL — hedgehog_noodl (@HNoodl)


August 10, 2019

enebular 정보



【enebular】API 준비



우선 enebular 준비.

입력의 Http in 노드, Function 노드, Http response 노드를 사용합니다.

처음 만졌지만 매우 간단!

Noodl 정보



http in



  • 방법: GET
  • URL:/hello
  • 출력: req


function



Noodl에서 요청할 때 'animal' 매개변수를 추가하고

1이라면 「고양이」, 2이면 「하리네즈미」, 그 이외는 「이누」를 돌려주도록 합니다.



http response



다른 도메인에서 액세스할 수 있도록 헤더에 추가

Access-Control-Allow-Origin



우선은 브라우저로 두드린다!



enebular의 endpoint는 오른쪽 상단의 "i"아이콘에 커서를 놓으면 나옵니다.



아래를 브라우저에 넣어보면
https://ev2-prod-node-red-f3511762-e0b.herokuapp.com/hello?animal=1



제대로 돌아왔습니다!



【Noodl】 REST 노드를 사용하여 API를 두드리는



REST 노드 설정



Noodl은 엔드포인트에서 데이터를 요청하거나 검색하는 데 REST 엔드포인트에 연결하여 사용할 REST 노드를 제공합니다.



참고 기사





Noodl에서 HTTP 통신



REST 노드 참조는 이쪽

1. GO!!! 버튼을 탭하면 Fetch(enabular로 작성한 API를 두드린다)

2. 취득한 데이터(이번은 동물의 이름)를 text 노드에서 문자로 표시.



  • Method: GET
  • Resource:/hello (enabular의 http in URL에 설정한 값)
  • endpoint : enabular의 "i"아이콘에 커서를 놓으면 나오는, httpNodePath


또한 REST 노드의 스크립트를 편집합니다.

편집을 누르면 편집 화면이 나옵니다.




define({
    // RESTノードにinputのポートを作成できます。 inputの名前:"データ型"
    inputs:{
        //ExampleInput:'number',
        animal:"number"
    },

    // outputも同様。
    outputs:{
        //ExampleOutput:'string',
        message: "string"
    },

    request:function(inputs,request) {
        //Fetchする時に実行される内容です。「animal」パラメーターに、inputs.animalを挿入。
        request.parameters.animal = inputs.animal;
    },

    response:function(outputs,response) {
        //Responseが返ってきた時に実行する内容です。
        console.log(response.content);
        outputs.message = response.content.name;//outputsのmessageに、レスポンスのnameの値を入れて、RESTノードから出力できるようにします。
    }
})


여기까지 할 수 있다면 REST 노드의 'animal'에 숫자를 넣고 Fetch해 봅시다.



UI도 조금 만들어 보자



화면이 어색하기 때문에 사진 아이콘을 넣어 보았습니다.



- 고양이 클릭 → animal 파라미터에 1을 설정하여 Fetch

- 고슴도치를 클릭 → animal 파라미터에 2를 설정하여 Fetch

- 개를 클릭 → animal 매개 변수에 0을 설정하여 Fetch



실은, Circle 노드에 Image path를 지정할 수 있으므로, 사진을 둥글게 자르는 것도 간단.

프로젝트에 이미지를 삽입할 때는 드래그 앤 드롭할 수 있습니다.



자세한 내용은 아래 동영상으로!

<script async=""src="https://platform.twitter.com/widgets.js"/>

다음에 해보고 싶은 것



Firebase도 사용하여 무작위로 이미지를 표시하도록 하고 싶다!

나는 백엔드의 지식이 정말로 없지만, enebular 사용하면 자력할 수 있을 것 같다.



본편과 별로 관련이없는 이야기



동물 사진은 저와 회사의 동료인 보스 애완동물입니다.


좋은 웹페이지 즐겨찾기