Skip to content

Instantly share code, notes, and snippets.

@unjust
Last active October 27, 2022 18:30
READMES card validation

Cartão de Crédito Válido

Índice


1. Introdução

O algoritmo de Luhn, também chamado de módulo 10, é um método de soma de verificação, usado para validar números de identificação, como o IMEI de telefones celulares, cartões de crédito etc.

Esse algoritmo é simples. Obtemos o inverso do número a ser verificado (que contém apenas dígitos [0-9]); todos os números que ocupam uma posição par devem ser multiplicados por dois; se esse número for maior ou igual a 10, devemos adicionar os dígitos do resultado; o número a verificar será válido se a soma de seus dígitos finais for um múltiplo de 10.

gráfico do algoritmo de Luhn

2. Resumo do projeto

Neste projeto, você precisará criar um aplicativo da Web que permita ao usuário validar o número de um cartão de crédito. Além disso, você precisará implementar a funcionalidade para ocultar todos os dígitos de um cartão, exceto os quatro últimos.

O tema é livre. Você deve pensar em quais situações da vida real um cartão de crédito precisaria ser validado e em como deveria ser a experiência do usuário (telas, explicações, mensagens, cores, marca?) etc.

Como continuação do projeto de pré-admissão, você retrabalhará os fundamentos do JavaScript, incluindo conceitos como variáveis, condicionais e funções, bem como eventos e manipulação básica de DOM, fundamentos HTML e CSS. Ao desenvolver este projeto, você também se familiarizará com novos conceitos.

Os objetivos gerais deste projeto são os seguintes

  • Trabalhar com base em um boilerplate, a estrutura básica de um projeto em diferentes pastas (através de módulos em JS).
  • Conhecer as ferramentas de manutenção e melhoria do código (linters e testes unitários).
  • Aprenda sobre objetos, estruturas, métodos e iteração (loops) em JavaScript
  • Implementar controle de versão com git (e a plataforma github)

3. Considerações gerais

  • Resolvemos este projeto individualmente. Recomendamos uma duração de 1-3 sprints.
  • Concentre-se em aprender e não apenas "concluir" o projeto.
  • Sugerimos que você não tente saber tudo antes de começar a codificar. Não se preocupe muito agora com o que você ainda não entende. Você vai aprender.

4. Marco: Critérios de Aceitação Mínimos do Projeto

Esses são os requisitos que seu projeto deve atender para garantir que seu trabalho atenda aos objetivos principais.

1. Uma interface que deve permitir ao usuário:

  • Inserir o número que desejamos validar. Use apenas caracteres numéricos (dígitos) no cartão para validar [0-9].
  • Constatar se o resultado é válido ou não.
  • Ocultar todos os dígitos do número do cartão, excetuando os últimos 4 caracteres.
  • Não deve poder inserir um campo vazio.

2. Testes unitários dos métodos. Os métodos validator (isValid e maskify) devem ser cobertos por testes unitários.

3. Código do seu projeto enviado para seu repositório e interface "implantada". O código final deve estar um repositório no GitHub. A interface, ou página da web, deve ser "implantada" usando o GitHub Pages.

4. Um README contendo uma definição de produto. No README, conte-nos como você pensou sobre os usuários e qual foi o seu processo para definir o produto final em nível de experiência e interface. Estas perguntas servem de guia:

  • Quem são os principais usuários do produto
  • Quais são os objetivos desses usuários em relação ao seu produto
  • Como você acha que o produto que você está criando está resolvendo seus problemas

Com esses requisitos atendidos, você pode agendar um feedback do projeto com um coach.

5. Marco Opcional: Mostrar a franquia do cartão

As partes opcionais permitem que você se aprofunde um pouco mais nos objetivos de aprendizagem do projeto. Tudo na vida tem prós e contras, decida sabiamente se você quiser gastar o tempo aprofundando/refinando ou aprendendo coisas novas no próximo projeto.

No marco opcional você também pode validar se o número do cartão é válido, mostre a franquia do cartão (por exemplo, Visa, MasterCard, etc) usando estas regras de validação. Se você escrever um novo método para isso, terá que fazer testes de unidade.

