Cartão de Crédito Válido

Índice

• 1. Introdução
• 2. Resumo do projeto
• 3. Objetivos de aprendizagem
• 4. Considerações gerais
• 5. Critérios de aceitação mínimos do projeto
• 6. Hacker edition
• 7. Considerações técnicas
• 8. Guias, dicas e leituras complementares
• 9. Checklist

---

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.

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.

Você aprenderá a criar um aplicativo Web que irá interagir interagir com uma pessoa ao final do desenvolvimento através do navegador, usando HTML, CSS e JavaScript como tecnologias.

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

• Uso de HTML semântico

  Links

  • HTML semántico
  • Semantics in HTML - MDN

CSS

• Uso de seletores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Empregar o modelo de caixa (box model): borda, margem, preenchimento

  Links

  • Modelo de Caixa e Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

Web APIs

• Uso de seletores de DOM

  Links

  • Modificando o DOM
  • Introdução ao DOM - MDN
  • Locating DOM elements using selectors - MDN

• Gerenciamento de eventos de DOM

  Links

  • Introdução a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulação dinâmica de DOM

  Links

  • Introdução ao DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de dados primitivos

  Links

  • Valores Primitivos - MDN

• Strings (cadenas de caracteres)

  Links

  • Strings
  • String - MDN

• Variáveis (declaração, atribuição, escopo)

  Links

  • Valores, tipos de dados e operadores
  • Variáveis

• Uso de condicionais (if-else, switch, operador ternário)

  Links

  • Estruturas condicionais e repetitivas
  • Tomando decisões no seu código — condicionais - MDN

• Uso de laços (for, for..of, while)

  Links

  • Laços (Loops)
  • Laços e iterações - MDN

• Uso de funções (parâmetros, argumentos, valor de retorno)

  Links

  • Funções (controle de fluxo)
  • Funções clásicas
  • Arrow Functions
  • Funções — blocos reutilizáveis de código - MDN

• Testes unitários

  Links

  • Introdução ao Jest - Documentação oficial

• Uso ES modules

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

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

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

  • Site oficial do GitHub Pages

UX (User eXperience)

• Desenhar a aplicação pensando e entendendo o usuário

• Criar protótipos para obter feedback e iterar

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

4. Considerações gerais

• A equipe de mentores te dará um tempo sugerido e indicações sobre trabalhar individualmente ou em equipe. Lembre-se de que cada pessoa aprende em um ritmo diferente.

• O projeto será entregue subindo seu código no GitHub (commit/push) e a interface será implementada usando as páginas do GitHub. Caso desconheça o GitHub, não se preocupe, pois você vai aprender sobre ele ao longo do projeto.

5. Critérios de aceitação mínimos do projeto

Use apenas caracteres numéricos (dígitos) no cartão para validar [0-9].

Definição do produto

No README.md, conte-nos como você pensou sobre os usuários e qual foi seu processo para definir o produto final a nível da experiência e da interface.

• Quem são os principais usuários do produto.
• Quais os objetivos destes usuários em relação a seu produto.
• Como você considera que o produto que está criando resolverá os problemas dos usuários.

Interface do usuário (UI)

A interface deve permitir ao usuário:

• Inserir o número que desejamos validar.
• Constatar se o resultado é válido ou não.
• Ocultar todos os dígitos do número do cartão, exceto os últimos 4 caracteres.
• Não deve poder inserir um campo vazio.

UX (Design da experiência do usuário)

Antes de começar a codificar, você deve entender o problema que deseja resolver e como o aplicativo o resolve.

• Trabalhe seu primeiro protótipo com papel e lápis (preto e branco).
• Em seguida, valide esta solução com uma companheira (peça feedback).
• Use o aprendizado no momento de validar seu primeiro protótipo e desenvolva um novo protótipo empregando alguma ferramenta para design de protótipos (Balsamiq, Figma, Apresentações Google etc.) Esses pontos serão apresentados no README.md.

Scripts / Arquivos

