Home
home
버블박스
home
🔗

비개발자도 버블에서 외부 API 연동할 수 있습니다

햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 활용 질문은 가급적 모두의 노코드에 남겨주세요.
후원 받은 커피는 더 많은 자료를 만드는 원동력이 됩니다.
목차

1. API 시작하기

a. API란?

API는 Application Programing Interface의 약자입니다. 사실 영어 단어만 봐도, 무슨 의미인지 감이 잘 오지 않습니다. 쉽게 말해, 서로 다른 서비스의 데이터를 전송하게 도와주는 수단이라고 생각하면 됩니다.
예를 들어, 네이버 검색 데이터를 활용해 검색 트렌드를 보여주는 서비스를 만든다고 합시다. 너무도 구린 작명 센스 기능을 구현하기 위해서 트렌드 조회 서비스가 네이버로부터 검색 데이터를 전달 받을 수 있어야 합니다. 이때, API가 네이버의 검색 데이터를 해당 서비스로 전송하도록 돕습니다.
썸네일 및 이미지 출처 : 데브경수

b. API Connector 플러그인 사용하기

버블에서는 API Connector 플러그인으로 외부 서비스와 API 통신을 할 수 있도록 도와줍니다. 플러그인에서 [API Connector]을 검색하면, 무료로 플러그인을 다운 받을 수 있습니다.
해당 플러그인에서 외부 서비스와 통신할 수 있는 API를 쉽게 생성할 수 있습니다.
API를 제공하는 외부 서비스는 모두 개발 문서를 제공합니다. 해당 문서를 참고해 API Connector에 설정하면, 누구나 버블에서 API를 호출할 수 있습니다.
네이버 검색 API 문서

3. API 개발 문서 읽는 법!

개발 지식이 있는 분이라면, API 개발 문서를 보고 Connector 플러그인으로 API를 연결할 수 있습니다. 다만, 비개발자라면, API 개발 문서를 봐도 무슨 말인지 이해하기 어렵습니다. API 문서를 처음 봤을 때, API 엔드포인트, 메서드, 파라미터 등 난해한 단어 밖에 멘붕이 옵니다.
사실 API 문서 양식은 거의 다 비슷합니다. 읽는 방법을 이해하고, 한 번만 적용을 해보면 모든 API를 사용할 수 있습니다. API 개발 문서에서 보면 될 건 (1) Header 값과 (2) Body parameter 값입니다. 해당 값만 이해해도 누구나 API를 연동할 수 있습니다.

a. Header 확인하기

Header에서 우리가 봐야할 건 크게 3가지입니다.
method : API 호출 방법
URL : API 호출 링크
parameter : Header에 들어가야 하는 파라미터
아래는 네이버 검색 블로그 API 개발 문서입니다. 여기서 Header 정보를 아래처럼 입력하라고 나옵니다.
앞서 말한 3가지가 아래 영역에 명시가 됐습니다.
method
GET
URL
https://openapi.naver.com/v1/search/blog.xml
parameter
X-Naver-Client-Id
X-Naver-Client-Secret
이번에는 카카오 주소 검색 API 개발 문서를 보겠습니다. 보면 Header 정보가 아래처럼 나와있습니다.
method
GET
URL
https://dapi.kakao.com/v2/local/search/address.${FORMAT}
parameter
Authorization

b. Body Parameter 확인하기

API 개발 문서에서 [파라미터]라는 섹션에 body parameter가 명시됐습니다. 보면 각 파라미터마다 필수 표시가 있는데, 필수 파라미터는 반드시 사용해야 합니다. 참고로 여기 있는 파라미터는 header 파라미터와 다르게 사용됩니다.
앞의 이미지는 네이버 검색 API고, 아래 이미지는 카카오 지도 API입니다. 보면 둘 다 [파라미터] 섹션에 있는 걸 볼 수 있습니다.

4. Connector에 API 설정하기

a. Header 값 입력하기

이렇게 Header에 입력해야 하는 정보를 API Connector에 입력하면 됩니다. 앞서 카카오 주소 검색 API에서 확인한 헤더 값을 아래처럼 입력하면 됩니다.

b. Body Parameter 입력하기

body parameter 값을 전달하는 방법은 크게 (1) query string 형식 혹은 (2) Json 형식이 있습니다.API 개발 문서를 보면, 파라미터를 어떻게 전달하는지가 명시됐습니다. 해당 문서에 맞춰서 방법을 선택해야 합니다. 아래를 보면 파라미터를 쿼리스트링으로 전달하라고 명시됐습니다. 이런 경우, query string으로 전달해야 합니다.

i. query string 형식

API Connector 플러그인에서 입력한 URL에 ? 를 입력합니다. 이어서 해당 URL에 전달해야 하는 파라미터를 입력해야 합니다. 파라미터는 파라미터 이름=전달할 값으로 입력해야 합니다. 그리고 파라미터마다 &를 입력해 구분해줘야 합니다. 예를 들어, “query”와 “display”를 쿼리 스트링으로 전달해야 하는 경우, 아래처럼 입력하면 됩니다.
https://dapi.kakao.com/v2/local/search/address.json?query=연세대학교&display=10
JSON
복사
다만 이렇게 입력하면, 파라미터 값이 고정됩니다. 우리는 상황에 맞춰서 파라미터 값을 전달해야 합니다. 이런 경우, URL 입력란에 [변수명]을 입력하면, 해당 부분에 값을 유동적으로 입력할 수 있습니다.

ii. Json 형식

만약 Json 형식으로 전달하려면, 하단의 [Add parameter]을 클릭해 입력란을 추가할 수 있습니다. 그리고 [Key]에는 파라미터 이름을, [Value]에는 파라미터 값을 입력하면 됩니다.

4. 설정한 API 사용하기

[Use as] 드랍다운에서 어떤 걸 선택하느냐에 따라 버블에서 활용 방법이 달라집니다.
[Data] 선택 시, dynamic value인 [Get data from an external API]를 통해 활용할 수 있습니다.
[Action] 선택 시, [workflow] 탭에서 활용할 수 있습니다.
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요! + 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
후원 받은 커피는 더 많은 플러그인과 자료를 만드는 원동력이 됩니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블박스 l BubbleBox