Realtime Messenger usando Laravel, Vue, Bootstrap 4 y Pusher
4.6 (166 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
738 students enrolled

Realtime Messenger usando Laravel, Vue, Bootstrap 4 y Pusher

Desarrollemos una app completa! Aprende sobre Channels, Queues, Vuex, JWT, Sesiones, BootstrapVue y mucho más.
4.6 (166 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
738 students enrolled
Created by Juan Ramos
Last updated 7/2018
Spanish
Spanish [Auto]
Current price: $119.99 Original price: $199.99 Discount: 40% off
1 hour left at this price!
30-Day Money-Back Guarantee
This course includes
  • 14.5 hours on-demand video
  • 7 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Desarrollarás aplicaciones web profesionales con funcionalidad en tiempo real (real time)
  • Serás capaz de integrar Vue en tus proyectos Laravel (de forma progresiva)
  • Dominarás tecnologías de vanguardia, tanto para backend (Laravel) como frontend (Vue)
  • Dominarás conceptos relacionados a los sistemas de autenticación
  • Aprenderás a crear componentes de Vue y a intercambiar datos correctamente
  • Conocerás de cerca los tipos de canales que se pueden crear para comunicación en tiempo real
  • Reconocerás cuándo es conveniente aplicar Vuex o usar un EventBus
Course content
Expand all 83 lectures 14:27:57
+ Introducción
1 lecture 01:00

Un breve mensaje introductorio al curso.

Bienvenida y recomendaciones importantes
01:00
+ Configuración inicial
5 lectures 54:35

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

Preview 10:13

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.

Sublime Text y Git
05:38

Vamos 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.

NPM, Laravel Mix y dependencias JS
22:19

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

Autenticación e Introducción a BootstrapVue
05:06

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.

Instalación y configuración de BootstrapVue
11:19
+ UI con BootstrapVue
6 lectures 01:07:13

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

Vista de Login usando componentes de BV
19:11

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

Componentes de BV para formularios
08:47

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

Menú de navegación usando BV
18:26

Veamos asociar un evento de clic sobre un componente.

Cerrar sesión y un primer evento general
09:45

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

Vista de Registro usando BootstrapVue
06:53

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

Alert danger para mensajes de error
04:11
+ UI base Messenger
3 lectures 54:48

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

Diseño del listado de contactos
21:49

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

Nuestros primeros componentes de Vue
12:57
Diseño de la conversación activa
20:02
+ Modelamiento inicial y conexión
4 lectures 38:45

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

Entidades y sus atributos
15:44

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

Conversation y Message
09:44

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

1 Conversación y 2 Mensajes
07:12

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.

Primeros Endpoints en nuestra API
06:05
+ Sistema de autenticación
5 lectures 50:27

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.

Cookies
06:55

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

Sesiones
07:34

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

JSON Web Tokens
06:21

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.

Resumen y comparación
15:32

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).

Demostración práctica en Laravel
14:05
+ Axios y VueJS: Primeros pasos
5 lectures 48:52

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

Comunicación con un componente hijo
14:15

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

Axios: Petición HTTP en 2do plano
06:16

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.

Consultar y listar 2 tipos de mensajes
14:24

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).

Evento submit y registro de mensajes
11:52

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.

Evitar autocompletado y editar data
02:05
+ Múltiples conversaciones
6 lectures 54:11

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

Nuevo contacto y conversación
05:59

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.

Mensajes según contacto
09:21

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

Adecuar respuesta JSON para Conversations
13:00

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.

Query Builder a través de 1 relación
04:56

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.

Listar conversaciones (Object vía props)
05:27

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.

Model events y Observers
15:28
+ Seleccionar conversación
6 lectures 32:19

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

Evento click sobre un componente
06:34

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

Desactivar notificaciones de Laravel Mix
02:57

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.

Comunicación con un componente padre
10:41

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.

Cargar mensajes según selección
06:43

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.

Observar cambios sobre variables props
04:36

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.

Nombre del contacto seleccionado
00:48
+ Notificaciones en tiempo real
7 lectures 01:04:17

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

Estado actual (sin real time)
03:45

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.

Configuración inicial de Pusher
09:20

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.

Laravel Echo y Pusher JS
04:09

Veamos cómo registrar y transmitir un evento.

Broadcast de eventos
07:43

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

Más acerca de las Queue Jobs
09:52

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.

Escuchar eventos usando Laravel Echo
08:02

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.

Mostrar mensaje recibido y refactorización
21:26
Requirements
  • Conocimiento básico de Laravel o PHP en general
  • Conocimiento básico de Javascript
Description

Si has escuchado sobre Laravel y/o Vue, te invito a seguir este curso para aprender más sobre ellos y cómo funcionan en conjunto.

En este curso aprenderás y resolverás dudas muy importantes sobre los siguientes temas:

  • Cuál es la diferencia entre usar JSON Web Tokens y Cookies+Sesiones en el desarrollo de APIs.
  • Cuál es la diferencia entre el sistema de rutas de Laravel y las rutas gestionadas por Vue.
  • Cómo implementar notificaciones en tiempo real a través de canales públicos y privados usando Pusher.
  • Cómo usar y sacarle provecho a Laravel Mix de forma muy sencilla y práctica.
  • Y sobre todo, cómo aplicar todo lo aprendido, desarrollando una aplicación web profesional que podrás añadir a tu portafolio o aplicar a tus proyectos ya existentes!

¿Aún no te has convencido?

Te recuerdo que tanto en este como en mis demás cursos, siempre estoy atento para ayudarte con cualquier duda que tengas mientras sigues el curso.

Mi intención es que puedas seguir el curso de principio a fin, y desarrolles una aplicacion web completa de la que te sientas orgulloso.

Una vez que empieces, nada te detendrá. Y si algo te detiene, estaré allí para ayudarte a continuar.

El curso cuenta al final con una serie de ejercicios propuestos para que no dejes de aprender. También te ayudaré con ellos si tienes inconvenientes al implementarlos.

Who this course is for:
  • Personas que quieren aprender a desarrollar aplicaciones web profesionales
  • Desarrolladores que quieran aprender a usar Laravel en conjunto con Vue