¿Cómo los gobiernos y las fintech pueden unirse de manera colaborativa?

Avatar img
Álvaro Maldonado
Gerente Comercial @ Kushki Ecuador
diciembre 17, 2020
Lectura de 2 minutos
¿Cómo los gobiernos y las fintech pueden unirse de manera colaborativa?

Lentas y burocráticas. Esa es la percepción que históricamente ha existido sobre las instituciones públicas y los trámites que se realizan a través de ellas. Un sector que hasta hace poco no se había digitalizado y que aún no ha dimensionado del todo los beneficios de hacerlo, ni tampoco ha cuantificado el ahorro en cantidad de dinero y tiempo que la digitalización podría traer. Pero ese ritmo ya se ha acelerado, porque la pandemia ha puesto en riesgo los trámites presenciales, obligando a hacerlos disponibles en línea.

Según datos del Banco Interamericano de Desarrollo (BID), a los gobiernos les cuesta hasta 40 veces más un trámite presencial que un trámite digital, por los recursos que debe disponer. También, al ciudadano le toma en promedio 5,4 horas hacer un trámite y en algunos países, hasta 11 horas. Un trámite digital, en cambio, puede llegar a tomar un 74% menos de ese tiempo.

En la Unión Europea, el 81% de los trámites son en línea. En nuestra región, solo el 7% de la población realizó su último trámite de manera digital. Datos de la Comisión Económica para América Latina y el Caribe (CEPAL)posicionan a la región en un nivel de desarrollo intermedio respecto a otras regiones del mundo en cuanto a ecosistema digital. Con un índice de 49,9 (en escala de 0 a 100), Latinoamérica está rezagada frente a Europa Occidental (71,06) y América del Norte (80,8). Además, la tasa de crecimiento anual en digitalización también se ha ralentizado, creciendo un 6,21% entre 2014 y 2018, la más baja de todas las regiones emergentes.

Algunos servicios públicos ya ofrecen pagos digitales para trámites, sin embargo, la difusión es baja, lo que no fomenta su uso entre los contribuyentes. Además, muchos portales públicos son complejos y poco amigables con el usuario, lo que deriva en una baja conversión de transacciones y un retraso frente a los distintos sistemas de administraciones públicas del mundo. De hecho, las cifras del BID señalan que el 40% de los trámites digitales son muy difíciles de entender y no se pueden finalizar.

La oportunidad

En Estonia, un país líder en cuanto a digitalización del Estado, el 99% de los trámites se hacen en línea. Uno de los principales avances son las firmas digitales, que se emplean 1,3 millones de veces por semana. Según el Gobierno de ese país, gracias a eso ahorran una semana laboral por persona al año, o el 2% del Producto Interno Bruto (PIB).

Otros de sus avances han sido eliminar el uso del papel en trámites, implementar el voto digital, crear residencias virtuales o e-residencias y hasta un identificador digital desde que nace una persona en ese país.

Todo eso deja en claro que queda mucho por avanzar y que imitar de los países que llevan ventaja y son más desarrollados en este tema. El proceso de digitalización del sector público tiene asociado una serie de beneficios: son avances que se pueden alcanzar de manera ágil y en el corto plazo, con un inmediata percepción positiva y satisfacción de los ciudadanos. Es decir, son medibles y testeables en plazos rápidos.

También, la introducción de tecnología en la administración pública genera menos corrupción debido a que todo queda registrado, menores desplazamientos y tráfico vehicular, menor contaminación e impacto ambiental, y eficiencia administrativa con menores costos y burocracia.

Un partner tecnológico

En Colombia, Kushki digitalizó el proceso de obtención del Certificado de Tradición y Libertad, que otorga la Superintendencia de Notariado y Registro (SNR). Este certificado es requerido para una serie de trámites en Colombia y entrega toda la información sobre un predio y sus titulares. Su demanda es alta: se emiten entre 23 mil y 75 mil certificados cada día, porque es requerido para comprar o vender un inmueble, aplicar a créditos hipotecarios, entre otras cosas. Con Kushki, los usuarios de la SNR pueden adquirir su certificado de manera digital, ahorrando tiempo y dinero en traslados hacia las oficinas. La obtención del certificado con este método demora menos de un minuto.

