2) crear una new app
donde
frontend: vanilla js
backend: laravel
cluster: us2
3) instalar pusher en nuestra aplicacion
composer require pusher/pusher-php-server
4) ir a la pestana de App Keys
y tomar la informacion de alli para completar los datos en .env
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
y en resources/js/bootstrap.js
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'XXXXXX',
cluster: 'us2',
encrypted: true
});
5)Crear en resource/components NotificationComponent.vue
<template>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#" data-toggle="dropdown">
<i class="icon-bell"></i>
<span class="badge badge-pill badge-danger">{{notifications.length}}</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Notificaciones</strong>
</div>
<li v-for="notification in notifications" :key="notifications.id">
<a class="dropdown-item" href="#">
<i class="fa fa-envelope-o"></i> {{notification.data.datos.articulos.titulo}}
<span class="badge badge-success">{{notification.data.datos.articulos.activos}}</span>
</a>
</li>
</div>
</li>
</template>
<script>
export default {
props: ['notifications'],
data(){
return {
}
}
}
</script>
6) agregar este componente en resources/js/app.js
Vue.component('notification', require('./components/NotificationComponent.vue'));
const app = new Vue({
el: '#app',
data:{
menu:0,
notifications:[]
},
created(){
let me = this;
axios.get('/notifications').then(function(response){
console.log(response.data)
me.notifications=response.data;
}).catch(function(error){
console.log(error);
});
}
});
7) en la plantilla principal reemplazar el codigo de cabecera donde se mostrabalas notificaciones por este componente:
principal.blade.php
<notification :notifications="notifications"></notification>
8) vamos a usar el canal "database" que es donde la informacion de las notificaciones se guardan en una tabla
php artisan notifications:table
php artisan migrate
como en laravel cada notificacion es representada por una simple clase, vamos a crear una
php artisan make:notification NotifyAdmin
lo que creara la carpeta Notifications dentro de App y dentro la clase NotifyAdmin
class NotifyAdmin extends Notification
{
public $GlobalDatos;
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct(Array $datos)
{
$this->GlobalDatos = $datos;
}
public function via($notifiable)
{
return ['database'];
}
public function toDatabase($notifiable)
{
return ['datos' => $this->GlobalDatos];
}
8) creamos NotificationController:
public function getAllByUser()
{
$user = \Auth::user();
//return Notification::where('notifiable_id','=',$user->id)->get();
return $user->notifications;
}
9)
creamos la ruta de este metorod en web.php
Route::get('/notifications','NotificationController@getAllByUser')->middleware('auth');
10) en este ejemplo cada vez que se crea un nuevo producto se va a crear una notificacion por cada usuario con la cantidad de articulos activos (condicion=1)
entonces en ArticuloController->store
...despues del save
$numActivos = DB::table('articulos')->where('condicion','=','1')->count();
$arregloDatos = [
'articulos' => [
'activos' =>$numActivos,
'titulo' => 'Articulos activos'
]
];
$users = \App\User::all();
foreach ($users as $user) {
\App\User::findOrFail($user->id)->notify(new \App\Notifications\NotifyAdmin($arregloDatos));
}
10) en este ejemplo cada vez que se crea un nuevo producto se va a crear una notificacion por cada usuario con la cantidad de articulos activos (condicion=1)
entonces en ArticuloController->store
...despues del save
$numActivos = DB::table('articulos')->where('condicion','=','1')->count();
$arregloDatos = [
'articulos' => [
'activos' =>$numActivos,
'titulo' => 'Articulos activos'
]
];
$users = \App\User::all();
foreach ($users as $user) {
\App\User::findOrFail($user->id)->notify(new \App\Notifications\NotifyAdmin($arregloDatos));
}
