/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에서 등급 시스템을 구축하기위한 작업은 Bootstrap Star Rating Input Plugin을 사용하여 앱 내에 대화식 별 등급 구성 요소를 생성하는 것을 포함합니다. 여기에 제품이나 서비스에 대한 기본적인 평가 체계를 만드는 단계별 가이드가 있습니다:

단계 1:
Bubble 플러그인 상점에서 Bootstrap Star Rating Input Plugin을 설치하십시오. 앱의 에디터로 이동하여 "Plugins"를 클릭하고 Bootstrap Star Rating Input Plugin을 검색하여 설치하십시오. 이 플러그인은 Yelp와 같은 다른 검토 시스템과 유사하게 별을 클릭하여 사용자가 등급을 매길 수 있게 해줍니다.

단계 2:
별점 요소를 Visual Elements 섹션에서 페이지로 드래그 앤 드롭하세요. 이것은 사용자가 항목에 등급을 매길 수 있는 입력 역할을 합니다.

단계 3:
별점의 최소값과 최대값을 설정하십시오. 최소값은 일반적으로 별이 선택되지 않았음을 의미하는 0으로 설정되고 최대값은 표시하려는 별의 수 즉, 5 별 시스템의 경우 5로 설정됩니다.

단계 4:
스텝 증가를 정의하십시오. 이것은 각 별로 값이 얼마나 변하는지를 나타내는 것입니다. 보통 한 번에 별 한 개를 나타내려면 이것은 1이 될 수 있습니다.

단계 5:
디자인에 가장 잘 어울리는 별 크기를 선택하십시오. 옵션에는 보통 Xs (특별히 작은), Sm (작은), Md (중간), Lg (큰), Xl (특별히 큰)가 포함됩니다.

단계 6:
페이지를 로드할 때 별의 기본값인 초기 컨텐츠를 설정하십시오. 동적 컨텐츠에 대해 숫자 유형을 출력하는 표현식을 사용하십시오.

단계 7:
별의 색상을 'Stars color'로 선택되지 않은 별과 'Rating color'로 선택된 별로 사용자 정의하십시오. 이렇게하면 평가 시스템의 모습을 앱의 디자인에 맞추어 정할 수 있습니다.

단계 8:
사용자가 별점의 값을 변경했을 때 트리거되는 워크플로우를 생성하십시오. 예를 들어, 별점 요소의 값이 변경되면, 데이터베이스의 필드에 별점의 값을 저장하는 "새로운 것을 생성하다" 또는 "것을 변경하다"에 워크플로우 단계를 추가할 수 있습니다.

단계 9:
제품이나 서비스의 평균 평가를 표시하려면 페이지에 다른 별점 요소를 추가해야합니다. 이 두 번째 별점 요소의 초기 컨텐츠를 사용자가 지금까지 제출한 모든 등급의 평균으로 설정하십시오. 이것은 데이터베이스에 저장된 별점을 평균 내는 "검색 수행" 데이터 소스로 계산될 수 있습니다.

단계 10:
페이지를 미리보고 기능을 테스트하십시오. 첫 번째 별점 요소를 클릭하여 평가할 수 있어야하며, 자신의 평가가 두 번째 별점 요소에 의해 표시된 평균에 어떻게 영향을 미치는지 확인해 보십시오. 개별 사용자의 평가를 저장하고 평균을 표시하기 위해 워크플로우가 올바르게 설정되어 있는지 확인하십시오.

등급 시스템을 철저히 테스트하고 사용자 경험을 정교하게 하여 그것을 가능한 한 직관적이고 효과적으로 만드는 것을 잊지 마십시오. 디자인과 기능을 앱의 전체적인 외관과 감각에 맞추어 유지하고 사용자 평가 데이터가 데이터베이스에서 올바르게 저장되고 검색되는지 확인하십시오.

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

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