Cifra de César

Índice

• 1. Prefácio
• 2. Enredo do Jogo
• 3. Objetivos
• 4. Considerações gerais
• 5. Hacker edition
• 6. Considerações técnicas
• 7. Guias, dicas e leituras complementares
• 8. 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. Enredo do jogo

A série Vinkings conta como um simples fazendeiro tornou-se Rei de toda a Escandináva.
Ragnar Lothbrok conhecido como Ragnar Calças Peludas, junto com sua família e amigos fizeram fama ao realizar várias invasões por terras desconhecidas.

3. Objetivos de aprendizagem

Baseada na fantástica história de Ragnar foi criado um game, nesta fase do jogo Ragnar deseja invadir Paris, porém deve correr contra o tempo para desvendar um código enviado por seu egnimático amigo Floki., para que seu plano seja concretizado e conquistando Paris.

O game é direcionado para fãs da série, apreciadores da cultura geek e principalmente para amantes gamers.

4. Considerações gerais

Todo e qualquer direito está reservado a emissora: History. Este projeto tem cunho educacional, proposto pela Bootcamp da Laboratória.

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().

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

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.

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.

---

7. Guias, dicas e leituras complementares

Primeiros passos

1. Antes de mais nada, se assegure de ter um bom 📝 editor de texto, algo como 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](https://docs.microsoft.com/en-us/windows/wsl/install-win10).
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! 🚀

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.