Nube Colectiva – Productos y Servicios Digitales

Como Crear un Sistema de Notificaciones (Frontend) con Laravel 8 y MySQL – Parte 1

Hace unos días estuve trabajando en un sistema de eventos para notificar a los usuarios los nuevos eventos que hay en la comunidad, este sistema lo estaba haciendo todo con PHP puro, pero esto me parecía una mala práctica ya que el core del sitio estaba hecho con Laravel, entonces decidí crear este proyecto para el sitio y de paso enseñarte a como crear este sistema que detecta y notifica cambios en la base de datos MySQL y lanza una notificación, bueno entonces vamos con este tutorial.

Partes

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Crear un Sistema de Notificaciones (Frontend) con Laravel 8 y MySQL – Parte 1.

Para el sistema de notificaciones voy a usar 2 tablas llamadas jugos y postres, cuando haga algún cambio como por ejemplo agregar un nuevo registro en alguna de estas tablas, el sistema detectará ese cambio y lanzará una notificación con un determinado mensaje que configuraré más adelante.

Creando Nuevo Proyecto

Vamos a crear un nuevo proyecto con Laravel 8, no olvides que debes de revisar los requerimientos que pide esta  versión de Laravel, para crear un nuevo proyecto con Laravel vamos a la consola de comandos y ejecutamos el siguiente comando, dejamos que la consola termine de crear el proyecto, no toquemos nada.

# Creación de nuevo proyecto en Laravel 8 
laravel new sistema-notificaciones-eventos-mysql-bd 

