5부: 그래프 작성
필요한 자료:
- Node.js
- Express
- Chart.js
사용된 노드 모듈:
요약:
소셜 네트워크를 유지하고 최종 사용자의 경험을 개선하려면 이러한 사용자와 사용 습관에 대한 정보를 추적하는 것이 중요합니다. 이러한 정보의 대부분은 최종 사용자에게 즉각적으로 유용하지 않을 수 있지만, 이러한 추적과 유용한 최종 사용자 정보의 교차점 중 하나는 로그인 시간입니다. 이 정보는 소비자를 위해 네트워크 사용을 최적화하고(트래픽 폭주 시 노드 확장) 잠재적인 보안 문제를 추적하기 위해 다양한 방식으로 사용됩니다.
이 애플리케이션은 주로 소셜 네트워크의 기본 뼈대를 다루기 때문에 사용자에 대해 수집하는 데이터를 분석하기 위해 몇 가지 그래프를 사용합니다.
처음부터 우리는 각 사용자 문서 내의 'timeTracker' 객체에 대해 논의했습니다. 여기에는 로그인할 때마다 지속적으로 업데이트하는 'loginTimes' 속성이 있으며, 이 속성은 사용자가 로그인할 때마다 '/api/loginAuth' 엔드포인트가 있습니다. 이 엔드포인트가 처음이라면 이 엔드포인트에 대해 자세히 설명한 2부를 다시 참조하세요. 본질적으로 이 엔드포인트는 사용자가 로그인한 최신 시간을 'loginTimes' 배열에 지속적으로 추가합니다. 이 데이터는 N1QL 날짜 쿼리에서 검색된 정보를 표시하기 위해 N1QL 쿼리와 Angular.js용 Chart.js 변형(tc-angular-chartjs)을 사용하여 분석할 데이터입니다.
아래에는 각 사용자의 'loginTimes' 속성에서 데이터를 검색하는 데 사용되는 통계 엔드포인트가 있으며, 프런트엔드 그래프 라이브러리가 시간 경과에 따른 사이트 사용량을 표시하는 데 사용할 수 있는 객체를 반환합니다.
'/api/graphData' API
이 엔드포인트는 표시할 시간 범위인 하나의 인수를 받습니다. 이 경우 함수는 '일' 또는 '주'를 받습니다. 그러면 지정된 날짜 범위 유형에 따라 24개의 정수 값('일') 또는 7개의 정수 값('주')으로 구성된 배열이 반환됩니다. 이 모든 데이터를 가져오는 함수는 다음과 같습니다. 'Statistics.newGraph'를 입력하면 원하는 값을 얻기 위한 N1QL 쿼리가 생성됩니다. 함수는 아래와 같습니다.
'Statistics.newGraph' 함수
이 엄청나게 긴 함수는 사실 아주 간단한 일을 하고 있습니다. 여기에는 세 가지 부분이 있습니다:
- '주' 또는 '일'의 날짜 범위를 확인합니다.
- 지난 7일 또는 지난 24시간을 기준으로 데이터를 그룹화하기 위해 N1QL 쿼리를 실행합니다.
- moment.js와 배열을 사용하여 x축의 적절한 순서를 생성합니다.
첫 번째 부분은 'if/else' 문을 사용하여 간단히 수행할 수 있습니다. 다음 부분은 조금 더 복잡해지므로 잠시 시간을 내어 실행 중인 N1QL 쿼리를 분석하고 이 쿼리가 어떤 데이터를 검색할지 이해하는 방법을 살펴보겠습니다.
지난 날짜에 대한 N1QL 날짜 쿼리 예제
이 과정을 이해하기 위해 '하루'를 예로 들어보겠습니다. 먼저 모든 배열 요소를 별도의 객체로 중첩 해제합니다. 이렇게 하면 각각의 요소를 개별적으로 관찰할 수 있습니다. 그런 다음 UNNEST 를 사용하여 API 요청 시점부터 각 로그인 시간이 몇 시간 전에 발생했는지 확인합니다. date_diff_str(str_to_utc(now_str()). 그런 다음 이러한 각 시간을 가져와 그룹 기준 얼마나 오래 전에 발생했는지 확인합니다. 이러한 그룹을 기반으로 COUNT (시간당 몇 번의 로그인이 발생했는지) 그룹에 속한 횟수를 계산합니다. 이렇게 하면 해당 시간이 몇 시간 전에 발생했는지와 몇 시간 전에 몇 개의 로그인이 발생했는지를 설명하는 카운트가 포함된 개체 배열을 얻을 수 있습니다. 이 정보를 얻으면 보유 절을 추가하여 로그인한 시간이 24시간을 초과하지 않는지 확인하여 더도 말고 덜도 말고 하루만 가져옵니다. 이제 정확히 필요한 것을 얻을 수 있었는데, 바로 각 로그인이 발생한 시간 및 로그인 횟수에 따라 계층화된 개체 배열입니다.
그런 다음 개체 배열을 가져와 로그인 횟수를 배열에 배치하고, 로그인 횟수가 발생한 시간을 기준으로 인덱싱합니다. 이 배열은 0으로 초기화되므로 정의되지 않은 값을 그래프로 표시하는 데 오류가 발생하지 않습니다. 이 작업이 완료되면 N1QL 쿼리에서 데이터를 처리하는 프로세스가 완료됩니다.
이렇게 하면 대부분의 작업이 처리되며, 이제 우리가 해야 할 일은 적절한 시간과 날짜를 적절하게 일치시키기만 하면 됩니다. 다음 중 미리 정의된 배열을 사용합니다. 'hoursX' 또는 'daysX' 를 반복하여 적절한 X축을 만듭니다. 그런 다음 moment.js에서 찾은 현재 날짜를 사용하여 해당 요일과 주를 찾는 성공적인 반복 패턴을 만듭니다. 순간.js 함수를 사용하는 경우 'moment().day();'등을 입력하면 1부터 인덱싱된 날짜 또는 시간을 검색합니다. 이는 반복 패턴에서 설명됩니다.
프런트엔드 사용
이 두 배열이 모두 생성/취득되면 프런트엔드에서 수행하는 작업 외에는 더 이상 수행해야 할 작업이 없습니다. 이 두 배열을 다음과 같은 형태로 API 엔드포인트에 반환하기만 하면 됩니다. 'graphObj' 를 사용하여 클라이언트에게 다시 전송한 다음 '/api/그래프데이터' 엔드포인트를 추가합니다. 이것으로 백엔드 작업이 완료됩니다. 이를 tc-angular-chartjs와 함께 사용하는 예제 코드 세트는 다음 github 리포지토리에서 확인할 수 있습니다. public/js/touchbase.js 아래에서 확인할 수 있으며, 이에 대한 HTML은 public/html/statistics-partial.html.
이것으로 터치베이스 튜토리얼의 그래프 작성 부분을 마칩니다. 피드백이나 비판이 있으면 아래에 댓글로 남겨 주세요. 읽어주셔서 감사드리며, N1QL 날짜 쿼리와 훌륭한 프런트엔드 그래프 라이브러리를 사용하여 멋진 차트를 더 쉽게 만들 수 있기를 바랍니다!
