El proyecto de generación de tarjeta de crédito válidas, yace en la necesidad del operador de comprobar la autenticidad de la tarjeta, esto ayuda a solucionar muchas dudas que se pueden tener de legitimidad de una determinada compañia de la tarjeta de crédito, tanto para las compañías, paginas donde se realizan diferentes compras online, y más fines personales.
- La población objetivo (principales usuarios), son las personas que desean comprar los cursos de Python, Javascript y Spark.
- El fin es que la compra sea personalizada, de esta manera crear un ambiente de confiabilidad para el cliente.
- La página solo permite realizar la compra de los cursos a los usuarios cuya tarjeta de crédito sea autenticada.
Feedback:
- Añadir placeholders.
- Agregar modal para mostrar si la tarjeta es valida o inválida y eliminar las últimas dos pantallas.
- El detalle de la tarjeta deberia de estar en lamparte izquierda de la pantalla.
** Prototipo con mejoras **
-
Pantalla 1 Se procede a ingresar el nombre del cliente, de esta manera se hace un servicio personalizado.
-
Pantalla 2 Se recibe el nombre del cliente y se le presentan los diferentes cursos que ofertan.
-
Pantalla 3 Se hace el proceso de la compra, mediante el cuál se procede con la validación de la tarjeta, para una compra óptima.
- 1. Preámbulo
- 2. Instrucciones para el uso
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Pistas, tips y lecturas complementarias
La lógica detrás de la validación de la tarjeta de crédito se remonta al hecho estructurado del 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 de es un múltiplo de 10.
La aplicación consta en total de 3 pantallas, la primera solo hace la presentación de la empresa que vende los cursos y en la cual se debe dejar el nombre del cliente, en la segunda pantalla se muestran los cursos ofertados, y en la tercera pantalla, procediendo con la estructura de una compra adecuada, se procede a validar la tarjeta de crédito, y en la pnatalla emergente se observará si la compra fue exitosa o si la tarjeta resulta invalida para la compra, y no se mostrará los ultimos cuatro dígitos.
Construir una aplicación web que interactuará con lx usuarix final a través del navegador, utilizando HTML, CSS y JavaScript como tecnologías.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- Manipulación de strings.
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de bucles (for | for..in | for..of | while)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Declaración correcta de variables (const & let)
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- El proyecto es individual. Recuerda que cada una aprende a diferente ritmo.
- 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.
Usa solo caracteres numéricos (dígitos) 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.
- Ocultar todos los dígitos de su número de tarjeta menos los últimos 4 caracteres.
- No debe poder ingresar un campo vacío.
- La lógica del proyecto debe estar implementada completamente en JavaScript.
- En este proyecto NO está permitido usar librerías o frameworks, sólo JavaScript puro también conocido como 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:
Acá escribirás las funciones necesarias para que el usuario pueda verificar la tarjeta de crédito y ocultar los dígitos de su número de tarjeta. Esta función debe ser pura e independiente del DOM.
Para esto debes implementar el objeto validator
, el cual ya se encuentra
exportado en el boilerplate. Este objeto (validator
) contiene
dos métodos (isValid
y maskify
):
-
validator.isValid(creditCardNumber)
:creditCardNumber
es unstring
con el número de tarjeta que se va a verificar. Esta función debe retornar unboolean
dependiendo si es válida de acuerdo al algoritmo de Luhn. -
validator.maskify(creditCardNumber)
:creditCardNumber
es unstring
con el número de tarjeta y esta función debe retornar unstring
donde 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 elstring
sea de menor longitud.Ejemplo de uso
maskify('4556364607935616') === '############5616' maskify( '64607935616') === '#######5616' maskify( '1') === '1' maskify( '') === ''
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 las funciones isValid
y maskify
según sea necesario para actualizar el resultado en la pantalla (UI).
En este archivo tendrás que completar las pruebas unitarias de las funciones
validator.isValid(creditCardNumber)
y validator.maskify(creditCardNumber)
implementadas en validator.js
utilizando Jest.
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).
- Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o 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
git
también). Si usas Windows puedes usar la versión completa de Cmder que incluye Git bash y si tienes Windows 10 o superior puedes usar Windows Subsystem for Linux. - Una de las integrantes del equipo debe realizar un 🍴
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. La otra integrante del equipo deber hacer un fork del
repositorio de su compañera y
configurar un
remote
hacia el mismo. - ⬇️ 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 start
para arrancar el servidor web y dirígete ahttp://localhost:5000
en tu navegador. - A codear se ha dicho! 🚀
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! :)
También una metodología para empezar a desarrollar tareas con JavaScript:
Terminal y shell de UNIX:
Control de versiones y trabajo colaborativo con Git y GitHub:
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
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.