5. Flujos de navegación destacados - MartinCarniello/Universitate GitHub Wiki
Registro y acceso
Utilizamos una gema que ya es casi un standard en la comunidad de Rails que se llama Devise. La misma maneja registro de usuarios, accesos, sesiones, autenticación con protocolos como los de OAuth (que es una funcionalidad que tenemos que tener en cuenta para más adelante).
Búsqueda
Renderizamos la vista principal que es el listado de profesores, con su respectiva caja de búsqueda con todos los campos vacíos. Cuando se llena algún campo de la misma y se envía el formulario al servidor, este lo recibirá la acción “index” del controlador de profesores y hará lo siguiente: Primero manejará los parámetros que le estén llegando y con ayuda de una gema llamada Searchlight hará el trabajo de filtrado. La misma permite manejar búsquedas en formularios sobre un modelo, encapsulando toda la lógica de las búsquedas en un objeto que extiende de un módulo que nos da la gema. Luego desde el controlador podemos instanciar este objeto con los parámetros de búsqueda que nos llegan desde la vista y dárselo para que nos devuelva los resultados (obviamente las queries para filtrar los registros de los modelos que estamos queriendo acceder son responsabilidad del mismo modelo y están encapsuladas en los diferentes scopes que tienen estos) ya filtrados y/o ordenados para luego renderizar el HTML con el listado de profesores y aparte el con el formulario de búsqueda con los parámetros que se habían pasado en el anterior request.
Rating
Como primera instancia cualquier usuario puede calificar, solo una vez, a un “profesor” ingresando en su perfil. Cuando hacemos click en “calificar” mostramos en un modal, un formulario el cual tiene ocultos el id del usuario que está navegando y el id del “profesor” que se está viendo en el perfil. En el form debemos agregar un comentario y dar una calificación. Cuando enviamos el formulario, lo hacemos de forma asincrónica, por lo tanto le llega una petición al servidor a la acción “create” del controlador de ratings, se crea el mismo con la información proporcionada y responde con un “js.erb”, el cual genera un archivo Javascript que es enviado al cliente para su posterior ejecución. Este script Javascript lo que hace es añadir el comentario al listado en el perfil del profesor en el caso de que la creación del rating haya sido exitosa, de lo contrario mostrará los errores en rojo de los campos que sean necesarios en el modal. Luego el profesor va a tener la posibilidad de responder a cualquier comentario del listado y se ejecutará de la misma forma descrita anteriormente, a diferencia que el script que se ejecutará será otro.
Chat
Se puede contactar una persona desde su perfil, con el botón “Contactar”. Esto redireccionará al detalle de una conversación (puede ser nueva o una que ya esté en proceso) donde se podrán escribir mensajes entre los dos miembros de la misma. La comunicación se maneja de manera asincrónica y con websockets. Esto funciona de la siguiente manera: Un miembro envía un mensaje, que viaja de manera asincrónica al servidor. Desde el controlador de conversaciones se genera el mensaje y se envía por broadcast en el canal de la conversación identificada por el id de la misma. Luego como los miembros de la conversación están en la pantalla de la misma y suscritos al canal de esa conversación, le llegará de manera automática la misma por websocket. Cada vez que acceden a la pantalla de la conversación, automáticamente se suscriben al canal de la misma con javascript (esto está en el archivo messages.js dentro de la carpeta “channels”) y cuando obtienen un “receive” por websocket dibujan un elemento HTML que contiene la información del mensaje (emisor, mensaje, horario, etc.).
Servicio de ubicación
En el perfil del profesor podemos agregarle una ubicación al mismo para poder implementar búsquedas sobre cercanías y demás funcionalidades asociadas. Utilizamos el servicio de geolocalización de Google con el SDK de Javascript para hacer esto. Primero lo incluímos en el “application.html” para tenerlo disponible en la vista. Luego inicializamos el campo de búsqueda con el autocomplete de la API de Places de Google Maps, donde la persona podrá escribir una dirección y el mismo le irá sugiriendo. Cuando el usuario encuentre el lugar que está buscando, le dará click o enter al mismo y lo que hacemos es hacer una petición a la API de Google por Javascript, para obtener la información de la búsqueda. Terminamos guardando la latitud y longitud de la ubicación que se guardarán en el modelo de ubicación junto con la búsqueda real hecha por el usuario que está relacionado con el mismo.