Skip to content

Feat/projeto #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bea-ferraz wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Feat/projeto #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ecd7931
Primeiro Commit
bea-ferraz Jun 21, 2021
caf5446
Atualizaçoes
bea-ferraz Jun 22, 2021
988d373
melhorias layout
bea-ferraz Nov 5, 2021
f4f1bd7
como funciona atualizado
bea-ferraz Nov 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
297 changes: 4 additions & 293 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,5 @@
# Cifra de César

## Índice

* [1. Prefácio](#1-prefácio)
* [2. Resumo do projeto](#2-resumo-do-projeto)
* [3. Objetivos de aprendizagem](#3-objetivos-de-aprendizagem)
* [4. Considerações gerais](#4-considerações-gerais)
* [5. Critérios de aceitação mínimos do
projeto](#5-critérios-de-aceitação-mínimos-do-projeto)
* [6. Hacker edition](#6-hacker-edition)
* [7. Considerações técnicas](#7-considerações-técnicas)
* [8. Guias, dicas e leituras
complementares](#8-guias-dicas-e-leituras-complementares)
* [9. Checklist](#9-checklist)

***

********
## 1. Prefácio

Cifrar significa codificar. A [cifra de
Expand Down Expand Up @@ -45,90 +29,14 @@ 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 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:
Olá jed, seja muito bem vinda(o)!
Esse projeto foi desenvolvido para você fã de Star Wars, com objetivo de trocarmos frases e mensagens criptografadas e seguras com a comunidade secreta.

* 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.](https://developer.mozilla.org/pt-BR/docs/Glossario/Semantica#Sem%C3%A2ntica_em_HTML)
* [ ] Uso de seletores de CSS.

### DOM

* [ ] Uso de seletores do DOM.
* [ ] Manipular eventos do DOM.
* [ ] [Manipulação dinâmica do DOM.](https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM/Introdu%C3%A7%C3%A3o)
(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.](https://jestjs.io/docs/pt-BR/getting-started)

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

### UX

* [ ] 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)

## 4. Considerações gerais

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

## 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 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?

### Interface do usuário (UI)

A interface deve permitir ao usuário:
Expand All @@ -140,201 +48,4 @@ A interface deve permitir ao usuário:
* 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, 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:

```text
./
├── .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](https://eslint.org/) e
[htmlhint](https://github.com/yaniswang/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"`)](https://eslint.org/docs/rules/).

Nas regras/guias de estilo usaremos das recomendaçõ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 :pencil: editor de texto, algo
como o [Visual Studio Code](https://code.visualstudio.com/) ou [Atom](https://atom.io/).
2. Para executar os comandos você precisará de um :shell: 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](https://cmder.net/) que inclui o [Git
bash](https://git-scm.com/download/win), embora seja recomendado que você
teste :penguin: 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_and_knife:
[fork](https://help.github.com/articles/fork-a-repo/) do repositório.
4. :arrow_down: [Clone](https://help.github.com/articles/cloning-a-repository/)
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](https://nodejs.org/)
(que inclui o [npm](https://docs.npmjs.com/)).
6. Se tudo foi bem, você deve conseguir executar os :traffic_light: 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! :rocket:

Este [video](https://drive.google.com/file/d/1CM6ZfpGfJMF6A8IcXoK5cFBBq-CY8oBR/view?usp=sharing) 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 ! :)

[![Dicas Cifra de
César](https://img.youtube.com/vi/utiLWBXmNQU/0.jpg)](https://www.youtube.com/watch?v=utiLWBXmNQU)

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()`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt)
* [Aprenda mais sobre
`String.fromCharCode()`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode)
* [Aprenda mais sobre
`ASCII`](https://web.fe.up.pt/~ee96100/projecto/Tabela%20ascii.htm)
* [Documentação do NPM](https://docs.npmjs.com/)

Ferramentas:

* GitHub e GitHub Pages.
* [Terminal](https://www.loom.com/share/29a6cf0f3c5245bf995738284b706468)
* [Git config](https://www.loom.com/share/c7d445872b9f4618a24605fdcb26a48d)

Organização do trabalho:

* [Agilidade](https://www.youtube.com/watch?v=vozsjbh4noU)
* [Scrum em menos de 2 minutos](https://www.youtube.com/watch?v=IKZHPjCQ2m8)
* [Scrum em detalhes](https://www.youtube.com/watch?v=mt2hM4yrPn0). 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](https://docs.google.com/presentation/d/e/2PACX-1vTQ7-8LZDHrT4Y6AOBN72Nkfz1eJAeseBHpcHX8BSq0aFCFoZmuMjluMeyFNgK9ISKxTz0H03yGfJiT/pub?start=false&loop=false&delayms=60000)

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

### Parte Opcional: "Hacker edition"

* [ ] Cifrar/decifrar minúsculas.
* [ ] Cifrar/decifrar _outros_ caractéres (espaços, pontuação, `ç`, `á`, ...).
* [ ] Permitir usar `offset` negativo.
## 5. Definição de Layout / Arquivos
Loading