Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de octubre de 2020

Tutorial del sistema de suscripción de Laravel

 

Muchos sitios web populares le permiten suscribirse a un tema o hilo en particular. En las aplicaciones de tipo foro, a menudo ve la posibilidad de suscribirse a ciertos temas, y una vez que está suscrito, puede recibir notificaciones por correo electrónico o en el sitio web. En este tutorial, crearemos un sistema de suscripción de subprocesos. Es bastante complicado ya que necesita el sistema de back-end para alimentarlo, además de un botón de suscripción reactivo impulsado por VueJS en el front-end. Además, habrá un área de notificaciones en la parte superior derecha del sitio web similar a lo que puede ver en Facebook o Reddit.


Se puede suscribir un hilo

Entonces, ¿qué es lo primero que podemos hacer? Bueno, comenzaremos con una prueba en nuestra clase ThreadTest existente. A modo de inicio rápido, aquí está el pseudocódigo.

  • Dado que hay un hilo
  • Dado un usuario autenticado
  • Cuando ese usuario se suscribe al hilo
  • Entonces, el usuario debería poder recuperar todos los hilos suscritos

La ejecución de la prueba nos muestra lo que debemos hacer a continuación, que es crear un nuevo método subscribe ().

vagrant @ homestead: ~ / Code / forumio $ phpunit --filter test_a_thread_can_be_subscriptions_to
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

E 1/1 (100%)

Tiempo: 1,27 segundos, memoria: 8,00 MB

Hubo 1 error:

1) TestsUnitThreadTest :: test_a_thread_can_be_subscriptions_to
BadMethodCallException: llamada al método no definido IlluminateDatabaseQueryBuilder :: subscribe ()

Podemos crear este nuevo método subscribe () en el modelo Thread.php así. De hecho, avanzaremos un poco en aras de la brevedad y desarrollaremos algunos métodos que vamos a necesitar. No es necesario que muestre aquí todas las pruebas fallidas. Necesitaremos un método subscribe (), un método subscriptions () y una nueva clase ThreadSubscriptions junto con una nueva migración.

vagrant @ homestead: ~ / Code / forumio $ php artisan make: model ThreadSubscription -m
Modelo creado con éxito.
Migración creada: 2018_02_20_192313_create_thread_subscriptions_table

Los campos que necesitaremos en nuestra nueva tabla de base de datos están definidos por la migración que acabamos de crear de la siguiente manera:

También agregaremos estos dos nuevos métodos a nuestra clase modelo Thread.php.

Finalmente, también agregaremos una relación básica a la clase ThreadSubscription. Estamos diciendo "Esta suscripción a un hilo pertenece a un hilo".

Ahora estamos obteniendo un estado de aprobación en esta primera prueba.

vagrant @ homestead: ~ / Code / forumio $ phpunit --filter test_a_thread_can_be_subscriptions_to
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

. 1/1 (100%)

Tiempo: 831 ms, memoria: 8,00 MB

OK (1 prueba, 1 afirmación)

Se puede cancelar la suscripción a un hilo

Por supuesto, un usuario también podrá darse de baja de cualquier hilo en particular al que se haya suscrito. También podemos agregar una prueba para eso. Entonces, ¿cuál es el caso de prueba?

  • Dado que hay un hilo
  • Dado que un usuario está suscrito a ese hilo
  • Cuando se activa la función de cancelación de suscripción
  • Entonces el hilo no debería tener suscripciones

Aquí está el código de prueba real para esta función.

Para que esta prueba pase, necesitaremos algunas cosas. Primero hay un nuevo método unsubscribe () en el modelo Thread.

Con esa simple adición, la prueba pasa.

vagrant @ homestead: ~ / Code / forumio $ phpunit --filter test_a_thread_can_be_unsubscriptions_from
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

. 1/1 (100%)

Tiempo: 840 ms, memoria: 8,00 MB

OK (1 prueba, 1 afirmación)

Ahora nuestro entorno de prueba ejecutará migraciones automáticamente en cada ejecución de prueba, pero también ejecutaremos las migraciones manualmente para que podamos probarnos en el navegador y ver la función de suscripción funcionando a medida que avanzamos.

vagrant @ homestead: ~ / Code / forumio $ php migrar artesanal
Migrando: 2018_02_20_192313_create_thread_subscriptions_table
Migrado: 2018_02_20_192313_create_thread_subscriptions_table

Todavía no tenemos la interfaz para probar la suscripción a un hilo, pero podemos probar esto en Tinker. Veamos. Obtendremos un hilo reciente y lo almacenaremos en una variable.

>>> $ hilo = AppThread :: último () -> primer ();
=> AppThread {# 814
     id: 59,
     user_id: 53,
     channel_id: 1,
     title: "El clima es hermoso afuera",
     body: "La primavera está en el aire y las temperaturas exteriores se están calentando. ¡Disfruta del hermoso día!",
     created_at: "2018-02-20 18:06:12",
     updated_at: "2018-02-20 18:06:12",
     replies_count: 3,
     creador: AppUser {# 822
       id: 53,
       nombre: "Nikola Tesla",
       created_at: "2018-01-23 18:07:43",
       updated_at: "2018-01-23 18:07:43",
     },
     canal: AppChannel {# 812
       id: 1,
       nombre: "repellat",
       slug: "repellat",
       created_at: "2017-12-21 16:32:19",
       updated_at: "2017-12-21 16:32:19",
     },
   }

Ahora, suscribiremos a un usuario a ese hilo. Aquí estamos diciendo que el usuario con el id de 52 se está suscribiendo al hilo dado.

