Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Laboratoria/BOG001-card-validation
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: lalopez13/BOG001-card-validation
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Able to merge. These branches can be automatically merged.
2 contributors
Loading
278 changes: 24 additions & 254 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,37 @@
# Tarjeta de crédito válida
# FUNDACION CAGUANA
<img src="https://github.com/lalopez13/BOG001-card-validation/blob/L-UPDATE/src/IMG/LOGOFUNBLACK.png" alt="logo" width="500" />

## Índice
La elección del producto final, es resultado de intereses comunes y de la fuerte necesidad de hacer un proyecto con propósito, enfocado siempre desde nuestro rol como desarrolladoras a ofrecer soluciones mediante propuestas tecnologicas que funcionen como un puente entre todos los individuos

* [1. Preámbulo](#1-preámbulo)
* [2. Resumen del proyecto](#2-resumen-del-proyecto)
* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje)
* [4. Consideraciones generales](#4-consideraciones-generales)
* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto)
* [6. Pistas, tips y lecturas complementarias](#6-pistas-tips-y-lecturas-complementarias)
## INVESTIGACIÓN UX 📌

***
### Quienes son los principales usuarios del producto
* Los usuarios a quienes se dirige esta propuesta son los ciudadanos (excluyendo a los campesinos,quienes son los beneficiarios) que conformen la población productiva del país y que a través de donaciones se cumpla el objetivo de la fundación.

## 1. Preámbulo
### Cuáles son los objetivos de estos usuarios en relacion con tu producto

El [algoritmo de Luhn](https://es.wikipedia.org/wiki/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.
* El objetivo principal es social ya que gracias a las donaciones de los usuarios el agro colombiano logra tener un impulso económico que beneficia al país, económica, socialmente y más importante en seguridad alimentaria, ya que al trabajar por el impulso de agro en un país agricultor como Colombia se garantiza un calidad de vida mejor para la población, además del objetivo de accesibilidad a la página, pensada y creada para ser de fácil uso, adicionalmente de educar a las personas, implanta un sentimiento colaborativo que ayude al desarrollo de Colombia.

Pasos del algoritmo:
- 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.
### Como crees que el producto que estas creando esta resolviendo los problemas

## 2. Resumen del proyecto
* Las tecnologías de la comunicación actualmente representa la existencia de problemas y soluciones en un mundo donde la tecnología tiene un papel protagónico, es por esto que por medio de esta página se expone un problema interno que es el abandono, el desperdicio y el
desinterés de las zonas rurales que son fundamentales para el crecimiento de Colombia, por esto el poder de la visibilidad que le otorga nuestra página, concebida para la inclusión de toda la población debido que la desigualdad engloba la tecnología y esta problemática puede solucionar brechas y construir un país solidario que comprenda todas las realidades y contextos que Colombia presenta, coadyuvando mediante donaciones.

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.
### PROTOTIPOS 📋

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.
* Primer sketch del proyecto a baja fidelidad hecho en lápiz y papel.
<img src="https://github.com/lalopez13/BOG001-card-validation/blob/L-UPDATE/src/IMG/prototipo.jpg" alt="First sketches of the project" width="500" />

## 3. Objetivos de aprendizaje
* Primer sketch digital
<img src="https://github.com/lalopez13/BOG001-card-validation/blob/L-UPDATE/src/IMG/protoipo-2.gif" alt="Second sketch of the project" width="500" />


* Segundo sketch digital
<img src="https://github.com/lalopez13/BOG001-card-validation/blob/L-UPDATE/src/IMG/prototipo-3.gif" alt="Second sketch of the project" width="500" />

Se hicieron ajustes de acuerdo al feedback, donde parte del diseño cambió durante el desarrollo de la maquetación del HTML y los estilos CSS, para que cada elemento se acoplara y lograr que la parte visual de la página fuera lo más cercano al prototipo.

### Objetivos de aprendizaje 🚀

Trabajando en parejas aprenderán a construir una aplicación web que interactuará
con lx usuarix final a través del navegador, utilizando HTML, CSS y JavaScript
@@ -86,228 +81,3 @@ Reflexiona y luego marca los objetivos que has llegado a **entender** y
* [ ] Organizar y dividir el código en módulos (Modularización).
* [ ] Uso de identificadores descriptivos (Nomenclatura | Semántica).
* [ ] Uso de linter para seguir buenas prácticas (ESLINT).

## 4. Consideraciones generales

* El equipo de coaches te dará un tiempo sugerido e indicaciones sobre si trabajar
sola o en equipo. 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.

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

Usa solo caracteres numéricos (dígitos) en la tarjeta a validar [0-9].

### Definición del producto

En el `README.md`, 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.

* 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.

### Interfaz de usuario (UI)

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.

### 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 alguna herramienta para diseño de prototipos
([Balsamiq](https://balsamiq.com/), [Figma](https://www.figma.com/),
[Google Slides](https://www.google.com/intl/es/slides/about/), etc.)
Estos puntos los presentarás en el `README.md`.

### Scripts / Archivos

#### General

##### `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:
1. Explicar quiénes son los usuarios y los objetivos en relación con el
producto.
2. Explicar cómo el producto soluciona los problemas/necesidades de dichos
usuarios.
3. Luego colocarás la foto de tu primer prototipo en papel.
4. Agregar un resumen del feedback recibido indicando las mejoras a realizar.
5. Imagen del prototipo final.

#### Visualmente (HTML y CSS)

Deberás maquetar de forma exacta el prototipo final que hiciste en la herramienta
de diseño de prototipos que escogiste utilizando HTML y CSS. 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, las cuales si deseas puedes borrar y empezar
de cero:

* `<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 CSS
(Bootstrap, materialize, etc).

#### Funcionalmente (JavaScript - pruebas unitarias)

* 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:

##### `src/validator.js`

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 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](https://es.wikipedia.org/wiki/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

```js
maskify('4556364607935616') === '############5616'
maskify( '64607935616') === '#######5616'
maskify( '1') === '1'
maskify( '') === ''
```

##### `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 las funciones `isValid` y `maskify`
según sea necesario para actualizar el resultado en la pantalla (UI).

##### `test/validator.spec.js`

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](https://jestjs.io/es-ES/).
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 :pencil: editor de texto en
condiciones, algo como [Atom](https://atom.io/) o
[Code](https://code.visualstudio.com/).
2. Para ejecutar los comandos a continuación necesitarás una :shell:
[UNIX Shell](https://github.com/Laboratoria/bootcamp/tree/master/topics/shell),
que es un programita que interpreta líneas de comando (command-line
interpreter) así como tener [git](https://github.com/Laboratoria/bootcamp/tree/master/topics/scm/01-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](https://cmder.net/)
que incluye [Git bash](https://git-scm.com/download/win) y si tienes Windows 10
o superior puedes usar [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/install-win10).
3. Una de las integrantes del equipo debe realizar un :fork_and_knife:
[fork](https://help.github.com/articles/fork-a-repo/) 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](https://gist.github.com/BCasal/026e4c7f5c71418485c1) un `remote`
hacia el mismo.
4. :arrow_down: [Clona](https://help.github.com/articles/cloning-a-repository/)
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](https://nodejs.org/) (que incluye [npm](https://docs.npmjs.com/)).
6. Si todo ha ido bien, deberías poder ejecutar las :traffic_light:
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! :rocket:

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

[![tips credit card](https://img.youtube.com/vi/f0zL6Ot9y_w/0.jpg)](https://www.youtube.com/watch?v=f0zL6Ot9y_w)

[Link](https://www.youtube.com/watch?v=f0zL6Ot9y_w)

Terminal y shell de UNIX:

[![Playlist de Terminal y shell de UNIX](https://img.youtube.com/vi/GB35Eyb-J4c/0.jpg)](https://www.youtube.com/playlist?list=PLiAEe0-R7u8nGH5TEHfSTeDNIvjZFe_Yd)

[Link](https://www.youtube.com/playlist?list=PLiAEe0-R7u8nGH5TEHfSTeDNIvjZFe_Yd)

Control de versiones y trabajo colaborativo con Git y GitHub:

[![Playlist de control de versiones y trabajo colaborativo](https://img.youtube.com/vi/F1EoBbvhaqU/0.jpg)](https://www.youtube.com/playlist?list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV)

[Link](https://www.youtube.com/playlist?list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV)

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](https://docs.npmjs.com/)

Organización del Trabajo:

* [Metodologías Ágiles](https://www.youtube.com/watch?v=v3fLx7VHxGM)
* [Scrum en menos de 2 minutos](https://www.youtube.com/watch?v=TRcReyRYIMg)
* [Scrum en Detalle](https://www.youtube.com/watch?v=nOlwF3HRrAY&t=297s). 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](http://www.quobit.mx/asi-funciona-el-algoritmo-de-luhn-para-generar-numeros-de-tarjetas-de-credito.html).
Loading