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

1
2
3
4
5
6
7
8
9
public function test_a_thread_can_be_subscribed_to()
{
    $thread = create('AppThread');
    $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,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:

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 IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
 
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 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. Estamos diciendo "Esta suscripción a un hilo pertenece a un hilo".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
namespace App;
 
use IlluminateDatabaseEloquentModel;
 
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.

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

1
2
3
4
5
6
7
public function test_a_thread_can_be_unsubscribed_from()
{
    $thread = create('AppThread');
    $thread->subscribe($userId = 1);
    $thread->unsubscribe($userId);
    $this->assertCount(0, $thread->subscriptions);
}

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

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.

. 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í.

1
2
3
4
5
6
7
public function test_a_user_can_subscribe_to_threads()
{
    $this->signIn();
    $thread = create('AppThread');
    $this->post($thread->path() . '/subscriptions');
    $this->assertCount(1, $thread->fresh()->subscriptions);
}

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.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
namespace AppHttpControllers;
 
use AppThread;
 
class ThreadSubscriptionsController extends Controller
{
    public function store($channelId, Thread $thread)
    {
        $thread->subscribe();
    }
}

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.

Completaremos SubscribeButton.vue como tal.

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, renderizaremos el nuevo botón en nuestro archivo threads / show.blade.php de esta manera.

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!
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!

¿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.

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.
getter personalizado agrega propiedad en laravel

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

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

Header Ads Widget

Tutorial del sistema de suscripción de Laravel

Se puede suscribir un hilo

Se puede cancelar la suscripción a un hilo

Implementación de una prueba de funciones de nivel superior

Una nueva clase ThreadSubscriptionsController

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

¿Está suscrito el hilo?

Eliminar una suscripción

Resumen del tutorial del sistema de suscripción de Laravel

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget