Card Validation
Aplicativo Web que permite ao usuário validar um cartão de crédito. 💳
Projeto #1 do Bootcamp Laboratória.
Índice
1-Introdução
O objetivo deste projeto é permitir que o usuário valide um cartão de crédito e tenha as funcionalidades de ocultar os dígitos do cartão exceto os 4 últimos.
A Validação é feita pelo algoritmo de Luhn, ou módulo 10, é um método utilizado para validar desde números de IMEI de celular, números de identificação até cartões de crédito entre outros. Este algoritimo funciona desta maneira:
- Obtemos o inverso do número a ser verificado (contendo apenas dígitos [0-9]);
- Os números que ocupam uma posição par são multiplicados por dois;
- Se esse número for maior ou igual a 10, os dígitos são somados e substituem a posição par;
- O número final a ser verificado é a soma de todos os dígitos e este será válido se for um múltiplo de 10.
A ideia do produto foi uma página de pagamento de um ecommerce. Onde os usuários do produto são possíveis clientes. O objetivo do usuário é finalizar uma compra e para isso ele precisa inserir seus dados, inclusive os dados de cartão de crédito para a validação, assim que validado seria possível continuar a navegação.
2-Instalação
Para instalar e executar este projeto siga os seguintes passos:
- Se assegure de ter um editor de texto como VSCode;
- Tenha um terminal e
git
instalados; - Faça o
clone
para sua maquina local; - Instale o Node.js
- Com o comando
npm install
no terminal instale as dependências do projeto; - Para visualizar o programa no navegador use o comando
npm start
no terminal para abrir um servidor web local e entre naurl
indicadahttp://localhost:5000
no seu navegador; - Para fazer os
testes
unitários execute o comandonpm test
no terminal.
3-Testes
Os testes deste projeto já vieram prontos do boilerplate do repositório inicial. Estão inclusos o eslint para o JavaScript
e para o HTML
htmlhint. Essas tarefas são executadas com o comando npm run test
.
Os requisitos exigidos para passar nos testes unitários foram cobrir no mínimo de 70% dos statements, functions
e lines, e um mínimo de 50% de branches.
Neste projeto os seguintes resultados foram obtidos:
4-Tecnologias
5-UX
O design da experiência do usuário foi primeiro pensada e desenhada em papel. Após alguns ajustes o protótipo final foi passado ao
[mockflow](https://wireframepro.mockflow.com/space/M8Vop87trnb).O maior desafio desta etapa foi conhecer esta ferramenta nova e tentar replicar o que foi pensado.
6- Demonstração da aplicação
Visite a página em: Card-Validation
Status
Projeto finalizado ✅
Licença
Autora
Desenvolvido por Keila Hadama pelo Bootcamp da Laboratória.