Cómo crees que el producto que estás creando está resolviendo sus problemas.
- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Principales usuarios del producto
- 4. Objetivos de usuarios en relación con el producto
- 5. Solucion de problemas del usuario con el producto
- 6. Consideraciones generales
- 7. Criterios de aceptación mínimos del proyecto
- 8. Consideraciones técnicas
- 9. Objetivos de aprendizaje
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.
En este proyecto se realizó una aplicación web que le permite a un usuario validar el número de una tarjeta de crédito. Además, se implementó funcionalidad para ocultar todos los dígitos de una tarjeta menos los últimos cuatro.
La temática que se eligió fue la validación de una tarjeta de crédito para el pago de servicios de una página llamada "DoggyCare" en la cual se dan distintos servicios como paseo de mascotas, cuidado de ellas (hotel o guardería), venta de productos para mascota, consulta veterinaria online, etc.
Uno de los pasos para el pago de servicios es la validación del número de la tarjeta de crédito.
- Trabajar con base en 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)
Clientes de la marca DoogyCare🐕©
Realizar uno de los pasos (validar su tarjeta de crédito) requeridos para llenar la información de pago y con ello pagar por los distintos servicios que ofrece la marca:
- Guardería canina
- Hospedaje canino
- Visitas en casa
- Paseo canino
- Tienda de productos para mascotas
- Consulta veterinaria online
Corroborar si el número de tarjeta de crédito proporcionado es válido, para continuar con el pago de los servicios solicitados para su mascota.
- Este proyecto se resolvío de manera individual.
- El rango de tiempo para completarlo fue de 2 sprints (semanas).
- Es el primer proyecto desarrollado en el bootcamp de Laboratoria.
Estos son los requisitos que debía cumplir el proyecto, para asegurar que cubriera los objetivos principales.
1. Una interfaz que debe permitir a la usuaria:
- Insertar un numero (texto) para validar. Que sólo acepte caracteres numéricos (dígitos) en la tarjeta a validar [0-9].
- Ver si la tarjeta es válida o no.
- Ocultar todos los dígitos del número de tarjeta, excepto los últimos 4 caracteres.
- No 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 del proyecto subido al repositorio 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 con la definición del producto.
La lógica del proyecto debe estar implementada completamente en JavaScript. En este proyecto NO está permitido usar librerías o frameworks, solo JavaScript puro también conocido como Vanilla JavaScript.
Para comenzar este proyecto se obtuvo un boilerplate con tests (pruebas).
Los tests unitarios debían cubrir un mínimo del 70% de statements, functions
y lines, y un mínimo del 50% de branches. El boilerplate ya contenía el
setup y configuración necesaria para ejecutar los tests (pruebas) así como code
coverage para ver el nivel de cobertura de los tests usando el comando npm test.
El boilerplate proporcionado contenía 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: explicación del uso de la aplicación web, introducción a ésta, funcionalidad y decisiones de diseño. -
src/index.html: punto de entrada a la aplicación. Este archivo contiene el markup (HTML) e incluir el CSS y JavaScript necesario. -
src/style.css: este archivo contiene las reglas de estilo. -
src/validator.js: aquí se implementa el objetovalidator, el cual ya está exportado en el boilerplate. Este objeto (validator) contiene dos métodos:-
validator.isValid(creditCardNumber):creditCardNumberes unstringcon el número de tarjeta que se va a verificar. Esta función retorna 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 retorna unstringdonde todos, menos los últimos cuatro caracteres son reemplazados por un numeral (#) o 🐱. Esta función siempre mantiene 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: aquí se escuchan eventos del DOM, se invocavalidator.isValid()yvalidator.maskify()según es necesario y actualiza el resultado en la UI (interfaz de usuario). -
test/validator.spec.js: este archivo contiene tests de ejemplo y acá se implementan 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.
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
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual