- 1. Prefácio
- 2. Resumo do projeto
- 3. Objetivos de aprendizagem
- 4. Considerações gerais
- 5. Critérios de aceitação mínimos do projeto
- 6. Hacker edition
- 7. Considerações técnicas
- 8. Guias, dicas e leituras complementares
- 9. Checklist
Cifrar significa codificar. A cifra de César é um dos primeiros tipos de criptografias conhecidas na história. O imperador romano Júlio César utilizava essa cifra para enviar ordens secretas aos seus generais no campo de batalha.
A cifra de César é uma das técnicas mais simples de cifrar uma mensagem. É um tipo de cifra por substituição, em que cada letra do texto original é substituida por outra que se encontra há um número fixo de posições (deslocamento) mais a frente do mesmo alfabeto.
Por exemplo se usarmos o deslocamento (offset) de 3 posições:
- Alfabeto sem cifrar: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
- Alfabeto com cifra: D E F G H I J K L M N O P Q R S T U V W X Y Z A B C
- A letra A será D
- A palavra CASA será FDVD
Atualmente todas as cifras de substituição alfabética simples, são decifradas com facilidade e não oferecem muita segurança na comunicação, mas a cifra de César muitas vezes pode fazer parte de um sistema mais complexo de criptografia, como a cifra de Vigenère, e tem aplicação no sistema ROT13.
O que eu tenho que fazer exatamente? Neste projeto você criará a primeira aplicação web do bootcamp. Nela o usuário poderá cifrar e decifrar um texto indicando a chave de deslocamento (offset).
O tema é livre. Você deve pensar em alguma situação de vida real em que seja necessário cifrar uma mensagem e pensar em como deve ser a experiência do usuário (tela, explicações, mensagens, cores, marca?, etc.). Algumas ideias de exemplo:
- Mensagens secretas para alguma pessoa.
- Ferramenta de mensagens internas de uma organização em uma zona de conflito.
- Cifrar cartões de crédito.
- Criar senhas seguras para email.
Neste projeto você aprenderá a construir uma aplicação web (WebApp) que irá interagir com o usuário final através do navegador utilizando HTML, CSS e JavaScript como ferramentas.
- Uso de HTML semântico.
- Uso de seletores de CSS.
- Uso de seletores do DOM.
- Manipular eventos do DOM.
- Manipulação dinâmica do DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- Manipulação de strings.
- Uso de condicionais (if-else | switch | operador ternário)
- Uso de laços (loops) (for | for..in | for..of | while)
- Uso de funções (parâmetros | argumentos | valor de retorno)
- Declaração correta de variáveis (const & let)
- Organizar e dividir o código em módulos (Modularização)
- Uso de identificadores descritivos (Nomenclatura | Semântica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Gerenciamento de repositorios de GitHub (clone | fork | gh-pages)
- 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)
- A equipe de coaches te dará um tempo sugerido. Lembre-se que cada uma aprende em um ritmo diferente.
- O projeto será feito 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ê aprenderá durante o projeto.
Use o alfabeto simples (somente maiúsculas e sem ç):
- A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
No README.md, escreva como você definiu seu usuário e qual foi o processo para definir o produto final a nível de experiência e interface.
- Quem são os principais usuário do produto?
- Quais são os objetivos do usuário em relação com o produto?
- Como você acredita que o produto está resolvendo os problemas do usuário?
A interface deve permitir ao usuário:
- Eleger um offset indicando quantas posições de deslocamento de caracteres quer que a cifra utilize.
- Inserir uma mensagem (texto) para ser cifrada.
- Ver o resultado da mensagem cifrada.
- Inserir uma mensagem (texto) para ser decifrada.
- Ver o resultado da mensagem decifrada.
REAME.md: deve explicar como fazer deploy, 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/cipher.js: aqui você deve implementar o objetocipher, o qual já está exportado no boilerplate. Este objeto (cipher) deve conter dois métodos:cipher.encode(offset, string):offseté o número de posições que queremos mover para a direita no alfabeto estringé a mensagem (texto) que queremos cifrar.cipher.decode(offset, string):offseté o número de posições que queremos mover para a esquerda no alfabeto estringé a mensagem (texto) que queremos decifrar.
src/index.js: aqui você deve escutar os eventos de DOM, chamarcipher.encode()ecipher.decode().test/cipher.spec.js: este arquivo contem alguns testes de exemplo e aqui você deve implementar os testes paracipher.encode()ecipher.decode().
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.
A descrição geral deste projeto não menciona o que aconteceria com letras minúsculas ou outros caracteres (como espaço, pontuação, ç, ...). O boilerplate inclui alguns testes (comentados) que vocês podem usar como ponto de partida para implementar o suporte para esses casos.
Também não foi mencionado o que aconteceria com offset negativo. Como parte da hacker edition te convidamos a explorar esse caso sozinha.
A lógica do projeto deve estar implementada inteiramente em JavaScript. Nesse projeto NÃO está permitido usar bibliotecas ou frameworks, apenas JavaScript puro, também conhecido como vanilla JavaScript.
Você não deve usar a pseudo-variable this.
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á contém 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
│ ├── cipher.js
│ ├── index.html
│ ├── index.js
│ └── style.css
└── test
├── .eslintrc
└── cipher.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.
- Antes de mais nada, se assegure de ter um bom 📝 editor de texto, algo como o Visual Studio 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 pode baixar a versão completa do Cmder que inclui o Git bash, embora seja recomendado que você teste 🐧 GNU/Linux. Se tem Windows 10 ou superior pode usar o Windows Subsystem for Linux. - Faça seu próprio 🍴 fork do 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 ;)
A seguir um vídeo do Daniel que te ajudará a entender a fórmula matemática usada pela Cifra de César e algumas coisas mais que deve saber para resolver o seu projeto. Escute com atenção e siga seus conselhos ! :)
Desenho da experiência do usuário (User Experience Design):
- Ideação
- Prototipagem
- Teste e iteração
Desenvolvimento Front-end:
- Valores
- Tipos
- Variáveis
- Controle de fluxo
- Testes unitários
- Aprenda mais sobre
charCodeAt() - Aprenda mais sobre
String.fromCharCode() - Aprenda mais sobre
ASCII - Documentação do NPM
Ferramentas:
- GitHub e GitHub Pages.
- Terminal
- Git config
Organização do trabalho:
- Agilidade
- Scrum em menos de 2 minutos
- Scrum em detalhes. Não esperamos que você faça tudo isso neste projeto. Iremos aprofundando nesses conceitos ao longo do bootcamp.
- Guia em espanhol para a cifra
Essa seção é para te ajudar a ter um controle do que você precisa completar.
-
README.mdadicionar informação sobre o processo e decisões do desenho. -
README.mdexplicar claramente quem são os usuários e as suas relações com o produto. -
README.mdexplicar claramente como o produto soluciona os problemas/necessidades dos usuários. - Usar VanillaJS.
- Não usar
this. - Implementar
cipher.encode. - Implementar
cipher.decode. - 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 escolher o
offset(chave de deslocamento) usava para cifrar/decifrar. - Interface que permita escrever um texto para ser cifrado.
- Interface que mostre o resultado da cifra corretamente.
- Interface que permita escrever um texto para ser decifrado.
- Interface que mostre o resultado decifrado corretamente.
- Cifrar/decifrar minúsculas.
- Cifrar/decifrar outros caractéres (espaços, pontuação,
ç,á, ...). - Permitir usar
offsetnegativo.