Crafting application...
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 106 installs, 0 updates, 0 removals
  - Installing doctrine/inflector (2.0.3): Loading from cache
  - Installing doctrine/lexer (1.2.1): Loading from cache
  - Installing dragonmantank/cron-expression (3.0.1): Downloading (connecting...Downloading (100%)
  - Installing voku/portable-ascii (1.5.3): Downloading (100%)
  - Installing symfony/polyfill-php80 (v1.18.1): Downloading (100%)
  - Installing symfony/polyfill-mbstring (v1.18.1): Downloading (100%)
...
... ( Continua la instalación )
... 
phpunit/phpunit suggests installing ext-xdebug (*)
Generating optimized autoload files
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
> @php artisan key:generate --ansi
Application key set successfully.
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
Application ready! Build something amazing.

# Ingresamos al directorio del proyecto creado 
cd sistema-notificaciones-eventos-mysql-bd

A mi proyecto le he puesto de nombre sistema-notificaciones-eventos-mysql-bd, tu le puedes pone el nombre que desees, no hay problema.

Luego de crear el proyecto, Laravel 8 me ha creado el siguiente conjunto de directorios y archivos útiles para que Laravel y el proyecto funcionen correctamente.

/sistema-notificaciones-eventos-mysql-bd
├── /app
├── /bootstrap
├── /config
├── /database 
├── /public
├── /resources
├── /routes
├── /storage
├── /tests
├── /vendor
├──  .editorconfig
├──  .env
├──  .env.example
├──  .styleci.yml
├──  artisan
├──  composer.json
├──  composer.lock
├──  package.json
├──  phpunit.xml
├──  server.php
├──  webpack.mix.js

Con esto tenemos instalado Laravel 8, esta listo para ponernos manos a la obra y continuar con el desarrollo del proyecto.

Base de Datos y Migraciones

A mi base de datos local le daré el nombre laravel8 y le asignaré el nombre de usuario root y un respectivo password, esto lo hago en el archivo .env que se encuentra en sistema-notificaciones-eventos-mysql-bd > .env

/sistema-notificaciones-eventos-mysql-bd
├── /app
├── /bootstrap
├── /config
├── /database 
├── /public
├── /resources
├── /routes
├── /storage
├── /tests
├── /vendor
├──  .editorconfig
├──  .env // Abro este archivo 
├──  .env.example
├──  .styleci.yml
├──  artisan
├──  composer.json
├──  composer.lock
├──  package.json
├──  phpunit.xml
├──  server.php
├──  webpack.mix.js

Abro el archivo .env y en DB_DATABASE le coloco laravel8, en DB_USERNAME le asigno el nombre de usuario root y en DB_PASSWORD defino un password determinado.

# Conexión a la base de datos 
DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel8 
DB_USERNAME=root 
DB_PASSWORD=mipassword

Ahora pasaremos a crear las migraciones para las tablas jugos y postres.

Migraciones

Primero haré la tabla jugos, para esto vamos a crear su migración respectiva, voy a la consola de comandos y ejecuto el siguiente comando.

# Migración de la tabla 'jugos' 
php artisan make:migration create_jugos_table 

Created Migration: 2020_09_20_202007_create_jugos_table

Igualmente creamos la migración para la tabla postres, ejecutando el siguiente comando.

# Migración de la tabla 'postres' 
php artisan make:migration create_postres_table 

Created Migration: 2020_09_20_202311_create_postres_table

Luego de ejecutar los comando anteriores, se me ha creado 2 archivos para las migraciones de la tabla jugos y postres, estos archivos se encuentran en

/sistema-notificaciones-eventos-mysql-bd
├── /app
├── /bootstrap
├── /config
├── /database 
    ├── /migrations 
        ├── 2014_10_12_000000_create_users_table.php  
        ├── 2014_10_12_100000_create_password_resets_table.php 
        ├── 2019_08_19_000000_create_failed_jobs_table.php 
        ├── 2020_09_20_202007_create_jugos_table.php // Archivo de migración de la tabla 'jugos' 
        ├── 2020_09_20_202311_create_postres_table.php // Archivo de migración de la tabla 'postres' 
├── /public
├── /resources
├── /routes
├── /storage
├── /tests
├── /vendor
├──  .editorconfig
├──  .env 
├──  .env.example
├──  .styleci.yml
├──  artisan
├──  composer.json
├──  composer.lock
├──  package.json
├──  phpunit.xml
├──  server.php
├──  webpack.mix.js

Primero abro el archivo 2020_09_20_202007_create_jugos_table.php y agrego las columnas nombre, precio, stock y agrego los métodos id() que me genera una columna auto incrementable y el método timestamps() que me genera 2 columnas, una con la fecha/hora (created_at) de creación y otra con la fecha/hora de actualización (updated_at) de un registro en la tabla jugos.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateJugosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        // Columnas para la tabla 'jugos' 
        Schema::create('jugos', function (Blueprint $table) {            
            $table->id();
            $table->string('nombre');
            $table->string('precio');
            $table->string('stock');            
            $table->timestamps(); 
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('jugos');
    }
}

Ahora abro el archivo 2020_09_20_202007_create_postres_table.php y agrego las columnas nombre, precio, stock y agrego los métodos id() que me genera una columna auto incrementable y el método timestamps() que me genera 2 columnas, una con la fecha/hora (created_at) de creación y otra con la fecha/hora de actualización (updated_at) de un registro en la tabla postres.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostresTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        // Columnas para la tabla 'postres' 
        Schema::create('postres', function (Blueprint $table) {
            $table->id();
            $table->string('nombre');
            $table->string('precio');
            $table->string('stock');            
            $table->timestamps(); 
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('postres');
    }
}

Como puedes ver a ambas tablas les he puesto los nombres de columnas similares nombre, precio y stock, tu les puedes poner nombres y cantidades diferentes de columnas, no hay problema.

Paso seguido ejecutamos el siguiente comando para crear las tabla jugos y postres en la base de datos.

php artisan migrate 

Migrating: 2020_09_20_202007_create_jugos_table
Migrated:  2020_09_20_202007_create_jugos_table (150.34ms)
Migrating: 2020_09_20_202311_create_postres_table
Migrated:  2020_09_20_202311_create_postres_table (132.88ms)

Si voy a phpMyAdmin y reviso mi base de datos, puede ver que se me ha creado las tablas jugos y postres con las siguiente columnas de la siguiente imagen.

Con esto tenemos lista las base de datos para crear nuestro sistema de notificaciones con Laravel 8.

Bueno hasta aquí llegamos con esta Parte 1 en donde hemos creado un nuevo proyecto con Laravel 8 y hemos preparado la base de datos para continuar con el desarrollo de este proyecto.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Exit mobile version