6. Considerações técnicas

A lógica do projeto deve estar implementada inteiramente em JavaScript. Nesse projeto NÃO está permitido usar bibliotecas ou frameworks, só vanilla JavaScript.

Para iniciar este projeto você terá que fazer um fork e clone desse repositório, que contém um boilerplate com testes. Um boilerplate é a estrutura básica de um projeto que serve como ponto de partida com arquivos iniciais e configuração básica de dependências e testes.

Os testes unitários devem cobrir no mínimo de 70% dos statements, functions e lines, e um mínimo de 50% de branches. O boilerplate já contem o setup e configurações necessárias para executar os testes assim como code coverage para ver o nível de cobertura dos testes usando o comando npm test.

O boilerplate que fornecemos contém esta estrutura:

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── validator.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── validator.spec.js

Descrição de scripts/arquivos

  • README.md: deve explicar como "deployar", instalar e executar a aplicação, assim como uma introdução a aplicação, suas funcionalidades e as decisões que foram tomadas.

  • src/index.html: aqui será o ponto de entrada da sua aplicação. Este arquivo deve conter a marcação HTML e chamar o CSS e JavaScript necessários.

  • src/validator.js: aqui você deve implementar o objeto validator, o qual já está exportado no boilerplate. Este objeto (validator) deve conter dois métodos:

    • validator.isValid(creditCardNumber): creditCardNumber é um string com o número do cartão a ser verificado. Esta função deve retornar um boolean, dependendo de sua validade, de acordo com o algoritmo de Luhn.

    • validator.maskify(creditCardNumber): creditCardNumber é um string com o número do cartão e esta função deve retornar um string onde todos, exceto os últimos quatro caracteres, são substituídos por um número (#) ou 🐱. Essa função deve sempre manter os quatro últimos caracteres intactos, mesmo quando o string for mais curto.

      Exemplo de uso:

      maskify('4556364607935616') === '############5616'
      maskify(     '64607935616') ===      '#######5616'
      maskify(               '1') ===                '1'
      maskify(               '')  ===                ''
  • src/index.js: aqui você deve escutar os eventos de DOM, chamar validator.isValid() e validator.maskify().

  • test/validator.spec.js: este arquivo contem alguns testes de exemplo e aqui você deve implementar os testes para validator.isValid() e validator.maskify().

O boilerplate inclui tarefas que executam eslint e htmlhint para verificar o HTML e JavaScript com respeito a uma guia de estilos. Ambas tarefas são executadas automaticamente antes de executar os testes quando usamos o comando npm run test. No caso do JavaScript estamos usando o eslint que está configurado no arquivo .eslintrc que contem o mínimo de informação como versão do JavaScript/ECMAScript, o ambiente (browser nesse caso) e as regras recomendadas ("eslint:recommended"). Nas regras/guias de estilo usaremos das recomendações padrão tanto para o eslint quanto htmlhint.

Deploy

Disponibilizar os projetos e colocá-los "no ar" vai ser parte cotidiana do ciclo de desenvolvimento em produtos de tecnologia.

Para este projeto, utilizaremos o Github Pages para essa finalidade. O comando npm run deploy pode te auxiliar nessa tarefa e você pode também consultar a documentação oficial.

7. Objetivos de aprendizagem

Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.

HTML

CSS

Web APIs

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descritivos (Nomenclatura e Semântica)

Controle de Versões (Git e GitHub)

  • Git: Instalação e configuração

  • Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)

  • GitHub: Criação de contas e repositórios, configuração de chave SSH

  • GitHub: Implantação com GitHub Pages

    Links

Centrado no usuário

  • Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro

Design de produto

  • Criar protótipos para obter feedback e iterar

  • Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)

8. Guias, dicas e leituras complementares

