Skip to content

Laboratoria/SAP011-card-validation

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
src
src
 
 
test
test
 
 
.babelrc
.babelrc
 
 
.editorconfig
.editorconfig
 
 
.eslintrc
.eslintrc
 
 
.gitignore
.gitignore
 
 
FAQ.md
FAQ.md
 
 
README.md
README.md
 
 
explaindev.json
explaindev.json
 
 
package.json
package.json
 
 
thumb.png
thumb.png
 
 

Repository files navigation

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.
  • O intervalo de tempo estimado para concluir o projeto é de 1 a 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" (acessível online publicamente) 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. Se assegure de ter um bom 📝 editor de texto, algo como VS Code.
  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 Windows você pode usar o Git bash, embora seja recomendado que você teste 🐧 GNU/Linux.
  3. Faça seu próprio 🍴 fork do repositório. Seus mentores compartilharão com você um link para um repositório privado e te darão acesso a este 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 ;)

Recursos e tópicos relacionados

Participe do canal Slack #project-card-validation para conversar e pedir ajuda no projeto.

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.

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

2 stars

Watchers

2 watching

Forks

27 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages