통합 가이드: Bubble.io와 Chanty

이 가이드는 Chanty를 Bubble.io 플랫폼에 통합하기 위한 명확한 단계별 절차를 제공합니다. Bubble.io가 기본적으로 즉시 Chanty 통합을 지원하지 않기 때문에 우리는 이 통합을 쉽게하기 위해 사용자 정의 코드/API 호출을 생성할 것입니다.

단계 1: Chanty 계정의 API 키에 액세스하기

• 브라우저에서 Chanty 계정에 로그인하고 관리자 설정으로 이동합니다.
• 'API'라는 섹션이 나올 때까지 아래로 스크롤합니다.
• 이 곳에서 Chanty 계정 고유의 API 키를 찾을 수 있습니다. 이를 복사해 나중에 사용합니다.

단계 2: Bubble.io 계정에 로그인하기

• 또 다른 브라우저 탭을 열고 Bubble.io 웹사이트로 이동합니다.
• 로그인 정보를 입력하고 Bubble.io 계정에 로그인합니다.

단계 3: 새 앱 시작 / 기존 앱 열기

• 메인 대시보드 영역에 들어가면 'New App'을 클릭해 새 프로젝트를 시작합니다. 이미 Chanty와 통합하고 싶은 있는 프로젝트가 있다면, 해당 프로젝트를 열 수도 있습니다.

단계 4: API Connector 플러그인 설치하기

• Bubble.io의 프로젝트 워크벤치로 이동합니다.
• 왼쪽 네비게이션 바에 있는 'Plugins'를 클릭합니다.
• 검색창에서 'API Connector'를 검색합니다.
• 'Install' 버튼을 클릭하면 곧 플러그인이 앱에 추가됩니다.

단계 5: API 호출 설정하기

• 프로젝트 워크벤치로 다시 돌아가 'Plugins'를 다시 클릭합니다.
• 'API Connector' 내에서 'Add another API'를 클릭합니다. 이 곳에서 Chanty API를 추가하게 됩니다.
• API에 인식 가능한 이름을 부여합니다. 예를 들면, 'Chanty API'.
• 'API Base URL' 필드에 Chanty의 API 기본 URL을 입력합니다. 보통 https://api.chanty.com 이와 같은 형태가 되어야 합니다.

단계 6: 인증 설정하기

• 'Authentication' 섹션에서 'Bearer Token' 옵션을 선택합니다.
• 'Shared Headers' 섹션에서 첫 번째 상자에 ‘Authorization’을 쓰고 두 번째 상자에 Chanty의 API Key(단계 1에서 복사했던 것)를 붙여넣습니다.

단계 7: API 호출 추가하기

• 이제 'Add another call'을 클릭합니다.
• 메서드 유형으로 'GET'을 선택합니다.
• 관련 엔드포인트를 입력합니다. 예를 들면, /api/v1/users로 모든 사용자를 가져옵니다. 주의: 이것은 당신이 수행하고 싶은 동작에 따라 다릅니다.
• 'Initialize Call'을 눌러 데모를 확인합니다. 모든 설정이 올바르게 이루어졌다면 응답을 볼 수 있을 것입니다.
• 요구에 따라 다른 API 호출을 설정합니다.

단계 8: API 결과 사용하기

• API 호출을 모두 완료한 후에는 Bubble.io 동작 또는 시각적 요소에 동적 데이터를 삽입함으로써 데이터를 사용할 수 있습니다.
• 'Get data from external API'를 선택하고 추가한 API 호출을 선택합니다.
• Chanty에서 받은 데이터를 이용하여 해당 시나리오에 맞게 연산을 수행합니다.

참고: 이 가이드는 여러분이 Bubble.io와 Chanty의 작동 방식에 대해 기본적인 지식을 갖고 있다고 가정하고 작성되었습니다. API 호출은 Chanty에서 수행하려는 작업에 따라 달라지므로, 이 과정에는 시행착오가 포함될 수 있습니다. 엔드포인트와 그들의 응답을 보다 정확하게 이해하기 위해, Chanty의 API 문서를 먼저 숙지하시기 바랍니다!