Primeiros passos

  1. Antes de tudo, verifique se você possui um 📝 editor de texto em boa condição, algo como Atom ou Code.
  2. Para executar os comandos abaixo, você precisará de um 🐚 Shell UNIX, que é um pequeno programa que interpreta linhas de comando (command-line interpreter), além de ter o git instalado. Se você usa um sistema operacional do tipo UNIX, como GNU/Linux ou MacOS, já possui um shell (terminal) instalado por padrão (e provavelmente git) também. Se você usa o Windows, pode utilizar a versão completa do Cmder que inclui Git bash e, se tiver o Windows 10 ou superior, pode usar o Windows Subsystem for Linux.
  3. ⬇️ Clone sua fork no seu computador (cópia local).
  4. 📦 Instale as dependências do projeto com o comando npm install. Isso pressupõe que você instalou Node.js (que inclui npm).
  5. Se tudo correu bem, você poderá executar 🚥 testes de unidade (unit tests) com o comando npm test.
  6. Para visualizar a interface do seu programa no navegador, use o comando npm start para iniciar o servidor da web e acesse http://localhost:5000 no seu navegador.
  7. Comece a programar! 🚀

Recursos e tópicos relacionados

Aqui está um vídeo de Michelle que mostra o algoritmo de Luhn (o vídeo está em espanhol, mas pode ser útil) e mais algumas coisas que você deve saber para realizar este projeto. Ouça com atenção e siga os conselhos dela! :)

dicas de cartão de crédito

Link

Desenvolvimento de front-end:

9. Para considerar o feedback do projeto

Em resumo, os critérios mínimos de aceitação do projeto para considerar o Project Feedback:

  • Possui uma interface que permite ao usuário permita ao usuário validar o número de um cartão de crédito e ocultar todos os dígitos de um cartão e ocultar o número até os 4 últimos dígitos.
  • O projeto será entregue incluindo testes unitários dos métodos validator (isValid e maskify).
  • O projeto será entregue livre de erros de eslint (warnings são ok).
  • O código do seu projeto será entregue no GitHub.
  • A interface será "implantada" usando o GitHub Pages.
  • O README contém uma definição de produto.

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

2. Resumen del proyecto

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.

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 nuevos conceptos también.

Los objetivos generales de este proyecto son los siguientes

  • Trabajar en base a un boilerplate, la estructura básica de un proyecto en distintas carpetas (a través modulos en JS).
  • Conocer las herramientas de mantenimiento y mejora del código (linters y pruebas unitarias).
  • Aprender sobre objetos, estructuras, métodos e iteración (bucles) en JavaScript
  • Implementar control de versiones con git (y la plataforma github)

3. Consideraciones generales

  • Este proyecto lo resolvemos de manera individual. Te recomendamos una duracion de 1-3 sprints.
  • Enfócate en aprender y no solamente en "completar" el proyecto.
  • Te sugerimos que no intentes saberlo todo antes de empezar a codear. No te preocupes demasiado ahora por lo que todavía no entiendas. Irás aprendiendo.

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

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:

  • Insertar un numero (texto) que quieres validar. Usa solo caracteres numéricos (dígitos) en la tarjeta a validar [0-9].
  • Ver si el resultado es válido o no.
  • Ocultar todos los dígitos del número de tarjeta a exepción de los últimos 4 caracteres.
  • No debes poder ingresar un campo vacío.

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:

  • 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 agendar un 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 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.

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

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.


Deploy

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.

7. Objetivos de aprendizaje

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

8. Pistas, tips y lecturas complementarias

Prepara tu PC para trabajar

  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 la versión completa de Cmder que incluye Git bash y si tienes Windows 10 o superior puedes usar Windows Subsystem for Linux.
  3. 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.
  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

Súmate al canal de Slack #project-card-validation

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

Link

Terminal y shell de UNIX:

Playlist de Terminal y shell de UNIX

Link

Control de versiones y trabajo colaborativo con Git y GitHub:

Playlist de control de versiones y trabajo colaborativo

Link

Desarrollo Front-end:

Organización del Trabajo:


9. Para considerar Project Feedback

En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback:

  • Tiene una interfaz que permite a la usuaria saber si la tarjeta es valido y ocultar el numero hasta las 4 ultimos digitos.
  • El proyecto será entregado incluyendo pruebas unitarios 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment