Go con Gin, el mega tutorial (VII)

Buenas a Cibernómadas, ¿todo bien? Entonces a por los perfiles y avatares de GoBlog.

Índice de la serie

 

Perfiles

Si recapitulamos un poco, vemos que hemos creado unas plantillas, hemos implementado formularios web y diseñado un primer esbozo de la base de datos. Pero no hemos dado la posibilidad a los usuarios de disponer un panel donde ver su propia información. Esto es lo que se suele conocer como perfil del usuario y es donde podemos ver información varia sobre el usuario, como el nombre, relaciones con otros usuarios o aplicar configuraciones varias, por ejemplo.

Ruta para la página del perfil

Lo primero que haremos será crear una nueva ruta y un handler para tratar la petición.

Como se puede apreciar la URI que hemos introducido difiere de las que hemos estado usando hasta ahora. Esto es porque el campo :name, será dinámico, de este modo podremos aprovechar la misma URI y handler para cualquier usuario.

Es necesario fijarse que la nueva URI se define en el grupo de URI que requieren estar autenticado. Esto es muy interesante, pues evitaremos que usuarios no autenticados puedan consultar datos de usuarios del blog.

Handler del perfil

Por lo que hace al handler, la implementación es bastante sencilla. Primero comprobamos que podamos extraer el puntero de la base de datos del contexto de Gin. Lo segundo, es comprobar que existe el usuario en la base de datos. Para ello utilizamos como nombre de usuario el que se proporciona mediante el parámetros :name. Si el usuario existe, entonces se muestra la plantilla profile, de lo contrario se muestra un error en la plantilla del index.

Antes de mostrar la plantilla vamos simular unos posts publicados por el usuario del que estamos consultando el perfil. Así veremos la página del perfil más completa.

El siguiente código es exactamente igual al anterior, pero con la única diferencia que hemos creado la variable posts con unos posts ficticios. Además, estos posts los enviamos a la plantilla para poder mostrarlos al usuario.

Plantilla del perfil

Con la nueva información ya podemos modelar la plantilla profile.tpl.

Como se puede ver en el código superior mostramos el nombre del usuario con una etiqueta HTML h1 y seguido mostramos los posts que haya iniciado el usuario que estamos visitando.

Te puede interesar  Puesta en marcha de Odoo en Debian 9 - Parte 1

Perfil básico de usuario

Nos queda un punto importante, el dar facilidad de acceso a la URI que acabamos de habilitar. Esto lo haremos modificando la plantilla parcial menú.tpl.

Como podéis observar si la plantilla se ejecuta con una variable user, entonces mostramos el enlace al perfil con el propio nombre de usuario y un enlace al logout para finalizar la sesión.

Avatares

Con la implementación de los perfiles finalizada vamos a darle un poco de color a la página con unos avatares.

Almacenar los avatares puede requerir bastante espacio en disco, además de tener que implementar toda la lógica de permitir subir imágenes y controlar que no suban archivos maliciosos o infectados. Así que nosotros vamos a utilizar Gravatar y será esta plataforma la que almacene las imágenes por nosotros.

La facilidad de utilizar Gravatar es que nos permite enlazar imágenes con el hash md5 del correo electrónico del usuario. Esto nos vendrá súper bien, porque ya tenemos el correo electrónico del usuario, si recordáis, se lo pedimos para registrarse.

Como hemos dicho Gravatar nos proporciona una imagen de avatar según el correo electrónico del usuario, pero además nos permite seleccionar el tamaño del avatar.

Gravatar nos proporciona la siguiente URL https://s.gravatar.com/avatar/<hash email>?d=identicon&s=<tamaño avatar>. Con el parámetro s podemos seleccionar el tamaño del avatar. Los tamaños permetidos son de 1×1 pixeles a 2048×2048 pixeles.

A modo de facilitar el uso de avatares añadiremos un método al modelo User, veamos.

En el fichero webapp/models/database.go añadimos el siguiente método al modelo User.

Lo primero que hacemos es validar que el tamaño seleccionado para el avatar, éste debe de estar entre los límites que requiere Gravatar, a continuación, devolvemos la URL de Gravatar con el hash del correo electrónico del usuario y el tamaño seleccionado. Si el tamaño no es correcto entonces se usa 128 pixeles como valor por defecto.

Plantilla avatar

Ahora que ya tenemos posibilidad de generar avatares vamos a añadirlo en la plantilla del perfil.

Perfil con avatar

