Constructor de formularios reactivos con Laravel y Vue

¿Te ha pasado que tienes que desarrollar miles y miles de formularios para una aplicación?, es un martirio, mucha perdida de tiempo y código repetido miles de veces, el día de hoy te tengo una solución perfecta para ahorrar semanas e incluso meses de trabajo y muchas líneas de código repetido.

[ctt template=”1″ link=”OcG0Q” via=”yes” nofollow=”yes”]Never code a form again[/ctt]

Te quiero presentar Laraform.io, una librería de Laravel y Vue que te ayudarán a renderizar formularios dinámicos mediante la asignación de un schema. La herramienta cuenta con más de 50 validaciones, las cuales te ahorrarán mucho tiempo de desarrollo.

¿Qué es exactamente Laraform?

Laraform es un generador de formularios de pila completa para Vue.js y Laravel. Consiste en dos bibliotecas separadas para frontend y backend que se pueden usar juntas o separadas. Ayuda a los desarrolladores a crear incluso los formularios más complejos con facilidad al proporcionar características como:

• Validación a doble cara
• 54 validadores frontend compatibles con Laravel
• Soporte Eloquent
• Múltiples cargas de archivos
• 34 elementos incorporados
• Elementos anidados
• Elementos repetibles
• Elementos traducibles
• Lógica condicional
• Form Wizard
• Localización
• Temática
• Escalabilidad

¿Por qué usar Laraform?

Cuando su software se basa en numerosas y complejas formas cuya implementación es una pesadilla desde el punto de vista del desarrollo y las pruebas, Laraform será su mejor amigo. Al usar Laraform, no sólo acelerará su desarrollo y creará un código más estable, sino que tendrá un lenguaje unificado, una herramienta para tratar un problema muy común de la misma manera en todos los proyectos, lo que mejora una colaboración más eficiente. Además de las capacidades ilimitadas de Laraform, puede usarlo para los siguientes propósitos comunes:

• Paneles de administración
• Búsqueda y filtrado
• Registro
• Formularios de pago
• Soluciones ERP
• Cuestionarios

Nota: Laraform.io tiene dos versiones: la versión comunitaria la cual tiene limitaciones de uso y la versión de pago que contiene todo el potencial de Laraform.

Si quieres adquirir la membresía de Laraform, puedes adquirirla con el siguiente cupón y te ahorras $50 dólares, ¿muy bien no?.

Cupón para Laraform: GCHAVEZ50

Algunas características de Laraform:

• Asistente de formularios que se utiliza para dividir los campos de formulario en pasos
• Elementos anidados para crear grupos de elementos y campos uno al lado del otro
• Validación con validadores compatibles con Laravel
• Campo de selección de búsqueda para países y estados
• Máscara de entrada para número de teléfono
• Etiquetas flotantes para cada campo
• Elementos personalizados para crear resúmenes.
• Plantilla personalizada para grupos de radio para envío y pago
• Tema personalizado, puedes integrar tus propios estilos
• Valores condicionales para el método de envío según el país seleccionado
• Campos condicionales para mostrar estados, detalles de tarjeta de crédito, campos de dirección de facturación y opciones de creación de cuenta

Como puedes ver, Laraform.io es muy potente para generar formularios dinámicos en tu aplicación, es por eso que dedicaré este artículo a la versión comunitaria.

Cómo generar formularios reactivos con Laravel y Vue

Antes de comenzar, es necesario cumplir con los siguientes requisitos:

Requisitos

• Node.js & NPM
• Vue.js
• Webpack or Laravel Mix

Para el lado de Laravel, necesitamos lo siguiente:

• Composer
• Laravel Framework 5.6+

Browser Support

Laraform está desarrollado para soportar navegadores modernos, te dejo el listado a continuación:

• Google Chrome
• Firefox
• Apple Safari
• Microsoft Edge
• Opera
• Internet Explorer 10+
• Safari iOS
• Chrome y Firefox Android

Instalación

El proceso de instalación es muy sencillo, lo puedes realizar mediante npm con el siguiente comando:

npm i laraform –save

Recordemos que Laraform viene en dos versiones: Laravel y Vue, puedes trabajarlas en conjunto o separado, si requieres la integración del lado del backend, necesitamos correr el siguiente comando:

composer require laraform/laraform-laravel

Una vez que tengamos instalado Laraform, necesitamos revisar que tengamos las siguientes dependencias instaladas en nuestro proyecto:

// package.json

"devDependencies": {
  ...
  "axios": "^0.18",
  "lodash": "^4.17.4",
  "moment": "^2.24.0",
  "vue": "^2.5.22"
}

Y en tu composer debería quedar algo así:

// composer.json

{
  "require": [
    ...
    "laraform/laraform-laravel": "~1.1"
  ]
}

Una vez que hayas verificado que tengas las dependencias instaladas en tu proyecto, tendrás que ejecutar el comando: php artisan vendor:publish para agregar el service provider de Laraform Laraform\LaraformServiceProvider.