Otro caso es el del Registro Único Nacional de Tránsito (RUNT), encargado de entregar el histórico vehicular de los autos. A través de la alianza con Kushki, ahora es posible pagar el documento con tarjetas y PSE, expandiendo las opciones de pago disponibles.

La ventanilla virtual

En Ecuador, el Municipio de Guayaquil también ha comenzado a digitalizarse con nuestras soluciones. El pago del impuesto predial, un tributo obligatorio que se cobra una vez al año por cada propiedad, ahora puede realizarse en línea a través de un portal integrado con botón de pagos, desarrollado específicamente para esta entidad. El usuario acepta el pago de una comisión por el uso del servicio, pero eso se traduce en un ahorro de tiempo y en mayor comodidad.

Para la implementación de este proyecto, contamos con un equipo multidisciplinario de expertos en la industria de cobros online, seguridad y experiencia de pagos. La actual situación de la pandemia a nivel mundial ha potenciado el comercio electrónico y también la digitalización de entidades públicas que buscan acercarse a sus usuarios de manera fácil y segura.

Transformación estatal

En noviembre de 2020, se realizó la VI Reunión Ministerial de Gobierno Digital de América Latina y el Caribe, en donde se expuso que Ecuador ha logrado cambios sustanciales en cuanto a transformación digital, subiendo 10 puestos con respecto a 2018 en cuanto a la aplicación del Gobierno Electrónico a nivel global (puesto 74 de 193 países). Actualmente, el país registra más de 70% de trámites en línea del Gobierno Central y se espera que para mayo de 2021 sea el 90%.

Si bien el Índice de Preparación Digital 2019 de Cisco ubicó a Chile como el país más preparado digitalmente, seguido por Uruguay y Costa Rica, los países de la región aún están en una posición bastante baja con respecto al nivel global, lo que demuestra que todavía hay necesidades desatendidas para resolver mediante la colaboración entre empresas fintech y gobiernos.

Sé el alma de la fiesta con la información más fresca sobre pagos digitales.

Suscríbete a nuestro Kushki Hub para recibir alertas de nuestro nuevo contenido.

Suscribe illustration
¿No sabes qué producto es el indicado para tu comercio?
¿El mundo de los pagos llama tu atención?

Más de nuestro Kushki Hub

Metodología doble diamante para el diseño de experiencia de usuario

