Construyendo una red social con Laravel & TDD

Construyendo una red social con Laravel & TDD

0%
95 lecciones 12h 22m
En esta serie vamos a construir una red social desde cero con Bootstrap 4, Vue.js y Laravel, utilizando TDD Test Driven Development (Desarrollo guiado por pruebas)
Lo que vamos a construir
FREE
03:46

1. Lo que vamos a construir

En este video introductorio vemos algunos aspectos técnicos de lo que vamos a construir y revisamos una demo de la red social.
Introducción a TDD
FREE
02:00

2. Introducción a TDD

En esta lección vemos una pequeña introducción sobre TDD y cuál es su proceso de implementación.
Configurando PHPStorm
FREE
06:18

3. Configurando PHPStorm

En esta lección configuramos PHPStorm para que entienda mejor el código de Laravel, como por ejemplo, la estructura de carpetas, las directivas de blade, configuraciones de PHPUnit entre otras.
Cómo ejecutar tests
FREE
03:32

4. Cómo ejecutar tests

En esta lección revisamos la estructura de tests que trae Laravel por defecto y cómo ejecutarlos desde la terminal y con PHPStorm
Nuestro primer test
FREE
07:06

5. Nuestro primer test

En esta lección escribimos el primer test de nuestra aplicación, en el que probamos la habilidad de un usuario para crear estados.
URL para crear estados
FREE
08:39

6. URL para crear estados

En esta lección configuramos una base de datos exclusiva para los tests y escribimos el código de producción para satisfacer los requerimientos de la prueba que escribimos en la lección anterior.
URL para crear estados - Parte 2
FREE
05:16

7. URL para crear estados - Parte 2

En esta lección testeamos o probamos que solamente usuarios autenticados puedan crear estados a través esta URL
Probando reglas de validación
FREE
05:08

8. Probando reglas de validación

En esta lección nos aseguramos de que no se pueda guardar estados vacíos y que contengan al menos 5 caracteres, por supuesto, utilizando TDD.
Pruebas de navegador con Laravel Dusk
FREE
11:41

9. Pruebas de navegador con Laravel Dusk

En esta lección instalamos y configuramos Laravel Dusk que nos permite hacer pruebas automatizadas a través del navegador. También probamos la funcionalidad de que el usuario pueda crear estados desde la página principal.
Diseñando la plantilla con Bootstrap 4
FREE
10:21

10. Diseñando la plantilla con Bootstrap 4

En esta lección nos enfocamos en mejorar el aspecto de nuestra aplicación y en el proceso veremos cómo integrar y utilizar Bootstrap 4 en un proyecto de Laravel
Probando el login
FREE
04:49

11. Probando el login

En esta lección verificamos que el login funcione como queremos, para ello creamos nuestro propio formulario de login.
Diseñando el formulario de login
FREE
06:38

12. Diseñando el formulario de login

En esta lección utilizamos Bootstrap 4 para estilizar el formulario de login que creamos y testeamos en la lección anterior.
Componente para crear estados
PRO
09:48

13. Componente para crear estados

En esta lección creamos un componente de Vue.js para crear estados vía AJAX y probamos su funcionalidad con Laravel Dusk
Probando listado de estados
PRO
09:17

14. Probando listado de estados

En esta lección vamos a testear e implementar una url que nos devuelva los estados paginados y en un orden específico.
Probando el listado de estados con Dusk
PRO
09:48

15. Probando el listado de estados con Dusk

En esta lección utilizamos Laravel Dusk para probar que, luego de hacer la petición via AJAX con Axios, el listado de estados se muestra correctamente en la página principal.
Diseñando los estados
PRO
07:26

16. Diseñando los estados

En esta lección estilizamos el listado de estados utilizando Bootstrap 4 y sus utilidades de flexbox.
Testeando Recursos API
PRO
09:24

17. Testeando Recursos API

En esta lección escribimos nuestro primer test unitario para probar la funcionalidad de un recurso API de Laravel
Implementando el recurso API
PRO
09:03

18. Implementando el recurso API

En esta lección implementamos el recurso API de los estados, y modificamos los tests de Dusk para que verifiquen datos adicionales de los estados.
Obteniendo el usuario autenticado con Vue.js
FREE
07:50

19. Obteniendo el usuario autenticado con Vue.js

En esta lección accedemos al usuario actualmente autenticado con Laravel utilizando Vue.js. En el proceso, creamos un mixin para poder acceder al usuario desde cualquier componente de Vue
Implementando "LIKES"
PRO
16:03

