Como permitir que los usuarios se sigan los unos a los otros usando flag y views en Drupal

Con este tutorial pretendemos añadir funcionalidades de red social a cualquier sitio construido con Drupal 7 solamente usando flag y views.

Existen módulos como relation que pueden proveer una funcionalidad similar sin demasiada configuración. Sin embargo,nuestro objetivo es conseguir un flujo de trabajo flexible que podamos modificar con unos pocos clicks y que nos permita tener permisos más granulares.

Lo primero que necesitamos es una instalación de Drupal 7 con los módulos requeridos:

  • Views (versión 3.7)
  • Flag (versión 3.4)
  • CTools (requerido por Views, versión 1.4)
  • Entity API (requerido por Flag, versión 1.3)

Yo prefiero hacerlo con drush pero puedes hacerlo de la manera que más te guste.

drush qd --db-url=mysql://mysqluser:password@localhost/test --profile=minimal testsite entity ctools flag views

Este comando lanzará un servidor completo de PHP (sin usar XAMPP,MAMP o WAMP) y una instalación de drupal con los módulos que hemos mencionado y el perfil de instalación mínimo.

También necesitaremos Views UI para tener una interfaz de views.

drush -y en views_ui

El próximo paso es crear una flag (o marca) que representará la relación de un usuario siguiento al otro (recuerda que es una relación en una sola dirección).

Dentro de Admin -> Structure -> Flags -> Add flag. (Se asume que la interfaz de Drupal está en inglés)

  • Flag type: Users (Usuarios que marcan otros usuarios)
  • Flag name: Follow. No es una marca global porque cada usuario tiene su propia relación con otro usuario, no importan el resto de relaciones. 
  • Flag link text: Follow [user:name]. Usando tokens podemos personalizar el texto que aparecerá
  • Flagged message: Following [user:name]

  • Unflag link text: Stop following [user:name] . Porque "Unfollow" es triste.
  • Unflagged message: stopped following [user:name] Los permisos por defecto permiten que los usuarios con una cuenta en nuestro sistio se puedan seguir entre ellos.
  • Users may not flag themselves. No te puedes seguir a ti mismo.
  • Display options: Usaremos solo la opción "Display link as field" porque nos da más flexibilidad a la hora de mostrarlo. Hay que tener en cuenta que marcar las tres primeras opciones nos llevaría a tener tres enlaces de "Follow" en un perfil de usuario. Usar un "javascript toggle" es la manera más rápida que tienen los usuarios de interactuar con flags.

Cuando salvemos nuestra nueva flag ya veremos el link "Follow" en otros perfiles de usuario distintos del nuestro (necesitas añadir el permiso para que los usuarios puedan ver los perfiles de otros)

Ahora crearemos los listados de views que muestran los usuarios que siguen a uno en concreto. Para ello accedemos a Admin -> Structure -> Views

Es interesante comentar que el proyecto flag viene con una flag de ejemplo llamada bookmark a modo de súbmodulo que se usa a modo de marcador para contenido interesante y también incluye views de ejemplo y es muy útil revisarlas. Como nosotros queremos listar usuarios en vez de contenido crearemos una nueva vista desde cero.

Estamos creando una nueva vista llamada "Following" que lista usuarios sin ningun orden específico. En este mismo paso de creación podemos añadir una página con la ruta user/%/following para mostrar este listado como una pestaña más en el perfil de usuario. el símbolo '%' funciona como una sustitución del ID de usuario (un número) que queremos mostrar sus seguidores.

Podemos dejar el formato de tabla y pulsar el botón de "Continue and edit" para poder ver el resto de opciones.

Ahora mismo nuestra previsualización en vivo de los resultados (parte inferior de la página de edición de una vista) muestra los nombres de todos los usuarios del sitio. Nuestra meta es que aparezcan solo aquellos que el usuario que se especifica en los filtros contextuales está siguiendo. Cuando nuestra vista se muestre en el sitio este ID de usuario se completará con el número que viene en la URL.

En la sección "Advanced" podemos ver otra subsección para "Relationships" . Podemos pensar en estas relaciones de views como una manera de traer más información a la consulta qeu estamos haciendo a la base de datos. Ahora solo tenemos información sobre el usuario pero queremos saber que que cosas ha flagueado este usuario as ique añadimos una nueva relación para "User flag".

  • Include only flagged content: sí, si no eres seguido por este usuario, no nos interesas
  • Usar nuestro flag "Follow"
  • By: Any user, porque "Current user" significa el usuario que esta ahora mismo autenticado. El quien será "Any user" lo determinaran los contextual filters que viene por la URL

