Bubble.io와 3dcart (now Shift4Shop) 통합: 단계별 가이드 2024

Bubble.io와 Shift4Shop의 통합

단계 1: Bubble.io에 계정 만들기

우선, Bubble.io 웹사이트를 방문하세요. 웹페이지의 오른쪽 상단에서 **'가입하기'**라는 옵션을 찾을 수 있습니다. 그것을 클릭하면 Google 계정 또는 이메일을 사용하여 새로 가입할 수 있는 페이지가 나타납니다. 이미 계정이 있다면 Bubble.io 웹페이지의 가장 오른쪽 상단에 있는 '로그인' 옵션을 클릭하면 됩니다.

단계 2: Shift4Shop에 계정 만들기

이제 Shift4Shop 웹사이트를 방문하세요. 페이지 오른쪽 상단에서 '가입하기' 또는 '무료로 시작하기' 버튼을 클릭하세요. 그 후 나오는 지시사항을 따라 Shift4Shop 계정을 생성하세요. 이미 계정이 있다면, '로그인' 옵션을 클릭하고 자격 증명을 입력하면 됩니다.

단계 3: Bubble.io에서 새 프로젝트 시작하기

Bubble.io 계정에 로그인한 후, 좌측 사이드바에 있는 '새 앱' 옵션을 클릭하세요. 앱 이름, 애플리케이션 유형, 템플릿 등 필요한 정보를 입력하세요.

단계 4: Shift4Shop에서 API 자격 증명 얻기

새 웹 브라우저 탭에서 Shift4Shop 온라인 스토어 매니저로 이동한 후, '모듈' 섹션으로 이동합니다. '모듈' 영역에서 **'REST API'**를 검색하고 그것에 대한 '설정' 버튼을 클릭하세요. 그런 다음 새로운 공개 키를 생성하고 이 키를 나중에 Bubble의 API 커넥터에서 사용하기 위해 저장하세요.

단계 5: Bubble.io 앱 설정으로 이동하기

Bubble.io 브라우저 탭으로 다시 전환하고 방금 만든 앱의 설정으로 이동합니다. 이동하려면 왼쪽 사이드바에 있는 '설정' 옵션을 클릭하세요.

단계 6: Shift4Shop API 추가하기

'설정' 페이지에서 왼쪽 사이드바에서 **'API'**를 클릭하면 새 API를 추가하는 옵션이 나타납니다. 그것을 클릭하고 다음의 세부사항을 입력하세요:

• API 공급자 이름: Shift4Shop
• 공유 헤더:
  • 'secureUrl' ${secureUrl}
  • 'public_key' ${public_key}
• 공유 매개변수:
  • 'format' json

이곳에서 ${secureUrl} 을 Shift4Shop 상점 URL로, ${public_key} 을 4단계에서 Shift4Shop에서 얻은 공개 키로 바꾸세요.

단계 7: API 메소드 설정하기

Shift4Shop API 용 기본 설정을 추가했다면 이제 사용하려는 다양한 API 메소드를 설정할 수 있습니다.

예를 들어, 모든 제품을 검색하는 메소드를 설정하려면 다음과 같이 하세요:

• 'API 엔드포인트' 섹션에서 새 엔드포인트를 추가하는 버튼을 클릭합니다.
• 이 메소드의 세부 정보를 입력합니다:
  • 엔드포인트 이름: '모든 제품 가져오기'
  • 기본 URL: ${secureUrl}/api/v1/products.json
  • ${secureUrl} 을 실제 Shift4Shop 상점 URL로 바꾸세요.
  • 메소드: GET
  • 매개변수: 이 엔드포인트에는 필요하지 않습니다.

더 많은 엔드포인트 메소드는 Shift4Shop API 문서를 참조하세요.

단계 8: API 호출 초기화하기

API 메소드를 추가한 후 '호출 초기화' 버튼을 클릭하여 API에 요청을 보내고 응답 구조를 자동으로 사전 채우기를 합니다. 모든 것이 올바르게 진행되면 Shift4Shop API에서 성공적인 응답을 볼 수 있습니다.

단계 9: 앱에서 API 사용하기

이제 Bubble.io 앱에서 Shift4Shop API를 사용할 수 있습니다. 이것은 워크플로우 작업 내에서 또는 앱 편집기의 시각적 요소의 데이터 소스에서 수행될 수 있습니다. Bubble.io에서 제공하는 동적 데이터 처리 기능을 최대한 활용하여 API 응답 데이터를 필요에 따라 조작하는 것을 잊지 마세요.

그게 다입니다, 이제 당신은 Bubble.io와 Shift4Shop (3dcart)를 성공적으로 통합했습니다. 필요에 따라 더 많은 API 메소드를 추가하기 위해 같은 단계를 반복할 수 있습니다.