Mostrar feed de actividad en el navegador

Ahora que tenemos la lógica para registrar la actividad del usuario en la base de datos, en este tutorial trabajaremos para obtener esa actividad del usuario de la base de datos y representarla en el navegador. Para comenzar, solo verificaremos que las nuevas actividades se estén registrando de hecho revisando manualmente la base de datos. Una vez que esté completo, podemos alterar la lógica de nuestro controlador para obtener la actividad del usuario de la base de datos. A continuación, comenzaremos a crear los archivos de vista para mostrar esta información en forma de un feed de actividad. Finalmente, trabajaremos un poco en la agrupación de diferentes actividades y también en la refactorización de componentes en la vista.

---

Prueba de la función de actividad del usuario desde el navegador

Todas las pruebas de apoyo parecen indicar que el registro de la actividad del usuario para el feed de actividad está funcionando muy bien. En realidad, no hemos intentado ingresar algunos hilos y respuestas nuevos a través del navegador para ver si esas actividades se registran. Si están registrados, entonces deberíamos ver esos registros de actividad en la tabla de actividades de la base de datos. Probemos eso ahora.

En primer lugar, en el servidor en vivo, tendremos que ejecutar manualmente las migraciones. ¿Por qué? Porque recuerde, nuestras pruebas hacen todo en la memoria a través de una base de datos SQLite. Cuando se ejecutan las pruebas, se ejecutan las migraciones, se configura un esquema de base de datos completamente nuevo, luego todo se revierte al finalizar. De todos modos, ejecutemos la migración.

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

Genial: la tabla de actividades ya está en su lugar. Podemos agregar un hilo y ver si está registrado en la base de datos.

Al registrar la base de datos, se muestra que se creó la nueva actividad de subprocesos. ¡Frio!

Intentemos una cosa más. Necesitamos asegurarnos de que la actividad de respuesta también funcione.

¡Ah, ja! ¡Parece que ahora tenemos dos actividades en la base de datos! Parece estar funcionando.

---

Obtención de datos de actividad para el perfil de usuario

El objetivo aquí es que cuando veamos una página de perfil de usuario, ahora veamos toda la actividad asociada con ese usuario. El método show () de ProfilesController es donde ocurre esto, así que sigamos adelante y comencemos a desarrollar la API para esto. Queremos hacer uso de un método activity () como este:

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

<?php   namespace AppHttpControllers;   use AppUser; use IlluminateHttpRequest;   class ProfilesController extends Controller {     public function show(User $user)     {         return view('profiles.show', [             'profileUser' => $user,             'threads' => $user->activity()->paginate(10)         ]);     } }

Esto significa que debemos definir la relación en el modelo de usuario. Esta es una relación hasMany que es bastante fácil de establecer.

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 29 30 31 32 33 34

<?php   namespace App;   use IlluminateNotificationsNotifiable; use IlluminateFoundationAuthUser as Authenticatable;   class User extends Authenticatable {     use Notifiable;       protected $fillable = [         'name', 'email', 'password',     ];       protected $hidden = [         'password', 'remember_token',     ];       public function getRouteKeyName()     {         return 'name';     }       public function threads()     {         return $this->hasMany(Thread::class)->latest();     }       public function activity()     {         return $this->hasMany(Activity::class);     } }

---

Ver los datos sin procesar de la relación

Muy rápidamente, podemos agregar return $user->activity;al principio del método show () para ver qué se envía al navegador. Si visitamos el perfil de usuario de http://forum.io/profiles/NikolaTesla vemos que efectivamente se está mostrando su actividad. Hasta ahora tiene una actividad de hilo y dos actividades de respuesta.

---

Actividad de carga ansiosa del tema

Es una buena idea hacer uso de la carga ansiosa cuando pueda, para que podamos agregar eso a la cadena de métodos de esta manera: return $user->activity()->with('subject')->get(); Ahora podemos ver que cada Actividad también incluye el Asunto de esa actividad. ¡Muy aseado!

Con estos pasos hasta ahora, aquí es donde se encuentra el método show () en ProfilesController.

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

<?php   namespace AppHttpControllers;   use AppUser; use IlluminateHttpRequest;   class ProfilesController extends Controller {     public function show(User $user)     {         $activities = $user->activity()->with('subject')->get();                  return view('profiles.show', [             'profileUser' => $user,             'activities' => $activities         ]);     } }

---

Preparación del archivo de visualización profiles / show.blade.php

