Cifra de César

Índice

• 1. Prefácio
• 2. Resumo do projeto
• 3. Considerações gerais
• 4. Marco: Critérios de Aceitação Mínimos do Projeto
• 5. Marco Opcional: Adicione suporte para letras minúsculas e outros caracteres
• 6. Considerações técnicas
• 7. Objetivos de aprendizagem
• 8. Guias, dicas e leituras complementares
• 9. Para considerar o feedback do projeto

---

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 comunicação por si mesma, 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

Neste projeto você criará a primeira aplicação web do bootcamp. Nela o usuário poderá cifrar e decifrar um texto no navegador indicando um deslocamento específico de caracteres (offset). Você fará isso usando HTML, CSS e JavaScript.

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:

• Criar senhas seguras para email.
• Cifrar cartões de crédito.
• Ferramenta de mensagens internas de uma organização em uma zona de conflito.
• Mensagens secretas para alguma pessoa.

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. desenvolver este projeto, você também se familiarizará com novos conceitos.

Os objetivos gerais deste projeto são os seguintes

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

3. Considerações gerais

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

4. Marco: Critérios de Aceitação Mínimos do Projeto

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:

• Criptografar uma mensagem

  • Inserir a mensagem (texto) que deseja criptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas).
  • Escolher um número de deslocamento (offset) indicando quantas posições você deseja que a cifra desloque cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo).
  • Veja o resultado da mensagem criptografada.

• Descriptografar uma mensagem

  • Inserir a mensagem (texto) que deseja descriptografar. A mensagem usa um alfabeto simplificado (apenas letras maiúsculas).
  • Escolher um número de deslocamento (offset, que corresponde ao que usamos para criptografar) indicando quantas posições você deseja que a cifra desloque cada caractere do alfabeto. O número será positivo e inteiro (inteiro positivo).
  • Veja o resultado da mensagem descriptografada.

2. Testes unitários dos métodos. Os métodos cipher (encode e decode) 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" 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.

5. Marco Opcional: Adicione suporte para letras minúsculas e outros caracteres

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.

O marco de critérios mínimos não menciona o que aconteceria com letras minúsculas e outros caracteres (como espaços, pontuação, ...). O boilerplate inclui alguns tests (comentados no início) que você pode usar como ponto de partida para implementar o suporte para esses casos adicionais.

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.

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
│   ├── cipher.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── cipher.spec.js

Descrição de scripts/arquivos

• REAME.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/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().

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.

Deploy

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.

7. Objetivos de aprendizagem

Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.

HTML

• Uso de HTML semântico

  Links

  • HTML semântico
  • Semantics in HTML - MDN

CSS

• Uso de seletores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caixa (box model): borda, margem, preenchimento

  Links

  • Modelo de Caixa e Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

Web APIs

• Uso de seletores de DOM

  Links

  • Modificando o DOM
  • Introdução ao DOM - MDN
  • Locating DOM elements using selectors - MDN

• Manipulação de eventos de DOM (listeners, propagação, delegação)

  Links

  • Introdução a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • Objeto Event

• Manipulação dinâmica de DOM

  Links

  • Introdução ao DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de dados primitivos

  Links

  • Valores Primitivos - MDN

• Strings (cadeias de caracteres)

  Links

  • Strings
  • String — Cadeia de caracteres - MDN

• Variáveis (declaração, atribuição, escopo)

  Links

  • Valores, tipos de dados e operadores
  • Variáveis

• Uso de condicionais (if-else, switch, operador ternário, lógica booleana)

  Links

  • Estruturas condicionais e repetitivas
  • Tomando decisões no seu código — condicionais - MDN

• Uso de laços (while, for, for..of)

  Links

  • Laços (Loops)
  • Laços e iterações - MDN

• Funções (params, args, return)

  Links

  • Funções (controle de fluxo)
  • Funções clássicas
  • Arrow Functions
  • Funções — blocos reutilizáveis de código - MDN

• Testes unitários (unit tests)

  Links

  • Introdução ao Jest - Documentação oficial

• Módulos de ECMAScript (ES modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descritivos (Nomenclatura e Semântica)

Controle de Versões (Git e GitHub)

• 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

  Links

  • Site oficial do GitHub Pages

Centrado no usuário

• Desenhar e desenvolver um produto ou serviço colocando as usuárias no centro

Design de produto

• Criar protótipos para obter feedback e iterar

• Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)

8. Guias, dicas e leituras complementares

Primeiros passos

1. 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 você pode usar o Git bash, embora seja recomendado que você teste 🐧 GNU/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 ! :)

Desenvolvimento Front-end:

• Aprenda mais sobre charCodeAt()
• Aprenda mais sobre String.fromCharCode()
• Aprenda mais sobre ASCII
• Documentação do NPM
• Saiba mais sobre objetos e como definir métodos

9. Para considerar o feedback do projeto

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 criptografar e descriptografar.
• O projeto será entregue incluindo testes unitários dos métodos cipher (encode e decode).
• 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.