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.
Mientras desarrollas este proyecto, te familiarizarás con estos nuevos conceptos:
modulos
en JS).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 el reverso 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 tendrás que construir una aplicación web que le permita a un usuario validar el número de una tarjeta de crédito. Además, tendrás que implementar funcionalidad para ocultar todos los dígitos de una tarjeta menos los últimos cuatro.
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.
Trabajando en parejas aprenderán a construir una aplicación web que interactuará con la usuaria final a través del navegador, utilizando HTML, CSS y JavaScript como tecnologías.
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 a la usuaria validar un numero
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 y interfaz "desplegada".
El código final debe estar subido en un repositorio en GitHub. La interfaz o pagina web, debe ser "desplegada" 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:
Con estos requisitos cumplidos puedes considerar agendar un Project Feedback con unx coach.
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 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 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
: 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
.
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.
El comando npm run deploy
puede ayudarte con esta tarea y también puedes
consultar su documentación oficial.
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
* [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
[ ] Uso de selectores de CSS
* [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)
[ ] Modelo de caja (box model): borde, margen, padding
* [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)
[ ] Uso de selectores del DOM
* [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
[ ] Manejo de eventos del DOM (listeners, propagación, delegación)
* [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)
[ ] Manipulación dinámica del DOM
* [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)
[ ] Tipos de datos primitivos
* [Valores primitivos - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Data_structures#valores_primitivos)
[ ] Strings (cadenas de caracteres)
* [Strings](https://curriculum.laboratoria.la/es/topics/javascript/06-strings) * [String — Cadena de caracteres - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String)
[ ] Variables (declaración, asignación, ámbito)
* [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)
[ ] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
* [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
[ ] Uso de bucles/ciclos (while, for, for..of)
* [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
[ ] Funciones (params, args, return)
* [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)
[ ] Pruebas unitarias (unit tests)
* [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
[ ] Módulos de ECMAScript (ES Modules)
* [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)
[ ] 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
* [Sitio oficial de GitHub Pages](https://pages.github.com/)
[ ] Crear prototipos de alta fidelidad que incluyan interacciones
[ ] Seguir los principios básicos de diseño visual
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.remote
hacia el mismo.npm install
. Esto
asume que has instalado Node.js (que incluye npm).npm test
.npm start
para arrancar el servidor web y dirígete a
http://localhost:5000
en tu navegador.Súmate al canal de Slack #project-card-validation para conversar y pedir ayuda de proyecto.
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:
Organización del Trabajo:
En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback:
validator
(isValid
y maskify
) eslint
(warnings son ok)