지난 시간까지 자신만의 강의를 올리고, 검색할 수 있는 기능까지 구현을 해보았다. 이제는 유저들이 강의를 볼 수 있는 페이지를 구축하고, 가장 중요한 결제 기능을 만들어 줘야 하는 시간이다. 사실 텍스트로만 표현하기에는 여러모로 아쉬운 점이 있다. 해당 포스팅에서 참고할 점은 워크플로우를 어떻게 설정하는지, 우리가 설정한 데이터 베이스가 어떻게 활용되는지를 위주로 살펴보면 좋을 것 같다.
1. 콘텐츠 리스트
강의 콘텐츠를 제작해서 업로드했으니, 이제 남은 것은 유저들이 시청할 수 있는 페이지를 만들어 주는 것이다. 먼저 데이터를 쉽게 불러올 수 있도록 "Type of coneten"를 "Course"로 설정해 준다. 이렇게 되면 워크플로우에서 해당 이벤트 데이터를 쉽게 불러올 수 있다.
다음으로 설정해 줄 것은 동적 내용을 페이지 구성요소에 추가하여 워크플로우에서 발송된 과정의 정보를 표시하는 것이다. 저장한 데이터를 불러오는 작업은 비슷하기 때문에 금방 익숙해질 거라 생각한다.
이와 같이 설정하게 되면 리피팅 그룹에 있는 모든 코스를 표시할 수 있고, 비디오 파일 역시 포함된다.
강의 영상은 강의를 구입한 유저들에게만 보여지게 해야 함으로 기본 적인 설정을 안보이게 해야 한다. 아래 이미지와 같이 "This element is visible on page load"의 체크박스를 해제해 주면 된다.
강의를 구매한 유저들에게만 보여지게 하기 위해서는 조건을 설정해 주어야 한다. 노코드 툴이긴 하지만, 과정을 건너뛸 수는 없다. 노코드 툴에 대한 환상만 가지고 있는 분들이 이러한 과정을 접하게 되면 기겁을 하며 그만두는 경우가 많다. 노코드라는 것은 코드를 직접 타이핑을 하지 않는다는 의미지 코드를 통해 만들어지는 과정을 생략한다는 건 아니다. 이처럼 강의를 구매한 유저와 구매하지 않은 유저를 구분해서 워크플로우를 설정하는 건 기본 중에 기본이다.
여기서 설정해야 하는 조건은 미리 정의된 규칙이 충족될 때 실행하게 하는 것이다. 아래 이미지에서 설정된 것은 수강생 목록에 현재 사용자가 포함된 경우에 보이도록 되어 있다.
만약 조건이 충족이 된다면 "This element is visivle"를 체크하면 설정이 끝난다.
2. 강의 구매 기능
노코드 툴로 강의 사이트를 제작했다면 가장 중요한 것 중에 하나가 결제 기능을 만드는 것이다. 버블에서 제공하는 스트라이프 플러그인을 활용하면 쉽게 구현할 수 있지만, 아쉽게도 한국에서는 스트라이프 지원이 되지 않는다.
국내 결제 툴을 활용하기 위해서는 API를 연결해야 하는 등 다소 복잡한 작업이 필요하기 때문에 따로 다뤄볼 예정이다.
오늘 포스팅에서는 버블에서 제공하는 Stripe 플러그인을 사용하는 것으로 설명을 하려 한다.
워크플로우로 이동했다면 "Payment"에서 "Change the current user"를 선택해서 결제 이벤트를 생성해 주면 된다.
이 과정에서 가장 중요한 것은 현재 강의 가격을 기준으로 동적 구매 데이터를 입력해야 한다는 것이다.
이와 같이 설정을 하게 되면 스트라이프 플러그인이 결제 정보를 입력할 수 있는 팝업을 띄워 주게 된다. 플러그인이 없으면 팝업뿐 아니라 모든 워크플로우 다 만들어야 한다. 우리나라 역시 버블(bubble.io) 전용 결제 플러그인이 만들어져야 한다.
결제가 완료되었다면, 결제 후 일어나는 워크플로우를 설정해 주면 된다. 여기서 진행해야 하는 워크플로우는 수강생 목록에 결제한 유저의 정보를 추가하는 것이다. 이전에 설정했던 것처럼 결제를 완료하게 되면 수강생 목록에 포함되어 강의 콘텐츠를 볼 수 있게 되는 것이다.
3. 리뷰 작성 및 불러오기
마지막으로 포함될 기능은 리뷰 작성과 작성한 리뷰를 불러오는 기능이다. 이렇게 되면 핵심 기능이 포함된 MVP가 완성된다.
먼저 리피팅 그룹을 만들어 준 뒤 "Type of conten"는 "Review"로 설정해 주고, "Data source"는 아래 그림과 같이 코스로 맞춰주면 된다.
다시 한번 해줘야 하는 것은 작성된 리뷰를 매핑하여 리피팅 그룹에 표기하는 것이다. 아래 그림과 같이 Publish 버튼을 생성한 뒤 워크플로우로 이동해 주자. 그리고 "Create a new thing"을 만들어 아래 그림과 같이 세팅해 주면 된다. 이제 거의 마무리 단계에 와 있다.
노코드 툴로 만드는 강의 사이트 제작은 여기서 마무리되었다. 어디까지나 핵심 기능을 기반으로 하는 MVP 서비스이니, 더 많은 기능을 만들고 싶다면 bubble.io에서 제공하는 강의를 참고해 보면 좋을 것 같다.
'버블클론' 카테고리의 다른 글
| 노코드(No Code)로 개인 강의 사이트 만들기 2탄 (0) | 2022.11.24 |
|---|---|
| 버블(bubble.io)로 개인 강의 사이트 만들기 1탄 (0) | 2022.11.23 |
| NFT 마켓플레이스 판매 및 구매 기능 만드는 방법 : 3탄 (0) | 2022.11.16 |
| 노코드 버블(bubble.io)에서 NFT 지갑 연결하는 방법 : 2탄 (0) | 2022.11.15 |
| 노코드로 NFT 마켓플레이스 만들기 1탄 : 데이터 베이스 설계 (0) | 2022.11.14 |
댓글