20. Implementando "LIKES"

En esta lección testeamos e implementamos la relación entre los estados y los "likes", para de esa manera poder dar "me gusta" a los estados. Verificamos también que un mismo usuario, solamente pueda dar un "me gusta" a cada estado.
Testeando el botón ME GUSTA
PRO
12:21

21. Testeando el botón ME GUSTA

En esta lección continuamos con la implementación de los LIKES a los estados, creando los tests necesarios para verificar que el botón "ME GUSTA" funciona como queremos.
Permitir quitar "LIKES"
PRO
05:52

22. Permitir quitar "LIKES"

En esta lección escribimos los tests necesarios para permitir que el usuario pueda quitar likes a demás de otorgarlos.
Utilizando iconos fuente
FREE
06:38

23. Utilizando iconos fuente

En esta lección diseñamos los botones "me gusta" con bootstrap 4 e implementamos los iconos de Font Awesome.
Redirección con Javascript
PRO
05:20

24. Redirección con Javascript

En esta lección redireccionamos al login cuando un usuario intenta dar me gusta a un estado sin estar autenticado. También solucionamos un problema de fechas en uno de los tests anteriores.
Mostrando el conteo de likes
PRO
06:18

25. Mostrando el conteo de likes

En esta lección mostramos el total de likes que tiene cada estado y permitimos que esta cantidad se sincronice cuando agregamos o quitamos un like.
Flexbox con Bootstrap 4
PRO
03:25

26. Flexbox con Bootstrap 4

En este corta lección diseñamos el conteo de likes utilizando flexbox para posicionarlos perfectamente utilizando Bootstrap 4.
Definiendo la URL para agregar comentarios
PRO
08:56

27. Definiendo la URL para agregar comentarios

En esta lección comenzamos con la implementación de comentarios definiendo y testeando la url que permita agregar comentarios solamente a los usuarios autenticados.
Recurso API para los comentarios
PRO
03:39

28. Recurso API para los comentarios

En esta lección nos aseguramos de recibir en la respuesta el comentario recién creado, y para ello implementamos y testeamos un recurso API para transformarlo como queremos.
Reestructuración de componentes
PRO
07:33

29. Reestructuración de componentes

En esta lección vamos a reestructurar nuestros componentes de Vue.js con el fin de delegar responsabilidades. Por supuesto lo hacemos con confianza gracias a que tenemos tests que nos respaldan.
Probando la caja de comentarios
PRO
06:03

30. Probando la caja de comentarios

En esta lección probamos con Laravel Dusk el funcionamiento de un textarea debajo de cada estado que permita a los usuarios agregar comentarios.
Probando el listado de comentarios
PRO
12:42

31. Probando el listado de comentarios

En esta lección verificamos que se muestren correctamente los comentarios de cada estado utilizando Dusk para las pruebas automatizadas.
Campos adicionales de los comentarios
PRO
04:33

32. Campos adicionales de los comentarios

En esta lección probamos algunos campos adicionales de los comentarios que necesitamos para mostrarlos debajo de cada estado.
Diseñando los comentarios
PRO
07:16

33. Diseñando los comentarios

Ahora que tenemos los comentarios funcionando, vamos a utilizar Bootstrap 4 para mejorar el aspecto del listado de comentarios y la caja de comentarios .
Validación de comentarios
PRO
03:40

34. Validación de comentarios

En esta lección agregamos tests que verifiquen que los usuarios no puedan agregar comentarios vacíos.
Implementando "LIKES" a los comentarios
PRO
04:48

35. Implementando "LIKES" a los comentarios

En esta lección comenzamos a agregar los tests que verifiquen la implementación de los LIKES a los comentarios.
Likes polimórficos - Parte 1
PRO
16:15

36. Likes polimórficos - Parte 1

En esta lección implementamos y testeamos la relación polimórfica de Eloquent entre el modelo Like y el modelo Comment, con el objetivo de permitir agregar y quitar likes a los comentarios.
Likes polimórficos - Parte 2
PRO
10:02

37. Likes polimórficos - Parte 2

En esta lección continuamos con la transición de la relación has many a morph many entre los estados y los likes, de tal forma que podamos quitar el campo status_id de la migración de los likes.
Qué son los traits y cómo utilizarlos
PRO
04:06

38. Qué son los traits y cómo utilizarlos

