Bubble.io에서 하이스코어 리더보드를 어떻게 만드는지?

단계 1: 새로운 객체 유형 생성

• Bubble.io 편집기의 데이터 탭으로 이동하여 새로운 객체 유형을 생성합니다. 이를 "PlayerScore"라고 이름 붙일 수 있습니다.
• "Username" 및 "Score"와 같은 필드를 새 객체 유형에 추가합니다.

단계 2: 리더보드 레이아웃 디자인

• 디자인 탭으로 이동하고 페이지에 반복 그룹을 그립니다. 이것이 리더보드가 될 것입니다.
• "PlayerScore" 객체를 검색하여 반복 그룹의 데이터 소스를 정의하고, 최고 점수를 맨 위에 표시하도록 "Score" 필드를 내림차순으로 정렬합니다.

단계 3: 리더보드 데이터 채우기

• 반복 그룹 셀 내에 텍스트 요소를 삽입하여 플레이어의 "Username"과 "Score"를 표시합니다.
• 동적 데이터를 사용하여 반복 그룹의 각 셀에 대한 "PlayerScore" 객체에서 해당 데이터로 이러한 필드를 채웁니다.

단계 4: 새로운 점수를 추가하는 워크플로우 생성

• 사용자가 점수를 제출할 수 있도록 입력 필드와 저장 버튼 등의 요소를 추가합니다.
• 저장 버튼이 클릭될 때 발동되는 워크플로우를 생성합니다.
• 워크플로우에서 새 "PlayerScore" 객체를 생성하고, "Username" 필드를 사용자의 입력으로, "Score" 필드를 그들의 점수로 설정합니다.

단계 5: 기능 검사

• 앱을 미리보고 만든 입력 필드와 저장 버튼을 사용하여 데이터를 추가합니다.
• 새로운 점수가 제대로 추가되고 반복 그룹 리더보드 내에서 정렬되는지 확인합니다.

단계 6: 스타일 적용 및 세부 조정

• 애플리케이션의 심미성과 일치하도록 텍스트와 요소에 스타일을 적용합니다.
• 데이터가 로드되는 동안 멋진 로딩 인디케이터를 보여주도록 반복 그룹을 설정합니다.

앱 미리보기와 서버 로그를 사용하여 리더보드를 정기적으로 테스트하고 디버그하여 데이터를 제대로 캡처하고 표시하는지 확인하세요.