🔌

버블 API로 외부 서비스와 연동하기

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

노코더스 ㅣ 노코드 툴, 버블 시작하기

개발 없이 나만의 서비스를 만드는 방법! 노코드 툴, 버블을 노코더스에서 차근차근 시작하세요.

https://nocoders.kr/

b. 버블 서비스에서 워크플로우 API 연동하기

0. Why?

되도록 많은 분들이 햇갈리거나 잘 모르는 이론 및 개념을 다루고자 궁금한 부분을 접수 받아 콘텐츠로 활용(?)하고 있습니다. 질문이 있다면 아래 링크에서 요청해주세요!

→ 버블박스에게 물어보기

문의는 제 콘텐츠가 됩니다 ㅎㅎ

얼마 전에 API와 관련한 질문이 들어왔습니다. 저도 버블을 처음 시작할 때, 버블의 API에 대해 햇갈리면서 삽질한 경험이 있습니다. 많은 분들이 버블 API를 어느 정도 친숙하게 사용할 수 있도록, 글을 끄적여봤습니다.

1. 버블 API?

버블은 크게 2가지 유형의 API를 제공합니다.

워크플로우 API : 버블의 백엔드 워크플로우를 접근하는 API

데이터 API : 버블 데이터베이스를 접근하는 API

이 둘은 완전히 다른 개념의 API이며, 목적과 작동 방식이 완전히 다릅니다. 다만, 둘 다 이름에 “API”가 들어가다보니, 버블 뉴비분들이 많이 햇갈립니다. 저 같이 영어를 못하면, 더 햇갈리는… 이번 글에서는 이 2가지 개념을 확실하게 집고 넘어 가겠습니다.

+ API 공식 문서는 아래서 확인할 수 있습니다.

The Bubble API | Bubble Docs

The Data API allows other systems to search for, read, create, modify and delete data in your application’s database via a RESTful interface.

https://manual.bubble.io/core-resources/api/the-bubble-api

2. 워크플로우 API

a. 기본 개념

우선, 워크플로우 API부터 알아봅시다. 워크플로우 API는 “버블의 백엔드 워크플로우를 접근하는 API”라고 보시면 됩니다. 여기서 말한 “백엔드 워크플로우”는 “서버에서 동작하는 워크플로우”라고 보시면 됩니다. 버블 에디터에서 페이지의 [워크플로우] 탭에서 설정하는 생성한 워크플로우는 “프론트 워크플로우”입니다. 이러한 워크플로우는 클라이언트에 의존해서 동작합니다. 클라이언트는 서비스에 접속한 유저라고 보시면 됩니다. 프론트엔드 워크플로우는 유저가 해당 페이지에 있을 때만 동작합니다. 즉, 워크플로우가 실행되는 와중에 유저가 페이지를 이탈하면, 멈추게 됩니다.

반대로, “백엔드 워크플로우”는 서버에서 동작하기에 유저가 페이지를 이탈해도 계속 동작하게 됩니다. 백엔드 워크플로우의 기본 지식 및 설정 방법은 아래 링크를 참고하시길 바랍니다.

Bubble Boxㅣ백엔드 워크플로우 기능

이걸 모른다면, 당신의 서비스는 나락을 갈 수 있습니다.

https://www.bubblebox.kr/blog/backend_api

[백엔드 워크플로우]에서는 새로운 워크플로우를 만들 때, 트리거로 [API workflow]가 있습니다. 이게 앞서 말한 “워크플로우 API”입니다.

워크플로우 API를 생성하면, 아래처럼 워크플로우 이름을 설정할 수 있습니다. 그 외 해당 API에 필요한 파라미터를 아래처럼 추가해서 사용할 수 있습니다.

워크플로우 API를 사용하는 방식은 크게 2가지입니다. 해당 방식을 좀 더 집중적으로 살펴봅시다

버블 서비스에서 사용하기 : 버블 내에서 워크플로우 API를 작동시킵니다

외부 서비스에서 사용하기 : 외부 서비스에서 워크플로우 API를 작동시킵니다

b. 버블 서비스에서 워크플로우 API 연동하기

백엔드 워크플로우 API는 프론트 워크플로우에서 동작시킬 수 있습니다. 페이지의 [워크플로우]에서 [schdule API workflow] 액션을 추가하면, 앞서 생성한 워크플로우 API를 불러올 수 있습니다. 그러면 해당 액션이 워크플로우 API의 트리거가 됩니다. 즉, 해당 액션이 작동되면, 불러온 워크플로우 API가 실행됩니다.

c. 외부 서비스에서 사용하기

백엔드 워크플로우 API는 외부 서비스에서 동작하게 만들 수 있습니다. 자! 다시 [백엔드 워크플로우]를 봐봅시다. 아래 백엔드 API의 이름은 “kakaonotifiaction_문자 전송” 입니다. 이를 작동하게 만들기 위해선 API endpoint를 알아야 합니다. endpoint는 쉽게 말해, API를 호출하는 URL이라고 보시면 됩니다.

생성한 워크플로우 API를 외부 서비스에서 작동하게 만들기 위해서 [Expose as a public API workflow]를 활성화해야 합니다. 그러면 [Trigger workflow with]가 나오는데, 여기서 해당 API를 작동시키는 method(POST, GET)를 선택하면 됩니다.