En esta lección vemos qué es un Trait en PHP y cómo utilizarlos en la red social, con el fin de optimizar de nuestra aplicación.
Cómo testear Traits
PRO
15:17

39. Cómo testear Traits

En esta lección creamos un test unitario para probar las funcionalidades del Trait HasLikes, y de esa forma eliminar las duplicaciones que tenemos en los tests de los comentarios y de los estados.
Testeando el botón ME GUSTA de los comentarios
PRO
08:40

40. Testeando el botón ME GUSTA de los comentarios

En esta lección utilizamos Laravel Dusk para probar el funcionamiento del botón ME GUSTA de los comentarios.
Componente de Vue.js reutilizable
PRO
11:13

41. Componente de Vue.js reutilizable

​En esta lección modificamos el componente LikeBtn de tal forma que nos sirva para poder reutilizarlos para dar likes a los comentarios también.
Diseñando el botón Like de los comentarios
PRO
05:39

42. Diseñando el botón Like de los comentarios

En esta lección escribimos algunas reglas css que afecten solamente al botón LikeBtn de los comentarios.
Perfil de usuario
PRO
08:25

43. Perfil de usuario

En esta lección comenzamos con la implementación del perfil de usuario.
Recurso API para los usuarios
PRO
09:58

44. Recurso API para los usuarios

En esta lección reestructuramos el recurso api de los estados y los comentarios, para evitar duplicaciones. En su lugar crearemos un recurso api para el modelo user que podamos reutilizar.
Modificando el registro de usuario
PRO
06:13

45. Modificando el registro de usuario

En esta lección modificamos el registro de usuarios que nos provee Laravel y creamos un test que verifique el comportamiento del mismo.
Testeando la validación de registro
PRO
11:04

46. Testeando la validación de registro

En esta lección agregamos tests que prueben cada una de las reglas de validación del formulario de registro de usuarios.
Validando el username
PRO
05:53

47. Validando el username

En esta lección agregamos tests que verifiquen que solamente podemos agregar letras en el username ya que lo utilizaremos como identificador único del usuario.
Probando el registro con Dusk
PRO
11:41

48. Probando el registro con Dusk

En esta lección verificamos el registro de usuario y los errores de validación utilizando Laravel Dusk.
Diseñando el perfil de usuario
PRO
04:29

49. Diseñando el perfil de usuario

En esta lección corregimos el avatar de usuario en la vista principal y diseñamos la página de perfil de usuario con Bootstrap 4
Implementando solicitudes de amistad
PRO
14:09

50. Implementando solicitudes de amistad

En esta lección vamos a comenzar a implementar la funcionalidad de enviar solicitudes de amistad a otros usuarios y que ellos puedan aceptarlas.
Aceptar y denegar amistad
PRO
10:03

51. Aceptar y denegar amistad

En esta lección agregamos y testeamos las urls para aceptar y denegar solicitudes de amistad.
Componente de Vue para solicitar amistad
PRO
10:40

52. Componente de Vue para solicitar amistad

En esta lección creamos un componente de Vue para solicitar amistad vía AJAX y probamos su funcionalidad con Laravel Dusk.
Cancelar solicitud con Vue.js
PRO
12:25

53. Cancelar solicitud con Vue.js

En esta lección evitamos la duplicación de solicitudes de amistad y agregamos la funcionalidad que permita al usuario cancelar la solicitud de amistad enviada.
Aceptar solicitud con Vue.js
PRO
12:75

54. Aceptar solicitud con Vue.js

En esta lección permitimos que el usuario que recibe la solicitud de amistad, la pueda aceptar mediante AJAX, a través de un botón que crearemos con Vue.js.
Denegar solicitud con Vue.js
PRO
05:00

55. Denegar solicitud con Vue.js

En esta lección permitimos que el usuario que recibe la solicitud de amistad, la pueda denegar mediante AJAX, a través de un botón que crearemos con Vue.js.
Eliminar solicitud con Vue.js
PRO
09:55

56. Eliminar solicitud con Vue.js

En esta lección permitimos que el usuario que recibe la solicitud de amistad, la pueda eliminar independientemente del estado en que se encuentre dicha solicitud.
Eliminar amistad con Vue.js
PRO
06:18

57. Eliminar amistad con Vue.js

En esta lección permitimos que se pueda eliminar una solicitud aceptada y en el caso de que la solicitud esté denegada vamos a impedir que se pueda eliminar.
Actualizando a Laravel 5.7
PRO
06:29

