Cifra de César

Índice

• 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

---

1. Prefácio

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 comuniçã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.

2. Resumo do projeto

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 decrifrar 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.

3. Objetivos de aprendizagem

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.

HTML e CSS

• Uso de HTML semântico.
• Uso de seletores de CSS.
• Construir uma aplicação respeitando o desenho realizado (protótipo).

DOM

• Uso de seletores do DOM.
• Manipular eventos do DOM.
• Manipulação dinâmica do DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

• 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)

Testing

• Teste unitário.

Estrutura do código e guia de estilo

• Organizar e dividir o código em módulos (Modularização)
• Uso de identificadores descritivos (Nomenclatura | Semântica)
• Uso de linter (ESLINT)

Git e GitHub

• Uso de comandos de git (add | commit | pull | status | push)
• Gerenciamento de repositorios de GitHub (clone | fork | gh-pages)

4. Considerações gerais

• Este projeto deve ser resolvido 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.

5. Critérios de aceitação mínimos do 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

Definição do produto

No README.md, escreva como você definiu seu usuário e qual foi o processo para definir o produto final a nível de expriê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?

Interface do usuário (UI)

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.

Scripts / Arquivos

• 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 objeto cipher, 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 e string é 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 e string é a mensagem (texto) que queremos decifrar.
• src/index.js: aqui você deve escutar os eventos de DOM, chamar cipher.encode() e cipher.decode().
• test/cipher.spec.js: este arquivo contem alguns testes de exemplo e aqui você deve implementar os testes para cipher.encode() e cipher.decode().

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.

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.

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.

Você não deve usar a pseudo-variable this.

Os testes unitários devem cubrir 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
│   ├── 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 recomandaçõ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 o Visual Studio 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 Windows pode baixar a versão completa do Cmder que inclue o Git bash , embora seja recomendado que você teste 🐧 GNU/Linux. Se tem Windows 10 ou superior pode usar o Windows Subsystem for 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 extras

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 y GitHub Pages.

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

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.
• 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 cubrindo 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.

Parte Opcional: "Hacker edition"

• Cifrar/decifrar minúsculas.
• Cifrar/decifrar outros caractéres (espações, pontuação, ç, á, ...).
• Permitir usar offset negativo.