Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/JetstreamInertia»

De WikiEducator
Saltar a: navegación, buscar
(→‎Instación)
(→‎Servidor)
Línea 39: Línea 39:
 
*El proceso de instalación está descrito en la página oficial de forma muy intuitiva. Vamos a hacer la instalación para '''''laravel''''' y usaremos '''''vue''''' en el cliente.
 
*El proceso de instalación está descrito en la página oficial de forma muy intuitiva. Vamos a hacer la instalación para '''''laravel''''' y usaremos '''''vue''''' en el cliente.
 
====Servidor====
 
====Servidor====
 +
<br />
 
{{MRM_Actividad|Title=1.-Creamos un proyecto en laravel|
 
{{MRM_Actividad|Title=1.-Creamos un proyecto en laravel|
 
<source lang=bash>
 
<source lang=bash>
Línea 65: Línea 66:
 
         //......
 
         //......
  
 +
</source>
 +
}}
 +
====Cliente====
 +
<br />
 +
{{MRM_Actividad|Title=4.-Instalamos el paquete inertia para el front|
 +
*Instalamos tanto inertia como vue-3 que vamos a usar en este caso
 +
*Se pueden usar otros frameworks (tanto en servidor como cliente, ver página oficial)
 +
*La instalación la hacemos vía '''''npm'''''
 +
<source lang=bash>
 +
npm install @inertiajs/inertia @inertiajs/inertia-vue3
 +
</source>
 +
}}
 +
{{MRM_Actividad|Title=5.-Instalamos un paquete para barra de progreso (opcional)|
 +
*Dado que inertia trabaja con llamadas XHR (ajax), para que el usuario vea que la página está cambiando  o se está cargando, es una buena experienica de usuario mostrar de alguna forma una marca de progreso al usuario mientras la página se carga.
 +
*Normalmente la carga será rápida (vía ajax suele ser rápido), pero los accesos a bases de datos, etc, pueden insertar un delay, y si no cambia nada en la pantalla el usuario podrá pensar que no funciona y dará muchas veces click.
 +
*Primero instalamos, posteriormente mostraremos su uso.
 +
<source lang=bash>
 +
npm install @inertia/progress
 
</source>
 
</source>
 
}}
 
}}
  
 +
====Poniendo el proyecto en fucionamiento====
 +
*Una vez realizada la instalación de los paquetes que necesitamos, vamos a crear un proyecto base y verificar su funcionamiento.
  
 +
=====Servidor=====
 +