58. Actualizando a Laravel 5.7

En esta lección aprovechamos que tenemos todos los tests en verde para actualizar nuestra aplicación de la red social a la versión 5.7 de Laravel.
Evitar solicitudes a sí mismo
PRO
08:09

59. Evitar solicitudes a sí mismo

En esta lección evitamos que un usuario pueda enviarse solicitudes a sí mismo y corregimos un par de cosas pendientes.
Test de regresión
PRO
11:12

60. Test de regresión

En esta lección corregimos un error que no estaba siendo capturado por los tests actuales, y también permitimos que el que recibe y niega una solicitud de amistad, también pueda eliminarla.
Cómo testear eventos
FREE
06:52

61. Cómo testear eventos

En esta lección comenzamos la implementación de características en tiempo real, y aprendemos a testear eventos con sus parámetros.
Cómo utilizar Laravel Echo
PRO
09:14

62. Cómo utilizar Laravel Echo

En esta lección instalamos y configuramos Laravel Echo para ayudarnos a escuchar desde Javascript, los eventos disparados por Laravel.
Configurando Pusher
PRO
05:49

63. Configurando Pusher

En esta lección vamos a configurar pusher para que escuche los eventos transmitidos por Laravel, y a su vez emita estos mensajes a Laravel Echo para que actualice la interfaz.
Evitar estados duplicados
PRO
08:41

64. Evitar estados duplicados

En esta lección agregamos un test que verifique que el evento no se transmita al usuario que lo crea para evitar que se duplique el estado en la interfaz.
Animando listas con Vue.js
FREE
02:20

65. Animando listas con Vue.js

En esta lección utilizamos transiciones de Vue.js para animar la entrada de un estado al momento de crearlo.
Comentarios en tiempo real - parte 1
PRO
04:48

66. Comentarios en tiempo real - parte 1

En esta lección agregamos un test que verifique que se dispara un evento al momento de crear un comentario.
Comentarios en tiempo real - parte 2
PRO
03:51

67. Comentarios en tiempo real - parte 2

En esta lección utilizamos Laravel Echo para actualizar la interfaz con el comentario recién creado.
Reestructuración de comentarios - parte 1
PRO
04:24

68. Reestructuración de comentarios - parte 1

En esta lección extraemos el listado de comentarios a un componente dedicado de Vue con el fin de quitar esa responsabilidad del componente de estados.
Reestructuración de comentarios - parte 2
PRO
06:47

69. Reestructuración de comentarios - parte 2

En esta lección extraemos el formulario de creación de comentarios y corregimos algunos errores que tenemos en la interfaz de usuario.
Reestructuración de Tests
PRO
08:51

70. Reestructuración de Tests

En esta lección reestructuramos y creamos verificaciones personalizadas para testear eventos de una forma más legible y organizada.
Likes en tiempo real - parte 1
PRO
13:47

71. Likes en tiempo real - parte 1

En esta lección testeamos y creamos un evento genérico que se dispare cada vez que agreguemos un like a cualquier modelo.
Likes en tiempo real - parte 2
PRO
03:32

72. Likes en tiempo real - parte 2

En esta lección utilizamos Laravel Echo para actualizar el conteo de likes de los estados en tiempo real.
Likes en tiempo real - parte 3
PRO
04:18

73. Likes en tiempo real - parte 3

En esta lección agregamos y testeamos un evento que se dispare cuando se quita un like a un estado, y así poder actualizar la interfaz en tiempo real.
Likes en tiempo real - parte 4
PRO
05:58

74. Likes en tiempo real - parte 4

En esta lección escuchamos cuando se agregan y quitan likes a los comentarios con Laravel Echo para actualizar la interfaz en tiempo real.
Cómo testear Listeners
PRO
08:52

75. Cómo testear Listeners

En esta lección agregamos y testeamos un listener para que escuche cuando se agregue un like a un modelo y envíe una notificación al usuario dueño del modelo.
Cómo testear Notificaciones - parte 1
PRO
05:56

76. Cómo testear Notificaciones - parte 1

En esta lección verificamos que la notificación que se envía cuando un usuario agrega un like, reciba los parámetros correctos.
Cómo testear notificaciones - parte 2
PRO
10:32

77. Cómo testear notificaciones - parte 2

En esta lección verificamos que la notificación que recibe el usuario sea almacenada correctamente en la base de datos.
Obteniendo las notificaciones
PRO
07:00

