Skip to content

GloVillagran/DEV004-card-validation

BranchesTags
 
 

Repository files navigation

Tarjeta de crédito válida

Índice

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.

gráfica de algoritmo de Luhn

No te quedes demasiado tiempo pensando en el algoritmo, lo vas a utilizar para completar el proyecto pero los objetivos de aprendizaje no tratan sobre el algoritmo en sí mismo.

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

Como continuación del proyecto de preadmisión, volverás a trabajar sobre fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS.

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.

2. Objetivos de aprendizaje generales

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.

HTML

CSS

Web APIs

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descriptivos (Nomenclatura y Semántica)

Control de Versiones (Git y GitHub)

  • 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

    Links

Centrado en el usuario

  • Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

  • Crear prototipos de alta fidelidad que incluyan interacciones

  • Seguir los principios básicos de diseño visual

3. Consideraciones generales

  • Este proyecto se debe trajar de manera individual.
  • Tiempo estimado para completar las 2 partes: 1-3 sprints (semanas).
  • Tiempo estimado para completar esta 2da parte: no más de 2 sprints (semanas). 👀

3.1 Recomendaciones

  • No te sientas culpable por no saber. SI estás acá es porque quieres aprender, si ya supieras programar estarías trabajando.
  • Enfócate en aprender y no solamente en "completar" el proyecto, "completarlo" es un medio para aprender.
  • Te sugerimos que no intentes saberlo todo antes de empezar a codear.
  • Intenta hacer ciclos cortos (horas, no días) de leer/ver videos y probar inmediatamente. Intenta poner a prueba (codear) lo que crees que has entendido al leer o ver algo.

4. Hito 1: Criterios de aceptación mínimos del proyecto

Estos son los requisitos que debe cumplir tu trabajo para que consideremos que has completado lo mínimamemnte indispensable para esta etapa de tu aprendizaje.

1. La interfaz de tu aplicación debe:

  • Permitir insertar el número de la tarjeta que se quiere validar (texto) en un campo de texto vacío.
  • Evitar que puedan escribir caracteres que no sean numéricos (dígitos 0-9).
  • Impedir que se intente validar si es que el campo está vacío (no se ha escrito nada).
  • Comunicar a la usuaria si se trata una taerjeta válida o no.
  • Ocultar todos los dígitos del número de tarjeta con exepción de los últimos 4 caracteres.

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 pedir tu sesión de Project Feedback con unx coach.

5. Hito Opcional: Mostrar la franquicia de tarjeta

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 este 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, debes hacer las respectivas pruebas unitarias.

6. Consideraciones técnicas

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 tendrás que hacer 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 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

Descripción de scripts / archivos

  • 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 objeto validator, el cual ya está exportado en el boilerplate. Este objeto (validator) debe contener dos métodos:

    • validator.isValid(creditCardNumber): creditCardNumber es un string con el número de tarjeta que se va a verificar. Esta función debe retornar un boolean dependiendo si es válida de acuerdo al algoritmo de Luhn.

    • validator.maskify(creditCardNumber): creditCardNumber es un string con el número de tarjeta y esta función debe retornar un string 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 el string sea 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, invocar validator.isValid() y validator.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 para validator.isValid() y validator.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.

Desplegar tu aplicación (Deploy)

Hacer que los sitios estén publicados (o desplegados) para que las 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. Puedes consultar su documentación oficial.

7. Objetivos de aprendizaje especçíficos

ℹ️ Esta sección será auomáticamente generada en el idioma pertinente, a partir de los objetivos de aprendizaje declarados en project.yml, al crear el repo del proyecto para un cohort en particular usando ./scripts/create-cohort-project.js.

Acá puedes ver una lista de todos los objetivos de aprendizaje que contempla nuestra currícula.

8. Pistas, tips y lecturas complementarias

Prepara tu PC para trabajar

Antes de comenzar instala lo siguiente:

  1. Node.js
  2. git Si estas en Linux es muy probable que ya este instalado 👀. Para conocer más de git visita este enlace
  3. Un editor de código, te sugerimos Code

Después en GitHub:

  1. Crear una cuenta. Conoce más de GitHub en este link
  2. Realiza un fork de este proyecto
  3. Configura tu SSH Key en GitHub. Puedes revisar este video o artículo

Luego en una shell ejecuta lo siguiente. Si estas en Windows puedes usar Git Bash:

  1. Clona el fork en tu PC
  2. Ubica la shell en el proyecto que clonaste
  3. Instala las dependencias del proyecto con 📦 npm install
  4. Para arrancar el servidor web npm start y dirígete a http://localhost:3000 en tu navegador.
  5. A codear se ha dicho! 🚀

Recursos y temas relacionados

Control de versiones y trabajo colaborativo con Git y GitHub:

Playlist de control de versiones y trabajo colaborativo](https://www.youtube.com/playlist?list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV)

Desarrollo Front-end:

Organización del Trabajo:

9. Para pedir tu sesión de Project Feedback

Asegúrate de que tu trabajo cumple con los criterios de aceptación mínimos:

  • Tiene una interfaz que permite a la usuaria saber si la tarjeta es valida.
  • Seoculta el número de tarjeta esxcepto los 4 últimos digitos.
  • El proyecto será entregado incluyendo pruebas unitarias de los métodos de validator (isValid y maskify).
  • 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.

Debes hacer un ejercicio de autoevaluación de objetivos de aprendizaje específicos desde tu dashboard de estudiante.

Debes hacer una autoevaluación de tus life skills también desde tu dashboard de estudiante.

Si no has completado todo lo anterior, no consideramos que estás lista para tu sesión de Project Feedback.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 72.9%
  • HTML 14.7%
  • CSS 12.4%