laravel 5.7 notificaciones database pusher

1) ir a pusher.com y registrarse

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));
        }

No hay comentarios:

Publicar un comentario

linux ubuntu mint actualizar chrome

 desde una terminal: $ sudo apt update $ sudo apt install google-chrome-stable