Está próxima la fecha del cumpleaños de tu flacx (novix) y estás organizando una fiesta sorpresa. Para organizar la fiesta has creado un grupo de Whatsapp junto con amigos y familiares.
Un gran problema es que pones tu alarma para levantarte temprano, sin embargo (como supondrás) eso nunca sucede y tu flacx es quien termina apagando la alarma y "de casualidad" revisando tus mensajes. Debido a que es algo sorpresa, decides crear una aplicación que te permita enviar mensajes cifrados y que las demás personas (partícipes de la fiesta) puedan tener una interfaz para descifrarlo. Así que ahora te toca aplicar tus superpoderes 😎
El cifrado César es uno de los primeros métodos de cifrado conocidos históricamente. Es un tipo de cifrado por sustitución en el que una letra en el texto original es reemplazada por otra letra que se encuentra un número fijo de posiciones más adelante en el alfabeto.
El emperador Julio César lo usaba para enviar órdenes a sus generales en los campos de batalla, es una de las técnicas más simples y más usadas para cifrar un mensaje.
Por ejemplo si usáramos un desplazamiento de 3:
- Alfabeto sin 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 cifrado: 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
Actualmente todos los cifrados de sustitución alfabética simple, se descifran con facilidad y en la práctica no ofrece mucha seguridad en la comunicación, pero el cifrado César muchas veces puede formar parte de sistemas más complejos de codificación, como el cifrado Vigenère, e incluso tiene aplicación en el sistema ROT13.
El objetivo principal de aprendizaje de este proyecto es tener tu primera experiencia construyendo una aplicación web usando tus conocimientos de User Experience Designer y de JavaScript developer. Esto incluye diseñar un producto pensando en los usuarios, construir una interfaz, escuchar eventos básicos del DOM, escribir lógica para llevar a cabo el cifado/descifrado, tests unitarios básicos para comprobar (y documentar) dicha lógica, y finalmente manipulación del DOM para mostrar (escribir) los resultados.
Para completar el proyecto tendrás que familiarizarte con conceptos como valores, tipos, variables, control de flujo y tests unitarios.
Esperamos que en este proyecto puedas pensar en el usuario, entendiendo quién y cuál(es) es su nececidad. La creación de este producto va a resolver esa(s) necesidad(es) y qué mejor que hacerlo de la mejor forma. Que sea totalmente lo que nuestro usuario necesita.
También es importante que puedas organizarte teniendo en cuenta el tiempo y los recursos disponibles. Es la primera vez que evaluaremos tus habilidades blandas, pero debes considerar que son habilidades que probablemente ya has utilizado en distintas experiencias de tu vida. Lo importante es que realices el proyecto de manera integral.
La lógica del proyecto debe estar implementada completamente en JavaScript (ES6). En este proyecto NO está permitido usar librerías o frameworks, sólo vanilla JavaScript.
No se debe utilizar la pseudo-variable this.
Los tests unitarios deben cubrir un mínimo del 70% de statements, functions
y lines, y un mínimo del 50% de branches. El boilerplate ya contiene el
setup y configuración necesaria para ejecutar los tests (pruebas) así como code
coverage para ver el nivel de cobertura de los tests usando el comando npm test.
El boilerplate incluye tests (pruebas) de ejemplo como punto de partida.
Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio que contiene el boilerplate.
El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias y tests de ejemplo:
./
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│ ├── cipher.js
│ ├── index.html
│ ├── index.js
│ └── style.css
└── test
├── cipher.spec.js
├── headless.js
└── index.html
El boilerplate incluye tareas que ejecutan eslint y
htmlhint para verificar el HTML y
JavaScript con respecto a una guías de estilos. Ambas tareas se ejecutan
automáticamente antes de ejecutar las pruebas (tests) cuando usamos el comando
npm run test. En el caso de JavaScript estamos usando un archivo de
configuración de eslint que se llama .eslintrc que contiene un mínimo de
información sobre el parser que usar (qué version de JavaScript/ECMAScript), el
entorno (browser en este caso) y las reglas recomendadas ("eslint:recommended").
En cuanto a reglas/guías de estilo en sí,
usaremos las recomendaciones por defecto de tanto eslint como htmlhint.
En el README.md cuéntanos cómo pensaste en los usuarios al desarrollar tu
producto y cuál fue tu proceso para definir el producto final a nivel de
experiencia y de interfaz.
- quiénes son los principales usuarios de producto
- cuáles son los objetivos de estos usuarios en relación con el producto
- cómo crees que el producto que estás creando les está resolviendo sus problemas
Para llevar tus conocimientos a otro nivel en UX:
- puedes investigar y aplicar algunas de las técnicas y herramientas relacionadas al proceso de diseño como entrevistas y testeos con usuarios de tus sketches o prototipos.
La interfaz debe permitir al usuario:
- elegir un
offsetindicando cuántas posiciones queremos que el cifrado desplace cada caracter - insertar un mensaje (texto) que queremos cifrar
- ver el resultado del mensaje cifrado
- insertar un mensaje (texto) a descifrar
- ver el resultado del mensaje descifrado
Estos puntos lejos de ser funcionalidades, en términos de UI debes pensarlos como elementos que estalecer la interacción con tu usuario.
README.md: debe explicar cómo descargar, instalar y ejecutar la aplicación así como una introducción a la aplicación, su funcionalidad y decisiones de diseño que tomaron.src/index.html: este es el punto de entrada a tu aplicación. Este archivo debe contener to markup (HTML) e incluir el CSS y JavaScript necesario.src/cipher.js: acá debes implementar el objeto cipher, el cual debe estar exportado en el objeto global (window). Este objeto (cipher) debe contener dos métodos:cipher.encode(offset, string):offsetes el número de posiciones que queremos mover a la derecha en el alfabeto ystringel mensaje (texto) que queremos cifrar.cipher.decode(offset, string):offsetes el número de posiciones que queremos mover a la izquierda en el alfabeto ystringel mensaje (texto) que queremos decifrar.
src/index.js: acá debes escuchar eventos del DOM, invocarcipher.encode()ocipher.decode()según sea necesario y actualizar el resultado en la UI.test/cipher.spec.js: este archivo contiene algunos tests de ejemplo y acá tendrás que implementar los tests paracipher.encode()ycipher.decode().
No estás limitada a implementar solo la parte obligatoria. Te sugerimos crear
también una función cipher.createCipherWithOffset() que reciba un offset y
devuelva un nuevo objeto con dos métodos (encode y decode) que solo reciban
el string y usen el offset que se pasó a createCipherWithOffset a la hora
de crear el objeto.
Lo anterior, nos ayuda a observar tu capacidad de autoaprendizaje, pudiendo agregar a tu trabajo un elemento que lo lleva al siguiente nivel.
Puedes realizar una planificación experta teniendo en consideración la utilización de herramientas de planificación, como un calendario, trello, papelógrafo u otras, creando un plan paso a paso de cómo quiere abarcar el reto o problema. Realizando una estimación realista del tiempo.
El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
interfaz será desplegada usando GitHub pages.
Te aconsejamos revisar la rúbrica para ver la descripción detallada de cada habilidad y cada nivel.
| Característica/Habilidad | Nivel esperado |
|---|---|
| Completitud | 3 |
| Investigación | 3 |
| Documentación | 2 |
| Habilidad | Nivel esperado |
|---|---|
| JavaScript | |
| Estilo | 2 |
| Nomenclatura/semántica | 2 |
| Funciones/modularidad | 1 |
| Estructuras de datos | 0 |
| Tests | 2 |
| HTML | |
| Validación | 2 |
| Estilo | 3 |
| Semántica | 2 |
| SEO | 0 |
| CSS | |
| DRY | 2 |
| Responsive | 2 |
| SCM | |
| Git | 1 |
| GitHub | 2 |
| CS | |
| Lógica | 1 |
| Arquitectura | 1 |
| Patrones/paradigmas | 0 |
| Habilidad | Nivel esperado |
|---|---|
| User Centricity | 2 |
Para este reto queremos que intentes llegar al nivel 2 por lo menos en 5 de tus habilidades blandas y que tengas el nivel 1 en sólo 3 habilidades.
| Habilidad | Nivel esperado |
|---|---|
| Planificación y organización | 2 |
| Autoaprendizaje | 2 |
| Solución de problemas | 2 |
| Dar y recibir feedback | 2 |
| Adaptabilidad | 2 |
| Trabajo en equipo | 1 |
| Comunicación eficaz | 1 |
| Presentaciones | 1 |
- Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Code.
- Para ejecutar los comandos a continuación necesitarás una 🐚
UNIX Shell,
que es un programita que interpreta líneas de comando (command-line
interpreter) así como tener git
instalado. Si usas un sistema operativo "UNIX-like", como GNU/Linux o MacOS,
ya tienes una shell (terminal) instalada por defecto (y probablemente
gittambién). Si usas Windows puedes usar Git bash, aunque recomendaría que consideres probar 🐧 GNU/Linux. - Haz tu propio 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo privado y te darán acceso de lectura en ese repo.
- ⬇️ Clona tu fork a tu computadora (copia local).
- 📦 Instala las dependencias del proyecto con el comando
npm install. Esto asume que has instalado Node.js (que incluye npm). - Si todo ha ido bien, deberías poder ejecutar las 🚥
pruebas unitarias (unit tests) con el comando
npm test. - A codear se ha dicho! 🚀
A continuación un video de Michelle que te lleva a través de la fórmula matemática del Cifrado César y un par de cosas más que debes saber para resolver este proyecto. ¡Escúchala con detenimiento y sigue sus consejos! :)
También te compartimos más información de lo que Michelle te ha explicado en el video anterior:
- Aprende más sobre
charCodeAt() - Aprende más sobre
String.fromCharCode() - Aprende más sobre
ASCII - Documentación de NPM
Estos son algunos tips que te pueden ayudar en la organización y realización de tu proyecto, teniendo en cuenta el desarrollo de tus habilidades blandas:
- Para comenzar realiza una organización de tu proyecto, ve con qué recursos cuentas y el tiempo que tienes para completarlo.
- Si hay algo que no sepas pregunta e intenta resolverlo; puedes comenzar con una búsqueda en google, luego consultando a tu squad y por último a tus coaches. Si hay algo que yo no sé, otro me puede ayudar. El aprendizaje es un proceso colaborativo.
- Una vez que empieces a avanzar pide feedback, tus compañeras pueden tener excelentes ideas o formas de resolver el proyecto que te pueden ayudar.
- Cuando te topes con un problema, busca alternativas, y para eso consulta diferentes fuentes.
- Si ya te ves invirtiendo mucho tiempo en detalles debes saber priorizar y seguir con lo más importante, los proyectos tienen tiempo limitado y debes saber administrarlo.
- Trabaja en equipo, pregunta e intenta completar el proyecto sin rendirte.
- Prepara tu presentación, si no logro comunicar mis ideas a los demás no se podrá apreciar todo el esfuerzo y trabajo que invertiste.