/No-Code Development Agency

Bubble.io에서 평가 시스테ム을 어떻게 구현합니까?

Bubble.io에서 강력한 평가 시스테ム을 구현하는 단계별 가이드를 활용하여 사용자 피드백의 힘을 해제하십시오. 오늘 당신의 앱을 향상시키세요!

Matt Graham, CEO of Rapid Developers

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.

Book a free No-Code consultation

Bubble.io에서 평가 시스테ム을 어떻게 구현합니까?

Bubble.io에서 평점 시스템을 구현하는 것은 플러그인을 사용하고, 페이지에 요소를 추가하고, 평점을 저장하고 표시하는 워크플로우를 구성하는 것을 포함합니다. 다음은 Bubble.io 앱에서 간단한 스타 평점 시스템을 구현하는 단계별 가이드입니다:

1단계:
Bubble 플러그인 마켓플레이스에서 'Bootstrap Star Rating Input Plugin'을 설치하세요. 앱의 플러그인 탭으로 이동하여 '플러그인 추가'를 클릭하고 'Bootstrap Star Rating Input'을 검색합니다. 플러그인을 설치하세요.

2단계:
별 평점 시스템을 표시하려는 페이지로 이동합니다. 왼쪽에 있는 '비주얼 요소' 탭을 클릭하고 설치한 플러그인에서 '스타 레이팅' 요소를 선택합니다. 페이지를 클릭하여 추가하세요.

3단계:
스타 레이팅 요소가 선택된 상태에서, 속성 편집기에서 속성을 설정하세요. 여기에서 최소 및 최대 값, 단계 증가, 별 크기, 초기 내용, 평가되지 않은 별의 색상을 지정할 수 있습니다.

  • 최소값: 이 값은 일반적으로 최소 평점 값인 0으로 설정하세요.
  • 최대값: 이 값은 종종 5 또는 10인 최대 평점 값으로 설정하세요.
  • 단계: 별 등급 시스템의 등급 증가를 정의하세요. 일반적으로 1로 설정합니다.
  • 별 크기: 별의 크기는 Xs, Sm, Md, Lg, 또는 Xl 중에서 선택하세요.
  • 초기 내용: 사전에 존재하는 평점을 표시하는 경우,이 값을 평균 평점으로 설정하세요.
  • 별 색: 선택되지 않은 별의 색을 설정하세요.
  • 평점 색: 선택 된 별을 위한 색을 선택하세요.

4단계:
이제 사용자가 평점을 설정할 때 캡처하는 워크플로우를 설정하세요. 스타 레이팅 요소를 선택하고 '워크플로우 시작/편집'을 클릭하세요. 입력 값이 변경될 때 새 워크플로우를 생성하세요.

5단계:
워크플로우에서 '물건 수정'과 같은 액션을 사용하면 기존 항목의 평가를 업데이트하거나 '새 항목 생성'을 사용하여 새로운 평가를 기록할 수 있습니다.

  • 업데이트하려는 경우, 평점이 저장되어야 하는 항목의 데이터 유형과 필드를 선택 할 수 있습니다. 그런 다음 값을 스타 레이팅의 값으로 설정하세요.
  • 새 평점을 위해 평가 된 항목과 평점 값에 대한 필드를 가진 새 데이터 유형을 생성하세요(아직 수행하지 않았다면). 이러한 필드를 워크플로우에서 설정하세요.

6단계:
평균 평점을 표시하려면, 다른 스타 레이팅 입력 요소를 표시용으로만 사용하세요.

  • Search for Ratings's Rating:average와 같은 식을 이용하여 모든 사용자의 평균 평점을 계산하도록 '초기 내용' 구성하세요.

7단계:
페이지를 미리보여 평점 기능을 테스트하세요. 평점을 제출하고, 시스템이 평점을 제대로 캡처하고 업데이트하는지 확인하세요.

이것으로 끝입니다! 이러한 단계를 따라, 당신은 성공적으로 별 평점 시스템을 Bubble.io 앱에 통합하였습니다. 이 시스템은 사용자가 평점을 제출하고, 평균 평점을 표시하도록 구성된 경우에도 표시할 수 있습니다.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

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.

Explore

WeWeb Tutorials

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.

Explore

No-Code Tools Comparison

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.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences