- 1. Introdução
- 2. Resumo do projeto
- 3. Considerações gerais
- 4. Marco: Critérios de Aceitação Mínimos do Projeto
- 5. Marco Opcional: Mostrar a franquia do cartão
- 6. Considerações técnicas
- 7. Objetivos de aprendizagem
- 8. Guias, dicas e leituras complementares
- 9. Para considerar o feedback do projeto
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.
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.
- 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)
- Resolvemos este projeto individualmente. Recomendamos uma duração de 1-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.
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.
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.
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
-
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 objetovalidator, o qual já está exportado no boilerplate. Este objeto (validator) deve conter dois métodos:-
validator.isValid(creditCardNumber):creditCardNumberé umstringcom o número do cartão a ser verificado. Esta função deve retornar umboolean, dependendo de sua validade, de acordo com o algoritmo de Luhn. -
validator.maskify(creditCardNumber):creditCardNumberé umstringcom o número do cartão e esta função deve retornar umstringonde 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 ostringfor 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, chamarvalidator.isValid()evalidator.maskify(). -
test/validator.spec.js: este arquivo contem alguns testes de exemplo e aqui você deve implementar os testes paravalidator.isValid()evalidator.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.
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.
Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.
-
Uso de HTML semântico
-
Uso de seletores de CSS
-
Modelo de caixa (box model): borda, margem, preenchimento
-
Uso de seletores de DOM
-
Manipulação de eventos de DOM (listeners, propagação, delegação)
-
Manipulação dinâmica de DOM
-
Tipos de dados primitivos
-
Strings (cadeias de caracteres)
-
Variáveis (declaração, atribuição, escopo)
-
Uso de condicionais (if-else, switch, operador ternário, lógica booleana)
-
Uso de laços (while, for, for..of)
-
Funções (params, args, return)
-
Testes unitários (unit tests)
-
Módulos de ECMAScript (ES modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura e Semântica)
-
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
- Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro
-
Criar protótipos para obter feedback e iterar
-
Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
- Se assegure de ter um bom 📝 editor de texto, algo como Code ou Atom.
- 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
gittambém). Se você usa Windows você pode usar o Git bash, embora seja recomendado que você teste 🐧 GNU/Linux. - 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.
- ⬇️ Clone o fork para seu computador (cópia local).
- 📦 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). - Se tudo foi bem, você deve conseguir executar os 🚥 testes
unitários com o comando
npm test. - Para ver a interface do seu programa no navegador, use o comando
npm startpara iniciar o servidor web e entre na urlhttp://localhost:5000no seu navegador. - Let's Code! 🚀
Este video da Paloma também pode te ajudar nos seus primeiros passos ;)
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! :)
Desenvolvimento de front-end:
- Saiba mais sobre objetos e como definir métodos
- Documentação do NPM
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(isValidemaskify). - 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.