-
Concluído 💪
Usando o conceito da cifra de César, podemos:
- Criptografar um texto
- Descriptografar um texto criptografado neste site
Recursos adicionais:
- Copiar o texto de saída apenas com um botão
Copiar texto
- Mudar o tema para
light
oudark
(claro/escuro) baseado nas configurações do nevegador do usuário.
- Sobre o projeto
- Como surgiu?
- Onde está hospedado
- Como usar localmente
- Tecnologias
- Performance no PageSpeed
- Autor
- Dark:
- Light:
Este projeto tem como base o conceito da cifra de César, também conhecida como cifra de troca, código de César ou troca de César. A Cifra de César é uma técnica de criptografia bastante simples e provavelmente a uma mais conhecida de todas. Trata-se de um tipo de cifra de substituição, na qual cada letra de um texto a ser criptografado é substituída por outra letra, presente no alfabeto porém deslocada um certo número de posições à esquerda ou à direita. Por exemplo, se usarmos uma troca de quatro posições à esquerda, cada letra é substituída pela letra que está quatro posições adiante no alfabeto, e nesse caso a letra A seria substituída pela letra E, B por F, C por G, e assim sucessivamente.
Neste projeto, voçê pode decidir qual ação deve ser realizada, encriptar ou decriptar um texto.
-
Encriptar: Ao selecionar esta opção, voçê insira/escreva o texto a ser criptografado e clique no botão
Criptografar
. O resultado será exibido abaixo, mostrando o texto original(seu texto) e logo abaixo o texto criptografao. Exemplo:Texto original
olá mundo! hello world
Texto criptografado
roá pxqgr! khoor zruog
-
Decriptar: Voçê usou ou recebeu uma mensagem que foi criptografada nesta aplicação, logo para vê-lo descriptografado, selecione a opção
Decriptar
. O resultado será exibido abaixo, mostrando o texto original(seu texto criptografado) e logo abaixo o texto descriptografado. Exemplo:Texto original criptografado
hvwh whawr irl fulswrjudidgr
Texto descriptografado
este texto foi criptografado
A idéia começou como um desafio de um professor da disciplina programação. Ele me desafiou(sim! foi direto pra mim pois já estudava JavaScript por 6 meses) a criar um programa em Java que encripta um texto e exibe na tela. O desafio foi concluído antes do fim da aula. Mas, nesta época, eu começei a estudar React, e então para fixar os conhecimentos básicos da biblioteca, decidir refazer o desafio, desta vez desenvolvendo uma aplicação web. Inicialmente, este projeto estava em React puro, com nenhuma funcionalidade extra. Agora, este projeto que está documentado, foi feito em React, mas dentro do framework NextJS, também com o intuito de fixar os conceitos aprendido com o NextJS. A aplicação foi refeita, quase que por completo. Os assets e CSS foram reaproveitados em parte, mas todo o código foi reescrito para se encaixar na estrutura do NextJS e para usar as funcionalidades mais recentes do React(React Hooks) e NextJS.
Este site está hospedado na plataforma Vercel de forma gratuita. A plataforma usa a branch master
deste projeto para realizar o build e deploy da aplicação, ou seja, qualquer alteração nesta branch irá refletir na aplicação em produção. A Vercel é também a desenvolvedora do NextJS.
Se sim, siga os passos abaixo 🤓
Primeiramente voçê precisa ter instalado em sua máquina o NodeJS com uma versão minima recomendada v12.0.0
e o Git.
Além disto é bom ter um editor para trabalhar com o código como VSCode.
Para começar, faça o clone deste repositório. Digite o comando no terminal:
$ git clone https://github.com/IglanCardeal/cifra-de-cesar-nextjs
Acesse a pasta do projeto:
$ cd cifra-cesar-nextjs
Instale as dependências do projeto usando o npm
ou yarn
se preferir:
$ npm install
# ou
$ yarn install
Feito isso, execute o comando abaixo e o aplicativo será iniciado localmente como ambiente de desenvolvimento em sua máquina:
$ npm run dev
# ou
$ yarn dev
Agora abra seu navegador na URL http://localhost:3000
e verá a página inicial do projeto.
Performance da aplicação no PageSpeed
Como este site foi feito em NextJS, ele foi otimizado para oferecer a melhor experiência possível para o usuário. Diversos recursos do NextJS como Automatic code-splitting
, Server-side rendering
, CSS-in-JS styling
, Image Optimization
, dentre outros, e otimizações de imagens feitas por mim, resultaram em uma excelente métrica no Google PageSpeed. Veja abaixo os resultados obtidos nos testes para dispositivos móveis e computadores.
Iglan Cardeal
Desenvolvido e mantido por Iglan Cardeal 🔨
Desenvolvedor NodeJS 💻
Entre em contato! 👋🏽
- cmtcardeal@outlook.com 📧
- Instagram @cmtecardeal
- StackOverflow Cmte Cardeal