[설정] > [API]에서 [Enable Workflow API and backend workflows]를 활성화하면, 아래처럼 workflow API root URL이 나옵니다. 모든 백엔드 API의 endpoint는 https://{app name}/verion-test/api/1.1/wf/{API worfklow name}이라고 보시면 됩니다. 예를 들어, 위의 workflow API의 endpoint는 https://bubblebox-64217.bubbleapps.io/version-test/api/1.1/wf/kakaonotifiaction_문자 전송이 됩니다. 참고로 이 경로에서 version-test 가 있는데, 이는 Dev의 API root URL 입니다. Live의 API root URL은 해당 경로를 지워야 합니다. 외부에서 해당 API endpoint를 호출하면, 해당 워크플로우 API가 작동합니다.

#Dev의 워크플로우 API
- 기본 구조 : https://{app name}/verion-test/api/1.1/wf/{API worfklow name}
- 예시 : https://bubblebox-64217.bubbleapps.io/version-test/api/1.1/wf/kakaonotifiaction_문자 전송

#Live의 워크플로우 API
- 기본 구조 : https://{app name}/api/1.1/wf/{API worfklow name}
- 예시 : https://bubblebox-64217.bubbleapps.io/api/1.1/wf/kakaonotifiaction_문자 전송
Python
복사

d. 접근 권한 키 설정하기

다만, 이렇게만 설정하면 누구나 API endpoint를 호출해 무지성으로 워크플로우 API를 작동하게 만들 수 있습니다.

이를 방지하기 위해서 권한 키를 설정해야 합니다. 생성한 워크플로우 API에서 [This workflow can be run without authentication]을 비활성화 해야 합니다. 비활성화를 하면, 이제 외부에서 해당 API endpoint를 불러올 때, 접근 권한 키를 header에 같이 넘겨줘야 합니다.

권한 키는 [설정] > [API]에서 생성할 수 있습니다. [API Tokens] 섹션에서 API Token 키를 발급하고, 해당 API endpoint를 호출할 때마다 header에 관련 정보를 입력해야 합니다. 이를 통해 권한이 확인되는 경우에만, 외부에서 해당 워크플로우 API를 작동시킬 수 있습니다.

header 입력 시, key는 Authorization로 value는 Bearer {token}을 입력합니다. 예를 들어, 위의 토큰은 “01ce80f58ce…”입니다. 그러면 아래처럼 API를 호출하면 됩니다. 참고로 API method는 워크플로우 API 설정창에서 [Trigger workflow with]에 선택한 값과 동일하게 지정해야 합니다.

3. 데이터 API

a. 기본 개념

이번에는 데이터 API를 알아봅시다. 데이터 API는 “버블 데이터베이스를 접근하는 API”입니다. 쉽게 말해, 버블의 데이터베이스에 저장된 데이터를 접근할 수 있습니다. 예를 들어, 외부에서 버블 DB에 저장된 데이터를 조회하고 싶을 때 사용합니다. 혹은 데이터를 수정하거나 삭제하는 용도로 사용할 수 있습니다. 앞선 워크플로우 API는 “워크플로우”를 데이터 API는 “DB에 저장된 데이터”를 다룹니다.

b. 외부에서 데이터 조작하기

[설정] > [API]에서 보면, [Enable Data API] 영역이 있습니다. 여기서 보이는 선택지는 현재 버블 앱을 구성하는 데이터 테이블입니다. 외부에서 조회를 가능하게 만들고 싶은 테이블을 체크하면 됩니다. 아래를 보시면 아시겠지만, 워크플로우 API와 데이터 API의 root URL는 서로 다릅니다. 마지막 경로를 보면, 워크플로우 API는 /wf, 데이터 API는 /obj 가 들어갑니다.

데이터 API의 endpoint는 https://{app name}/verion-test/api/1.1/obj/{table name}입니다. 예를 들어, User 테이블에 저장된 데이터를 불러오고 싶다면, 데이터 API endpoint로 https://{app name}/verion-test/api/1.1/obj/user를 사용하시면 됩니다. 마찬가지로 참고로 이 경로에서 version-test 가 있는데, 이는 Dev의 API root URL 입니다. Live의 API root URL은 해당 경로를 지워야 합니다. 외부에서 해당 API endpoint를 호출하면, 해당 데이터 API가 작동합니다.

#Dev의 데이터 API
- 기본 구조 : https://{app name}/verion-test/api/1.1/obj/{table name}
- 예시 : https://bubblebox-64217.bubbleapps.io/version-test/api/1.1/obj/user

#Live의 데이터 API
- 기본 구조 : https://{app name}/api/1.1/obj/{table name}
- 예시 : https://bubblebox-64217.bubbleapps.io/api/1.1/obj/user
Python
복사

해당 endpoint를 호출할 때, 무엇을 할지를 고려해 method를 설정해야 합니다. 예를 들어, 데이터를 조회하는 게 목적이면 get 메소드를 사용합니다. 반대로 데이터 추가, 변경이나 삭제를 원하면, post, put, delete를 사용해야 합니다.

endpoint와 method에 대한 자세한 설명은 아래 링크를 참고해주세요

Data API requests | Bubble Docs

The different resources availabe in the Bubble Data API.

https://manual.bubble.io/core-resources/api/the-bubble-api/the-data-api/data-api-requests

c. 권한 설정하기

마찬가지로, 데이터 API도 권한을 설정하는 게 좋습니다. 만약 그렇지 않으면, 옆집에 사는 김모씨가 저희 모르게 버블 DB의 데이터를 빼올 수도 있게 때문입니다.

권한 설정은 워크플로우 API와 동일합니다. [설정] > [API]의[API Tokens] 섹션에서 API Token 키를 발급하고, 해당 API endpoint를 호출할 때마다 header에 키를 입력해야 합니다. 이를 통해 권한이 확인되는 경우에만, 외부에서 해당 데 잍터 IP를 작동시킬 수 있습니다.