<br />
 +
{{MRM_Actividad|Title=1.-Creamos la página de carga inicial '''''app.blade.php'''''|
 +
*Inertia, como hemos indicado no va a realizar solicitudes de páginas al servidor, se van a renderizar páginas js con vue.
 +
*El servidor debe de entregar una primera página que llamaremos app.blade.js (modificable en
 +
<source lang=bash>
 +
npm install @inertiajs/inertia @inertiajs/inertia-vue3
 +
</source>
 +
}}
 +
{{M
 +
=====Cliente=====
  
 
====Cliente====
 
====Cliente====

Revisión de 01:40 6 ago 2021

https://inertiajs.com/

Qué es Inertia

  • Una librería para construir una aplicación web gestionada desde el servidor. Se le conoce como modern monolith. Se puede usar además de con Laravel con otras herramientas (DJango, Rail, Ruby,...)
  • Inertia le permite crear una aplicación de una sola página completamente basada en JavaScript sin complejidad adicional.
  • Inertia funciona mucho más como una aplicación clásica renderizada del lado del servidor:
  1. Creas controladores
  2. Obtienes datos de la base de datos (a través de tu ORM)
  3. Renderizas vistas.que son componentes de página de JavaScript.

Cómo trabaja

  • Trabajando con Inertia, vamos a usar el framework del servidor como siempre. En nuestro caso seguimos usando laravel con sus controladores, rutas, authetificadores , ...
  • Inertia es esencialmente una biblioteca de enrutamiento del lado del cliente. Le permite realizar visitas a la página sin forzar una recarga completa de la página.

Para ver una página sin necesidad de realizar la carga completa, usamos el componente <inertia-link>.

  • También se puede realizar una llamada usando Inertia.visit()
  • Cuando tenemos una ancla con la envoltura <inertia-link>, se produce una solicitud XHR al servidor.


Icon activity.jpg
Actividad
XMLHttpRequest (XHR) es un objeto especial de Javascript que permite realizar peticiones HTTP asíncronas (AJAX) de forma nativa desde Javascript.



  • Cuando Inertia realiza una visita XHR, el servidor detecta que se trata de una visita Inertia y, en lugar de devolver una respuesta HTML completa, devuelve una respuesta JSON con el nombre del componente de la página JavaScript y los datos (props).

El protocolo

  • Lo primero que ocurre en una aplicacion inertia es que se solicita una página html completa nomal
  • Esta página tendrá los elementos js y css. El div principal será el punto de montaje de la aplicación y contendrá un elemento especial <data-page> cuyo valor es un json que codifica un page object para la página inicial.

Inertia utiliza esta información para iniciar el lado del cliente y mostrar el componente de página inicial. 

<html>
<head>
    <title>My app</title>
    <link href="/css/app.css" rel="stylesheet">
    <script src="/js/app.js" defer></script>
</head>
<body>
 
<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
 
</body>
</html>

Instación

  • El proceso de instalación está descrito en la página oficial de forma muy intuitiva. Vamos a hacer la instalación para laravel y usaremos vue en el cliente.

Servidor



Icon activity.jpg
1.-Creamos un proyecto en laravel
laravel new probando_inertia





Icon activity.jpg
2.-Instalamos el paquete de inertia en el server
composer require inertiajs/inertia-laravel





Icon activity.jpg
3.-Instalamos el middleware de inertia
 php artisan inertia:middleware





Icon activity.jpg
4.-Registramos el middleware

Ahora registramos el middleware (HandleInertiaRequests) en App\Http\Kernel.php

  • Lo hacemos el el item middlewaregroups 
  protected $middlewareGroups = [
//......
        'web' => [
         //......
          \App\Http\Middleware\HandleInertiaRequests::class,
         //......



Cliente



Icon activity.jpg
4.-Instalamos el paquete inertia para el front
  • Instalamos tanto inertia como vue-3 que vamos a usar en este caso
  • Se pueden usar otros frameworks (tanto en servidor como cliente, ver página oficial)
  • La instalación la hacemos vía npm 
 npm install @inertiajs/inertia @inertiajs/inertia-vue3





Icon activity.jpg
5.-Instalamos un paquete para barra de progreso (opcional)
  • Dado que inertia trabaja con llamadas XHR (ajax), para que el usuario vea que la página está cambiando o se está cargando, es una buena experienica de usuario mostrar de alguna forma una marca de progreso al usuario mientras la página se carga.
  • Normalmente la carga será rápida (vía ajax suele ser rápido), pero los accesos a bases de datos, etc, pueden insertar un delay, y si no cambia nada en la pantalla el usuario podrá pensar que no funciona y dará muchas veces click.
  • Primero instalamos, posteriormente mostraremos su uso. 
 npm install @inertia/progress




Poniendo el proyecto en fucionamiento

  • Una vez realizada la instalación de los paquetes que necesitamos, vamos a crear un proyecto base y verificar su funcionamiento.
Servidor



Icon activity.jpg
1.-Creamos la página de carga inicial app.blade.php
  • Inertia, como hemos indicado no va a realizar solicitudes de páginas al servidor, se van a renderizar páginas js con vue.
  • El servidor debe de entregar una primera página que llamaremos app.blade.js (modificable en 
 npm install @inertiajs/inertia @inertiajs/inertia-vue3



{{M

Cliente

Cliente

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/Laravel/JetstreamInertia&oldid=28013»