Desarrollo web

Etapas para verificar el RUN con Vue.js

Vue.js es una herramienta que permite crear pequeños componentes para resolver una funcionalidad específica y desarrollar un SPA (Single Page Application) utilizando el API REST de WordPress.

Como te contamos en un artículo anterior, la incorporación de Vue.js en WordPress mejora el flujo de trabajo y es, una herramienta especial dentro de las conversaciones de desarrolladores.

En esta oportunidad, hablaremos de las etapas de verificación del RUN, a partir de la creación de un componente en Vue.js. Buscando mejorar la experiencia de usuario, diversas organizaciones utilizan este tipo de validaciones antes de procesar datos relevantes.

Cómo obtener el dígito verificador del RUN

La verificación del RUN se hace a través de un mecanismo conocido como dígito verificador o código de control. Método utilizado para la detección y corrección de errores empleados en los siguientes casos:

• Códigos de barras
• Tarjetas de crédito
• Códigos bancarios
• Códigos de identificación personal como el RUT

El RUN está compuesto por dígitos, más un dígito verificador asociado a los números del 0 al 9 o la letra K. En Chile, el dígito verificador es único para cada RUN, y se calcula con un algoritmo muy sencillo, conocido como módulo 11.

Imaginemos que existe el siguiente RUN: (16.144.251-?). Para obtener su código verificador tendremos que seguir los siguientes pasos:

Caso práctico para verificar desde Vue.js

Crearemos un componente en Vue.js para verificar el valor ingresado en un campo de texto y validar si es correcto o no. Para ejecutarlo, según el ejemplo, es importante que instalar Node.js y Npm.

Para comenzar, crearemos el fichero package.json en la raíz del proyecto, donde configuraremos e instalaremos todas las dependencias, de forma manual o al ejecutar en la terminal.

npm init

Posteriormente, instalaremos Vue y Laravel Mix, éste último permite configurar el webpack para compilar nuestros archivos de una manera más agradable y sencilla.

npm install –save-dev vue laravel-mix

Luego, copiamos el archivo de configuración de webpack en la raíz del proyecto.

cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

Agregaremos los scripts en el package.json para ejecutar webpack e iniciar la compilación de archivos, que quedará de la siguiente manera:

Estructura del proyecto de verificación

Ahora, crearemos dos directorios; el primero, src/ donde organizaremos nuestros componentes y script principal y el segundo, será dist/ donde se creará el javascript compilado. Para eso debes configurar webpack para generar el archivo en el directorio indicado.

Abriremos el archivo webpack.mix.js y utilizaremos el método js(), compartiéndole como primer parámetro, la ubicación del recurso y luego, la ubicación de salida.

La importancia del Index.html en un proyecto

Crearemos a la raíz del proyecto, el archivo index.html donde cargaremos todos los recursos de la aplicación. También añadiremos bootstrap a través de su CDN.

• L7: Incluimos los estilos de bootstrap
• L13: Creamos el elemento root de la aplicación a través del id #app. También enlazaremos la página con la instancia vue principal.
• L18 – L23: Aquí está nuestro primer componente que maneja la lógica general del formulario. Es importante destacar que, el inline-template con esta directiva, indica a vue que todo lo que esté dentro de será la plantilla de este.
• L20: Incluiremos el segundo componente, encargado de procesar toda la lógica del campo de entrada.
• L22 – L32: Sumaremos las librerías de bootstrap y el javascript compilado.

Creando componentes en Vue.js

Ahora, crearemos nuestros componentes. En este caso, creamos un directorio dentro de src/ llamado components/ añadiendo los archivos formulario.vue y rut.vue

De ese modo, veremos el primer componente del formulario.vue, que maneja la lógica general del formulario conteniendo el objeto data-binding principal.

A continuación, podemos comenzar a ver el código.

• L3-L9: Declaramos la propiedad data para recibir como parámetro, el objeto que enlaza los campos del formulario al componente
• L13: Creamos la variable que tendrá los errores del formulario
• L14: Elaboramos la variable isvalid. Este es un valor booleano que se actualizará en cada interacción con el campo y evaluará si hay algún error o no.
• L17: Generamos un evento para que los componentes descendiente puedan emitir este método.
• L21-L27: Construimos el método que define la estructura de errors a través de la propiedad y valores que se pasan por data.
• L29-32: Este método inyecta los errores en la clave correspondiente al campo y actualiza el valor de isvalid

Luego crearemos el componente rut.vue. Y, manejaremos la lógica para el campo de texto:

En el código encontraremos:

• L1-L9: Definimos la plantilla del componente
• L12-L25: Fijamos las propiedades y variables del componente
• L28.L76: Explicamos el método validar. Este se activa con el evento @keyup del campo de texto y realiza toda la verificación del dato ingresado,el que está enlazado a la variable data del componente a través de la directiva v-model
• L77-L81: Aclaramos el método press() este se activa con el evento @keypress del campo de texto, que intervendrá los datos que se ingresan en el campo para limitar solo valores aceptado para un RUN
• L82-L109: Especificamos el método blur, que se activa con el evento @blur del campo del texto, para formatear el RUN una vez que se sale del campo

Instancia de Vue

Finalmente, importamos el paquete de Vue junto a nuestro componente e instanciamos el objeto new Vue();

Quedando por compilar el app.js a través de webpack ejecutando npm run watch|production.

De esa manera, verificamos el RUN mediante componente desarrollado con Vue.js. Si desean probar o practicar con el código, pueden descargar el repositorio través de este enlace.