Ahora nuestra previsualización nos mostrará usuarios que estan siendo seguidos, no importa por quien. Necesitamos una segunda relación para saber quien fue el hizo el seguimiento de esos usuarios que se muestran. Los usuarios que queremos tienen una cosa en común, todos han sido marcados por el mismo usuario. Debido a la primera relación ahora podemos tener otras relaciones distintas, ahora añadiremos "Flags: user".

Además vamos a marcar "Require this relationship" porque nos interesan los usuarios que tienen estos datos. Puede parecer redundante pero esto puede evitarnos duplicados en nuestros listados.

Es el momento de añadir filtros contextuales para proporcionar a nuestra vista con el ID de usuario que viene de el '%' en la ruta /user/%/following.

El nuevo filtro contextual es del tipo uid (ID de usuario). Al añadirlo se nos presentan una serie de opciones, la primera es la relación que se va usar. Seleccionamos la relación "Flag user" que acabamos de definir. El valor de este filtro contextual siempre va a venir por la URL pero en caso de que alguién manipule esta URL les daremos un error de página no encontrada. Igual para la validación, en vez de dar una vista vacía, validaremos el ID de usuario permitiendo UIDs númericas y nombres de usuario y mostraremos el error de página no encontrada en caso de que no valide. Esta es la configuración del filtro contextual y ya podemos guardarla.

Ahora la vista esta funcionando tal y como queriamos. Podemos usar la previsualización para probar nombres de usuario e ids y verificar que obtenemos una lista de gente que esta siendo seguida por este usuario.

Nuestro siguiente paso es mostrar este listado como una pestaña en el perfil del usuario. Views proporciona una opción para modificar las opciones de menú y colocarlo como una pestaña dándole un nombre.

Ahora también podemos añadir otros campos interesantes a la lista como por ejemplo un link para otros seguidores de manera que otros usuarios que estén visualizando el perfil puedan lleva a cabo sus acciones de seguimiento con un solo click. Tan simple como añadir "Flag link" a la lista de campos.

Para el segundo listado crearemos un nuevo display de página. Es muy importante sobreescribir todas las opciones que son diferentes del display maestro (el que acabamos de crear) de manera que no las modificamos con nuestro nuevo display. Vamos a cambiar:

Title: Followers
Path: /user/%/followers

Vacía y sobreescribe los campos, relationships, y filtros contextuales (puedes ver que las sobreescrituras se marcan como itálicas)

En este caso queremos a los usuarios que han marcado con una flag a nuestro usuario objetivo. Nuestra primera relationship va a ser "User's flaggings" porque solo queremos a usuarios que han marcado con una flag cierto contenido.

Right now our live preview shows users that used the Follow flag at least once.

Ahora mismo nuestra previsualización muestra usuarios que han usado el flag "Follow" por lo menos una vez.

Ahora añadimos el filtro contextual que va a reducir los resultados de nuestra consulta a aquellos usuarios que han marcado el contenido identificado por el parametro que viene de la URL. Esto lo podemos conseguir añadiendo el filtro contextual "Flags: content ID". Seleccionamos el mismo comportamiento que el anterior display para manejar los casos en los que el valor no está en la URL y la validación de este valor. Nótese que la relationship que acabamos de definir esta preseleccionada.

Con este filtro contextual ya lo tenemos todo listo. Damos nuestra vista por terminada y podemos hacer pruebas en el area de previsualización.

Ahora podemos añadir cualquier campo que queramos a la lista de los campos que se muestran, incluido el botón AJAX de "Follow" que describimos para el anterior display.

Cuando salvemos la vista veremos las dos nuevas pestañas en el perfil de usuario.

Exploraremos estafuncionalidad siguientes posts. Flag nos permite reaccionar a eventos como por ejemplo "Un usuario ha empezado a seguirte" y enviar notificaciones usando el módulo Rules. Cubriremos este y más ejemplos en futuros posts.

Siempre me gusta aprender cosas nuevas sobre views de modo que si tienes sugerencias sobre como mejorar este ejemplo por favor deja un comentario.