Com fer que els usuaris es segueixin els uns als altres amb views i flag en drupal

A aquest tutorial mostrarem com afegir funcionalitats de xarxes socials al Drupal 7 fent servir només els mòduls flag i views.

Tot i que hi ha altres mòduls com relationships que ofereixen una funcionalitat similar sense cap tipus de configuració addicional, el què es proposa aquí és un fluxe de treball molt més flexible que pugui ésser modificat fàcilment amb uns pocs clics i amb uns permisos més granul·lars.

Abans de començar necessitarem instal·lar el Drupal 7 amb els mòduls que necessitem:

  • Views (versió 3.7)
  • Flag (versió 3.4)
  • CTools (requerit per Views, versió 1.4)
  • Entity API (requerit per Flag, versió 1.3)

A mi m'agrada fer la instal·lació amb una sola comanda de drush però es pot fer com us sigui millor:

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

Aquesta comanda iniciarà un servidor independent (sense necessitat de XAMPP, MAMP, o WAMP) i instal·larà un Drupal amb el perfil d'instal·lació mínim i al mateix temps instal·larà  els mòduls que haguem especificat.

També necessitarem instal·lar Views UI.

drush -y en views_u

El pas següent és crear una nova flag que representi un usari seguint-ne un altre (cal recordar que es tracta d'una relació asimètrica).
Visitar el menu Admin -> Structure -> Flags -> Add flag i afegir les dades següents:

  • Flag type: Users (Els usuaris marcaran altres usuaris)
  • Flag name: Follow
    No es tracta d'un flag global perquè cada usuari tindrà el seu propi estatus amb independència de les relacions que tinguin els altres usuaris.
  • Flag link text: Follow [user:name].
    L'ús de comodins permet tenir un text personalitzat)
  • Flagged message: Following [user:name]

  • Unflag link text: Stop following [user:name] . Perquè "Unfollow" és algo un poco triste.
  • Unflagged message: stopped following [user:name]  . Els permisos per defecte permeten que els usuaris amb un compte al nostre lloc puguin seguir-se entre ells.
  • Users may not flag themselves. No et pots seguir a tu mateix.
  • Display options: Farem servir només l'opció "Display link as field" perquè ens dona més flexibilitat a l'hora de mostrar-lo. Cal tenir en compte que marcar les tres primeres opcions ens obligaria a haver de tenir tres enllaços de "Follow" al perfil d'usuari. Utilitzar un "javascript toggle" és la forma més ràpida que tenen els usuaris d'interactuar amb flags.

Quan desem la nostra nova flag ja podrem veure el link "Follow" a altres perfils d'usuari diferents del nostre (cal donar el permís per a què els usuaris puguin veure els perfils d'altres usuaris)

Ara crearem els llistats de views que mostren els usuaris que segueixen a un en concret. Per fer-ho caldrà accedir a Admin -> Structure -> Views

És interessant comentar que el projecte flag ve amb una flag d'exemple anomenada bookmark a mode de submòdul que s'utilitza com a marcador per a contingut que és interessant i també inclou views d'exemple. Resulta interessant revisar tots dos exemples. Donat que nosaltres volem llistar usuaris en lloc de contingut crearem una nova vista des de zero.

Estem creant una nova llista anomenada "Following" que llista usuaris sense cap ordre específic. En aquest mateix pas de creació podem afegir una pàgina amb la ruta user/%/following per a mostrar aquest llistat com una pestanya més al perfil d'usuari. El símbol % funciona com una substitució de l'ID d'usuari (un número) del què volem mostrar els seus seguidors.

Podem deixar el format de taula i pulsar el botó de "Continue and edit" per a veure la resta d'opcions.

