Bubble.io를 PrestaShop과 통합하는 단계별 가이드를 발견해보세요. 간편한 전자상거래 경험을 위한 방법을 쉽게 배울 수 있습니다!
PrestaShop은 온라인 스토어를 생성하고 관리할 수 있게 해주는 오픈 소스 전자상거래 솔루션입니다. 제품 관리, 사이트 사용자 정의, 결제 게이트웨이 통합, 마케팅 도구 등 다양한 기능을 제공합니다. PrestaShop은 자신의 온라인 스토어를 위한 종합적이고 사용자 정의 가능한 플랫폼을 찾는 소규모에서 중규모 사업을 위해 이상적입니다. 여러 언어와 화폐를 지원하므로, 국제 시장을 대상으로 하는 사업체에게 우수한 선택이 될 수 있습니다.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
첫 번째 단계: Bubble.io 계정 생성
시작하려면 가장 먼저 Bubble.io에 계정을 생성해야 합니다. Official Bubble.io 웹사이트에서 무료로 가입할 수 있습니다.
두 번째 단계: 새로운 Bubble 앱 생성
로그인한 후 새로운 Bubble 응용 프로그램을 생성합니다. 이를 위해 대시보드로 이동하여 "New App" 버튼을 클릭합니다. 다음으로, 앱의 이름을 선택하고 템플릿에서 시작할 것인지 빈 앱에서 시작할 것인지 결정해야 합니다.
세 번째 단계: API 엔드포인트 생성
먼저 Bubble에서 API 엔드포인트를 구성하여 앱이 데이터를 수신할 수 있게 해야 합니다. 'Settings' 탭을 클릭하고, 'API'로 이동한 다음 'This app exposes a POST/Workflow API'를 활성화합니다.
이제 'Data' 설정을 선택하고 새 'Data type'을 생성합니다. 이것은 통합하려는 PrestaShop 엔티티를 나타냅니다. 예를 들어, 제품을 동기화하고 있다면 이를 "Product"라고 부를 수 있습니다. PrestaShop의 데이터가 포함하는 내용에 따라 필요한 필드를 추가합니다.
'API workflows' 탭으로 이동하여 데이터를 수신하기 위한 새 엔드포인트를 생성합니다. 엔드포인트는 "add_product"와 같이 이름을 지을 수 있습니다. 이제 PrestaShop에서 Bubble로 전송되는 동적 데이터를 정의하고, 이를 Bubble의 데이터베이스에 저장할 수 있습니다.
네 번째 단계: PrestaShop의 API 식별
Bubble.io 앱을 PrestaShop 플랫폼과 통합하려면 PrestaShop의 WebService API 키를 식별해야 합니다. 이를 위해 PrestaShop 관리 패널에 로그인하고, 'Advanced Parameters' 섹션으로 이동한 다음 'Webservice' 섹션을 클릭합니다. 'Enable PrestaShop's webservice' 체크박스가 체크되어 있는지 확인하세요.
다섯 번째 단계: PrestaShop의 API 키 생성
PrestaShop에서 새로운 API 키를 생성하려면 'Add new webservice key'를 클릭합니다. 여기에서 키 설명을 입력하고, 키 권한을 설정하고, 'Generate'를 클릭합니다. 새 키를 안전하게 저장하고, Bubble 앱 구성에서 필요한 읽기, 쓰기, 실행 권한을 기록하세요.
여섯 번째 단계: Bubble이 PrestaShop의 API를 인증하도록 설정
Bubble.io로 돌아간 후 Plugins 탭으로 이동하여 HTTP/API 호출을 허용하는 플러그인을 검색합니다. 예로 'API Connector' 플러그인을 들 수 있습니다. 이를 추가하고 새 API를 생성하십시오. 설정에서 API의 이름을 'PrestaShop'으로 지정하고, API 기본 URL을 상점의 도메인 이름으로 설정하고, 'GET' 호출을 생성합니다. 헤더에는 'Authorization'을 추가하고, 값으로 'Basic' 다음에 PrestShop API 키를 넣습니다. 테스트 호출을 수행하세요, 만약 성공적으로 호출이 이루어지면 Bubble은 PrestaShop에서 데이터를 전송받을 준비가 된 것입니다.
일곱 번째 단계: PrestaShop 데이터를 수신하기 위한 API 호출 생성
'GET' 호출을 설정한 Bubble의 플러그인 탭에서, 이제 다른 API 호출을 생성할 차례입니다. 얻고 싶은 데이터의 종류(제품, 고객, 주문 등)에 따라 다른 GET 요청을 만들어야 합니다. 예를 들어, 제품을 얻기 위해서는 엔드포인트가 /api/products와 같을 것입니다.
여덟 번째 단계: Bubble의 워크플로우를 이용하여 PrestonShop 데이터를 수신
Bubble 앱으로 돌아가서, 테스트 페이지에서 PrestaShop에서 데이터를 가져오기 위해 버튼을 만듭니다. 워크플로우로 이동하여 버튼을 선택하고, 행동으로 플러그인을 선택한 다음 'GET data from API'를 선택합니다. 데이터는 새롭게 생성된 'Data type'에 저장되어야 함을 정의합니다.
아홉 번째 단계: 테스트 요청 보내기
구성을 완료한 후, Bubble이 실제로 PrestaShop 플랫폼에서 데이터를 가져올 수 있는지 확인하기 위해 테스트 요청을 보냅니다. 설정한 모든 다른 API 호출(고객, 주문 등)에 대해 동일한 과정을 반복합니다.
열 번째 단계: 앱 구성
이제 앱이 PrestaShop에서 데이터를 수신하므로, 앱을 사용하여 대시보드, 모바일 앱, 또는 온라인 상점을 돕는 모든 종류의 사용자 정의 도구를 생성할 수 있습니다.
재기하십시오: 통합 작업 중에는 첫 번째 데이터를 수신하거나 오류가 발생하는 데 약간의 시간이 걸릴 수 있습니다.
Bubble.io와 PrestaShop을 통합하는 방법에 대한 안내를 마칩니다. 행복한 개발을 바랍니다!
시나리오: 온라인 패션 소매업자는 온라인 스토어를 성장시키면서도 개인화된 쇼핑 경험을 제공하고 싶어합니다. 그들은 전자상거래를 관리하는 데 PrestaShop을 사용하고 있으며, 고객을 위한 맞춤형 웹 애플리케이션을 만드는 데 Bubble.io를 사용하고 있습니다. 그들은 두 플랫폼을 원활하게 결합하여 제품 정보와 판매 데이터를 자동으로 동기화하려고 합니다.
해결책: Bubble.io와 PrestaShop의 통합
맞춤형 웹 애플리케이션 생성: 소매업자는 Bubble.io를 활용하여 방문자 상호작용을 높이는 웹 애플리케이션을 구축합니다. 이는 추천 제품 제안, 맞춤형 할인 및 프로모션 팝업과 같은 기능을 포함합니다.
통합 설정: 소매업자는 Bubble.io와 PrestaShop 통합을 가능하게 하는 커넥터 또는 API를 설치합니다. 그들은 PrestaShop에서 필요한 API 키를 얻고, 이 키들을 Bubble.io에 배치하여 플랫폼 간의 데이터 전송을 트리거하는 워크플로를 조직합니다.
데이터 동기화 워크플로: 고객이 제품을 주문하면, PrestaShop의 재고 및 판매 데이터가 업데이트되고 변경된 데이터는 자동으로 Bubble.io로 전송됩니다.
업데이트 된 제품 정보: PrestaShop 서버에서 가격, 이름 또는 설명 등의 제품 정보가 변경되면 Bubble에서 생성한 애플리케이션에서 자동으로 업데이트됩니다.
Bubble.io를 통한 고객 참여: Bubble.io로 생성된 개인화된 기능과 애플리케이션은 동기화된 데이터를 활용하여 고객에게 맞춤형 제품 추천 및 프로모션을 제공합니다.
모니터링 및 분석: Bubble.io는 이제 PrestaShop에서 데이터에 직접 액세스 할 수 있으므로 제품 성능 및 고객 행동의 원활한 추적을 가능하게 합니다. 소매업자는 마케팅 전략의 효과를 측정하고 고객 경험을 개선할 수 있습니다.
혜택:
Bubble.io를 PrestaShop과 통합함으로써, 온라인 소매업자는 플랫폼 간의 제품 및 판매 정보를 통합하고, 개인화된 쇼핑 경험을 제공하며, 고객 행동 및 제품 성능에 대한 풍부한 통찰력을 얻을 수 있습니다.
.svg)
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
.svg)
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
.svg)
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.
Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.
.png)
.png)