Para poder ejecutar el método Avatar del modelo User en las plantillas debemos de pasar los objetos de usuario por referencia y no por valor, de ahí que veáis el & delante de los objetos de usuario en el handler del perfil.

Te puede interesar  Go con Gin, el mega tutorial (III)

Para finalizar optimizaremos un poco la plantilla del perfil utilizando las plantillas parciales.

Optimizando las plantillas

Esto lo haremos creando una plantilla parcial llamada posts.tpl en el directorio webapp/template/partial/posts.tpl con el código que utilizamos para renderizar los posts. Por otra parte, donde ahora renderizamos los posts en la plantilla profile.tpl haremos una llamada a la plantilla parcial.

Como último punto a realizar en la optimización es indicar a Gin donde localizar la nueva plantilla parcial.

Actualizaremos la función TemplatePartials del fichero webapp/router/main.go.

Bien, con esto ya tenemos la sección de perfiles y avatares de los usuarios de nuestro blog.

Editar el perfil

La verdad que la página del perfil está quedando bien, pero podemos mejorarla un poco más. Vamos a ello.

En este último punto vamos a cambiar bastante código, pero al ser cosas que ya hemos estado viendo en posts anteriores iremos más rápido de lo habitual, así no hacemos un post eterno.

Empezamos creando una nueva ruta para editar el perfil. Ésta será /edit_profile y al igual que hicimos con la ruta para el login añadiremos dos rutas, una GET y otra POST. El handler que vamos a utilizar para procesar la edición del perfile es EditProfileFn.

También añadiremos una nueva plantilla en webapp/template/edit_profile.tpl donde añadiremos el código HTML necesario para mostrar el formulario de modificación del perfil.

Nuevos modelos

Esto significa que tenemos que añadir un nuevo modelo para procesar el formulario de edición del perfil. Éste es bastante sencillo.

En la misma tónica tenemos que añadir los campos que almacenaran la información adicional del perfil en el modelo del usuario.

Para terminar con las plantillas vamos a modificar la plantilla referente al perfil para mostrar la nueva información y un enlace para modificar el perfil. Es necesario resaltar que un perfil solo debe ser modificado por el usuario del perfil y no por cualquier usuario, así que el enlace de modificación del perfil debe ser visible solo para los usuarios que visiten su propio perfil.

En cuanto al código, hemos modificado el fichero webapp/router/handlers/handlers.go. Las modificaciones son principalmente para actualizar el valor LastSeen del modelo de Usuario en cada petición que haga el usuario, como por ejemplo en el handler Authenticated, que ahora queda así:

Podríamos haber creado un nuevo middleware que se procesará primero que ningún handler y actualizar así el valor de LastSeen. Pero no hemos querido complicarlo.

Te puede interesar  ¿Qué son las aplicaciones web?

Seguridad en el enlace de modificación

Para poder mostrar el enlace de modificación del perfil debemos de comprobar si el usuario actual es el usuario del que se está mostrando el perfil, esto lo hacemos en la plantilla y para ello proporcionamos una nueva variable que llamamos current_user. Esta variable tendrá la información del usuario almacenado en la sesión.

En la línea 28 del código anterior, enviamos al motor de plantillas las variables titulo, usuario (el que se ha consultado a través del parámetro :name), el listado de posts (por ahora ficticios) y el usuario actual mediante la variable current_user.

Handler para editar el perfil

El siguiente código corresponde con el handler EditProfileFn.

En ella recuperamos el usuario actual mediante la sesión, así como el puntero a la base de datos.

Resultado final

Si la petición es del tipo GET mostramos el formulario y proporcionamos la información del usuario actual. Por el contrario, si la petición es POST validamos el formulario, acto seguido actualizamos los datos correspondientes en la base de datos y en la sesión.

Perfil completo

Hay que tener en cuenta que el código actual no comprueba que el cambio de nombre de usuario tenga colisiones. Esto se refiere a que identificamos los usuarios por su nombre y éste debe ser un valor único en la base de datos. Si el usuario Manolo del bombo quiere utilizar el nombre Cibernómada, obtendríamos un error en la base de datos por intentar utilizar el mismo valor único en dos elementos de la base de datos y por ahora no lo estamos controlando.

¡Bien Cibernómadas! Ya hemos terminado el capítulo sobre perfiles y avatares. ¿Interesante verdad?

Si te ha gustado, compártelo
Go con Gin, el mega tutorial (VII)
Tagged on:                 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *