Scroll Infinito en Laravel con Javascript Fetch

¿Qué es un Scroll Infinito?

Scrol Infinito es una técnica que puede ser muy interesante a la hora de desarrollar una aplicación web que muestra datos de forma asíncrona donde la principal funcionalidad es mostrar más datos cuando el usuario desplaze el cursor hacia la parte inferior de la página web.

Normalmente se emplea librerías de Javascript como Jquery, Vue.js, Axios.js, etc... para dicho efecto en este caso usaremos solo Javascript , si  puro, donde usaremos la API por default que ahora nos honra como es fetch con sus métodos de peticiones asincronas para programar dicha funcionalidad.

Propuesta de la aplicación

Creación de una aplicación con Scroll Infinito y paginación en Laravel

Básicamente es reponder a la pregunta ¿Cómo crear un Scroll Infinito en Laravel?. Entonces, vamos a desarrollar un pequeño aplicativo web que filtre nombres por cantidades de 20 en 20 de una lista de 1000 conforme el usuario se desplaze hacia la parte inferior de la página web. Esta funcionalidad se aprecia mucho mejor cual la página web es visualizada y manipulada por un usuario que ingrese desde su dispositivo móvil, eso no quiere decir que no se pueda emplear en la versión de escritorio.

Consideraciones a tener en cuenta:

• Servidor Local Xampp,  servicios con Apache y Mysql levantados
• Instalación del Framework Laravel y configuración respectiva
• Vinculación a la librería responsive de Bootstrap correctamente.
• Creación de una Base de Datos con al menos una tabla y datos llenados, nombre de la BD "scrollinfinito"
• Uso de modelos, migraciones, controladores y rutas para crear nuestra aplicación web.
• Prueba y test.

Desarrollo del Scroll Infinito

Para poner en contexto las actividades de la aplicación web, pues ya debemos tener lista la instalación y configuración básica de  Laravel, luego de ello procedemos con las siguientes actividades:

• Rutas para gestionar las peticiones del usuario
• Modelos y Migraciones para representar y acceder a la base de datos.
• Controlador con los métodos para gestionar la consulta de datos
• Vistas  para mostrar los datos
• Javascript API Fetch detección del scroll

Creación de las rutas 

Ubicamos el Archivo routes/web.php y modificamos el código de la siguiente manera:

<?php
Auth::routes();
Route::get('nombres', 'ScrollController@index');
Route::get('nombres/paginacion', 'ScrollController@paginacion');

La primera línea Auth::routes(); no la toquemos, por default ha sido generada para el login. La segunda línea es para gestionar la url /nombres con el método index del controllador ScrollController

La tercera línea realizar una petición al método paginación del controllador, éste método es usado por Fetch de Javascript para extraer los datos paginados de forma asíncrona.

Creación del Modelo Nombres

Creación del modelo para migrar a la Base de datos llamada scrollinfinito, tenga en cuenta que debe agregar la migración para la creación de los respectivos archivos. 

Código del Modelo 

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Nombres extends Model
{
    protected $fillable =['slug','nombre','visitas'];
}

Creación de la migración

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateNombresTable extends Migration{
    public function up(){
        Schema::create('nombres', function (Blueprint $table) {
            $table->increments('id');
            $table->string('slug',50);
            $table->string('nombre',50);            
            $table->integer('visitas')->default(1);
        });
    }
    public function down() {
        Schema::dropIfExists('nombres');
    }
}

Para llenar la tabla de nombres con datos dejamos un link del repositorio Github para que puedan descargar 1000 registros con el script de la tabla y las consultas de inserción de los mismos. Lista de 1000 nombres en MYSQL

Creación del Controlador ScrollController

Este controllador se llamará NombresController y dispondrá dos métodos para realizar las consultas a la base de datos, en el encabezado invocaremos al modelo Nombres para usarlo en los métodos,

1. Método index que gestionará la petición get para extraer y devolver una cantidad de registros con paginate() de Laravel enlazado a la vista welcome 

2. Y el Método paginacion muy parecido al método anterior, solo que éste devolverá datos una vista diferente, la vista es nombres.paginas

El código para este controllador es:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Nombres;

class ScrollController extends Controller
{
    public function index(){
        $nombres    =   Nombres::paginate(50);
        return view("welcome",compact("nombres"));
    }