La obtención de los datos de actividad de la base de datos ya está completa. El código anterior nos muestra obteniendo esos datos de actividad y luego compartiendo los datos en el archivo de vista. Necesitaremos actualizar ese archivo de vista show.blade.php para procesar los datos ahora.

---

Polimorfismo lateral de vista básica

La naturaleza de las actividades es que puede haber varios tipos. Puede haber una actividad de conversación, una actividad de respuesta o quizás una actividad favorita. En un caso como este, podría configurar varias ramas if else en la vista para determinar cuál mostrar, o podría configurar algunos archivos de vista parcial y usar polimorfismo para configurar esto. Primero podemos configurar algunos archivos de vista parcial como este.

created_thread.blade.php

created_reply.blade.php

Ahora, en la vista principal profiles / show.blade.php, podemos incluir diferentes archivos parciales así:

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

@extends('layouts.app')   @section('content')     <div class="container">         <div class="row">             <div class="col-md-8 col-md-offset-2">                 <div class="page-header">                     <h1>                         {{ $profileUser->name }}                         <small>registered {{ $profileUser->created_at->diffForHumans() }}</small>                     </h1>                 </div>                 @foreach($activities as $activity)                     @include("profiles.activities.{$activity->type}")                 @endforeach             </div>         </div>     </div>   @endsection

La variable de $ actividad-> tipo será diferente dependiendo de si se está pasando un hilo o una respuesta. De esta manera, el panel parcial correcto se carga sin necesidad de extensos bloques if else. ¡Con buena pinta!

---

Agregar marcado a las vistas parciales

Hicimos un buen trabajo al hacer de show.blade.php un archivo limpio y ordenado, ahora necesitamos agregar algunas marcas en los archivos parciales reales para mostrar cada tipo de actividad. Aquí hay un comienzo para los dos archivos de vista parcial.

created_thread.blade.php

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

<div class="panel panel-default">     <div class="panel-heading">         <div class="level">             <span class="flex">                 {{ $profileUser->name }} published a thread             </span>         </div>     </div>     <div class="panel-body">         {{ $activity->subject->body }}     </div> </div>

created_reply.blade.php

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

<div class="panel panel-default">     <div class="panel-heading">         <div class="level">             <span class="flex">                 {{ $profileUser->name }} submitted a reply             </span>         </div>     </div>     <div class="panel-body">         {{ $activity->subject->body }}     </div> </div>

---

Asegurándose de que las actividades más recientes estén en la parte superior de la página de perfil.

También queremos poner las actividades más actuales o más recientes en la parte superior de la página de perfil cuando un usuario visita. Eso es bastante fácil de hacer asegurándose de incluir el método más reciente () en el controlador.

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

<?php   namespace AppHttpControllers;   use AppUser; use IlluminateHttpRequest;   class ProfilesController extends Controller {     public function show(User $user)     {         $activities = $user->activity()->latest()->with('subject')->get();           return view('profiles.show', [             'profileUser' => $user,             'activities' => $activities         ]);     } }

¡Ahora, los inicios de nuestro feed de actividades están comenzando a tomar forma!

---

Vinculación a actividades individuales

En el feed de actividad, deberíamos poder hacer clic en un enlace para llevarnos a la actividad específica que se muestra. Podemos hacer esto tanto para las respuestas como para los hilos.

En el modelo Responder, vamos a necesitar una nueva relación pertenece a. Una respuesta pertenece a un hilo, representado por este código en el modelo de respuesta.

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

<?php   namespace App;   use IlluminateDatabaseEloquentModel;   class Reply extends Model {     use Favoriteable, RecordsActivity;       protected $guarded = [];       protected $with = ['owner', 'favorites'];       public function owner()     {         return $this->belongsTo(User::class, 'user_id');     }       public function thread()     {         return $this->belongsTo(Thread::class);     } }

Ahora podemos actualizar ambos archivos parciales una vez más para incluir enlaces a cada actividad individual.

created_thread.blade.php

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

<div class="panel panel-default">     <div class="panel-heading">         <div class="level">             <span class="flex">                 {{ $profileUser->name }} published <a href="{{ $activity->subject->path() }}">{{ $activity->subject->title }}</a>             </span>         </div>     </div>     <div class="panel-body">         {{ $activity->subject->body }}     </div> </div>

created_reply.blade.php

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

