이제 쿼리를 필터링할 수 있으니, 데이터에서 의미 있는 인사이트를 추출해봅시다. Insight는 현재 쿼리와 필드별 추가 쿼리 필터를 기준으로 문서 수를 계산합니다. 주방 디스플레이 시스템이 셰프에게 대기 중인 주문 수나 토핑 요청 수를 보여주는 것처럼 생각해보세요.
먼저, constant 파일에 Insight 클래스를 정의합니다. 각 필드는 카운트에 사용할 Akan 문서 쿼리 필터를 accumulate 옵션에 지정합니다:
사용된 카운트 필터 패턴을 살펴봅시다:
🍦{}
현재 쿼리에 일치하는 모든 주문을 카운트합니다. 기본 카운트는 accumulate를 빈 객체로 둡니다.
🍓{ toppings: "strawberry" }
카운트 전에 필드 필터를 추가합니다. toppings가 배열 필드이므로 "strawberry" 토핑을 포함한 주문 수를 계산합니다.
UI에서 적절한 레이블링을 위해 insight 필드에 대한 dictionary 항목을 추가합니다:
이제 집계된 인사이트를 아름다운 대시보드 레이아웃으로 표시하는 View 컴포넌트를 만들어봅시다:
View 컴포넌트는 각 인사이트 메트릭을 반응형 그리드에 표시합니다. 셰프는 얼마나 많은 요거트를 준비해야 하는지, 어떤 토핑이 가장 인기 있는지 빠르게 확인할 수 있습니다.
이제 View를 스토어에 연결하는 Zone 컴포넌트를 만듭니다. Zone 컴포넌트는 데이터 페칭과 상태 관리를 처리합니다:
Zone 컴포넌트의 주요 기능:
🔗st.slice[slice.sliceName].use.icecreamOrderInsight(): 지정된 슬라이스에 대한 집계된 인사이트 데이터를 가져오는 자동 생성된 훅입니다. 프레임워크가 모든 집계 파이프라인 실행을 처리합니다.
마지막으로, 실시간 집계 통계를 표시하기 위해 페이지에 Insight Zone을 추가합니다:
이제 사용자가 상태별로 주문을 필터링하면, 인사이트 대시보드가 자동으로 업데이트되어 필터링된 주문에 대한 집계 통계만 보여줍니다. 이는 실시간 운영 결정에 매우 강력합니다!
🎉 달성한 것들:
- ✓ 검색 가능한 파라미터가 있는 동적 쿼리 메이커 생성
- ✓ Akan 문서 쿼리 필터를 사용한 Insight 클래스 정의 방법 학습
- ✓ 집계 통계를 표시하는 View 컴포넌트 구축
- ✓ 자동 생성된 스토어 훅에 Zone 컴포넌트 연결
- ✓ 실시간 분석을 위해 필터링된 쿼리와 인사이트 통합
다음 튜토리얼에서는 서로 다른 모델 간의 데이터 연결 방법을 살펴볼 것입니다. 이를 통해 주문과 고객 연결, 제품과 카테고리 연결, 복잡한 데이터 그래프 구축 같은 풍부한 관계를 만들 수 있게 됩니다.
