- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Consideraciones generales
- 4. Hito: Criterios de aceptación mínimos del proyecto
- 5. Hito Opcional: Mostrar la franquicia de tarjeta
- 6. Consideraciones técnicas
- 7. Objetivos de aprendizaje
El algoritmo de Luhn, también llamado algoritmo de módulo 10, es un método de suma de verificación que 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.
En este proyecto consistió en construir una aplicación web que permita a un usuario validar el número de una tarjeta de crédito y, también, implementar una funcionalidad para ocultar todos los dígitos de una tarjeta menos los últimos cuatro dígitos.
La temática del proyecto es sobre el registro de un usuario en una aplicación de banco (Boraban), el cual requiere ingresar los datos de la tarjeta de crédito y nombre.
El diseño de la aplicación es bastante sencillo.
Esta imagen fue una de las primeras del prototipo.
Sigue la estructura de encabezado, cuerpo (donde va la imagen de la tarjeta y las secciones de 'nombre' y 'número de tarjeta'). En este caso, la app del banco Boraban tiene como inicio el registro del número de tarjeta y el nombre del usuario.
- Trabajar en base a un boilerplate, la estructura básica de un proyecto en distintas carpetas (a través modulos 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)
1. Una interfaz que debe permitir a la usuaria:
- Insertar un numero (texto) que quieres validar. Usa 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 exepción de los últimos 4 caracteres.
- No debes poder ingresar un campo vacío.
2. Pruebas unitarias de los métodos.
Los metódos de validator (isValid y maskify) deben tener cobertura con
pruebas unitarias.
3. Código de tu proyecto subido a tu repo e interfaz "desplegada".
El código final debe estar subido en un repositorio en GitHub. La interfaz o
pagina web, debe ser "desplegada" (accesible públicamente online) usando
GitHub Pages.
4. Un README que contiene una definición del producto.
En el README cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso
para definir el producto final a nivel de experiencia y de interfaz.
Estas preguntas sirven como guía:
- Quiénes son los principales usuarios de producto.
- Cuáles son los objetivos de estos usuarios en relación con tu producto.
- Cómo crees que el producto que estás creando está resolviendo sus problemas.
Con estos requisitos cumplidos puedes considerar agendar un Project Feedback con unx coach.
El boilerplate que les damos contiene esta estructura:
./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│ ├── validator.js
│ ├── index.html
│ ├── index.js
│ └── style.css
└── test
├── .eslintrc
└── validator.spec.js
-
README.md: debe explicar la información necesaria para el uso de tu 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 tu aplicación. Este archivo debe contener tu markup (HTML) e incluir el CSS y JavaScript necesario. -
src/style.css: este archivo debe contener las reglas de estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el uso de frameworks de CSS (Bootstrap, Materialize, etc). -
src/validator.js: acá debes implementar el objetovalidator, el cual ya está exportado en el boilerplate. Este objeto (validator) debe contener dos métodos:-
validator.isValid(creditCardNumber):creditCardNumberes unstringcon el número de tarjeta que se va a verificar. Esta función debe retornar unbooleandependiendo si es válida de acuerdo al algoritmo de Luhn. -
validator.maskify(creditCardNumber):creditCardNumberes unstringcon el número de tarjeta y esta función debe retornar unstringdonde todos menos los últimos cuatro caracteres sean reemplazados por un numeral (#) o 🐱. Esta función deberá siempre mantener los últimos cuatro caracteres intactos, aún cuando elstringsea de menor longitud.Ejemplo de uso
maskify('4556364607935616') === '############5616' maskify( '64607935616') === '#######5616' maskify( '1') === '1' maskify( '') === ''
-
-
src/index.js: acá debes escuchar eventos del DOM, invocarvalidator.isValid()yvalidator.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 y acá tendrás que implementar los tests paravalidator.isValid()yvalidator.maskify().
El boilerplate incluye tareas que ejecutan eslint y
htmlhint para verificar el HTML y
JavaScript con respecto a una guías de estilos. Ambas tareas se ejecutan
automáticamente antes de ejecutar las pruebas (tests) cuando usamos el comando
npm run test. En el caso de JavaScript estamos usando un archivo de
configuración de eslint que se llama .eslintrc que contiene un mínimo de
información sobre el parser que usar (qué version de JavaScript/ECMAScript), el
entorno (browser en este caso) y las reglas recomendadas ("eslint:recommended").
En cuanto a reglas/guías de estilo en sí,
usaremos las recomendaciones por defecto de tanto eslint como htmlhint.
Hacer que los sitios estén publicados (o desplegados) para que usuarias de la web puedan acceder a él es algo común en proyectos de desarrollo de software.
En este proyecto, utilizaremos Github Pages para desplegar nuestro sitio web.
El comando npm run deploy puede ayudarte con esta tarea y también puedes
consultar su documentación oficial.
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Tipos de datos primitivos
-
Strings (cadenas de caracteres)
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Pruebas unitarias (unit tests)
-
Módulos de ECMAScript (ES Modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Git: Instalación y configuración
-
Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
-
GitHub: Creación de cuenta y repos, configuración de llaves SSH
-
GitHub: Despliegue con GitHub Pages