Tutorial del sistema de suscripción de Laravel

Muchos sitios web populares le permiten suscribirse a un tema o tema en particular. , puede recibir notificaciones por correo electrónico o en el sitio web. 

---

Un hilo puede ser suscrito

Entonces, ¿qué es lo primero que podemos hacer? 

• 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

1 2 3 4 5 6 7 8 9

public function test_a_thread_can_be_subscribed_to() {     $thread = create('App\Thread');     $thread->subscribe($userId = 1);     $this->assertEquals(         1,         $thread->subscriptions()->where('user_id', $userId)->count()     ); }

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.00MB

Hubo 1 error:

1) Pruebas \ Unidad \ ThreadTest :: test_a_thread_can_be_subscriptions_to
BadMethodCallException: llamada al método indefinido Illuminate \ Database \ Query \ Builder :: subscribe ()

Podemos crear este nuevo método subscribe () en el modelo Thread.php así. 

vagrant @ homestead: ~ / Code / forumio $ php artesanal 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<?php   use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration;   class CreateThreadSubscriptionsTable extends Migration {     public function up()     {         Schema::create('thread_subscriptions', function (Blueprint $table) {             $table->increments('id');             $table->unsignedInteger('user_id');             $table->unsignedInteger('thread_id');             $table->timestamps();             $table->unique(['user_id', 'thread_id']);             $table->foreign('thread_id')                 ->references('id')                 ->on('threads')                 ->onDelete('cascade');         });     }       public function down()     {         Schema::dropIfExists('thread_subscriptions');     } }

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

1 2 3 4 5 6 7 8 9 10 11 12

public function subscribe($userId = null) {     $this->subscriptions()->create([         'user_id' => $userId ?: auth()->id()     ]);     return $this; }   public function subscriptions() {     return $this->hasMany(ThreadSubscription::class); }

Finalmente, también agregaremos una relación básica a la clase ThreadSubscription. 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?php   namespace App;   use Illuminate\Database\Eloquent\Model;   class ThreadSubscription extends Model {     protected $guarded = [];       public function thread()     {         return $this->belongsTo(Thread::class);     } }

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.

. 

Tiempo: 831 ms, Memoria: 8.00MB

OK (1 prueba, 1 afirmación)

---

Un hilo puede ser dado de baja

Por supuesto, un usuario también podrá darse de baja de cualquier hilo en particular al que se haya suscrito. 

• 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 debe tener suscripciones

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

1 2 3 4 5 6 7

public function test_a_thread_can_be_unsubscribed_from() {     $thread = create('App\Thread');     $thread->subscribe($userId = 1);     $thread->unsubscribe($userId);     $this->assertCount(0, $thread->subscriptions); }

Para pasar esta prueba, necesitaremos algunas cosas. 

1 2 3 4 5 6

public function unsubscribe($userId = null) {     $this->subscriptions()         ->where('user_id', $userId ?: auth()->id())         ->delete(); }

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.

. 

Tiempo: 840 ms, Memoria: 8.00MB

OK (1 prueba, 1 afirmación)

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

vagrant @ homestead: ~ / Code / forumio $ php artisan migrate
Migrando: 2018_02_20_192313_create_thread_subscriptions_table
Migrado: 2018_02_20_192313_create_thread_subscriptions_table

Todavía no tenemos el front end para probar la suscripción a un hilo, pero podemos tomar esto para una ejecución de prueba en tinker. 

>>> $ thread = App \ Thread :: latest () -> first ();
=> Aplicación \ Hilo {# 814
     id: 59,
     user_id: 53,
     channel_id: 1,
     título: "El clima es hermoso afuera",
     cuerpo: "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: Aplicación \ Usuario {# 822
       id: 53
       nombre: "Nikola Tesla",
       created_at: "2018-01-23 18:07:43",
       updated_at: "2018-01-23 18:07:43",
     },
     canal: Aplicación \ Canal {# 812
       id: 1
       nombre: "repellat",
       babosa: "repellat",
       created_at: "2017-12-21 16:32:19",
       updated_at: "2017-12-21 16:32:19",
     },
   }

Ahora, suscribiremos un usuario a ese hilo. 

>>> $ thread-> subscribe (52);
=> Aplicación \ Hilo {# 814
     id: 59,
     user_id: 53,
     channel_id: 1,
     título: "El clima es hermoso afuera",
     cuerpo: "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: Aplicación \ Usuario {# 822
       id: 53
       nombre: "Nikola Tesla",
       created_at: "2018-01-23 18:07:43",
       updated_at: "2018-01-23 18:07:43",
     },
     canal: Aplicación \ Canal {# 812
       id: 1
       nombre: "repellat",
       babosa: "repellat",
       created_at: "2017-12-21 16:32:19",
       updated_at: "2017-12-21 16:32:19",
     },
   }

Podemos registrar la nueva tabla de base de datos que habíamos creado y, efectivamente, ¡vemos una nueva suscripción allí!

También deberíamos poder darnos de baja con la misma facilidad. 

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

Ahora, cuando registramos la base de datos, esa suscripción que vimos hace solo un minuto ya no existe. 

---

Implementación de una prueba de características de nivel superior

Comenzamos en el nivel de Unidad para obtener la funcionalidad más básica configurada para suscribirse y cancelar la suscripción a un hilo. 

