- 1. Resumo do projeto
- 2. Definição do produto
- 3. Aplicação
- 4. Repositório
- 5. Atualizações do código
- 6. Deploy
Neste projeto, foi criada a primeira aplicação web do bootcamp Laboratória. Nela, o usuário pode cifrar e decifrar um texto pelo método de codificação da Cifra de César, indicando a chave de deslocamento desejada offset. A intenção é que a WebApp (Web Application - Aplicação Web em português) interaja com o usuário final por intermédio do navegador, por meio das ferramentas HTML, CSS e JavaScript.
A Cifra de César foi inventada pelo imperador romano, César Augusto, para poder enviar mensagens codificadas em circunstâncias bélicas. Sua lógica consiste em "girar", como em uma roda gigante, o alfabeto e substituir as letras da mensagem original pelas letras derivadas deste "giro". Para tanto, define-se uma chave de deslocamento, ou seja, quantas letras se deve pular para codificar as letras da mensagem original. Em uma chave de deslocamento de número 1, por exemplo, "ABC" passaria a ser "BCD" e "AMOR" passaria a ser "BNPS". Se a chave de deslocamento fosse 5, seria:
- A + 5 => F
- M + 5 => R
- O + 5 => T
- R + 5 => W
O usuário desta WebApp é alguém que precisa de um facilitador na hora de criptografar um texto. Tal usuário tem por objetivo codificar uma mensagem a ser enviada ou retida (uma senha, por exemplo) e/ou descodificar uma mensagem criptografada recebida. Com o layout deste produto, o usuário pode inserir uma mensagem na caixa de texto a ser codificada e recebê-la criptografada ou inserir uma mensagem na caixa de texto a ser descodificada e recebê-la desciptografada, utilizando uma chave de deslocamento como parâmetro para tanto. Dessa forma, a necessidade do usuário é atendida.
Para este projeto, o tema "Base Secreta" foi escolhido para codificar uma mensagem, usando como referencial estético os anos 80 e 90, com layout objetivo e composto pela tipografia DEC Terminal Modern para alusão - na cor verde #038f03 para texto fixo e na cor branca para texto escrito pelo usuário. A imagem de fundo é um monitor retrô, com a tela em tom escuro para legibilidade.
O layout conta o <h1> "_(des)codificando" como título, um input de número para determinar a chave de deslocamento com label "_chave" e com duas áreas de texto, uma para receber mensagem a codificar (identificada pelo <p>"_codifique_aqui") e outra para receber mensagem a descodificar (identificada pelo <p> "_descodifique_aqui"). Para melhor compreensão, foi feito um protótipo de baixa fidelidade.
O repositório é o espaço digital que armazena um código e as versões que podem advir dele. Neste caso, o repositório está hospedado no GitHub, onde é possível criar um perfil - um espaço próprio do usuário para guardar códigos. O ideal é ter um repositório por projeto. Para tanto, é possível criar um repositório e nomeá-lo ou forkar um repositório já existente (de outro perfil) para fazer as próprias mudanças sem alterar o arquivo original. No caso de um novo repositório criado, é importante acessar a pasta do computador onde o repositório está por meio do terminal e usar o comando git init (no caso de GitBash, terminal do Linux, terminal do Ubuntu). Para este repositório cujo README vos fala, isso não é necessário.
Fork é a ação de bifurcar um repositório, ou seja, é como se o repositório original fosse um bonde com passageiros dentro (códigos) que trilha um caminho que, em dado momento, é bifurcado (fork) e agora segue dois caminhos distintos, porém com um passado em comum. Da mesma forma, o repositório disponibilizado por um Usuário A possui arquivos e códigos que, quando "forkados" por outro Usuário B, seguem o caminho que o Usuário B determinar sem afetar o repositório original, disponibilizado pelo Usuário A. Para acessar este repositório, cujo README vos fala, é preciso forká-lo. Para isso, basta clicar em Fork, no canto direito superior da página deste repositório no GitHub.
Clone é a ação de clonar o repositório forkado para a máquina na qual o(s) código(s) é(são) alterado(s). Clonar o repositório forkado permite que o computador acesse todos os arquivos dentro do repositório clonado. Para clonar o repositório forkado, que, agora, pertence ao usuário que forkou, basta:
- Clicar no botão
Codena página do repositório do usuário que forkou; - Copiar a url-do-repositório ali disponibilizado;
- Abrir o Terminal;
- Acessar a pasta para onde deseja clonar o repositório;
- Rodar o comando
git clone <url-do-repositório>.
Ao atualizar o código, é importante salvar as versões geradas por essa atualização. É de bom tom salvar cada pequeno avanço/alteração, chamados commits (uma função que retornou corretamente, um botão que está funcionando, uma variável muito comprida que foi trabalhosa de escrever, por exemplo) para que, caso algo de errado aconteça com o código, seja fácil de acessar a última versão - que estava funcionando. Para isso, usam-se três comandos no Terminal: git add ., git commit -m "sua-atualização" e git push origin main. Pensar no código como uma encomenda a ser despachada pode ajudar:
Este comando deve ser usado para adicionar o código à "caixa" que será despachada. Usa-se " ." depois de "git add" para fazer referência a todos os arquivos presentes na pasta. Para usá-lo, deve-se:
- Acessar a pasta com os arquivos a serem adicionados no Terminal;
- Rodar o comando
git add ..
Este comando deve ser usado para "etiquetar" a caixa com o código dentro. É com esse comando que se nomeiam as alterações realizadas; por isso, é importante usá-lo de forma descritiva e objetiva. Por exemplo, se a atualização for um botão adicionado, pode-se inserir "botão OK adicionado" na descrição, ficando 'git commit -m "botão OK adicionado"'. Para usá-lo, basta:
- Acessar a pasta com os arquivos a serem adicionados no Terminal;
- Rodar o comando
git commit -m "sua-atualização".
Este comando deve ser usado para, finalmente, despachar o código. É somente depois desse comando que o commit aparecerá no repositório no GitHub. Para usá-lo, basta:
- Acessar a pasta com os arquivos a serem adicionados no Terminal;
- Rodar o comando
git origin push main. ** ** Atenção: a palavra "main" pode variar de acordo com o branch no qual o repositório está.
Deploy é a ação de colocar o código no ar. Quando um código/aplicação é "deployado", significa que ele já está disponível para ser acessado como qualquer outro site, por intermédio da URL colocada na barra de endereço do navegador. Para "deployar", basta:
- Acessar a pasta com os arquivos a serem adicionados no Terminal;
- Rodar o comando
npm run deployno Terminal.