이 섹션에서는 두 개의 Bubble 애플리케이션을 서로 연결하는 데 사용되는 Bubble App Connector 플러그인을 다룹니다. 이 글은 Bubble의 App Connector 플러그인에 대한 심층 매뉴얼입니다.
(1) 버블 앱 커넥터 정의
Bubble은 API 커넥터 및/또는 SQL 커넥터를 사용하여 대부분의 다른 앱에 연결할 수 있습니다. 그리고 다른 Bubble 응용 프로그램에 연결하고 싶을 때 Bubble App Connector 플러그인을 사용하여 해당 옵션을 간단하게 설정할 수 있습니다.
: 플러그인은 세 가지 작업을 수행합니다.
- API 키 또는 OAuth 인증을 사용하여 다른 Bubble 애플리케이션으로 인증할 수 있습니다.
- 다른 Bubble 애플리케이션의 Bubble Data에 연결됩니다.
- 다른 Bubble 애플리케이션의 Bubble Workflow에 연결됩니다.
API Connector 플러그인으로 이 작업을 수행할 수 있지만 Bubble App Connector는 프로세스를 단순화하고 두 번째 앱의 데이터 유형 및 워크플로를 시각적으로 표시합니다.
*이 문서 전체에서 연결을 시작하는 앱을 첫 번째 앱이라고 하고 연결하려는 앱을 두 번째 앱이라고 합니다.
위의 예시에서는 API 키를 사용하여 두 번째 Bubble 애플리케이션에 연결했습니다.
- Public-workflow는 해당 애플리케이션(Workflow API)에 설정된 API Workflow입니다.
- 작업은 해당 애플리케이션(데이터 API)에 설정된 데이터 유형입니다.
드롭다운 메뉴를 사용하여 데이터 및 API 워크플로 모두에 간단하게 액세스 할 수 있습니다.
(2) 플러그인 설정
1. 첫 번째 App에 플러그인 설치
: Bubble App Connector는 기본 제공 기능이 아니라 플러그인 스토어를 통해 설치해야 하는 선택적 플러그인입니다.
- 설치하려면 메인 panel의 좌측 plugins에 들어가서 add plugins 선택
- 검색창에서 "App Connector"를 검색하고 아래 그림과 같이 첫 번째 앱에 플러그인을 설치합니다.
- 선택한 플러그인의 플러그인 항목 오른쪽 하단에 By Bubble 스탬프가 있는지 확인하십시오.
- install을 클릭하여 앱에 설치합니다.
앱 커넥터 플러그인을 사용하여 두 개의 앱을 통합할 때 연결을 시작하는 앱에 플러그인을 설치하기만 하면 됩니다. 연결되는 앱에는 플러그인을 설치할 필요가 없습니다.
2. 두 번째 App의 준비
- 두 번째 앱에서 일부 설정이 제대로 구성되었는지 확인해야 합니다.
- 설정은 공유하려는 데이터 및/또는 작업의 종류에 따라 다릅니다.
먼저 두 번째 앱의 Bubble의 메인 panel의 좌측 settings → API로 이동합니다.
1) API 워크플로 공유
- 첫 번째 앱에서 두 번째 앱의 API 워크플로를 작동시키려면 두 번째 앱의 Workflow API 및 백엔드 워크플로 활성화(Enable Workflow API and backend workflows)를 선택하여 Workflow API를 활성화해야 합니다.
- 두 번째 애플리케이션에서 트리거하려는 모든 워크플로는 공개 API 워크플로를 노출 활성화(Expose as a public API workflow) 해야 합니다.
2) 데이터 공유
- 두 번째 애플리케이션에서 데이터를 공유하려면 데이터 API 활성화를 선택한 다음 공유하려는 데이터 유형을 활성화하여 데이터 API를 활성화해야 합니다.
- 데이터 API에서 활성화한 각 데이터 유형은 Bubble App Connector 플러그인의 드롭다운에서 사용할 수 있게 됩니다.
3) API 키 생성
- 두 번째 애플리케이션에 대한 전체 관리자 액세스 권한을 얻기 위해 API 키를 설정합니다.
- 이 방법을 사용하면 두 번째 애플리케이션의 워크플로우 및 데이터에 대한 무제한 액세스가 가능합니다.
API → API Token에서 설정 - Generate a new API token(새 API 토큰 생성) 버튼을 클릭합니다.
- API 키 역할을 하는 무작위로 생성된 32자 문자열이 제공됩니다.
- 토큰이 사용된 위치를 추적하기 위해 토큰에 대한 레이블을 제공할 수 있습니다.
- 레이블은 내부용으로만 사용되며 어떤 식으로든 연결에 영향을 주지 않습니다.
4) 연결 설정
이제 플러그인을 설치하고 workflow 및 data를 노출하도록 두 번째 애플리케이션을 설정했으므로 연결을 설정하고 작동하는지 확인할 수 있습니다. 각 필드와 그 의미를 살펴보겠습니다.
- App domain: 앱을 미리 볼 때 표시되는 두 번째 Bubble 앱의 도메인입니다. [형식은] https://앱이름.bubbleapps.io
- App name : 애플리케이션의 이름입니다. 이 필드는 1단계에서 도메인을 입력하면 자동으로 채워집니다.
- Match Versions(버전 일치): 첫 번째 앱의 개발 환경이 두 번째 앱의 개발 환경과 상호 작용하도록 하려면 이 옵션을 활성화합니다. 특별한 이유가 없는 한 이 항목을 체크해 두는 것이 좋습니다.
- Private key: 두 번째 애플리케이션에서 생성한 API입니다.
이 네 단계를 거친 후 Bubble은 노출된 워크플로우 및 데이터 유형을 제시합니다.
위의 예시에는 Public-workflow라는 API 워크플로와 Task라는 데이터 유형이 있습니다.
5) Action VS Data (액션 VS 데이터)
아래 예시에서 보면, public-workflow 또는 Task(data형식) 옆 Use as 에는 installed-call를 data로 설정할지 또는 Action으로 설정할지 선택할 수 있는 드롭다운이 있습니다. 이것은 첫 번째 앱에서 참조할 수 있는 위치를 결정합니다.
- 첫 번째에서 public-workflow가 Action으로 설정되어 있다는 것은, 워크플로 편집기에서 Action으로 호출할 수 있다는 것을 의미합니다.
- 두 번째 Task는 Task 데이터를 다운로드하는 데 사용할 것이기 때문에 Data (데이터 소스)로 설정합니다. 이 경우 Get data from an external API(외부 API 데이터 소스에서 데이터 가져오기)를 사용하여 Task를 사용할 수 있습니다.
(3) 플러그인 사용
1. Action 호출
Action에서 두 번째 애플리케이션의 API 워크플로를 사용하는 방법에 대해 좀 더 자세히 살펴보겠습니다. Action으로 사용한다는 것은 첫 번째 앱의 Action처럼 워크플로의 일부로 추가할 수 있음을 의미합니다.
플러그인과 연결이 설정되면 Plugins 아래에서 Action으로 설정된 모든 명령어를 찾을 수 있습니다.
- 워크플로에 새 Action 추가
- Plugin 하위 메뉴를 클릭합니다.
- Bubble이 자동으로 생성하는 목록에서 관련 작업을 찾습니다.
레이블은 다음 형식을 사용합니다. Run [앱 이름] [작업 이름]
필요한 경우, 이렇게 하면 둘 이상의 응용 프로그램에서 Action을 추적할 수 있습니다.
2. data 쿼리
두 번째 애플리케이션에서 데이터를 쿼리 하기 위해 Get data from an external API data source*(외부 API 데이터 소스에서 데이터 가져오기)를* 사용합니다.
첫 번째 애플리케이션에 두 번째 애플리케이션의 정보들을 나열하고 싶다고 가정해 보겠습니다. Repeating Group(반복 그룹)을 설정하고 다음과 같이 표현식을 설정합니다.
- 콘텐츠 유형으로 Second Bubble app Task를 선택합니다. 여기에서 사용하는 Bubble의 형식은 다음과 같습니다. [App name] [Data type] 즉, Second Bubble App 이 앱 이름, Task 가 데이터 형식입니다.
- 데이터 소스로 Get data from an external API data(외부 API에서 데이터 가져오기)를 선택합니다.
- 데이터 소스가 왼쪽 창을 엽니다. API Provider(공급자)에서 다음 형식으로 나열된 데이터 소스를 볼 수 있습니다. Get [App name][Data type]
- 제약 조건의 3개 필드에서 정렬(sort by), 커서(cursor) 및 반환할 항목 수(number of items)를 선택할 수 있습니다.
- Sort by(정렬 기준): 정렬할 데이터 유형에 대한 필드를 선택하고 오름차순/내림차순 정렬 여부를 선택할 수 있습니다.
- Cursor: 데이터 전송을 시작할 항목을 설정할 수 있습니다. (Bubble의 Item from # 과 유사하게 )
- Number of items(반환할 항목 수): 반환할 항목 수를 지정할 수 있습니다.
