Como Crear un Sistema de Notificaciones (Frontend) con Laravel 8 y MySQL – Parte 1
6 minuto(s)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:
- Que es Laravel + Tu Primera Aplicación con Laravel
- Las Novedades más destacadas que trae Laravel 8
- Las Novedades más destacadas que trae Laravel 7
- 6 Helpers de gran Utilidad en Laravel 7
- Como crear un CRUD con Galería de Imágenes en Laravel 6.2 y Bootstrap 4 – Parte 1
- Como Trabajar con Query Scopes (Ámbitos de Consulta) en Laravel 7
- Lee más artículos en la categoría Laravel
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.
|
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 35 36 |
# 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/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.
|
1 2 3 4 5 6 7 8 9 |
# 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.
|
1 2 3 4 5 6 |
# 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.
|
1 2 3 4 5 6 |
# 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
|
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 |
/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.
|
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 35 36 37 |
<?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.
|
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 35 36 37 |
<?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.
|
1 2 3 4 5 6 7 8 |
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)
- En la Parte 2 de este tutorial, vamos a crear y ejecutar la migración con sus campos correspondientes para la tabla de notificaciones en la base de datos.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.
- Laravel Tutoriales
- 18-09-2020
- 07-05-2021
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas del día para brindarte la mejor experiencia en la comunidad.
Hemos corregido el problema y ahora la web no muestra esa barra horizontal y se ve en su tamaño natural.
Seguimos trabajando las 24 horas del día, para mejorar la comunidad.
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
Social
Redes Sociales (Developers)
Redes Sociales (Digital)