enebular로 만든 REST API를 Noodl에서 두드려 보았습니다.
enebular로 간이적으로 API를 만들고 Noodl에서 두드려 보았습니다!
enebular로 만든 REST API를 Noodl로 두드려 보았다 피 c. 라고 r. 이 m/k 그 qzPfgVL — hedgehog_noodl (@HNoodl)
【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 노드를 제공합니다.
참고 기사
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"/>UI 만들기 via htps // t. 코 / gp3 6 ~ 5
— 하리네즈미 국수 (@hedgehog_noodl) @YouTube
다음에 해보고 싶은 것
Firebase도 사용하여 무작위로 이미지를 표시하도록 하고 싶다!
나는 백엔드의 지식이 정말로 없지만, enebular 사용하면 자력할 수 있을 것 같다.
본편과 별로 관련이없는 이야기
동물 사진은 저와 회사의 동료인 보스 애완동물입니다.
Reference
이 문제에 관하여(enebular로 만든 REST API를 Noodl에서 두드려 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kisaichi07/items/527ba7b3d4ed1dacce07텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)