Ara mateix la nostra previsualització en viu dels resultats (part inferior de la pàgina d'edició de vista) mostra els noms de tots els usuaris del lloc. El nostre objectiu és que apareguin només aquells que són seguits per l'usuari que s'especifiqui als filtres contextuals. Quan la nostra vista es mostri al lloc web aquest ID d'usuari es completarà amb el número que ve a la URL.

A la secció "Advanced" podem veure una altra subsecció per a "Relationships". Podem pensar en aquestes relacions de views com una manera de portar més informació a la consulta que estem fent a la base de dades. Ara només tenim informació sobre l'usuari però voelm saber quines ha marcat amb flags aquest usuari, així que afegirem una nova relació per a "User flag".

  • Include only flagged content: sí, si no ets seguit per aquest usuari no ens interesses
  • Fer servir el nostre flag "Follow"
  • By: Any user, perquè "Current user" significa l'usuari que està autentificat ara mateix. El què serà "Any user" ho determinaran els filtres contextuals que venen per la URL

Ara la nostra previsualització ens mostrarà usuaris que estan essent seguits, no importa per qui. Necessitem una segona relació per a saber qui va ser que va fer el seguiment d'aquests usuaris que es mostren. Els usuaris que volem tenen una cosa en comú: tots han estat marcats pel mateix usuari. Degut a la primera relació ara podem tenir altres relacions diferetns, així que ara afegirem "Flags: user".

A més a més marcarem "Require this relationship" perquè ens interessen els usuaris que tenen aquestes dades. Pot semblar redundant però això ens pot evitar duplicats als nostres llistats.

És el moment d'afegir filtres contextuals per a proporcionar a la nostra vista l'ID d'usuari que ve del '%' a la ruta /user/%/following.

El nou filtre contextual és del tipus uid (ID d'usuari). En afegir-lo se'ns presenten un seguit d'opcions, la primera és la relació que es farà servir. Seleccionem la relació "Flag user" que acabem de definir. El valor d'aquest filtre contextual sempre vindrà per la URL però en cas de que algú manupuli aquesta URL mostrarem un error de pàgina no trobada. De la mateixa forma per a la validació, enlloc de donar una vista buida validarem l'ID d'usuari permetent UIDs numèriques i noms d'usuari i mostrarem l'error de pàgina no trobada en cas de que no validi. Aquesta és la configuració del filtre contextual, i ja podrem desar la vista.

Ara la vista funcionarà tal i com voliem. Podem fer servir la previsualització per provar noms d'usuaris i ids i verificar que obtenim una llista de gent que és seguida per aquest usuari.

El proper pas és mostrar aquest llistat com una pestanya al perfi d'usuari. Views proporciona una opció per a modificar les opcions de menú i col·locar-lo com a pestanya donant-li un nom.

Ara també podem afegir altres camps interessants a la llista com per exemple un link per a altres seguidors de forma que altres usuaris que estiguin visualitzant el perfil puguin dur a terme les seves accions de seguiment fent servir només un clic. Tant simple com afegir "Flag link" al llistat de camps.

Per al segon llistat crearem un nou display de pàgina. És molt important sobreescriure totes les opcions que són diferents del display mestre (el què acabem de crear) de forma que no les modifiquem amb el nou display. Canviarem el següent:

Title: Followers
Path: /user/%/followers

Neteja i sobreescriu els camps, relacions i filtres contextuals (pots identificar-los perquè quedaran marcats en cursiva).

En aquest cas volem als usuaris que hagin marcat amb un flag el nostre usuari objectiu. La nostra primera relació serà "User's flaggings" perquè només volem usuaris que hagin marcat amb un flag cert contingut.

En aquests moments la previsualització en view mostra els usuaris que han fet servir el flag "Follow" com a mínim una vegada.

Ara podem afegir el filtre contextual que reduirà la consulta a aquells usuaris que hagin marcat l'usuari objectiu indentificat a través del paràmetre de la URL. Això s'aconsegueix afegint el filtr contextual  "Flags: Content ID". Seleccionem el mateix comportament que al display anterior per a gestionar els casos  en què el valor no és present a la URL i la seva validació. Observa que la relació que acabem de definir apareix seleccionada per defecte.

Amb aquest filtre contextual estem a punt d'enllestir! La nostra vista ja està acabada i podem provar-la a la zona de previsualització.

Ara podem afegir qualsevol camp que volguem a la llista de camps a mostrar, incloent-hi el botó AJAX "Follow" que hem descrit per al display anterior.

Quan desem la vista podrem veure les dues pestanyes noves al perfil d'usuari.

Explorarem aquesta funcionalitat a propers posts. Flag ens permet reaccionar a esdeveniments com ara "Un usuari ha començat a seguir-te" i enviar notificacions fent servir el mòdul Rules. Tractarem aquest i altres exemples properament.

Sempre m'agrada aprendre coses noves sobre views, així que si tens cap suggeriment per a millorar aquest exemple pots escriure un comentari.