78. Obteniendo las notificaciones

En esta lección creamos y testeamos una url que nos permita obtener las notificaciones del usuario actualmente autenticado.
Mostrando las notificaciones
PRO
12:02

79. Mostrando las notificaciones

En esta lección mostramos las notificaciones del usuario autenticado en la barra de navegación.
Marcar notificiaciones
PRO
10:06

80. Marcar notificiaciones

En esta lección creamos dos urls que nos permitan marcar las notificaciones como leídas, y no leídas.
Marcar notificaciones - parte 2
PRO
08:16

81. Marcar notificaciones - parte 2

En esta lección agregamos un botón a los lados de cada notificación para poder marcarla como leída o no leída.
Marcar notificaciones - parte 3
FREE
08:53

82. Marcar notificaciones - parte 3

En esta lección mejoramos el diseño del dropdown de las notificaciones, utilizamos íconos en lugar de texto, y agregamos un tooltip para una mejor experiencia de usuario.
Actualizando a Laravel 5.8
FREE
07:36

83. Actualizando a Laravel 5.8

En esta lección actualizamos la aplicación de la red social a la versión 5.8 de Laravel.
Notificaciones en tiempo real
PRO
04:45

84. Notificaciones en tiempo real

En esta lección emitimos la notificación para que Laravel Echo la pueda escuchar y poder mostrarla sin necesidad de actualizar la página.
Canales privados con Laravel Echo
PRO
06:54

85. Canales privados con Laravel Echo

En esta lección utilizamos canales privados en Laravel Echo para que sólamente el usuario autenticado pueda recibir sus notificaciones en tiempo real.
Métodos abstractos
PRO
03:18

86. Métodos abstractos

En esta lección utilizamos métodos abstractos para forzar la implementación del método 'path' en todos los modelos que utilicen el trait 'HasLikes'.
Scroll hacia un comentario
PRO
03:48

87. Scroll hacia un comentario

En esta lección agregamos un 'path' o un link a los comentarios para que al darle click nos lleve al estado que contiene el comentario y lo resalte.
Notificación de comentarios
PRO
09:50

88. Notificación de comentarios

En esta lección enviamos una notificación a los usuarios cuyos estados reciban comentarios.
Notificación de comentarios en tiempo real
PRO
04:48

89. Notificación de comentarios en tiempo real

En esta lección permitimos que se vean las notificaciones en tiempo real y solucionamos un problema con Laravel Dusk y el driver de Chrome.
Reestructuración de controladores
PRO
06:19

90. Reestructuración de controladores

En esta lección reestructuramos los controladores para listar y aceptar solicitudes de amistad con el fin de mejorar la legibilidad y la usabilidad del código.
Reestructuración de controladores - Parte 2
PRO
08:33

91. Reestructuración de controladores - Parte 2

En esta lección continuamos con la reestructuración de los controladores de solicitudes de amistad.
Diseñando las solicitudes de amistad
PRO
07:07

92. Diseñando las solicitudes de amistad

En esta lección agregamos un link en la navegación para acceder a las solicitudes de amistad y las diseñamos utilizando Bootstrap 4.3
Mostrando el listado de amigos
PRO
10:16

93. Mostrando el listado de amigos

En esta lección implementamos el listado de amigos haciendo un filtro que sólo muestre a los usuarios con solicitudes de amistad aceptadas.
Corrigiendo errores de Laravel Dusk
PRO
08:28

94. Corrigiendo errores de Laravel Dusk

En esta lección actualizamos Laravel Dusk y corregimos algunos errores que encontramos.
Diseñando el listado de amigos
PRO
10:40

95. Diseñando el listado de amigos

En esta lección extraemos la tarjeta del perfil de usuario y la reutilizamos en el listado de amigos, y en el proceso reestructuramos el botón de solicitudes de amistad.

Otros cursos que te pueden interesar

Laravel desde ceroDesarrollo Full-Stack con Laravel, Next.js y Digital OceanFundamentos de Tailwind CSSFundamentos de Laravel 9Aprende Laravel Livewire desde ceroDesarrollo de una API con LaravelAprende Laravel IntermedioDesarrollo de paquetes para Laravel & PHPAprende Laravel desde ceroConstruyendo un SPA con Vue.js & LaravelMastering AuthenticationDesarrollo de un blog con manejo de roles y permisosNotificaciones