Realtime Messenger usando Laravel, Vue, Bootstrap 4 y Pusher

Creamos un nuevo proyecto Laravel, configuramos un VirtualHost para Apache y modificados el puerto (opcional).

Veamos cómo añadir un paquete a Sublime Text para que reconozca la sintaxis de nuestros componentes de Vue. Así mismo, iniciamos un repositorio de Git sobre nuestro proyecto.

Vamos a realizar una revisión general del código JS que Laravel incluye por defecto. Así mismo, vamos a eliminar las dependencias que no necesitamos en nuestro proyecto (entre ellas JQuery) y vamos a instalar aquellos paquetes que sí requiere nuestro proyecto.

Vamos a definir un sistema de autenticación con Laravel y analizaremos las diferencias entre BootstrapVue y Bootstrap.

En este video instalamos el paquete BootstrapVue y cometemos un error adrede para comprender mejor cómo funcionan 2 loaders asociados con los CSS. Finalmente, terminamos usando nuestro primer componente.

En esta lección empezamos a reemplazar etiquetas HTML con clases por componentes de BootstrapVue.

En esta lección usamos componentes de BootstrapVue para representar nuestro formulario de inicio de sesión.

En esta lección vamos a personalizar nuestro menú de navegación o navbar usando BootstrapVue.

Veamos asociar un evento de clic sobre un componente.

En esta lección terminamos de diseñar las vistas de nuestro sistema de autenticación con BootstrapVue.

Vamos a añadir mensajes de validación en la parte superior de nuestros formularios de login y registro.

En el lado izquierdo de nuestra app tendremos el listado de contactos.

En esta lección creamos los componentes ContactComponent, ContactListComponent y ActiveConversationComponent.

En esta lección completamos el diseño de nuestra vista de chat, antes de pasar a implementar la funcionalidad.

En esta lección discutimos sobre el modelamiento de nuestra base de datos y finalmente realizamos un planteamiento inicial.

En esta lección finalmente ejecutamos nuestras migraciones y damos origen a nuestras 2 primeras tablas (conversations y messages).

En esta lección definimos seeders, para tener siempre datos iniciales en nuestra app que nos permitan hacer pruebas.

En esta lección empezamos creando 2 rutas para nuestra API. Una ruta devolverá el listado de conversaciones de un usuario, y la otra, los mensajes asociados a una conversación. Veamos cómo el ORM de Laravel devuelve respuestas en JSON.

En esta lección revisamos qué son las cookies y su importancia. También vemos de cerca cómo funcionan las peticiones HTTP sin y con cookies.

Veamos cuál es la diferencia entre cookies y sesiones, y cómo funcionan en conjunto (de forma específica en PHP).

Comparación entre Cookies+Sessions y JWT. También vemos por qué optamos por el primero en esta ocasión.

En esta lección repasamos cómo funcionan las cookies en conjunto con las sesiones, y así mismo el enfoque basado en tokens, resaltando la principal diferencia entre ellos.

Luego de tanta teoría veamos más de cerca cómo se gestionan las cookies y sesiones en un proyecto de Laravel (en una instalación por defecto).

Veamos cómo podemos enviar datos hacia un componente hijo, a través de slots y a través de props.

Veamos cómo realizar una petición HTTP usando Axios. Consultamos un endpoint de nuestra API interna y obtenemos una respuesta en formato JSON.

En esta lección vemos cómo añadir una condición dentro de nuestra consulta a la base de datos, y así mismo vemos cómo usar la directiva v-for y cómo añadir un atributo de forma condicional.

Veamos cómo asociar un método con el evento submit de un formulario, a fin de registrar nuevos mensajes (al presionar el botón Enviar o presionar la tecla enter sobre la caja de texto correspondiente).

En esta lección vemos cómo desactivar el autocompletado de un formulario. También modificamos el valor de nuestras variables sobre la marcha y vemos cómo se actualiza nuestra vista en función a ello.

En esta lección revisamos nuestras migraciones, y tras un breve análisis añadimos nuevos datos a nuestros seeders.

Veamos cómo obtener el listado de mensajes para un contacto en específico, y así mismo cómo ejecutar métodos de un componente desde la Developer Tools de Chrome.

En esta lección vamos a ver cómo concatenar valores calculados sobre una respuesta en formato JSON, haciendo uso de Accessors.

Cuando accedemos a un objeto a través de una relación por defecto se consultan todas las columnas de la tabla correspondiente. Si necesitamos sólo un dato, podemos modificar la consulta asociada a la relación para sólo seleccionar ese dato.

En esta lección vemos cómo listar las conversaciones y cómo mostrar los datos correspondientes de cada contacto a través del componente ContactComponent.

En esta lección creamos una clase Observer para escuchar eventos del modelo Message, y registramos este observador a través del AppServiceProvider de nuestro proyecto Laravel.

Veamos cómo escuchar al evento de click sobre componentes, y cómo llamar a un método enviándole parámetros.

Desactivemos las notificaciones que se generan tras cada compilación de Laravel Mix (Webpack).

En esta lección vemos cómo enviar información desde un componente hijo hacia un componente padre en Vue.js, a través de eventos.

En esta lección vemos cómo enviar un dato hacia un componente hijo vía props. El dato enviado existe como una variable en el componente padre.

Una vez que el componente ActiveConversation ha cargado, el evento mounted no ocurre más. A fin de actualizar la lista de mensajes según un nuevo contacto, es necesario observar cambios sobre la variable contactId que recibimos vía props.

Vamos a enviar un dato más vía props, y a prepararnos para acceder a la sección siguiente, donde empezamos a usar Pusher.

Esta es la condición actual de nuestra aplicación. Fijemos un primer objetivo para empezar a usar características en tiempo real.

Empecemos creando una cuenta en el sitio oficial de Pusher, y registrando una aplicación desde nuestro Dashboard. También instalamos la dependencia de Pusher para PHP.

En la lección anterior hemos cargado el paquete de Pusher para PHP vía Composer. En esta lección instalamos Laravel Echo y Pusher JS vía NPM. También creamos una instancia de Laravel Echo.

Veamos cómo registrar y transmitir un evento.

En esta lección vemos más de cerca qué son y cómo funcionan las colas (Queues) en Laravel.

En esta lección vemos cómo suscribirnos a un canal usando una instancia de Laravel Echo, para escuchar eventos sobre dicho canal y recibir información.

En esta lección modificamos los datos que gestionan nuestros componentes MessengerComponent y ActiveConversationComponent, a fin de organizarlos para mostrar la lista de mensajes a partir del componente más general.