Skip to content

Latest commit

 

History

History
451 lines (327 loc) · 19.1 KB

README.md

File metadata and controls

451 lines (327 loc) · 19.1 KB
Raw

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.

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

CSS

Web APIs

JavaScript

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

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

dicas de cartão de crédito

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

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

Desenvolvimento de front-end:

Ferramentas:

Organização do trabalho:

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