Skip to content

Latest commit

 

History

History
235 lines (166 loc) · 8.6 KB

README.md

File metadata and controls

235 lines (166 loc) · 8.6 KB
Raw

Proyecto - Tarjeta de crédito válida

Índice

1. Resumen del Proyecto

Como primer desafío dentro del Bootcamp Laboratoria DEV007, se debe construir una aplicación web, esta debe validar los números de una tarjeta (crédito/debito) bajo el método del Algoritmo de Luhn (https://es.wikipedia.org/wiki/Algoritmo_de_Luhn), también llamado algoritmo de módulo 10.

2. Consideraciones generales

El Algoritmo de Luhn 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.

gráfica de algoritmo de Luhn

En este proyecto los requisitos mínimos son los siguientes:

  • Trabajar en base a un boilerplate, la estructura básica de un proyecto en distintas carpetas (a través módulos en JS).
  • Conocer las herramientas de mantenimiento y mejora del código (linters y pruebas unitarias).
  • Aprender sobre objetos, estructuras, métodos e iteración (bucles) en JavaScript
  • Implementar control de versiones con git (y la plataforma github)

3. Consideraciones específicas

El proyecto tiene los siguientes requisitos, los cuales se deben cumplir para asegurar que la aplicación cubra los objetivos generales.

1. Una interfaz que debe permitir a la usuaria:

  • Insertar un numero (texto) que se quiera validar.
  • Usar solo caracteres numéricos (dígitos) en la tarjeta a validar [0-9].
  • Ver si el resultado es válido o no.
  • Ocultar todos los dígitos del número de tarjeta a excepción de los últimos 4 caracteres.
  • No debe permitir ingresar un campo vacío.

2. Pruebas unitarias de los métodos.

Los métodos de validator (isValid y maskify) deben tener cobertura con pruebas unitarias.

3. El código del proyecto debe ser subido a la repo e interfaz desplegada.

4. Un README que contenga una definición del producto.

4. Consideraciones técnicas

Se entrega al inicio del proyecto un boilerplate, que es la estructura básica de este proyecto y sirve como punto de partida.

El boilerplate entregado contiene la siguiente estructura:

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── validator.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── validator.spec.js

Descripción de scripts / archivos

  • README.md: explica la información necesaria para el uso de la aplicación web, así como una introducción a la aplicación, su funcionalidad y decisiones de diseño que tomaron.
  • src/index.html: este es el punto de entrada a la aplicación. Este archivo contiene el markup (HTML) e incluye el CSS y JavaScript.
  • src/style.css: este archivo contiene las reglas de estilo.
  • src/validator.js: se implementa el objeto validator, el cual debe contener dos métodos:
    • validator.isValid(creditCardNumber): creditCardNumber es un string con el número de tarjeta que se va a verificar. Esta función debe retornar un boolean dependiendo si es válida de acuerdo al algoritmo de Luhn.
    • validator.maskify(creditCardNumber): creditCardNumber es un string con el número de tarjeta y esta función debe retornar un string donde todos menos los últimos cuatro caracteres sean reemplazados por un (#). Esta función deberá siempre mantener los últimos cuatro caracteres intactos, aún cuando el string sea de menor longitud.
  • src/index.js: acá se debe escuchar eventos del DOM, invocar validator.isValid() y validator.maskify() según sea necesario y actualizar el resultado en la UI (interfaz de usuario).
  • test/validator.spec.js: este archivo contiene algunos tests de ejemplo.

El boilerplate incluye tareas que ejecutan eslint y htmlhint para verificar el HTML y JavaScript con respecto a una guías de estilos.

5. Desarrollo del proyecto

1. Pagina validación

  • Una vez realizada la elección de obra a asistir, indicando fecha y ubicaciones, llegara a esta página de validación:

    card

2. Encabezado de página

  • Da bienvenida y nos indica para que sirve la web.

  • Indica método de pago.

  • Invita a ingresar datos solicitados.

  • Solo informativa.

    encabezado

3. Caja ingreso números de tarjeta

  • Insertar números de tarjeta a validar.

  • Solo se pueden ingresar números (no espacios, no letras, no símbolos).

  • Solo puede ingresar dieciséis números (como rango máximo y mínimo).

    numeros

  • Para realizar la validación el campo debe estar completo.

    alldatos

4. Fecha de vencimiento de tarjeta

  • La misma tarjeta a validar entrega una fecha de vencimiento (Valid Thru). Debe ingresar esa fecha (mes y año).

    fecha

  • Solo podrán ingresar fechas desde mayo 2023 a diciembre 2028.

    inicio fin

  • Para realizar la validación el campo debe estar completo.

5. Código de Verificación

  • La parte trasera de su tarjeta entrega un digito de tres números, ese es su código (CVV), el cual debe ingresa en la caja CVV.

  • Solo puede ingresar números.

  • Solo puede ingresar tres números (como rango máximo y mínimo).

  • Para realizar la validación el campo debe estar completo.

    cvv

6. Validación

  • Botón validar ejecuta el algoritmo.

    validar

  • Tendremos dos mensajes disponibles:

    • "Tarjeta " NUMERO DE TARJETA ENMASCARADO" Válida. Muchas gracias por su compra."

      tarjetaok

    • "NUMERO DE TARJETA ENMASCARADO": es el numero ingresado por usted, se entrega con visión solo de últimos cuatro dígitos para mayor seguridad de sus datos.

      enmascarado

    • "Tarjeta No Válida, por favor intente con otra tarjeta u otro medio de pago."

      novalida

7. Validar otra tarjeta

  • Si el mensaje nos indica que la tarjeta no es VALIDA, puede probar con otra tarjeta. Al hacer click en este botón se borran todos los datos ingresados, así podrá ingresar fácilmente los datos de la nueva tarjeta.

    reload

6. Material utilizado

tips credit card

Link