Tarjeta de crédito válida

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Consideraciones generales
• 5. Criterios de aceptación mínimos del proyecto
• 6. Pistas, tips y lecturas complementarias

---

1. Preámbulo

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.

2. Resumen del proyecto

¿Qué tengo que hacer exactamente? En este proyecto validarás los dígitos de una tarjeta de crédito.

La temática es libre. Tú debes pensar en qué situaciones de la vida real se necesitarí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.

3. Objetivos de aprendizaje

El objetivo principal de aprendizaje es adquirir experiencia desarrollando aplicaciones web (WebApp) que interactúen con el usuario a través del navegador y la lógica, utilizando HTML5, CCS3 y JavaScript (ES6) como herramientas.

En este proyecto tendrás que construir una aplicación web que le permita a un usuario validar el número de una tarjeta de crédito.

Para completar el proyecto tendrás que familiarizarte con conceptos como las necesidades del usuario y propuesta de una solución; etiquetas semánticas y formularios en HTML5; modelo de cajas y selectores en CSS3; métodos de selección y eventos del DOM; manipulación de strings, control de flujo y funciones en JS; así como pruebas unitarias en Mocha. Recuerda que parte fundamental es organizar tu tiempo y priorizar tus tareas.

4. Consideraciones generales

• Este proyecto se debe resolver de manera individual.
• El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub pages. Si no sabes lo que es GitHub, no te preocupes, lo aprenderás durante este proyecto.
• Tiempo para completarlo: Toma como referencia 2 semanas. Trabaja durante el primer Sprint (una semana) y al final, trata de fijar un estimado de cuándo lo terminarás.

5. Criterios de aceptación mínimos del proyecto

Usa solo dígitos numéricos en la tarjeta a validar [0-9]. La interfaz debe permitir al usuario:

• Insertar el número que queremos validar.
• Ver el resultado si es válido o no.
• No debe poder ingresar un campo vacío.

Scripts / Archivos

UX (Diseño de experiencia de usuario)

Antes de iniciar a codear, debes entender el problema que quieres solucionar y cómo tu aplicación lo soluciona.

• Trabaja tu primer prototipo con papel y lápiz (blanco y negro).
• Luego valida esta solución con una compañera (pedir feedback).
• Toma lo aprendido al momento de validar tu primer prototipo y desarrolla un nuevo prototipo usando Balsamiq). Estos puntos los presentarás en el README.md.

README.md:

Debe contener lo siguiente:

• Un título con el nombre de tu proyecto.
• Un resumen de 1 o 2 líneas de qué se trata tu proyecto.
• La imagen final de tu proyecto.
• Investigación UX:
  • Explicar quiénes son los usuarios y los objetivos en relación con el producto.
  • Explicar cómo el producto soluciona los problemas/necesidades de dichos usuarios.
  • Luego colocarás la foto de tu primer prototipo en papel.
  • Agregar un resumen del feedback recibido indicando las mejoras a realizar.
  • Imagen del prototipo final en Balsamiq.

Visualmente (HTML5 y CSS3)

Deberás maquetar de forma exacta el prototipo final que hiciste en balsamiq utilizando HTML5 y CSS3. En este momento elegirás los colores, tipo de fuente, etc a usar.

A continuación describimos los archivos que utilizarás:

src/index.html:

En este archivo va el contenido que se mostrará al usuario (esqueleto HTML). Encontrarás 3 etiquetas iniciales:

• <header>: encabezado de tu proyecto.
• <main>: contenido principal de tu proyecto.
• <footer>: pie de página de tu proyecto.

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 CSS3 (Bootstrap, materialize, etc).

Funcionalmente (JavaScript ES6 - pruebas unitarias)

• La lógica del proyecto debe estar implementada completamente en JavaScript (ES6).
• En este proyecto NO está permitido usar librerías o frameworks, sólo vanilla JavaScript.
• No se debe utilizar la pseudo-variable this.

Vas a tener 2 archivos JavaScript separando responsabilidades, a continuación indicamos qué harás en cada archivo:

src/validation.js:

Acá escribirás la función necesaria para que el usuario pueda verificar la tarjeta de crédito. Esta función debe ser pura e independiente del DOM.

Para esto debes implementar el objeto validation, el cual ya se encuentra exportado en el objeto global (window). Este objeto (validation) contiene un método:

• validation.valid(number): number es el número de tarjeta que se va a verificar.

src/index.js:

Acá escribirás todo el código que tenga que ver con la interacción del DOM (seleccionar, actualizar y manipular elementos del DOM y eventos). Es decir, en este archivo deberás invocar a tu función valid según sea necesario para actualizar el resultado en la pantalla(UI).

test/validation.spec.js:

En este archivo tendrás que completar las pruebas unitarias de la función validation.valid(number) implementada en validation.js utilizando Mocha. Tus pruebas unitarias deben dar un 70% en coverage (cobertura), statements (sentencias), functions (funciones) y lines (líneas); y un mínimo del 50% de branches (ramas).

6. Pistas, tips y lecturas complementarias

Primeros pasos

1. Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Code.
2. 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 git también). Si usas Windows puedes usar Git bash, aunque recomendaría que consideres probar 🐧 GNU/Linux.
3. Haz tu propio 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo.
4. ⬇️ Clona tu fork a tu computadora (copia local).
5. 📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
6. Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
7. Para ver la interfaz de tu programa en el navegador, usa el comando npm start para arrancar el servidor web y dirígete a http://localhost:5000 en tu navegador.
8. A codear se ha dicho! 🚀

Recursos y temas relacionados

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! :)

Diseño de experiencia de usuario (User Experience Design):

• Ideación
• Prototipado (sketching)
• Testeo e Iteración

Desarrollo Front-end:

• Valores
• Tipos
• Variables
• Control de flujo
• Tests unitarios
• Documentación de NPM

Herramientas:

• GitHub y GitHub Pages.

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.