API 호출하기 ( HTTP 요청 로직 )

외부에서 제공하는 API 를 Http 요청 로직을 이용하면 호출 할 수 있습니다.

이번 가이드에서는 웨이브온 폼에 문의 입력시 Make.com 에서 제공하는 API 를 이용하여 슬랙 메세지를 보내는 방법을 알아 보겠습니다. 이를 응용하면 외부 시스템이 제공하는 다양한 기능(이메일, 문자 등등)을 활용하실 수 있습니다.

1. 외부에서 제공하는 API 확인

외부에서 제공하는 API 명세 확인이 필요합니다. 이번 예제에서는 make.com 이라는 자동화 솔루션을 이용하며, 만약 다른 시스템을 이용 희망하신다면 해당 외부 시스템이 제공하는 API 명세서를 확인이 필요합니다.

API 명세는 아래와 같이 구성되어 있습니다.

• 호출 URL ( 예를들어 https://api.waveon.io/v1/test-api )

• 호출 메서드 ( GET, POST )

• 전송 데이터 ( 예를들어 message : "입력 되었습니다." )

make.com 에서는 WebHook 이라는 형태로 API 를 제공합니다. 웹훅을 만드는 상세 과정은 가이드를 참고하시면 되시며 여기에서는 간략하게 소개합니다.

1) make.com 에서 + 버튼을 눌러 Webhooks 를 선택 하여 웹훅을 만듭니다.

2) Copy address to clipboard 를 눌러 웹훅의 호출 URL 을 복사 합니다.

3) 웨이브온 에서 필요한 곳에 "HTTP 요청" 로직을 추가 합니다. 이번 가이드에서는 폼이 입력 되었을때 실행하려고, 폼을 클릭했을때 넣었습니다.

우측 Result 2 를 보시면 "HTTP 요청" 로직이 있습니다. URL 부분이 복사한 URL을 넣고, Query String 으로는 text, 문의 입력 발생 과 같이 넣습니다.

또는 다른 엘리먼트의 값을 가져와서 넣을수도 있습니다. value 입력창을 마우스 클릭 해서 커서가 켜지면 아래 스크린샷 에서 보시는 것 처럼 왼쪽에 다른 엘리먼트 요소의 내용을 가져올수 있는 팝업창이 뜹니다.

예를들어 입력 폼의 "문의사항" 에 입력된 내용을 가져오고 싶다면 차례대로 "입력 폼 선택 (AppForm)" -> "문의 사항 선택" -> "value 선택" 을 하면 자동으로 입력이 됩니다.

이렇게 설정하시면 제작하신 페이지의 폼에 문의사항이 입력 되었을때 문의사항에 입력된 값이 HTTP 요청을 통해 전송됩니다.

4) 다시 make.com 으로 이동하고 테스트를 진행합니다. "Redetermine data structure" 버튼을 누르고 웨이브온 랜딩페이지에 문의를 한번 입력해 주세요. 그러면 스스로 데이터를 파악 하기 때문에 따로 설정하실 필요가 없습니다.

5) 이제 설정이 완료 되었습니다. 앞으로 로직이 실행될때마다 make.com 의 웹훅이 실행되며 여기서 자유롭게 다른 동작을 추가하실수 있습니다. 저희는 폼에 데이터가 입력 될 때마다 슬랙의 메세지가 전송되도록 설정 하였습니다. make.com 에서는 이메일, 문자 등등 다양한 연동을 지원하기 때문에 원하시는 대로 수정하여 사용 하실 수 있습니다.