- 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
- 8. Pistas, tips y lecturas complementarias
- 9. Para considerar Project Feedback
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.
Proyecto en la que se construye una aplicación web que le permite a un usuario validar el número de una tarjeta de crédito. Además, se implementa funcionalidad para ocultar todos los dígitos de una tarjeta menos los últimos cuatro.
Temática libre, en realidad la podemos aplicar en cualquier situación de la vida real, en dónde se va a validar una tarjeta de crédito y pensar en cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, ¿marca?) etc.
Utilizando fundamentos de JavaScript, conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS.
- 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)
- Este proyecto se resuelve de manera individual.
- El rango de tiempo estimado para completar el proyecto es de 1 a 3 Sprints.
- En el camino las dudas seran resueltas con investigación y comprensión del problema.
Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo cubra los objetivos principales.
1. Una interfaz que debe permitir al usuario:
- Insertar un numero (texto) a validar. 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.
x2wdfvb2b qz
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 es subido a mi 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. Este proyecto fue diseñado pensando en aquellas personas emprededoras en las que van formando su negocio OnLine y quieren crecer dentro de las redes sociales, creando su propia pagina web de sus productos y generando otra opción de compra y venta con el usuario facilitando otro método de pago.
-
Usuario: Pastelería Desirée "Un pastel un deseo " Diseño de pasteles personalizados de fondant para ese momento inolbidable.
-
Objetivo: Lograr el mayor alcance dentro del mundo del internet y redes sociales, mostrando el trabajo realizado a los consumidores y así aumentar las ganancias con otra forma de pago.
-
Objetivo del usuario en relación con el producto: Crear dentro de una página web, un formulario para la validación de una tarjeta de pago.
-
El producto resuelve el problema: Mediante la creación de un formulario en el que se registran los datos de una tarjeta para su validación y poder de manera efectiva procesar el pago.
Las partes opcionales tienen como intención permitirte profundizar un poco más sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, decide sabiamente si quieres invertir el tiempo en profundizar/ perfeccionar o aprender cosas nuevas en el siguiente proyecto.
En hito 2 puedes además de validar si el número de la tarjeta es válida, mostrar la franquicia de la tarjeta (ej: Visa, MasterCard, etc) usando estas reglas de validación. Si escribes un nuevo método para eso, hay que hacer pruebas unitarias.
La lógica del proyecto está 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 hace un fork y clonar este repositorio que contiene un boilerplate con tests (pruebas). Un boilerplate es la estructura basica de un proyecto que sirve como un punto de partida con archivos inicial y configuración basica de dependencias y tests.
Los tests unitarios deben cubrir un mínimo del 70% de statements, functions
y lines, y un mínimo del 50% de branches. El boilerplate ya contiene 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 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: 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 se tomó. -
src/index.html: Punto de entrada a la aplicación. Contiene markup (HTML) e incluye CSS y JavaScript necesario. -
src/style.css: Este archivo tiene las reglas de estilo. -
src/validator.js: Se implementa el objetovalidator, el cual ya está exportado en el boilerplate. Este objeto (validator) contiene dos métodos:-
validator.isValid(creditCardNumber):creditCardNumber, 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: En este apartado se escucha eventos del DOM, y se invocavalidator.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 se usa 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í,
se usa 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.
Con el comando npm run deploy para realizar esta tarea, para consultar su documentación oficial.
Al realizar la 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
- Asegúrarse de tener un 📝 editor de texto en condiciones, algo como VS Code.
- Para ejecutar los comandos a continuación necesitarás una 🐚
UNIX Shell,
que es un programita que interpreta líneas de comando (command-line
interpreter) así como tener git
instalado. Si usas un sistema operativo "UNIX-like", como GNU/Linux o MacOS,
ya tienes una shell (terminal) instalada por defecto (y probablemente
gittambién). Si usas Windows puedes usar la versión completa de Cmder que incluye Git bash. - Tus coaches te compartirán un link a un repo y te darán acceso de lectura. Debes realizar un 🍴 fork del repo.
- ⬇️ Clona tu fork a tu computadora (copia local).
- 📦 Instala las dependencias del proyecto con el comando
npm install. Esto asume que has instalado Node.js (que incluye npm). - Si todo ha ido bien, deberías poder ejecutar las 🚥
pruebas unitarias (unit tests) con el comando
npm test. - Para ver la interfaz de tu programa en el navegador, usa el comando
npm startpara arrancar el servidor web y dirígete ahttp://localhost:5000en tu navegador. - A codear se ha dicho! 🚀
Súmate al canal de Slack #project-card-validation
A continuación un video de Michelle que te lleva a través del algoritmo de Luhn y un par de cosas más que debes saber para resolver este proyecto. ¡Escúchala con detenimiento y sigue sus consejos! :)
Terminal y shell de UNIX:
Control de versiones y trabajo colaborativo con Git y GitHub:
Desarrollo Front-end:
- Aprende más sobre strings, arreglos, iterar arreglos, objetos y como definir métodos
Organización del Trabajo:
- Metodologías Ágiles
- Scrum en menos de 2 minutos
- Scrum en Detalle. No esperamos que hagas todo eso desde este proyecto. Iremos profundizando poco a poco a lo largo del -bootcamp.
- Blog: cómo funciona el algoritmo de Luhn.
En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback:
- Tiene una interfaz que permite a la usuaria saber si la tarjeta es valido y ocultar el numero hasta las 4 ultimos digitos.
- El proyecto será entregado incluyendo pruebas unitarios de los métodos de
validator(isValidymaskify). - El proyecto será entregado libre de errores de
eslint(warnings son ok). - El proyecto será entregado subiendo tu código a GitHub.
- La interfaz será "desplegada" usando GitHub Pages.
- El README contiene una definición del producto.