Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Laravel Aprendiz

Diseño para mostrar el estado en línea

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.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Aún estamos trabajando en esta sección.

Si esta lección es muy importante para ti, puedes solicitar aquí su transcripción, para que sea prioridad.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Bienvenida y recomendaciones importantes

Nuevo proyecto Laravel 5.5 o 5.6

Sublime Text y Git

NPM, Laravel Mix y dependencias JS

Autenticación e Introducción a BootstrapVue

Instalación y configuración de BootstrapVue

Vista de Login usando componentes de BV

Componentes de BV para formularios

Menú de navegación usando BV

Cerrar sesión y un primer evento general

Vista de Registro usando BootstrapVue

Alert danger para mensajes de error

Diseño del listado de contactos

Nuestros primeros componentes de Vue

Diseño de la conversación activa

Entidades y sus atributos

Conversation y Message

1 Conversación y 2 Mensajes

Primeros Endpoints en nuestra API

Sesiones

JSON Web Tokens

Resumen y comparación

Demostración práctica en Laravel

Comunicación con un componente hijo

Axios: Petición HTTP en 2do plano

Consultar y listar 2 tipos de mensajes

Evento submit y registro de mensajes

Evitar autocompletado y editar data

Nuevo contacto y conversación

Mensajes según contacto

Adecuar respuesta JSON para Conversations

Query Builder a través de 1 relación

Listar conversaciones (Object vía props)

Model events y Observers

Evento click sobre un componente

Desactivar notificaciones de Laravel Mix

Comunicación con un componente padre

Cargar mensajes según selección

Observar cambios sobre variables props

Nombre del contacto seleccionado

Estado actual (sin real time)

Configuración inicial de Pusher

Laravel Echo y Pusher JS

Broadcast de eventos

Más acerca de las Queue Jobs

Escuchar eventos usando Laravel Echo

Mostrar mensaje recibido y refactorización

Mostrar barra de desplazamiento

Desplazar hasta el final

Más de un canal

Mostrar mensaje sólo cuando corresponde

Condición a prueba de balas y last message

Moment.js (Fechas con formato)

Interceptando mensajes de un canal público

Cómo definir y escuchar 1 canal privado

Diseño para mostrar el estado en línea

Presence channel (mostrar estado online)

Filtrar contactos

Gestionar perfil de usuario

Imágenes para todos y mix versioning

Resaltar selección

Repaso general y Event Bus

¿Qué es Vuex?

Instalación de Vuex

Mutations

De data a state (selectedConversation)

Actions

Getters

v-model reactive (respecto al state general)

Refactorizando ActiveConversation

Store como 1 archivo separado

Recapitulando lo visto sobre Vuex

Vue Router y conceptos relacionados

Instalación y uso de Vue Router

Push de ruta & Dispatch de action

De Laravel a Vue y parámetros de ruta

Server Side y Client Side Rendering

Últimos ajustes

Mensaje final y pasos siguientes

Silenciar notificaciones

Habilitar conversaciones

Integrar sobre proyecto Laravel existente

Delegar la gestión de rutas a Vue al 100%

Imagen de la serie Realtime Messenger usando Laravel, Vue, Bootstrap 4 y Pusher

Estás viendo un capítulo de la serie Realtime Messenger usando Laravel, Vue, Bootstrap 4 y Pusher

Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Sólo debes registrarte 😉.