Hoy la mayoría de las empresas buscan fidelizar a los clientes y generar conversión a través de la venta de sus productos en tiendas online. Este posicionamiento depende de muchos factores, uno de ellos es el diseño de las interfaces de usuario, que abarca el aspecto visual de una plataforma (que sea atractiva), como de su usabilidad y utilidad de allí la importancia de un diseñador UX. En este artículo te contaré sobre qué es el diseño de experiencia de usuario, la metodología que utilizamos en Kushki, los retos que hemos encontrado en el proceso y la razón por la que elegimos aplicar la metodología de doble diamante. La forma más sencilla de explicar qué hace un UX Designer o Diseñador de Experiencia de Usuario es compartiendote un ejemplo, de algo que probablemente hayas vivido y te resulte familiar: Imagina que estás en una página web que vende zapatos con la intención de comprar un par de zapatillas con características específicas. Ya tienes en mente lo que deseas, por lo que al dirigirte a la sección de zapatillas, empiezas a buscar el botón de “filtrar” para facilitar tu búsqueda, pero no lo encuentras en ningún lugar. Luego de ver páginas y páginas del catálogo digital, finalmente encuentras lo que buscabas y te diriges a pagar. En ese momento descubres un extenso formulario de pago que empiezas a llenar sin ánimos, mientras piensas que esto está tomando mucho más tiempo y esfuerzo del que pensaste. Eventualmente, te rindes y abandonas la página, prefieres comprar tus zapatos en otra tienda, o simplemente olvidarlo por completo. Pero, ¿por qué abandonaste? Porque tu frustración con el proceso, fue más fuerte que tus deseos de comprar los zapatos, es decir, la experiencia de usuario fue insatisfactoria. Y te preguntarás, ¿qué tiene que ver esto con el diseñador UX?, sencillo: el diseñador UX, tiene la misión de convertir la búsqueda y proceso de compra en una experiencia gratificante, que brinde todos los elementos de accesibilidad y con un alto grado de practicidad para que el usuario realice sus actividades en la página, de una forma fluida y sin obstáculos, casi “sin darse cuenta”; a esto le llamamos experiencia de usuario. En otras palabras, definimos el diseño de experiencia de usuario como el proceso de desarrollo y mejora de la interacción de calidad entre humano computador y todas las facetas de un producto o servicio digital o físico. El reto se basa en crear un producto útil, fácil de usar, que aporte valor y aceptación en su uso en el menor tiempo posible. Un diseñador no solo tiene participación en la creación de un producto visual sino que realiza un proceso práctico de investigación, ideación y finalmente, desarrollo de prototipos que permitan testear resultados. __Para lograr un diseño UX de alta calidad, debe haber una fusión perfecta de los servicios de múltiples disciplinas. __ La metodología Doble Diamante en Kushki Como equipo aplicamos diversos rituales de metodologías ágiles para gestionar proyectos con mayor eficacia y enfocarnos en el valor agregado de nuestras soluciones digitales. Para ello, empleamos los pasos del framework Doble Diamante de la siguiente manera: Descubrir: Investigamos cuáles son las oportunidades de mejora. En este paso, validamos con los usuarios reales, cuales son sus inquietudes. Pedimos a nuestros entrevistados que nos den un recorrido por su día a día para detectar el problema, además certificamos con expertos el alcance del proyecto. Definir: Con los resultados del punto anterior, comienza un proceso de organización de la información con la finalidad de entender y mapear cuales son los puntos requeridos que pueden solucionar el problema planteado. En esta fase se hacen flujos, listas de requerimientos, entre otras herramientas, necesarias para la siguiente etapa. Desarrollar: en este punto nos enfocamos en la construcción visual del producto o feature tomando en cuenta la lógica y puntos de dolor identificados anteriormente, es decir, el prototipado. Asimismo, hacemos validaciones con los expertos de manera que podemos asegurarnos de realizar la entrega con un acabado perfecto. Entregar: consiste en una demostración de las funcionalidades de los features que se proponen en el prototipo. Retos importantes a los que nos enfrentamos en el desarrollo de la experiencia Como equipo de diseño de experiencia de usuario nos preocupamos por que nuestras soluciones resulten confiables, útiles y amigables. Como equipo, hemos identificado tres retos constantes y fundamentales a tener en cuenta en cada solución que desarrollamos: Hacer sentir seguro al usuario. No solamente contamos con las mejores certificaciones de seguridad, sino también hemos implementado otras medidas que permiten al usuario tener un mayor control y entendimiento en el proceso. Por ejemplo, vista previa las configuraciones que deseen realizar, mensajes de alerta, confirmación de acciones, edición de información, etc. El objetivo es ayudar a los usuarios a tomar buenas decisiones y hacer que se sientan seguros en el proceso. Hablar en su idioma. El lenguaje poco amigable e incomprensible puede dificultar el entendimiento de las herramientas de procesamiento de transacciones. “Preautorización y captura”, “dispersión”, “contracargo", entre otros, son términos que no son usados comúnmente y tampoco del dominio de las personas. Es por ello que la forma como nos comunicamos con nuestros clientes es un reto constante e importante a la que nos enfrentamos como equipo. Para solucionar estas posibles dificultades de entendimiento contamos con numerosas indicaciones, notas, tooltips en la Consola del Cliente, así como también la base de conocimientos. Es fundamental hablarle al usuario en un lenguaje claro, directo y sencillo de comprender. La saturación de información. Es muy fácil confundir al usuario cuando se trata de transacciones financieras. El usuario necesita tener información clave y concisa a la mano. Por esto, es fundamental conocerlo a él y a sus necesidades, para poder plantear soluciones con una arquitectura de información que cubra sus puntos de dolor y reducir la carga cognitiva de nuestro usuario. ¿Por qué elegimos esta metodología? Una de las características que valoramos más de este framework es la posibilidad de iteración dentro de cada diamante con el objetivo de acercarse cada vez al “como” ideal. La intención es tener un problema claro en el momento que ambos diamantes convergen resultando en una relación esfuerzo-tiempo positivo. Las principales beneficios que encontramos en esta metodología son: Fomenta la comunicación entre equipos. A través de consultas a los expertos y otras áreas que correspondan. Aplica para proyectos pequeños, medianos y grandes. El framework puede ser implementado para la búsqueda de soluciones a todo tipo de problemas. Es adaptable de acuerdo con el proyecto. Nos impulsa a entender cuáles son los métodos y actividades correctos para perseguir un problema u oportunidad. Claridad en los procesos. Permite definir con mayor precisión las fases a lo largo del desarrollo de un proyecto de UX. Finalmente, para el mundo fintech la confianza y eficiencia en las tecnologías desarrolladas son realmente importantes. En sí, las transacciones financieras constan de procesos complejos que requieren un alto nivel de precisión y velocidad de procesamiento. Nuestro objetivo es que para el usuario final este sea un proceso transparente, rápido y seguro. Como equipo nos enfrentamos constantemente a nuevos retos que nos lleva a traducir un proceso engorroso a uno que pueda desarrollarse de forma natural e intuitiva entonces debemos considerar el diseño de experiencia como un concepto global que afecta a toda la cadena de interacción entre marca y el cliente.
Avatar img
Andreína Medina Yáquer
UX/UI Designer @ Kushki
diciembre 07, 2020

