Bubble.io와 WordPress 통합: 단계별 가이드 2024

단계 1: Bubble.io로 시작하기

통합 과정을 시작하기 전에, 애플리케이션이 Bubble.io에서 설정되어 있어야 합니다. 이미 계정이 있다고 가정하고, 그곳에서 시작하겠습니다:

• Bubble.io 계정에 로그인하십시오.
• 대시보드로 이동하세요,
• WordPress와 통합하려는 애플리케이션을 선택하거나 새 앱을 생성하세요.
• 앱 내부로 들어가서, 기본 내비게이션 메뉴에서 “Settings”를 클릭하세요.

단계 2: Bubble.io에서 API 엔드포인트 설정하기

Bubble.io와 WordPress 사이에서 API를 통해 소통해야 합니다. 먼저 Bubble.io에서 API 엔드포인트를 설정하세요:

• 앱의 설정 페이지에서 “API” 탭을 클릭하세요,
• Data API를 허용하는 상자를 체크하세요,
• This app exposes a POST/Workflow API 상자를 체크하세요,
• “Add an endpoint”를 클릭하고 원하는 대로 이름을 지정하세요(이름을 기억하십시오, 나중에 필요합니다).

단계 3: API를 통해 보낼 데이터 구성하기

다음으로, WordPress로 보내려는 데이터를 정의하세요:

• 여전히 API 페이지에 있으면, 방금 생성한 엔드포인트로 아래로 스크롤하십시오,
• POST 설정을 작업하세요,
• 보내고 싶은 데이터 유형을 정의하십시오 - 예를 들어, 사용자의 이름, 이메일, 프로필 사진을 포함하고 싶을 수 있습니다,
• 각 데이터 유형에 대해 키를 제공하고 필수인지 선택 사항인지 정의하십시오.

단계 4: WordPress를 열고 Rest API Plugin을 설치하세요

이제 WordPress로 전환하여 로그인하는 시간입니다:

• WordPress 대시보드에서 "Plugins" > "Add New"로 이동하세요,
• 검색 표시줄에서 "Rest API - Filter Fields"을 찾아서 입력하세요. 이 플러그인은 받는 데이터를 필터링하고 간단히 합니다,
• Arjun Jain이 제작한 "REST API – Filter fields"이라는 이름의 플러그인을 찾아 설치하세요,
• 설치한 후에는 플러그인을 활성화하는 것을 잊지 마세요.

단계 5: Rest API Plugin 테스트하기

더 자세히 알아보기 전에, 이 플러그인이 제대로 작동하는지 확실히 하세요:

• 새 브라우저 창이나 탭에서 워드프레스 사이트의 URL 뒤에 '/wp-json/'을 입력하세요 (예시: https://yourwebsite.com/wp-json/),
• 엔터를 누르세요,
• 이렇게 하면 웹사이트의 JSON 데이터가 반환됩니다.

단계 6: Http Request Plugin을 설치하십시오

Bubble.io와 WordPress를 통합할 때 중요한 단계는 두 플랫폼 사이의 커뮤니케이션을 용이하게 하는 것입니다. 이때 HTTP Request 플러그인이 사용됩니다:

• 워드프레스 대시보드에서 "Plugins" > "Add New"으로 이동합니다,
• "Http Request"를 검색하십시오,
• KubiQ이 개발한 "HTTP Requests"라는 플러그인을 찾아 설치하십시오,
• 설치 후 반드시 플러그인을 활성화하십시오.

단계 7: HTTP Request Plugin과 함께 작동을 설정하기

이제, HTTP Request plugin으로 작동을 만들어보세요:

• 웹사이트 대시보드에서 "HTTP Requests"로 이동합니다,
• "Add New"를 클릭하십시오,
• 작동을 위한 제목을 제공하십시오,
• 이전에 만든 Bubble.io 페이지에서 API 엔드포인트의 URL을 복사하고 "URL to call"에 붙여넣습니다,
• 메소드 형식을 "POST"로 설정합니다,
• 'Headers' 섹션에서 'add line'을 클릭하고 ‘Key’를 ‘Content-Type’로, ‘Value’를 ‘application/json’으로 설정합니다,
• JSON body에는 보내려는 데이터를 다음의 구조를 사용하여 형식화해야 합니다:

  {
  "data": [{"Key1":"Key1Value", "Key2":"Key2Value", "KeyX":"KeyXValue"}]
  }
  

• "Key1", "Key2", "KeyX"를 Bubble.io에서 설정한 키(데이터 유형)로 대체합니다,
• "Key1Value", "Key2Value", "KeyXValue"를 관련 워드프레스 필드로 교체합니다.

단계 8: 전체 설정이 작동하는지 확인하기

최종 단계는 설정이 작동하는지 확인하는 것입니다:

• HTTP request를 만든 웹사이트 페이지로 돌아가서,
• “Save Changes”를 클릭하십시오,
• 그리고 페이지의 오른쪽에서 “Test Call”을 클릭하십시오,
• 새로 나타나는 페이지에서 테스트 호출이 성공했다면, 200상태 코드를 볼 수 있습니다,
• 요청된 데이터가 도착했는지 보려면 Bubble.io 앱으로 돌아가서 "Logs" > "Server logs"을 확인합니다.

이 가이드에서는 워드프레스에서의 동작이 버블에서의 이벤트를 트리거하고 그 반대도 마찬가지입니다. 따라서 워드프레스에서 어떤 동작에서 데이터를 가져오거나 버블에 데이터를 보내고 싶은지 정확히 이해해야 합니다. 통합된 Bubble + WordPress 환경을 즐기세요!