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 mínimos de aceitação do projeto
• 6. Guias, dicas e leituras complementares

---

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

• Manipulação de eventos de DOM

  Links

  • Introdução a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • 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 (cadeias 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ássicas
  • Arrow Functions
  • Funções — blocos reutilizáveis de código - MDN

• Testes unitários

  Links

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

• Módulos de ECMAScript (ES modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descritivos (Nomenclatura | 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

  • Site oficial do GitHub Pages

user-centricity

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

product-design

• Criar protótipos para obter feedback e iterar

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

4. Considerações gerais

• Este projeto deve ser resolvido individualmente.
• O projeto será entregue subindo o seu código no GitHub (commit/push) e o deploy será feito no GitHub Pages. Se não sabe o que é o GitHub, não se preocupe, você aprendera durante o projeto.
• Tempo para completar: tempo referência 2 semanas.

5. Critérios mínimos de aceitação 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, excetuando 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

Geral

README.md

Ele deve conter o seguinte:

• Um título com o nome do seu projeto.
• Um resumo de 1 ou 2 linhas sobre o seu projeto.
• A imagem final do seu projeto.
• Pesquisa UX:
  1. Explicar quem irá usá-lo e os objetivos quanto ao produto.
  2. Explicar como o produto resolve os problemas/necessidades desses usuários.
  3. Em seguida, você colocará a foto do seu primeiro protótipo no papel.
  4. Adicionar um resumo do feedback recebido indicando as melhorias a serem feitas.
  5. Imagem do protótipo final.

Interface

Você precisará definir exatamente o protótipo final que você criou na ferramenta de design de protótipos que você escolheu usando HTML e CSS. Nesse momento, você escolherá as cores, o tipo de fonte etc. que irá usar.

Abaixo, descrevemos os arquivos que você usará:

src/index.html

Este arquivo contém o conteúdo que será exibido ao usuário (esqueleto HTML). Você encontrará três marcadores iniciais que, se você quiser, poderá excluir e começar do zero:

• <header>: cabeçalho do seu projeto.
• <main>: conteúdo principal do seu projeto.
• <footer>: rodapé do seu projeto.

src/style.css

Este arquivo deve conter as regras de estilo. Queremos que você escreva suas próprias regras. Por isso, o uso de estruturas CSS (Bootstrap, materialize etc.) NÃO é permitido.

Funcionalidades e testes de unidade (JavaScript)

• A lógica do projeto deve ser totalmente implementada em JavaScript.
• NÃO é permitido usar bibliotecas ou frameworks neste projeto, apenas JavaScript puro, também conhecido como JavaScript Vanilla.

Você terá 2 arquivos JavaScript que separam responsabilidades, eis o que você fará em cada arquivo:

src/validator.js

Aqui você escreverá as funções necessárias para que o usuário possa verificar o cartão de crédito e ocultar os dígitos do número do cartão. Esta função deve ser pura e independente do DOM.

Para isso, você deve implementar o validador de objeto, que já está exportado no boilerplate. Este objeto (validador) contém dois métodos (isValid e maskify):

• 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ê escreverá todo o código relacionado à interação do DOM (selecionar, atualizar e manipular elementos do DOM e eventos). Ou seja, nesse arquivo, você precisará ativar as funções isValid e maskify conforme seja necessário para atualizar o resultado na tela (UI).

test/validator.spec.js

Nesse arquivo, você deverá concluir os testes de unidade das funções validator.isValid(creditCardNumber) e validator.maskify(creditCardNumber) implementadas em validator.js usando Jest. Seus testes de unidade devem proporcionar 70% em coverage (cobertura), statements (instruções), functions (funções) e lines (linhas); e um mínimo de 50% de branches (ramificações).

---

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.

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

Link

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

• Concepção
• Prototipagem (desenho)
• Testes e iteração

Desenvolvimento de front-end:

• Valores
• Tipos
• Variáveis
• Controle de fluxo
• Testes unitários
• Documentação do NPM