Bubble.io에서 대시보드를 어떻게 만들 수 있나요?

Bubble.io에서 대시보드를 만드는 것은 사용자의 상호작용을 허용하고 데이터를 제시하는 사용자 인터페이스를 디자인하는 것을 포함하며, 이는 일반적으로 프로젝트, 작업 또는 응용 프로그램의 다른 운영 측면을 모니터링하고 관리하기 위한 것입니다. 이 가이드에서는 가상의 프로젝트 관리 앱 내의 사용자에게 개인화된 대시보드를 생성하는 단계를 개요로 제시하겠습니다.

1단계: 작업 공간 준비

대시보드를 구축하기 전에 Bubble.io 계정을 보유하고 있는지 확인하고 로그인하십시오. 앱의 사용자 인터페이스를 구성할 편집기를 열어 보세요.

2단계: 사용자 역할 및 권한 정의

대시보드에 액세스해야 할 사용자를 결정합니다. 프로젝트 관리 앱에서는 시스템 관리자, 회사 관리자, 회사 멤버 등으로 역할이 구별될 수 있습니다. 사용자 역할에 기반한 대시보드에 대한 액세스 권한을 제어하기 위해 개인정보 보호 규칙을 설정하십시오.

개인 정보 보호 법칙 예시:
- 현재 사용자의 역할이 시스템 관리자이거나 현재 사용자의 관련 회사가 이 회사이면 대시보드에 대한 완전한 액세스 권한을 허용합니다.

3단계: 데이터 구조 정의

아직 진행되지 않은 경우, 대시보드와 관련된 필요한 데이터 유형 및 필드를 생성합니다. 프로젝트 관리 대시보드의 경우 프로젝트, 작업, 팀 등의 데이터 유형이 필요하며, 마감 날짜, 할당자, 상태 등의 필드가 필요할 수 있습니다.

4단계: 대시보드 페이지 디자인

편집기에서 대시보드의 새 페이지를 만들거나 기존 페이지를 선택합니다.

• 대시보드 구성요소를 위한 컨테이너 역할을 하는 '그룹' 요소를 추가합니다.
• 그룹 내에 텍스트 요소, 차트, 반복 그룹을 추가하여 프로젝트 및 작업 데이터를 표시합니다.
• 작업 완료 상태에 따른 필터링 또는 새 작업 추가와 같은 상호작용을 위해 아이콘 및 버튼과 같은 시각적 요소를 사용합니다.

5단계: 대시보드에 데이터 채우기

대시보드의 시각적 요소를 데이터베이스에 연결합니다.

• 작업 또는 프로젝트 목록을 나열하는 반복 그룹에 대해 현재 사용자 또는 그의 팀과 일치하는 제약 조건을 가진 '프로젝트 검색' 또는 '작업 검색'과 같은 동적 데이터 소스를 사용합니다.
• 사용자가 작업을 완료로 표시하거나 새 작업을 생성하거나 프로젝트를 편집하도록 허용하는 버튼 및 입력에 워크 플로우를 추가합니다.

6단계: 필터링 및 관련 데이터 표시

사용자가 자신에게 관련된 작업 및 프로젝트를 볼 수 있도록 필터링 기능을 구현합니다.

필터 예시:
- 완료된 작업: '할당 대상에 현재 사용자 포함' 및 '완료 날짜가 비어 있지 않은' 작업 검색
- 다가오는 작업: '할당 대상에 현재 사용자 포함', '완료 날짜가 비어있음', '마감 날짜>현재 날짜/시간'인 작업 검색
- 연체된 작업: '할당 대상에 현재 사용자 포함', '완료 날짜가 비어 있음', '마감 날짜<현재 날짜/시간'인 작업 검색

7단계: 상호 작용 설정

사용자의 작동에 반응하는 대시보드의 상호작용 요소를 설정합니다.

• 적절한 경우 입력에 자동 바인딩을 활성화하여 데이터 필드의 직접 편집을 허용합니다.
• '작업 완료' 버튼을 클릭할 때 작업의 상태를 변경하는 등의 작업 완료를 위한 작업 흐름을 추가합니다.

8단계: 대시보드 기능 테스트

대시보드 설정이 완료되면 Bubble.io에서 미리보기 모드로 들어가서 사용자가 대시보드와 상호 작용하는 것처럼 테스트해봅니다.

• 모든 데이터가 정확히 표시되는지 그리고 실시간으로 업데이트되는지 확인합니다.
• 필터링 및 정렬 기능이 의도대로 작동하는지 확인합니다.
• 개인 정보 보호 규칙과 액세스 권한이 올바르게 작동하고 있는지 확인합니다.

9단계: 반복 및 개선

테스트와 사용자 피드백을 바탕으로 대시보드 디자인과 기능을 필요에 따라 조정하여 사용자 경험을 개선합니다.

마지막 메모: 앱이 확장되고 사용자의 요구 사항이 변화함에 따라 대시보드의 디자인과 기능을 정기적으로 재검토하여 항상 가치를 제공하고 원활한 사용자 경험을 보장할 수 있도록 합니다.