Bubble과 AppMaster 플랫폼을 통합하는 방법

이 튜토리얼에서는 Bubble 과 AppMaster 를 통합하는 방법을 자세히 살펴보겠습니다. 개발 중인 애플리케이션의 프론트엔드가 Bubble 로 만들어졌지만 백엔드 작업에 대한 기능이 부족하여 AppMaster 기능을 사용하고 싶다고 가정합니다.

방법을 알아봅시다:

Bubble 용 데이터베이스로 AppMaster 사용
Appmaster 에 API 요청 보내기
사용자 인증 수행
요청 헤더에 인증 토큰 사용

API Connector 구성

먼저 Bubble 에서 외부 API 요청을 보낼 수 있는 가능성을 만들어야 합니다. 이렇게 하려면 API Connector 플러그인을 추가해야 합니다.

AppMaster 에 인증 요청을 보내도록 즉시 구성해 보겠습니다. 우리의 임무는 응답으로 인증 토큰을 받기 위해 로그인과 비밀번호를 보내는 것입니다. 기본적으로 모든 프로젝트에서 생성되는 표준 끝점인 POST /auth/ (Auth: Authentication) 를 사용합니다. 프로젝트에서 요청할 정확한 주소와 함께 이에 대한 전체 정보는 Swagger 에서 얻을 수 있습니다.

API Connector 를 구성하려면 Add Another API 버튼을 클릭하고 사용할 요청 매개변수를 설정합니다. 주요 매개변수는 다음과 같습니다.

요청 방법. POST
URL. Swagger 의 Request URL 과 동일
Use as. Data . 이에 대한 응답으로 인증 토큰 데이터를 받아야 합니다.
Data type. JSON
Body . 여기서 가장 중요한 설정은 AppMaster 서버로 보낼 데이터를 지정해야 한다는 것입니다. 동시에 <>에는 해당 입력 필드에서 가져와야 하는 동적 값이 포함됩니다.

{

"login": "<login>",

"password": "<password>"

}

채울 때 테스트 요청에 대한 데이터를 지정하고( Body parameters 에 로그인 및 비밀번호 값 입력), 요청을 초기화하고, 올바르게 작동하고 응답이 실제로 오는지 확인해야 합니다.

입력 필드 설정

다음 단계는 응용 프로그램에 대한 인터페이스를 만드는 것입니다. 우리는 필요한 최소한으로 자신을 제한합니다. 3개의 입력 필드를 생성해야 합니다.

로그인
비밀번호
인증 토큰

처음 두 가지는 매우 분명합니다. 인증을 위해 사용자의 사용자 이름과 비밀번호를 표시합니다. 가장 흥미로운 것은 세 번째 필드인 토큰 필드입니다. 토큰 값을 수동으로 입력할 수도 있지만 AppMaster 백엔드에서 데이터를 수신하여 표시할 수 있도록 하는 것이 우리의 임무입니다.

이렇게 하려면 초기 콘텐츠 값을 구성해야 합니다.

API Connector 에서 이전에 생성된 요청을 선택 Get data from an External API (이 예에서 이름은 AppMaster Auth Call 임)
(body) login 및 (body) password 필드에서 해당 입력 필드의 값을 지정해야 합니다.
token 값 선택(요청에 대한 응답으로 다양한 데이터가 제공되지만 이 예에서는 token 만 관심 대상임)

결과를 테스트할 수 있습니다. 로그인 및 비밀번호 필드에 데이터를 입력하면 AppMaster 백엔드에 자동으로 요청이 이루어집니다. 데이터가 올바르게 입력되고 요청이 성공적인 결과를 반환하면 수신된 인증 토큰이 세 번째 필드에 나타납니다.

데이터베이스에 대한 GET 요청

다음 단계는 새 API 요청을 만드는 것입니다. 이번에는 데이터베이스에서 데이터를 가져오는 작업입니다. 동시에 이러한 데이터가 무료로 제공되지 않고 승인된 사용자만 사용할 수 있다는 사실 때문에 상황이 복잡해집니다.

이렇게 하려면 요청에 특수 헤더를 추가해야 합니다. Authorization 이라고 하고 그 값은 " Bearer "이고 이전에 얻은 인증 키여야 합니다.

실전에서 해보자. API Connector 플러그인으로 돌아가서 새 API 요청을 생성해야 합니다. 스크린샷의 예에서 이것은 요리 목록을 가져오고 메뉴를 만들기 위해 레스토랑 데이터베이스에 대한 호출입니다.

이전 요청과의 중요한 차이점은 매개변수 대신(추가할 수도 있음) 헤더가 사용된다는 것입니다.

Key = Authorization
Value = Bearer {authorization token} (요청을 초기화하기 위해서는 이전에 받은 실제 토큰을 즉시 지정해야 함)

헤더 설정에서 Private 확인란의 선택을 취소해야 합니다. 그렇지 않으면 동적으로 생성할 수 없습니다. 마지막으로 요청을 초기화하고 작동하는지 확인하는 것을 잊지 마십시오.

Repeating Group 설정

이제 디자이너로 돌아가서 새 반복 그룹 요소를 추가하고 설정해야 합니다.

Type of content - 요청 AppMaster Get Data 의 데이터.
Data source - Authorization 헤더를 올바르게 지정하는 것이 중요합니다. 두 부분으로 구성되어 있습니다. 첫 번째 상수는 " Bearer ."입니다. 두 번째 변수는 인증 토큰을 포함해야 하며 해당 입력 필드에서 가져와야 합니다.