• REAME.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/style.css: este arquivo deve conter as regras de estilo. Queremos que você escreva suas próprias regras. Por isso, NÃO é permitido o uso de frameworks de CSS (Bootstrap, materialize etc).
• src/validator.js: aqui você deve implementar o objeto validador, o qual já está exportado no boilerplate. Este objeto (validador) 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 a string for mais curta.
• src/index.js: aqui, você escreverá todo o código relacionado à interação do DOM (selecionar, atualizar e manipular elementos do DOM e eventos). Nesse arquivo, você precisará chamar as funções validator.isValid e validator.maskify conforme seja necessário para atualizar o resultado na tela (UI).
• test/validator.spec.js: este arquivo contem alguns testes de exemplo e aqui você deve implementar os testes para validator.isValid() e validator.maskify().

---

6. Hacker Edition

As seções chamadas Hacker Edition são opcionais. Se você terminou tudo e ainda sobrou tempo, faça essa parte. Assim você poderá aprofundar e exercitar mais sobre os objetivos de aprendizagem do projeto.

Uma sugestão de funcionalidade Hacker Edition é identificar e mostrar ao usuário o instituição emissora do cartão de crédito (exemplo: Visa, MasterCard, etc). Você pode usar estas regras de validação.

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

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 inclui testes de exemplo, como ponto de partida.

Para começar esse projeto você terá que fazer um fork e clonar este repositório que contém o boilerplate.

O boilerplate contém uma estrutura de arquivos como ponto de partida assim como toda a configuração de dependências e testes de exemplo:

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

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.

---

8. Guias, dicas e leituras complementares

Primeiros passos

1. Antes de mais nada, se assegure de ter um bom 📝 editor de texto, algo como Code ou Atom.
2. Para executar os comandos você precisará de um 🐚 UNIX Shell, que é um programa que interpreta linhas de comando (command-line interpreter) e também deve ter o git instalado. Se você usa um sistema operacional "UNIX-like", como GNU/Linux ou MacOS, você já tem um shell (terminal) instalado (e provavelmente o git também). Se você usa o Windows, pode utilizar a versão completa do Cmder que já inclui o Git bash. Se tiver o Windows 10 ou superior, pode usar o Windows Subsystem for Linux.
3. Faça seu próprio🍴 fork do repositório.
4. ⬇️ Clone o _fork* para seu computador (cópia local).
5. 📦 Instale as dependências do projeto rodando o comando npm install. Mas antes disso tenha certeza de ter instalado o Node.js (que inclui o npm).
6. Se tudo foi bem, você deve conseguir executar os 🚥 testes unitários com o comando npm test.
7. Para ver a interface do seu programa no navegador, use o comando npm start para iniciar o servidor web e entre na url http://localhost:5000 no seu navegador.
8. Let's Code! 🚀

Este video da Paloma também pode te ajudar nos seus primeiros passos. Repare que, apesar dos nomes diferentes, a estrutura é similar ;)

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

Desenho da experiência do usuário (User Experience Design):

• Ideação
• Prototipagem
• Teste e iteração

Desenvolvimento de front-end:

• Valores
• Tipos
• Variáveis
• Controle de fluxo
• Testes unitários
• Aprenda mais sobre array
• Aprenda mais sobre Array.reverse()
• Aprenda mais sobre Array.join()
• Documentação do NPM

Ferramentas:

• Terminal
• Git config
• GitHub e GitHub Pages.

Organização do trabalho:

• Agilidade
• Scrum em menos de 2 minutos
• Scrum em detalhes. Não esperamos que você faça tudo isso neste projeto. Iremos aprofundando nesses conceitos ao longo do bootcamp.

9. Checklist

Essa seção é para te ajudar a ter um controle do que você precisa completar.

Parte Obrigatória

• README.md adicionar informação sobre o processo e decisões do desenho.
• README.md explicar claramente quem são os usuários e as suas relações com o produto.
• README.md explicar claramente como o produto soluciona os problemas/necessidades dos usuários.
• Usar VanillaJS.
• Implementar validator.isValid.
• Implementar validator.maskify.
• Passar o linter com a configuração definida.
• Passar as provas unitárias.
• Testes unitários cobrindo 70% dos statements, functions e lines, e no mínimo 50% das branches.
• Interface que permita escrever o número do cartão para ser validado
• Interface que não permita campo vazio no número do cartão
• Interface que mostre o resultado da validação
• Interface que oculte todos os números exceto os 4 últimos.

Parte Opcional: "Hacker edition"

• Implementar função que identifique a emissor do cartão
• Interface que mostre o resultado do emissor