<div class="panel panel-default">     <div class="panel-heading">         <div class="level">             <span class="flex">                 {{ $profileUser->name }} submitted a reply to                 <a href="{{ $activity->subject->thread->path() }}">{{ $activity->subject->thread->title }}</a>             </span>         </div>     </div>     <div class="panel-body">         {{ $activity->subject->body }}     </div> </div>

¡Okay! El feed de actividad se ve bastante bien y ahora también tiene enlaces que regresan a cada hilo o respuesta.

---

Agrupar actividad por día

Ahora queremos configurar el feed de actividades para que todas las actividades de un día determinado se agrupen. Para esto, necesitaremos actualizar el método show () en ProfilesController para hacer uso de una cláusula groupBy () en la colección. Eso se ve así:

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

<?php   namespace AppHttpControllers;   use AppUser; use IlluminateHttpRequest;   class ProfilesController extends Controller {     public function show(User $user)     {         $activities = $user->activity()->latest()->with('subject')->get()->groupBy(function ($activity){             return $activity->created_at->format('Y-m-d');         });           return view('profiles.show', [             'profileUser' => $user,             'activities' => $activities         ]);     } }

Además, ahora necesitamos actualizar la vista show.blade.php 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

@extends('layouts.app')   @section('content')     <div class="container">         <div class="row">             <div class="col-md-8 col-md-offset-2">                 <div class="page-header">                     <h1>                         {{ $profileUser->name }}                         <small>registered {{ $profileUser->created_at->diffForHumans() }}</small>                     </h1>                 </div>                 @foreach($activities as $date => $activity)                     <h3 class="page-header">{{ $date }}</h3>                     @foreach($activity as $record)                         @include("profiles.activities.{$record->type}", ['activity' => $record])                     @endforeach                 @endforeach             </div>         </div>     </div>   @endsection

¡Ahora el feed de actividades se ve bastante bien! Cada día tiene un grupo de actividades que es realmente hábil.

---

Refactorización a un componente

Conseguimos que la alimentación funcionara y estamos muy contentos con eso. Ahora, sin embargo, necesitamos hacer una refactorización para asegurarnos de que nuestros archivos de vista no sean un desastre. Para completar esto, primero crearemos un componente de actividad así.

El marcado aparecerá así en el componente:

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

<div class="panel panel-default">     <div class="panel-heading">         <div class="level">             <span class="flex">                 {{ $heading }}             </span>         </div>     </div>          <div class="panel-body">         {{ $body }}     </div> </div>

Los otros dos archivos de vista parcial ahora hacen uso de la directiva @component así. También tenga en cuenta el uso de la función de tragamonedas similar a cómo Vue usa las tragamonedas.

created_thread.blade.php

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

@component('profiles.activities.activity')       @slot('heading')         {{ $profileUser->name }} published         <a href="{{ $activity->subject->path() }}">{{ $activity->subject->title }}</a>     @endslot       @slot('body')         {{ $activity->subject->body }}     @endslot   @endcomponent

created_reply.blade.php

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

@component('profiles.activities.activity')       @slot('heading')         {{ $profileUser->name }} submitted a reply to         <a href="{{ $activity->subject->thread->path() }}">{{ $activity->subject->thread->title }}</a>     @endslot       @slot('body')         {{ $activity->subject->body }}     @endslot   @endcomponent

La página carga lo mismo, pero ahora tenemos un sistema mucho mejor para reunir nuestras vistas. Lo sé, lo sé, estás pensando ... ¿Pero por qué?

Bueno, piensa si terminas teniendo, digamos, otros tres o cuatro tipos de actividades. Ahora necesitará tres o cuatro archivos de vista parcial más para cada tipo. Ahora digamos que desea modificar ligeramente el marcado o cambiar el estilo en el feed de actividades. Adivina qué. Sí, así es, sin el componente activity.blade.php, necesitaría actualizar cinco o seis archivos de vista diferentes. ¡Qué asco! En cambio, con el único archivo activity.blade.php, puede realizar cambios en el marcado o el estilo allí una vez sin la necesidad de abrir y editar todos esos otros archivos parciales. Frio. ¡Súper genial de hecho!

---

Mostrar feed de actividad en el resumen del navegador

Excelente trabajo al configurar este feed de actividades para la aplicación. Fue un poco complicado, pero nada que no pudiéramos manejar. Además, también aprendimos sobre groupBy () en colecciones y uso de componentes en los archivos de vista. ¡Muy agradable!