Desarrollar la primera prueba en el nivel de Función se ve así.

1 2 3 4 5 6 7

public function test_a_user_can_subscribe_to_threads() {     $this->signIn();     $thread = create('App\Thread');     $this->post($thread->path() . '/subscriptions');     $this->assertCount(1, $thread->fresh()->subscriptions); }

Vamos a necesitar una gran cantidad de rutas para admitir esta nueva función. 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<?php   Route::get('/', function () {     return view('welcome'); });   Auth::routes();   Route::get('/home', 'HomeController@index')->name('home');   Route::get('/threads', 'ThreadsController@index'); Route::get('/threads/create', 'ThreadsController@create'); Route::get('/threads/{channel}/{thread}', 'ThreadsController@show'); Route::delete('/threads/{channel}/{thread}', 'ThreadsController@destroy'); Route::post('/threads', 'ThreadsController@store'); Route::get('/threads/{channel}', 'ThreadsController@index'); Route::get('/threads/{channel}/{thread}/replies', 'RepliesController@index'); Route::post('/threads/{channel}/{thread}/replies', 'RepliesController@store'); Route::patch('/replies/{reply}', 'RepliesController@update'); Route::delete('/replies/{reply}', 'RepliesController@destroy');   Route::post('/threads/{channel}/{thread}/subscriptions', 'ThreadSubscriptionsController@store')->middleware('auth'); Route::delete('/threads/{channel}/{thread}/subscriptions', 'ThreadSubscriptionsController@destroy')->middleware('auth');   Route::post('/replies/{reply}/favorites', 'FavoritesController@store'); Route::delete('/replies/{reply}/favorites', 'FavoritesController@destroy'); Route::get('/profiles/{user}', 'ProfilesController@show')->name('profile');

---

Una nueva clase ThreadSubscriptionsController

Configuramos algunas rutas que hacen referencia a la clase ThreadSubscriptionsController, pero todavía no tenemos esa clase. 

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13

<?php   namespace App\Http\Controllers;   use App\Thread;   class ThreadSubscriptionsController extends Controller {     public function store($channelId, Thread $thread)     {         $thread->subscribe();     } }

La ejecución de nuestra prueba muestra que hemos hecho lo suficiente para aprobar esta prueba.

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

. 

Tiempo: 1.3 segundos, Memoria: 10.00MB

OK (1 prueba, 1 afirmación)

---

Agregar un botón Suscribir a la interfaz de usuario

Los conceptos básicos del back-end ahora se desarrollan y, según las pruebas que hemos creado, parecen estar funcionando. hizo el botón 

Completaremos SubscribeButton.vue así.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<template>     <button :class="classes" @click="subscribe">Subscribe</button> </template>   <script>     export default {         props: ['active'],         computed: {             classes() {                 return ['btn', this.active ? 'btn-primary' : 'btn-default'];             }         },         methods: {             subscribe() {                 axios[                     (this.active ? 'delete' : 'post')                     ](location.pathname + '/subscriptions');                 this.active = !this.active;             }         }     } </script>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script>     import Replies from '../components/Replies.vue';     import SubscribeButton from '../components/SubscribeButton.vue';       export default {         props: ['initialRepliesCount'],           components: {Replies, SubscribeButton},           data() {             return {                 repliesCount: this.initialRepliesCount             };         }     } </script>

Finalmente, mostraremos el nuevo botón en nuestro archivo threads / show.blade.php como este.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="col-md-4">     <div class="panel panel-default">         <div class="panel-body">             <p>                 This thread was created {{ $thread->created_at->diffForHumans() }} by                 <a href="{{ route('profile', $thread->creator) }}">{{ $thread->creator->name }}</a> and currently                 has                 <b><span v-text="repliesCount"></span></b> {{ str_plural('reply', $thread->replies_count) }}.             </p>               <p>                 <subscribe-button :active="{{ json_encode($thread->isSubscribedTo) }}"></subscribe-button>             </p>         </div>     </div> </div>

Voila!

En realidad, se está produciendo una buena cantidad de comportamiento en los fragmentos anteriores y sigue los mismos conceptos que hemos estado cubriendo con respecto al trabajo con componentes Vue. 

---

¿Está suscrito el hilo?

Deberíamos agregar un captador de atributos personalizado al modelo Thread para decirnos si un hilo está suscrito actualmente o no. 

1 2 3 4 5 6

public function getIsSubscribedToAttribute() {     return $this->subscriptions()         ->where('user_id', auth()->id())         ->exists(); }

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

1	protected $appends = ['isSubscribedTo'];

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

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

1	<subscribe-button :active="{{ json_encode($thread->isSubscribedTo) }}"></subscribe-button>

en hilos / show.blade.php.

---

Eliminar una suscripción

Todo funciona para hacer clic en el botón y ver una nueva suscripción en la base de datos. 

1 2 3 4

public function destroy($channelId, Thread $thread) {     $thread->unsubscribe(); }

Ahora, al hacer clic en el botón, se agrega una nueva suscripción. 

---

Resumen del tutorial del sistema de suscripción Laravel

Este tutorial cubrió los conceptos básicos para configurar el código necesario para un sistema de suscripción para los usuarios de la aplicación.