Creación de un formulario

La idea principal es crear una estructura de carpetas para que puedas organizar mejor Laraform y seguir con esa bella estructura de carpetas que Laravel nos proporciona. Por eso, vamos a crear una carpeta dentro del path app llamada Forms.

Dentro de esta carpeta localizaremos nuestros archivos que contendrán nuestras clases de Laraform.

<?php
// app/Forms/TestForm.php

namespace App\Forms;

class TestForm extends \Laraform
{
  public $schema = [
    'hello_world' => [
      'type' => 'text',
      'label' => 'Hola',
      'default' => 'Mundo'
    ]
  ];

  public $buttons = [[
    'label' => 'Enviar formulario'
  ]];
}

 

El funcionamiento es sencillo, como puedes ver, es una clase que extiende de la clase base llamada Laraform la cual debe contener una variable o método llamado $schema o schema() en donde se retorne un array con los elementos del formulario, ¿sencillo no?.

Pasando el formulario a la vista

Una vez que hemos asignado el schema de nuestro formulario, es necesario capturarlo y enviarlo a la vista correspondiente, es por eso que te comparto el siguiente ejemplo:

<?php

Route::get('/', function () {
  return view('welcome', [
    'form' => app('App\Forms\TestForm')
  ]);
});

¿Qué acabamos de hacer?

Lo que hicimos fue resolver la clase que hemos definido en el punto anterior con el helper app y se la asignamos a la variable que está dentro del array del método view.

Lo que hace esto es retornarnos una colección la cual vamos a consumir en el siguiente punto.

Renderizar formulario

Después de haber asignado el schema de tu formulario y lo tengas disponible en una variable, te gustaría visualizarlo, ¿no?, aquí es en donde entra el poderoso método render() que nos provee la funcionalidad para renderizar un componente en Vue del formulario que hemos asignado en el punto anterior.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    <div id="app">
      {!! $form->render() !!}
    </div>

    <script src="/js/app.js"></script>
  </body>
</html>

Seguramente si estas haciendo paso a paso este articulo, habrás observado que en tu proyecto aun no se ve nada, ¿cierto?, esto se debe a que no hemos agregado los assets necesarios para que Laraform trabaje, vamos a hacerlo.

Para esto tendrás que dirigirte al archivo ubicado en resources/js/app.js y agregar lo siguiente:

import Laraform from '@laraform/laraform'

Laraform.config({
  theme: 'default',
  endpoints: {
    process: '/laraform/process'
  }
})

Vue.use(Laraform)

¿Qué acabamos de hacer?¿Qué acabamos de hacer?

Lo que hicimos fue importar el paquete de Laraform a nuestro archivo app.js, posteriormente lanzamos un método llamado config() para asignar una configuración predeterminada, asignamos un theme que viene por default en Laraform, también asignamos un parámetro process el cual tiene la URL encargada de manejar los envíos y peticiones que se hagan a tus formularios. Por último, le indicamos a Vue que utilice globalmente Laraform para poder correrlo en nuestra aplicación.

Ahora, si volvemos a refrescar nuestra aplicación, notarás que los estilos se encuentran rotos, es porque necesitamos integrar el CSS que nos provee Laraform y podemos integrarlo editando el archivo: resources/sass/app.scss e integramos lo siguiente:

@import '~@laraform/laraform/src/themes/default/scss/theme';

Ahora solo tendrás que correr el comando npm run dev para compilar tus assets, refrescas el navegador y con eso ya deberías estar viendo el funcionamiento total de Laraform.

¿Qué hemos aprendido hasta ahora?

• • Integrar Laraform con Vue
  • Integrar Laraform con Laravel
  • Crear un formulario de ejemplo

A continuación te comparto la URL del sitio oficial de Laraform en donde podrás ver toda la documentación del proyecto y si deseas colaborar con la comunidad, te dejo el repositorio de GitHub también.

Laraform: https://laraform.io/

GitHub: https://github.com/laraform/laraform

¿Qué sigue?

Quiero compartir con la comunidad una serie de videos intuitivos y prácticos sobre Laraform, si te interesa por favor escríbelo en los comentarios, de esa manera me ayudaras a saber tu interes en la herramienta.

¿Qué te ha parecido?, yo he implementado actualmente Laraform en 3 proyectos y la verdad es que me ha ahorrado demasiado tiempo en implementar formularios complejos, definitivamente es una gran herramienta.

Actualmente se encuentra en versión beta pero Adam (el creador) se encuentra trabajando en lanzar la primera versión oficial de la libreria, asi que seguro se vienen cosas interesantes para Laraform.

Si te ha gustado el artículo y la herramienta ayúdame compartiéndolo en redes sociales o en tu grupo de desarrolladores web, me ayudaras demasiado en seguir trayendo contenido de calidad y totalmente gratis al blog.