Parte 5: Representación gráfica
Materiales necesarios:
- Node.js
- Express
- Gráfico.js
Módulos de nodo utilizados:
Resumen:
Para mantener una red social y mejorar la experiencia del usuario final, es importante hacer un seguimiento de la información sobre estos usuarios y sus hábitos de uso. Gran parte de esta información puede no parecer inmediatamente útil para el usuario final, pero una intersección entre este seguimiento y la información útil para el usuario final son las horas de inicio de sesión. Esta información se utiliza de muchas maneras diferentes para optimizar el uso de estas redes para los consumidores (ampliación de nodos para picos de tráfico), así como para rastrear posibles problemas de seguridad.
Dado que esta aplicación se ocupa principalmente de los aspectos básicos de una red social, utilizamos algunos gráficos para analizar los datos que recopilamos sobre el usuario.
Desde el principio hablamos del objeto 'timeTracker' dentro de cada documento de usuario. Este tenía un atributo 'loginTimes' que hemos estado actualizando continuamente durante cada inicio de sesión con el atributo /api/loginAuth punto final. Si esto es nuevo para usted, consulte la parte 2, donde este punto final se discutió en detalle. En esencia, este endpoint añade continuamente la última vez que el usuario se conecta al array 'loginTimes'. Estos son los datos que analizaremos usando una consulta N1QL, así como una adaptación de Chart.js para Angular.js (tc-angular-chartjs), para mostrar la información recuperada de la consulta de fecha N1QL.
A continuación, tenemos el punto final de estadísticas que se utiliza para recuperar los datos del atributo 'loginTimes' de cada usuario y devolver un objeto que la biblioteca de gráficos front-end puede utilizar para trazar el uso del sitio a lo largo del tiempo.
API "/api/graphData
Este punto final recibe un argumento, que es el ámbito de tiempo que debe mostrarse. En este caso, la función acepta "día" o "semana". Devolverá una matriz de 24 valores enteros ("día") o 7 valores enteros ("semana") en función del tipo de intervalo de fechas especificado. La función que obtiene todos estos datos es Estadísticas.nuevoGráficoque creará una consulta N1QL para obtener los valores que deseamos. La función se muestra a continuación.
Función 'Statistics.newGraph
Esta función increíblemente larga en realidad hace algo muy sencillo. Tiene tres partes:
- Compruebe el intervalo de fechas de "semana" o "día".
- Ejecutar consulta N1QL para agrupar datos por los últimos 7 días o las últimas 24 horas
- Utilice moment.js y matrices para crear el orden correcto del eje x
La primera parte de esto se logra simplemente usando sentencias 'if/else'. La siguiente parte se vuelve un poco más complicada, así que nos tomaremos un segundo para desglosar la consulta N1QL que se está ejecutando, y cómo entendemos qué datos recuperará para nosotros.
Ejemplo de consulta de fecha N1QL para el día anterior
Tomemos el ejemplo de un "día" para entender el proceso. La forma de verlo es que primero desanidamos todos los elementos del array en sus propios objetos separados. De esta forma podemos observar cada uno de ellos individualmente. Después UNNEST averiguamos cuántas horas hace que se produjo cada inicio de sesión, desde el momento de la solicitud de la API, lo que se hace utilizando DATE_DIFF_STR(STR_TO_UTC(NOW_STR()). A continuación, tomamos cada uno de estos tiempos y GRUPO POR cuánto tiempo hace que ocurrieron. Basándonos en estos grupos, obtenemos un CONTAR del número de veces que están en ese grupo (cuántos de estos inicios de sesión se produjeron por hora). Esto nos da una matriz de objetos que contienen el número de horas hace que estos tiempos se produjeron, y un recuento que describe cuántos inicios de sesión se produjeron hace este número de horas. Una vez que tenemos esto, creamos un TENIENDO que comprueba que el número de horas transcurridas no sea superior a 24, de forma que simplemente obtengamos un día, ni más ni menos. Esto nos da exactamente lo que necesitábamos, que es una matriz de objetos estratificados por el número de horas hace que cada uno de estos inicios de sesión ocurrió, así como cuántos inicios de sesión ocurrieron.
Después de esto, tomamos el array de objetos, y colocamos los recuentos de entradas en un array, que está indexado en base a la hora en la que ocurrieron. Este array se inicializa con 0s, para que no haya errores al graficar valores indefinidos. Una vez hecho esto, el proceso de manejo de datos de la consulta N1QL está completo.
De este modo, nos ocupamos de la mayor parte del trabajo, y ahora todo lo que tenemos que hacer es simplemente emparejarlos con las horas y fechas adecuadas. Utilizamos una matriz predefinida de horasX o díasX y hacemos un bucle a través de él para crear el eje x apropiado. Usando el día actual, que es encontrado por moment.js, entonces creamos un patrón iterativo exitoso para encontrar los días y semanas correspondientes. Cuando usamos la función moment.js para 'momento().día();'etc. recuperamos un día o una hora indexados empezando por 1. Esto se tiene en cuenta en el patrón iterativo.
Uso del front-end
Una vez creadas/obtenidas estas dos matrices, no hay más trabajo que hacer, salvo en el front-end. Simplemente devolvemos estas dos matrices al punto final de la API en forma de graphObj y luego enviarlos de vuelta al cliente en nuestro /api/graphData punto final. Esto completa el trabajo de back-end. Un conjunto de código de ejemplo de usar esto con tc-angular-chartjs se puede ver en el repositorio de github en public/js/touchbase.js en 'statisticsController', y el HTML correspondiente puede verse en public/html/estadisticas-parciales.html.
Con esto concluye la parte de gráficos del tutorial de Touchbase. Por favor, comente a continuación con cualquier comentario o crítica. Gracias por leer, y espero que tengas un tiempo más fácil haciendo hermosos gráficos usando consultas de fecha N1QL y una gran biblioteca de gráficos front-end.
