Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Lo que aprenderás con este curso
- 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
Este curso está dedicado a
Personas que quieren aprender a desarrollar aplicaciones web profesionales
Desarrolladores que quieran aprender a usar Laravel en conjunto con Vue
Requisitos
Conocimiento básico de Laravel o PHP en general
Conocimiento básico de Javascript
Contenido del curso
1 Bienvenida y recomendaciones importantes
Un breve mensaje introductorio al curso.
2 Nuevo proyecto Laravel 5.5 o 5.6 10:13 Gratis
Creamos un nuevo proyecto Laravel, configuramos un VirtualHost para Apache y modificados el puerto (opcional).
+2 recursos asociados a esta clase
3 Sublime Text y Git 05:38
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.
+2 recursos asociados a esta clase
4 NPM, Laravel Mix y dependencias JS 22:19
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.
+1 recurso asociado a esta clase
5 Autenticación e Introducción a BootstrapVue 05:06
Vamos a definir un sistema de autenticación con Laravel y analizaremos las diferencias entre BootstrapVue y Bootstrap.
6 Instalación y configuración de BootstrapVue 11:19
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.
+1 recurso asociado a esta clase
7 Vista de Login usando componentes de BV 19:11
En esta lección empezamos a reemplazar etiquetas HTML con clases por componentes de BootstrapVue.
8 Componentes de BV para formularios 08:47
En esta lección usamos componentes de BootstrapVue para representar nuestro formulario de inicio de sesión.
9 Menú de navegación usando BV 18:26
En esta lección vamos a personalizar nuestro menú de navegación o navbar usando BootstrapVue.
10 Cerrar sesión y un primer evento general 09:45
Veamos asociar un evento de clic sobre un componente.
11 Vista de Registro usando BootstrapVue 06:53
En esta lección terminamos de diseñar las vistas de nuestro sistema de autenticación con BootstrapVue.
12 Alert danger para mensajes de error 04:11
Vamos a añadir mensajes de validación en la parte superior de nuestros formularios de login y registro.
13 Diseño del listado de contactos 21:49
En el lado izquierdo de nuestra app tendremos el listado de contactos.
14 Nuestros primeros componentes de Vue 12:57
En esta lección creamos los componentes ContactComponent, ContactListComponent y ActiveConversationComponent.
15 Diseño de la conversación activa 20:02
En esta lección completamos el diseño de nuestra vista de chat, antes de pasar a implementar la funcionalidad.
16 Entidades y sus atributos 15:44
En esta lección discutimos sobre el modelamiento de nuestra base de datos y finalmente realizamos un planteamiento inicial.
17 Conversation y Message 09:44
En esta lección finalmente ejecutamos nuestras migraciones y damos origen a nuestras 2 primeras tablas (conversations y messages).
18 1 Conversación y 2 Mensajes 07:12
En esta lección definimos seeders, para tener siempre datos iniciales en nuestra app que nos permitan hacer pruebas.
19 Primeros Endpoints en nuestra API 06:05
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.
20 Cookies 06:55
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.
+1 recurso asociado a esta clase
21 Sesiones 07:34
Veamos cuál es la diferencia entre cookies y sesiones, y cómo funcionan en conjunto (de forma específica en PHP).
+1 recurso asociado a esta clase
22 JSON Web Tokens 06:21
Comparación entre Cookies+Sessions y JWT. También vemos por qué optamos por el primero en esta ocasión.
+1 recurso asociado a esta clase
23 Resumen y comparación 15:32
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.
24 Demostración práctica en Laravel 14:05
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).
25 Comunicación con un componente hijo 14:15
Veamos cómo podemos enviar datos hacia un componente hijo, a través de slots y a través de props.
26 Axios: Petición HTTP en 2do plano 06:16
Veamos cómo realizar una petición HTTP usando Axios. Consultamos un endpoint de nuestra API interna y obtenemos una respuesta en formato JSON.
27 Consultar y listar 2 tipos de mensajes 14:24
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.
28 Evento submit y registro de mensajes 11:52
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).
29 Evitar autocompletado y editar data 02:05
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.
30 Nuevo contacto y conversación 05:59
En esta lección revisamos nuestras migraciones, y tras un breve análisis añadimos nuevos datos a nuestros seeders.
31 Mensajes según contacto 09:21
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.
32 Adecuar respuesta JSON para Conversations 13:00
En esta lección vamos a ver cómo concatenar valores calculados sobre una respuesta en formato JSON, haciendo uso de Accessors.
33 Query Builder a través de 1 relación 04:56
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.
+2 recursos asociados a esta clase
34 Listar conversaciones (Object vía props) 05:27
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.
35 Model events y Observers 15:28
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.
+1 recurso asociado a esta clase
36 Evento click sobre un componente 06:34
Veamos cómo escuchar al evento de click sobre componentes, y cómo llamar a un método enviándole parámetros.
37 Desactivar notificaciones de Laravel Mix 02:57
Desactivemos las notificaciones que se generan tras cada compilación de Laravel Mix (Webpack).
38 Comunicación con un componente padre 10:41
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.
39 Cargar mensajes según selección 06:43
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.
40 Observar cambios sobre variables props 04:36
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.
41 Nombre del contacto seleccionado
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.
42 Estado actual (sin real time) 03:45
Esta es la condición actual de nuestra aplicación. Fijemos un primer objetivo para empezar a usar características en tiempo real.
43 Configuración inicial de Pusher 09:20
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.
44 Laravel Echo y Pusher JS 04:09
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.
45 Broadcast de eventos 07:43
Veamos cómo registrar y transmitir un evento.
46 Más acerca de las Queue Jobs 09:52
En esta lección vemos más de cerca qué son y cómo funcionan las colas (Queues) en Laravel.
+1 recurso asociado a esta clase
47 Escuchar eventos usando Laravel Echo 08:02
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.
48 Mostrar mensaje recibido y refactorización 21:26
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.
49 Mostrar barra de desplazamiento 12:09
En esta lección vemos cómo añadir estilos sobre componentes, y de forma específica empezamos a mostrar una barra de scroll asociada a la sección de mensajes.
50 Desplazar hasta el final 11:25
Veamos cómo aplicar un scroll (desplazamiento) sobre la sección de mensajes para mostrar siempre el final de la lista.
51 Más de un canal 19:28
En vez de tener un único canal para transmitir por allí todos los mensajes, ahora vamos a definir canales específicos para cada usuario.
52 Mostrar mensaje sólo cuando corresponde 04:42
Ahora cada usuario recibe sólo sus mensajes correspondientes. Sin embargo, los mensajes recibidos sólo se deben mostrar en la conversación activa si el usuario estaba viendo la misma conversación y no otra.
53 Condición a prueba de balas y last message 17:38
En esta lección añadimos una condición para validar adecuadamente los mensajes que mostramos. Así mismo actualizamos la lista de contactos según el último mensaje recibido, de cada conversación.
54 Moment.js (Fechas con formato) 16:48
Veamos cómo mostrar las fechas con formato, y de forma relativa con relación a la fecha y hora actual.
+1 recurso asociado a esta clase
55 Interceptando mensajes de un canal público 04:45
En esta lección vemos la importancia de usar canales privados, para evitar que cualquier visitante de nuestro sitio pueda interceptar información sensible que transite a través de canales públicos.
56 Cómo definir y escuchar 1 canal privado 10:23
Veamos cuál es la diferencia entre un canal público y uno privado. En esta lección vemos lo fácil que resulta interceptar mensajes de un canal público, pero corregimos esto haciendo uso de un canal privado.
57 Diseño para mostrar el estado en línea 03:58
En esta lección añadimos un círculo para indicar el estado de un usuario. Es decir, dependiendo de si está conectado, el círculo se tornará de un color representativo.
58 Presence channel (mostrar estado online) 34:23
En esta lección vemos como definir un presence channel para informar a nuestros usuarios qué contactos se encuentran en línea y quiénes no.
59 Filtrar contactos 08:21
Veamos cómo añadir funcionalidad a nuestro input que permite la búsqueda de contactos.
60 Gestionar perfil de usuario 28:16
Ahora los usuarios podrán modificar sus datos, y así mismo su imagen de perfil.
+1 recurso asociado a esta clase
61 Imágenes para todos y mix versioning 14:13
Veamos cómo mostrar las imágenes de perfil a lo largo de toda nuestra aplicación, y así mismo cómo usar laravel mix para añadir un versionado sobre nuestros recursos.
+1 recurso asociado a esta clase
62 Resaltar selección 05:08
Vamos a añadir un color de fondo al contacto correspondiente en la lista de contactos, según la conversación activa.
63 Repaso general y Event Bus 23:34
Hagamos un repaso general de los componentes declarados en nuestra aplicación y el intercambio de información entre ellos. Tras analizar la principal desventaja del uso de props y events, proponemos una primera solución, que consiste en definir un event bus.
64 ¿Qué es Vuex? 13:44
En esta lección vemos de forma muy resumida y puntual qué es Vuex y los problemas que resuelve.
65 Instalación de Vuex 11:10
En esta lección instalamos e importamos Vuex sobre nuestro proyecto. Así mismo definimos un store, para almacenar allí de forma centralizada el estado de nuestra aplicación.
66 Mutations 09:12
¿Por qué usar mutaciones en vez de modificar el estado directamente? ¿Qué es la característica de time-travel debugging?
67 De data a state (selectedConversation) 09:35
En esta lección vamos a mover nuestra variable selectedConversation hacia el state general de nuestra aplicación. Ahora, los componentes accederán a esta información a través de nuestro store.
68 Actions 06:53
Veamos cómo funcionan las Actions, y la relación que tienen respecto a las Mutations.
69 Getters 05:45
En esta lección definimos un getter en nuestro store, encargado de filtrar la lista de contactos, como reemplazo a la computed property que anteriormente hacía la operación.
70 v-model reactive (respecto al state general) 14:19
Veamos cómo asociar una caja de texto (input) con una variable de nuestro state, haciendo uso de v-model y una computed property.
71 Refactorizando ActiveConversation 14:51
En esta lección reemplazamos el uso de props y métodos específicos del componente ActiveConversation por nuevas variables y métodos declarados en nuestra store (state, mutations y actions).
72 Store como 1 archivo separado 02:36
Vamos a crear un archivo store.js para que este archivo se encargue de gestionar el estado de nuestra aplicación. También hacemos mención de que en proyectos grandes, se podría tener muchos archivos store (y que incluso 1 mismo store puede separarse en más archivos).
73 Recapitulando lo visto sobre Vuex 06:43
¡Veamos un resumen general sobre todo lo que hemos aprendido en las últimas lecciones!
74 Vue Router y conceptos relacionados 19:52
Veamos qué es una SPA, una MPA, la diferencia entre las rutas de Laravel y las rutas de Vue, y cómo funciona Vue Router.
75 Instalación y uso de Vue Router 22:02
Veamos cómo instalar e importar Vue Router a nuestro proyecto, y así mismo cómo empezar a usar esta biblioteca.
76 Push de ruta & Dispatch de action 09:28
Veamos cómo usar Vue Router para hacer push de una ruta y redirigir al usuario. Así mismo, cómo hacer dispatch de un action tan pronto como la ruta ha cambiado, y viceversa. Es decir, veamos también cómo actualizar la ruta luego de disparar una acción.
77 De Laravel a Vue y parámetros de ruta 21:14
Veamos cómo crear una vista de error 404 para Laravel, cómo permitir a Vue gestionar una ruta a nivel de cliente, y finalmente cómo inicializar un componente en función a un parámetro de ruta inicial.
78 Server Side y Client Side Rendering 11:32
Veamos una introducción a lo que es Server Side Rendering y su importancia.
+2 recursos asociados a esta clase
79 Últimos ajustes 11:23
En esta lección corregimos algunos detalles que habíamos pasado por alto en las últimas lecciones, mientras implementábamos varios cambios (relacionados a Vuex y Vue Router principalmente).
80 Mensaje final y pasos siguientes
Por favor no leas esto hasta terminar el curso.
81 Silenciar notificaciones
En un inicio analizamos la posibilidad de silenciar notificaciones. ¿Cómo se implementaría?
82 Habilitar conversaciones
En nuestros seeders definimos conversaciones entre nuestros usuarios. ¿Cómo podemos crear las conversaciones como parte de nuestra app?
83 Integrar sobre proyecto Laravel existente
¿Tienes un proyecto de Laravel funcionando y quieres integrar allí la app Messenger que hemos desarrollado?
84 Delegar la gestión de rutas a Vue al 100%
¿Es posible convertir el proyecto a una Single Page Application completamente? ¡De hecho que sí!
Preguntas frecuentes
Con una membresía premium obtienes acceso a todos los cursos de la plataforma, incluyendo este.
Como usuario premium tendrás acceso a la sección de preguntas y respuestas de la plataforma.
En nuestro foro privado, el 100% de las preguntas reciben respuesta 🙂.
Los pagos se pueden realizar vía PayPal o con tarjeta (crédito o débito).
Escríbenos a [email protected] si deseas coordinar otro medio de pago.
Esta serie consta de 84 capítulos.
Nivel de dificultad: Aprendiz.
Empieza este curso y lleva un control de tu progreso.
Lo que opinan del curso
Excelente curso, no conocía Vue.js, pero creo que es una forma de conocerlo bastante intuitiva y agradable.
Jairo Andres Grajales Salinas
excelente curso, solo faltó que se pudiera explicar como subir a producción este proyecto para aprender como funcionaba websockets en un servidor en internet, por lo demás, todo muy bueno
CC
Cristian Castañeda