Lo primero que vamos a hacer es descargar el código de nuestro curso: <a href='https://appdelante.com/cursos/autenticacion-de-usuarios-con-node' target='_blank'>Autenticación de Usuarios con Node </a>del siguiente repositorio de github: <a href='https://github.com/rickitan/node-express-auth'>https://github.com/rickitan/node-express-auth</a>.

Vamos a utilizar el código de ese curso como la base de nuestro proyecto.

Una vez que descarguemos el proyecto vamos a instalar las dependencias utilizando npm install, iniciar MongoDB y por último instalar y configurar Pug.js como nuestro motor de vista.

Inicializar el proyecto

En esta sección vamos a instalar Bootstrap y jQuery. Luego, vamos a exponer los archivos de estas librerías utilizando los archivos estáticos de express. Esto nos permite cargar el JavaScript y CSS de estas librerías en el navegador.

Servir archivos estáticos

En esta sección vamos a crear el layout de nuestra aplicación. Primero vamos a explicar como Pug.js nos permite escribir HTML compacto, y luego lo usaremos para crear el header y footer de nuestra aplicación.

Introducción a Pug.js y creación del layout

Vamos a crear nuestra primera vista para la página principal de nuestra aplicación. También, crearemos la ruta que corresponde a nuestro home y se encarga de hacer el render de la página. Por último, vamos a crear un archivo de CSS, que vamos a utilizar para agregarle estilos a nuestra aplicación.

Crear página Home y servir estilos

Vamos a crear dos nuevas vistas una para que los usuarios hagan login y otra signup. También, vamos a modificar nuestro modelo usuario para que podamos guardar la biografía de nuestros usuarios.

Crear páginas login y signup

En esta sección vamos a terminar la implementación que le permite a los usuarios hacer login y signup. Una vez que hayamos autenticado a un usuario vamos a agregar su información a “req.locals” de manera que las vistas puedan tener acceso a todas sus propiedades.

Por último, vamos a mostrar el nombre del usuario que se encuentra autenticado en el header de nuestra aplicación.

Mostar información del usuario en el header

En esta sección vamos a comenzar creando el modelo que representa a un tweet. Para esto vamos utilizar los esquemas de Mongoose. Luego, vamos a crear el controlador que se encarga de manejar las llamadas que afectan a los tweets. Vamos a definir el metodo postTweet el cuál recibe llamadas de tipo POST y se encarga de crea nuevos tweets y guardarlos en la base de datos.

Crear modelo y controlador tweet

Vamos a implementar un segundo método en el controlador de tweets que recibe un array con ids de usuarios y retorna todos los tweets que hayan sido creados por estos usuarios.

Más adelante vamos a utilizar este método para cargar los tweets y mostrarlos en los feeds. Lo siguiente que vamos a hacer es crear el formulario que le permite a un usuario twittear.

Por último, vamos a revisar el estado de nuestra base de datos utilizando RoboMongo para asegurarnos que los tweets están siendo almacenados.

Cargar tweets para un usuario y vista

Vamos a modificar nuestro modelo usuario para poder guardar a los seguidores y siguiendos. También vamos a crear un método que nos retorna el avatar que vamos a estar utilizando para los perfiles de nuestros usuarios. Para los avatares vamos a utilizar el API: http://adorable.io

Introducir siguiendo y seguidores al modelo usuario

Vamos a comenzar a implementar la lógica necesaria para soportar perfiles en nuestra aplicación. Comenzaremos creando el controlador perfil que se va a encargar de encapsular toda la implementación.

Controlador perfil

En esta sección vamos a continuar trabajando en los perfiles. Vamos a crear el archivo perfil.pug donde implementaremos todo el markup que refleja como se ve nuestra página. Vamos a utilizar el avatar, la biografía y mostraremos el número de tweets, seguidores y siguiendo que un usuario tiene.

Vista mi perfil

Implementaremos la funcionalidad que permite ver los perfiles de otros usuarios.

Vista perfil

En esta sección vamos a implementar la lógica que nos permite seguir a otro usuario en la aplicación.

Lógica para seguir a un usuario

En esta sección vamos a implementar la lógica que nos permite dejar de seguir a otro usuario. También, vamos a conectar tanto el seguir como dejar de seguir, a los url pertinentes. Por último, vamos a comprobar que nuestra interfaz muestra el estado correcto luego de que seguimos o dejamos de seguir a una persona.

Lógica para dejar de seguir a un usuario

En esta sección vamos a crear el componente que se encarga de mostrar todos los tweets en nuestra interfaz, para esto vamos a explicar como se hacen iteraciones en Pug.

Mostrar feed de tweets

En esta sección vamos a crear un nuevo controlador que se va a encargar de recibir las llamadas a la página explorar. Vamos a crear un método para las llamadas post que recibe un string y hace una búsqueda en la colección de usuarios utilizando una expresión regular (regex).

Controlador para la página explorar

Vamos a crear una nueva vista para la página explorar. Esta vista tiene un campo que le permite al usuario escribir el nombre de la persona que esta buscando y muestra los resultados de la búsqueda.

Vista para la página explorar

Vamos a comenzar esta sección instalando el modulo express-flash que nos permite mostrar alertas a nuestros usuarios. Luego, vamos a utilizar este mismo módulo para agregar validaciones en varias partes de la aplicación. Por último, vamos a hacer un recorrido final para verificar que toda nuestra aplicación esta funcionando de manera correcta.

¡Y listo! Este fue nuestro último video de este curso. Espero que lo hayas disfrutado muchísimo y que todo lo que aprendiste te sirva para desarrollar tus propias aplicaciones y progresar en tu carrera como developer. Si tienes cualquier comentario sobre el curso, no dudes en contactarme: ricardo@appdelante.com

Lecturas

Inicializar el proyecto

Servir archivos estáticos

Introducción a Pug.js y creación del layout

Crear página Home y servir estilos

Crear páginas login y signup

Mostar información del usuario en el header

Crear modelo y controlador tweet

Cargar tweets para un usuario y vista

Introducir siguiendo y seguidores al modelo usuario

Controlador perfil

Vista mi perfil

Vista perfil

Lógica para seguir a un usuario

Lógica para dejar de seguir a un usuario

Mostrar feed de tweets

Controlador para la página explorar

Vista para la página explorar

Alertas para errores y toques finales

Mostrar feed de tweets

Descripción