La oportunidad de los pagos digitales: por qué decidí dar el paso desde Visa hacia las fintech

Cuando ingresé a Visa en el año 1997 como joven ingeniero, nunca pensé que iba a quedarme allí por 22 años. Sin saber mucho, me atrajo el mundo de los medios de pago porque está asociado a créditos que favorecen el crecimiento económico de las pequeñas y medianas empresas y porque su conveniencia facilita nuestra vida diaria. Pero más allá de eso, era una buena oportunidad para un profesional joven como yo. Primero entré al área de informática, haciéndome cargo de la implementación de las tarjetas microcircuito, un tipo de tarjetas inteligentes que, en ese entonces, eran toda una novedad. Hasta 2003 estuve en el área de nuevas tecnologías de Visa. Desde ahí pasé a riesgos y fraude, liderando el área en __México, el país donde existe más fraude en todo Latinoamérica y en el mundo. __ Zoom al asunto El problema del fraude en México no es nada nuevo y da para mucho análisis. Según una encuesta realizada en 2019, el 77% de los mexicanos afirma no comprar online por miedo a ser víctima de este delito. Es decir, el tema está muy presente entre los ciudadanos. Es más, según datos extraídos de un estudio realizado por el mismo Visa, en la actualidad los contracargos en Latinoamérica ocurren en un 1,7% de los pedidos y en México llegan al 2,3%. Datos de la Comisión Nacional para la Protección y Defensa de los Usuarios de Servicios Financieros (Condusef) dicen que, durante el primer trimestre de 2019, ya se habían reclamado un millón 188 mil contracargos en la nación mexicana. El contraste es fuerte, porque en Europa los contracargos apenas llegan al 0,8%. El tema no discrimina, porque habiendo trabajado en áreas de fraude y riesgos por tantos años, puedo decir con seguridad que las amenazas cibernéticas que atacan a las fintech no son nada diferentes a las de cualquier banco o gran empresa. Los delincuentes informáticos tienen como objetivo a grandes y pequeños por igual. Por eso, la gran diferencia radica en cómo estamos preparados para esas amenazas. Ahí, considero que la capacitación y sensibilización de los empleados es fundamental. Los colaboradores e integrantes del ecosistema de pagos debemos entender que somos entes críticos para proteger adecuadamente a las instituciones donde trabajamos. En mi experiencia, la mejor herramienta es la educación y los cursos en materia de compliance, y mantenerse actualizado constantemente. La aparición de las fintech Pero volviendo al tema de la carrera profesional, llevando ya un tiempo en la industria comencé a identificar los principales problemas que existen en la región con respecto a los pagos. En Latinoamérica domina el uso de efectivo con cifras impresionantes: según Americas Market Intelligence, ese mismo año en la región se gastaron aproximadamente US $1.7 miles de millones en efectivo en tiendas físicas, lo que representa el 81% del gasto minorista total, en comparación con un 25% de Estados Unidos y un 18% en China. Los pagos electrónicos han tenido una dura tarea intentando expandirse por los distintos países latinoamericanos, muchas veces desacelerados por los bancos, que tienen problemas ampliando su penetración debido a la gran carga operativa que acarrean, que hace que sea muy difícil mover a estas instituciones para que hagan cambios. Todo esto ocurre al mismo tiempo que los comercios necesitan vender cada vez más por internet, especialmente por la pandemia, lo que trae requerimientos tecnológicos y de seguridad que muchas veces se escapan del core de su negocio o no cuentan con los conocimientos necesarios para poder hacerlo por cuenta propia. Es ahí cuando empiezan a aparecer tímidamente las fintech. Estas pequeñas y ágiles compañías tecnológicas amplían la base de servicios electrónicos ofreciendo mayor innovación y competencia para realizar los pagos, logrando procesos simples y sencillos de manera rápida, como poner a un comercio en capacidad de vender en cuestión de unos pocos días, algo impensado para una gran institución financiera. Más importante aún, contribuyen a incrementar la bancarización de los latinos. Según el 2020 Latam Fintech Report de KoreFusion, México lidera la cuenta de los países que más tienen empresas fintech en la región, con 249. Le sigue Colombia con 128. Esto se debe en su mayoría a la creación de la Ley Fintech Integral mexicana en 2018, pionera en Latinoamérica, que ha atraído la inversión internacional y la subida de los montos de financiamiento. En 2020, aunque aún no termina el año, es probable que las cifras hayan aumentado por la pandemia y la explosión de los pagos digitales. Desafío Kushki Con la explosión de las empresas fintech y viendo cómo el ecosistema ha crecido en los últimos años, comencé a barajar la posibilidad de orientar mi carrera hacia este promisorio mundo de las empresas fintech. Con el tiempo, me ha ido quedando en claro que no todas esas compañías van a sobrevivir y solo aquellas que han podido identificar muy bien las carencias del mercado, desarrollando soluciones versátiles, flexibles y convenientes son las que van a prevalecer, aún cuando los tiempos se pongan difíciles. Y eso es lo que vi en Kushki, donde desde hace algunas semanas me desempeño como CCO (Chief Governance & Compliance Officer). Es un tremendo desafío, porque mi reto está en garantizar una óptima operación en toda la región, pero adaptándose a las regulaciones de cada país en específico. No es tarea fácil, porque cada país es un mundo en sí mismo. Al mismo tiempo, mi labor está en brindar valores diferenciados que nos posicionen como el principal partner tecnológico de nuestros clientes, sea cual sea el rubro o país de origen de ellos.
Avatar img
Eduardo Canton
Chief Governance & Compliance Officer @ Kushki
diciembre 02, 2020

Formularios de usuarios dinámicos con React Hooks

¿Cómo se crean los formularios de usuarios dinámicos con React Hooks en Kushki? La creación de formularios con los cuales se captará la información de un usuario final puede ser una tarea difícil, debido a que se deben tomar en cuenta muchos factores como: validaciones en los campos, accesibilidad, mantenibilidad, que sea extensible y sujeto a cambios, lograrlo en el menor tiempo posible, con buenas prácticas, entre otros. Y puede ser más desafiante en el caso de que el formulario que deseemos desarrollar sea extenso, complejo, con numerosas secciones o que implique generar nuevos formularios según las elecciones del usuario. En Kushki, llevamos a cabo este trabajo continuamente para ofrecer la mejor experiencia de usuario en el uso de nuestra plataforma, en este artículo te contaremos cómo logramos solucionar todas esas dificultades para un resultado óptimo en el desarrollo de formularios de usuario. ¿Cuáles son las tecnologías y librerías que se deben utilizar? React Es una librería para la construcción de interfaces de usuario, que principalmente ofrece la posibilidad de desarrollar complejas aplicaciones web con datos que cambian a través del tiempo. Se adapta muy bien a nuestras necesidades de captar constantemente información en nuestros distintos productos para actualizarlos en nuestra plataforma, además de presentar información que cambia continuamente de una forma inmediata y consistente. Algunas características muy importantes que también nos ofrece son: facilidad de uso, reusabilidad de componentes gráficos y eficiencia al construir interfaces complejas partiendo desde piezas más simples. Hooks Son una nueva adición a React, permitiendo escribir aplicaciones con un enfoque funcional, reduciendo la cantidad de código necesario, simplificando los componentes complejos previamente desarrollados con clases a una estructura más simple la cual permite abstraer y reutilizar lógica en estas funciones para lograr componentes más fáciles de entender y mantener. Typescript Es un lenguaje de programación que compila a Javascript, y la razón para utilizarlo es que Javascript no se pensó para la creación de grandes y complejos sistemas sino para la implementación de funcionalidades dinámicas a una página web; por eso Typescript se convierte en esa pieza fundamental para que Javascript sea altamente escalable manteniendo un gran nivel de flexibilidad. Al añadir un tipado estricto logramos un código más robusto y sólido, permitiendo que nuestras aplicaciones tengan menos errores, sean más fáciles de probar y una mayor mantenibilidad a través del tiempo, por eso nuestra adopción de este lenguaje de programación es muy alta en nuestro conjunto de aplicaciones. React Hook Form Es una librería para la construcción de formularios con React, creada con el objetivo de lograr un mayor rendimiento y facilidad a la hora de implementar y validar los formularios. Algunas razones por las cuales es recomendable utilizar React Hook Form son: Es intuitiva, permitiendo al desarrollador utilizar una sola función encargada de abstraer toda la lógica del manejo del formulario. Utiliza Hooks, consiguiendo un código más limpio al reutilizar funciones responsables del manejo de distintas partes de la interfaz. Ofrece buen rendimiento, ya que minimiza el número de re-renderizaciones al utilizar Hooks y un aislamiento de los campos del formulario al momento que cambian su estado. Es ligera, sin ninguna dependencia que afecte su tamaño al descargarla. Posee validación incorporada; se encarga del control de errores que suceden al ingresar datos erróneos en los campos en el formulario. Integración con Typescript, para mantener un tipado estricto de los campos que se deben captar del usuario. Con algunas desventajas: Requiere el uso de componentes funcionales, por lo que no es compatible con componentes realizados con clases. El uso de Hooks al ser una característica nueva en React puede suponer un tiempo adicional para aprender a utilizarlos correctamente. ¿Cómo se debe implementar? React Hook Form es la librería utilizada para la construcción del formulario, en esta sección nos centraremos en describir el proceso de desarrollo para llevarlo a cabo junto con explicaciones técnicas que permitan entender mejor cómo puede ser su adopción en un proyecto. 1. Define un tipado estricto del formulario Al especificar una interfaz con los campos que tendrá el formulario nos permite mantener entendibilidad en el equipo de trabajo y brindar detección de errores en tiempo de compilación. A continuación tenemos una implementación de una interfaz de un formulario sencillo que captará información de un cliente. interface IForm { clientName: string; clientDetails: { email: string; documentType: string; documentNumber: string; } } 2. Inicializa el formulario con la función useForm() Esta función retorna los métodos con los que se va a interactuar con la API de la librería, recibe como parámetro un tipado genérico con la interfaz que definimos anteriormente para mantener un tipado estricto del formulario y también especificamos que la validación de los campos sea con el modo "onBlur", es decir al momento que el elemento pierde el enfoque del usuario. export const FormComponent: React.FC = () => { const form = useForm <IForm> ({ mode: "onBlur", }); } 3. Envuelve las secciones del formulario con el componente FormProvider Este componente que ofrece la librería hace uso de la API Context de React, que resuelve el problema de pasar "props" en cada nivel del árbol de componentes, esto es específicamente útil en formularios complejos con múltiples secciones anidadas. Para la implementación hemos definido que el formulario tendrá 2 secciones anidadas, la primera captará el nombre del cliente y la segunda los detalles del cliente. Además de especificar la función "handleSubmitForm" que será la encargada de procesar los datos una vez que el usuario realice un envío del formulario. export const FormComponent: React.FC = () => { const form = useForm<IForm>({ mode: "onBlur", }); const handleSubmitForm: SubmitHandler<IForm> = async (formData) => { // Guardar campos recibidos del formulario }; return ( <FormProvider {...form}> <ClientNameSection/> <ClientDetailsSection/> <Button style={{ margin: 20 }} variant="contained" color="primary" disableElevation onClick={form.handleSubmit(handleSubmitForm)} > Guardar </Button> </FormProvider> ); }; 4. Utiliza el componente ConnectForm para secciones anidadas del formulario Es muy común desarrollar formularios que tengan secciones que estén profundamente anidadas dentro del árbol de componentes, en este caso el componente "ConnectForm" se integra muy bien, permitiendo envolver al componente anidado con los métodos de la librería sin necesidad de obtenerlos de los "props". Aquí hacemos uso de la técnica "renderProps" de React para reutilizar este componente en múltiples partes del código. const ConnectForm = <T extends {}>({ children, }: { children: (form: UseFormMethods<T>) => JSX.Element; }) => { const formMethods = useFormContext<T>(); return children({ ...formMethods, }); }; 5. En las secciones anidadas del formulario utiliza el componente TypedController Este componente de la librería se encargará de registrar el elemento en el estado del formulario para hacer un seguimiento de las entradas del usuario. Haremos uso del componente "Textfield" de la librería Material-UI el cual se envuelve dentro del TypedController en su atributo "render". Se crearán 2 secciones anidadas "ClientNameSection" y "ClientDetailsSection": export const ClientNameSection: React.FC = () => { return ( <ConnectForm<IForm>> {({ control, errors }) => { const TypedController = useTypedController<IForm>({ control: control, }); return ( <div style={{ padding: 20 }}> <TypedController name={"clientName"} rules={{ required: true }} render={(props) => ( <TextField {...props} label="Nombre del cliente" variant="outlined" error={!!errors.clientName} required fullWidth margin="normal" helperText={ !!errors.clientName && "Campo requerido" } /> )} /> </div> ); }} </ConnectForm> ); }; export const ClientDetailsSection: React.FC = () => { return ( <ConnectForm<IForm>> {({ control, errors }) => { const TypedController = useTypedController<IForm>({ control: control, }); return ( <div style={{ padding: 20 }}> <div> <Typography variant="h6" color="primary"> Detalles del cliente </Typography> <TypedController name={["clientDetails", "email"]} rules={{ required: true, pattern: emailPattern }} render={(props) => ( <TextField {...props} label="Correo electrónico" variant="outlined" error={!!errors.clientDetails?.email} required fullWidth margin="normal" helperText={ !!errors.clientDetails?.email && "Email inválido" } /> )} /> </div> <div style={{ display: "flex" }}> <div style={{ width: "50%", marginRight: 10 }}> <FormControl variant="outlined" fullWidth margin="normal" > <InputLabel>Tipo de documento</InputLabel> <TypedController name={["clientDetails", "documentType"]} defaultValue={"CI"} render={(props) => ( <Select {...props} label="Tipo de documento"> <MenuItem key="CI" value="CI"> {"CI"} </MenuItem> <MenuItem key="RUC" value="RUC"> {"RUC"} </MenuItem> <MenuItem key="PAS" value="PAS"> {"PAS"} </MenuItem> </Select> )} /> </FormControl> </div> <div style={{ width: "50%", marginLeft: 10 }}> <TypedController name={["clientDetails", "documentNumber"]} render={(props) => ( <TextField {...props} id="documentNumber" label="Número de documento" variant="outlined" error={!!errors.clientDetails?.documentNumber} fullWidth margin="normal" /> )} /> </div> </div> </div> ); }} </ConnectForm> ); }; Además el componente "TypedController" mantiene un tipado estricto del formulario como observamos en la siguiente sección de código, al colocar un argumento equivocado en el atributo "name", el compilador detecta un error en tiempo de ejecución. Podemos ver cómo se visualizaría en el navegador con las 2 secciones anidadas del formulario. 6. Observar los cambios en los campos del formulario con la función useWatch() En la fase de desarrollo es frecuente la necesidad de realizar acciones de acuerdo a las entradas del usuario, por ejemplo, para renderizar condicionalmente o para validar datos en tiempo real, la función "useWatch()" nos permite estar escuchando los cambios de un campo del formulario y actuar de acuerdo a este. En nuestra implementación, se puede utilizar la función para validar si el campo "email" existe al momento que el usuario lo ingresa en el formulario: export const ClientDetailsSection: React.FC = () => { return ( <ConnectForm<IForm>> {({ control, errors }) => { const TypedController = useTypedController<IForm>({ control: control, }); const email = useWatch({ name: "email" }) as string; useEffect(() => { // Verificar si email ya existe }, [email]); ... 7. Enviar los valores del formulario con la función handleSubmit() Esta función pasará la información recopilada una vez que se realice una validación exitosa para poder guardar los datos del formulario. export const FormComponent: React.FC = () => { const form = useForm < IForm > ({ mode: "onBlur", }); const handleSubmitForm: SubmitHandler < IForm > = async (formData) => { // Guardar campos recibidos del formulario }; ... Previamente a la invocación de la función se realiza una validación de los campos, como podemos observar en la siguiente imagen la librería se encarga de detectar los errores y actualizarlos en la interfaz. Por último, con los campos completos podemos ver cómo se recibirán en la función para poder procesarlos: { "clientName": "John Doe", "clientDetails": { "email": "jhon.doe@test.com", "documentType": "CI", "documentNumber": "1764537289" } } ¿Cuales son nuestros resultados? Actualmente en Kushki, esta implementación nos ha permitido: Construir formularios de una forma más eficiente reduciendo el código escrito. Formularios extensos y complejos se los desarrolla a partir de componentes simples y se delega a la librería la responsabilidad de validarlo y controlarlo. Contar con una estandarización en la forma de desarrollarlos para lograr una mejor mantenibilidad del código a lo largo del tiempo dentro del equipo de trabajo. Lograr mejoras de rendimiento al reducir al mínimo el número de renderizaciones que debe realizar el navegador. Detectar errores antes de que el código esté en producción gracias al tipado estricto del formulario. También, es importante tomar en cuenta estas observaciones antes de adaptarlo en un proyecto. Existirá un tiempo adicional de aprendizaje hasta que el equipo de trabajo implemente de forma adecuada la librería. Puede ser una solución excesiva si el formulario que se va a desarrollar es sencillo con pocos elementos. La librería cuenta con menos comunidad y colaboradores que otras librerías más antiguas en el mercado como son Formik o Redux Form. Puedes ver una completa comparación con estas librerías en este enlace. Finalmente, espero que este artículo haya sido de ayuda en el proyecto que estés llevando a cabo o planees realizarlo, y puedas adoptar esta forma de construir formularios para que tengas un proceso de desarrollo óptimo y eficiente.
Avatar img
Esteban Aristizábal
Software Developer @ Kushki
noviembre 16, 2020