    public function paginacion(){
        $nombres    =   Nombres::paginate(50);
        return view("nombres.paginas",compact("nombres"));
    }
    
}

Creación de la Vista welcome.blade.php

La cual deberá llamarse welcome.blade.php  y permitirá mostrar los 50 primeros registros y los siguientes 50 (esta cantidad puede ser modificada de acuerdo al diseño de la aplicación) y así sucesivamente, hasta que el usuario deje de realizar peticiones o se termine de listar todos los registros de la tabla "nombres".

Por defecto Laravel genera una vista con el nombre de welcome lo que vamos a hacer es modificar y debe verse de la siguiente manera, notamos que realiza un include a la vista paginas que esta dentro del directorio nombre. Además agregamos un div identificado con el id cargando y el atributo hidden, esto para mostrar un mensaje cuando se esté procesando la petición get al servidor.

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="col-8" id="contenedor">
      @include('nombres.paginas')
    </div>
    <div id="cargando" hidden><h1>CARGANDO...</h1></div>
</div>
@endsection

Creación de la Vista nombres/paginas.blade.php

Para crear esta vista primero creamos un directorio llamado nombres y dentro creamos la vista con el nombre de paginas.blade.php. El directorio de la vistas se encuentra en resource/views. La principal funcionalidad es que verifica si el objeto recibido "$nombres" del controlador tiene elementos si es asi, lo recorremos con foreach, este bucle mostrará en cada vuelta el valor del campo id y nombre de la tabla nombres. aqui hacemos uso extensivo de Blade.

@if (count($nombres))
    @foreach ($nombres as $item)          
        <p>{{$item->id .' - '. $item->nombre}}</p>
    @endforeach             
@endif  

Creando la dinámica de la aplicación con Javascript.

Hasta este momento solo se muestran en la vista welcome los primeros 10 registros o cincuenta si fuere el caso, entonces recién vamos a proceder a crear esta funcionalidad; para ello necesitamos modificar agregando el script de Javascript en la Vista Blade de welcome. Y debe de quedar de la siguiente manera:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="col-8" id="contenedor">
      @include('nombres.paginas')
    </div>
    <div id="cargando" hidden><h1>CARGANDO...</h1></div>
</div>
<script>
    let pagina        =     2
    const cargando    =     document.getElementById("cargando")
    window.onscroll   =     () =>{
        cargando.removeAttribute('hidden')
        if((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight ){
            fetch(`/nombres/paginacion?page=${pagina}`,{
                method:'get'
            })
            .then(response => response.text() )
            .then(html => {
                cargando.setAttribute('hidden','')
                document.getElementById("contenedor").innerHTML += html
                pagina++;                
            })
            .catch(error => console.log(error))
        }
    }
</script>
@endsection

El principal objeto que usamos es control el scroll de la ventana del navegador a través de window, para lograr ello realizamos la siguiente verificación if((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight ), cómo vemos pregunta si la altura de la ventana más la coordenada Y de la página  es mayor o igual a la altura del contenedor de la página web, si esto se cumple recién se procede a llamar API de conexiones asíncronas de Javascript.

La variable pagina controlará el número de página, esta se concatenará a la url que usa el método fetch de la API nativa de Javascript para peticiones asincronas, dentro de sus párametros usamos el métod get.

En la repuesta tomamos el texto y lo retornamos para tomarlo como html , este html con nuevos elementos es agregado al que ya existe con los antiguos elementos.

Incrementamos la variable página y asi termina cuando existe un scroll hacia abajo.

Si se vuelve a hacer otro scroll se repite toda la operación, hasta extraer el último registro de la tabla nombres.

Concluimos al final 

Entonces llegamos a resumir que crear una aplicación básica y sencilla cómo ésta con la funcionalidad de scroll infinito, resulta sencillo y no tenemos porque cargar de líbrerías adicionales como: Jquery, Vue.js, Axios.js, etc.. ¿Por qué? simplemente porque  mientras menos líneas de código o al menos solo las necesarias da una gran perfomance en cuanto a velocidad, obtenemos código mucho más legible y ordenado. Bueno es una apreciación personal que muchos pueden compartir, hasta un proximo vídeo.

Leido 7393 veces