Aplicación web de validación de Tarjeta de crédito.
El presente proyecto se realizó con la finalidad de recrear una página web que permita a los usuarios realizar compras online de Kits de higiene y protección ante el nuevo Covid-19. A partir de la coyuntura del presente año se ha evidenciado que el uso de mascarillas, alcohol, útiles de aseo, entre otros, es vital para evitar la propagación del virus.
El proyecto se rige bajo el lema "Protégete y protege a los demás" 🌎, dónde se ofrece el envío de productos de higiene y protección a nivel nacional, declaradas por el Estado como vitales para enfrentar esta situación que afecta a la población mundial.
- Primero deberás ingresar aquí 🔜 SafeDelivery
- La página presentará el proceso de compra del producto (en este primer proyecto nos centramos en el proceso de validadción de Tarjeta de crédito)
Primera vista al entrar a la página SafeDelivery
- Deberás completar todos los campos indicados para poder seguir con el proceso.✍
- Cuándo llegues al campo de Tarjeta de crédito, deberás ingresar un número de 16 dígitos. Ejem. 4485715860868875
- El botón de Finalizar Compra te enviará a otra ventana dónde verás el resumen de tus datos ingresados y validarás si son correctos.📝
Segunda vista al entrar a la página SafeDelivery
- Una vez que valides tus datos, eso es todo ¡Gracias por su compra! ⭐️🤝
Para el proceso de validación de Tarjeta de crédito se usó el algoritmo de Luhn, también llamado algoritmo de módulo 10, es un método de suma de verificación, se utiliza para validar números de identificación; tales como el IMEI de los celulares, tarjetas de crédito, etc.
Este algoritmo es simple. Obtenemos la reversa del número a verificar (que solamente contiene dígitos [0-9]); a todos los números que ocupan una posición par se les debe multiplicar por dos, si este número es mayor o igual a 10, debemos sumar los dígitos del resultado; el número a verificar será válido si la suma de sus dígitos finales es un múltiplo de 10.
Te invito a que intentes con números al azar a ver que resulta 🤓
Para el presente proyecto se tuvo como público objetivo a los ciudadanos del país, debido a la alta demanda de productos de higiene y protección durante el presente año y al presenciar el alza deliberada de precios, se pensó en manejar estándares acordes al mercado, teniendo al servicio de delivery como medio seguro para no exponer al usuario a interminables colas.
Se realizaron los primeros pasos en un bosquejo hecho a mano, de cómo sería nuestra página.
PROTOTIPO DE PAPEL
PROTOTIPO BASADO EN EL BOSQUEJO A MANO, USANDO POWER POINT
Como se aprecia en el Prototipo de papel, al inicio del proyecto se realizó 4 ventanas sólo para realizar el proceso de compra🛒. Prototipo que al ser presentado tanto a las couches como integrantes del squad, se redujo a tan sólo 2, para que la experiencia del usuario sea sencilla y no vea el proceso como algo tedioso o que conlleve mucho tiempo a realizar. Incluso se llevo a cabo el autollenado de los nombres con el titular de la tarjeta, dando la opción de editar en caso no sea la persona la propietaria.
Durante el proceso de este primer ejercicio, el proyecto recibió muchas iteraciones hasta llegar a su versión final. Tomándose en cuenta principalmente:
- Escoger colores claros que representen el área de medicina, dando un aspecto amigable y comprometida con la salud de las personas.
- Mensaje de tarjeta válida o inválida apenas el usuario termine de ingresar el número de tarjeta.
- Mensaje de advertencia cuando se digitan más de 16 dígitos o elementos no válidos como signos y letras.
- Hacer el enmascaramiento debajo del input tarjeta (en este caso se eliminó y se decidió mostrar en la siguiente vista resumen de datos)
- Colocar en mayúsculas los inputs de nombres, apenas el usuario digite sus datos.
- Realizar el autollenado del campo titular de la tarjeta a partir de los nombres ingresados, dando la opción de editar en caso no sea la persona la propietaria de la tarjeta.
- Realizar un footer para mostrar mayores detalles del proyecto (ya que no se hizo una página principal)
El presente Diagrama de flujo se realizó teniendo en cuenta los procesos ya mencionados.
DIAGRAMA DE FLUJO
⚡Las tecnologías usadas en el presente proyecto fueron:
HTML
CSS
JavaScript
En el editor de texto Code.
🛠️Las nuevas herramientas usadas que sirvieron de complemento para el presente proyecto fueron:
Consideraciones técnicas
- La lógica del proyecto está implementada completamente en JavaScript.
- En este proyecto NO está permitido usar librerías o frameworks, sólo JavaScript puro también conocido como Vanilla JavaScript.
- No se debe utilizar la pseudo-variable
this.
A continuación presento algunas fuentes que me inspiraron para llevar a cabo el presente proyecto.