>>> $ hilo-> subscribe (52);
=> AppThread {# 814
     id: 59,
     user_id: 53,
     channel_id: 1,
     title: "El clima es hermoso afuera",
     body: "La primavera está en el aire y las temperaturas exteriores se están calentando. ¡Disfruta del hermoso día!",
     created_at: "2018-02-20 18:06:12",
     updated_at: "2018-02-20 18:06:12",
     replies_count: 3,
     creador: AppUser {# 822
       id: 53,
       nombre: "Nikola Tesla",
       created_at: "2018-01-23 18:07:43",
       updated_at: "2018-01-23 18:07:43",
     },
     canal: AppChannel {# 812
       id: 1,
       nombre: "repellat",
       slug: "repellat",
       created_at: "2017-12-21 16:32:19",
       updated_at: "2017-12-21 16:32:19",
     },
   }

Podemos verificar la nueva tabla de base de datos que hemos creado y, efectivamente, ¡vemos una nueva suscripción allí!
nueva suscripción en la base de datos

También deberíamos poder cancelar la suscripción con la misma facilidad. Veamos.

>>> $ hilo-> cancelar suscripción (52);
=> nulo

Ahora, cuando revisamos la base de datos, la suscripción que vimos hace un minuto ya no existe. ¡Parece que los métodos subscribe () y unsubscribe () funcionan muy bien!
el usuario ahora está cancelado


Implementación de una prueba de funciones de nivel superior

Comenzamos en el nivel de Unidad para configurar la funcionalidad más básica para suscribirse y cancelar la suscripción a un hilo. Ahora avanzaremos en la cadena y trabajaremos en el nivel de prueba de funciones para respaldar aún más el código.
suscríbete a la prueba de funciones de nuevos hilos

El desarrollo de la primera prueba a nivel de Característica se ve así.

Vamos a necesitar un par de rutas para admitir esta nueva función. Agregaremos un punto final en el que podamos publicar para una nueva suscripción, así como un punto final para eliminar una suscripción.


Una nueva clase ThreadSubscriptionsController

Configuramos algunas rutas que hacen referencia a la clase ThreadSubscriptionsController, pero aún no tenemos esa clase. Vamos a crearlo.

vagrant @ homestead: ~ / Code / forumio $ php artisan make: controller ThreadSubscriptionsController
Controlador creado con éxito.

También agregaremos un método happy little store () en nuestro nuevo controlador.

Ejecutar nuestra prueba muestra que hemos hecho lo suficiente para que esta prueba pase.

vagrant @ homestead: ~ / Code / forumio $ phpunit --filter test_a_user_can_subscribe_to_threads
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

. 1/1 (100%)

Tiempo: 1,3 segundos, memoria: 10,00 MB

OK (1 prueba, 1 afirmación)

Agregar un botón de suscripción a la interfaz de usuario

Los conceptos básicos del back-end ahora están desarrollados y, según las pruebas que hemos creado, parecen estar funcionando. Ahora queremos configurar un botón en la interfaz que responda adecuadamente a la entrada del usuario. En otras palabras, el botón debe mantener el estado, de manera similar a como lo hizo el botón del componente secundario de vuejs favorito Con eso en mente, podemos crear un nuevo componente SubscribeButton.vue.
nuevo componente SubscribeButton vue

Completaremos SubscribeButton.vue como tal.

En Thread.vue necesitamos hacer referencia al nuevo componente en un par de puntos.

Finalmente, renderizaremos el nuevo botón en nuestro archivo threads / show.blade.php de esta manera.

¡Voila!
ejemplo de componente de suscripción

En realidad, hay una buena cantidad de comportamiento en los fragmentos anteriores y sigue los mismos conceptos que hemos estado cubriendo con respecto al trabajo con componentes de Vue. Probar este nuevo botón de suscripción en el navegador ahora nos muestra que hacer clic en el botón produce una nueva suscripción en la base de datos. Además, tenga en cuenta que el estado del botón cambia correctamente para indicar que se ha suscrito. ¡Frio!
botón clic suscripción agregada


¿Está suscrito el hilo?

Deberíamos agregar un captador de atributo personalizado al modelo de Thread para decirnos si un hilo está suscrito actualmente o no. Aprendimos un poco sobre cómo funcionan estos en un tutorial anterior. Para esta iteración, el código se vería así en Thread.php.

También configuraríamos la propiedad $ appends así.

Si simplemente devolvemos los datos con formato JSON del método show () en ThreadsController, vemos que tenemos acceso a esa información necesaria.
getter personalizado agrega propiedad en laravel

Estos son los datos que se envían cuando hacemos referencia

en hilos / show.blade.php.


Eliminar una suscripción

Todo está funcionando para hacer clic en el botón y ver una nueva suscripción en la base de datos. Todo lo que tenemos que hacer es agregar un método destroy () a la clase ThreadSubscriptionsController para eliminar también una suscripción.

Ahora, al hacer clic en el botón, se agrega una nueva suscripción. Además, al hacer clic por segunda vez, se eliminará la suscripción. ¡Se ve bien!
agregar o quitar suscripción


Resumen del tutorial del sistema de suscripción de Laravel

Este tutorial cubrió los conceptos básicos de la configuración del código necesario para un sistema de suscripción para los usuarios de la aplicación. Cuando un usuario hace clic en un botón de suscripción en la interfaz de usuario, ese usuario crea una nueva entrada en la base de datos para indicar una suscripción exitosa. Al hacer clic en el botón nuevamente, se elimina la suscripción para ese usuario. En el siguiente tutorial, veremos cómo configurar notificaciones para usuarios suscritos.


No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas