- 1. Objetivos de aprendizaje generales
- 2. Preámbulo
- 3. Resumen del proyecto
- 4. Consideraciones generales
- 5. Hito 1: Criterios de aceptación mínimos del proyecto
- 6. Hito 2 (opcional): Agrega soporte para minúsculas y otros caracteres
- 7. Consideraciones técnicas
- 8. Objetivos de aprendizaje
- 9. Pistas, tips y lecturas complementarias
- 10. Para considerar Project Feedback
Como continuación del proyecto de preadmisión, volverás a trabajar sobre fundamentos de JavaScript, incluyendo conceptos como variables, condicionales, y funciones, así como eventos y manipulación básica del DOM, fundamentos de HTML y CSS.
Mientras desarrollas este proyecto, te familiarizarás con estos nuevos conceptos:
- Un boilerplate, la estructura básica de un proyecto en distintas carpetas (a través
modulosen JS). - Las herramientas de mantenimiento y mejora del código (linters y pruebas unitarias).
- Objetos en JavaScript, su estructura y métodos.
- Iteración (bucles) en JavaScript.
- Control de versiones con git (y la plataforma github)
Cifrar significa codificar. El cifrado César es uno de los primeros métodos de cifrado conocidos. El emperador romano Julio César lo usaba para enviar órdenes secretas a sus generales en los campos de batalla.
El cifrado césar es una de las técnicas más simples para cifrar un mensaje. Es un tipo de cifrado por sustitución, es decir que cada letra del texto original es reemplazada por otra que se encuentra un número fijo de posiciones (desplazamiento) más adelante en el mismo alfabeto.
Por ejemplo, si usamos un desplazamiento (offset) de 3 posiciones:
- La letra A se cifra como D.
- La palabra CASA se cifra como FDVD.
- 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
En la actualidad, todos los cifrados de sustitución simple se descifran con mucha facilidad y, aunque en la práctica no ofrecen mucha seguridad en la comunicación por sí mismos; el cifrado César sí 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.
En este proyecto crearás una aplicación web que servirá para que tu usuaria pueda cifrar y descifrar un texto en el navegador indicando un desplazamiento específico de caracteres (offset). Lo harás utilizando HTML, CSS y JavaScript.
La temática es libre. Piensa en qué situaciones se necesitaría cifrar un mensaje. Decide cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, etc.) Algunas ideas de ejemplo:
- Crear claves seguras para el email.
- Encriptar/cifrar una tarjeta de crédito.
- Herramienta de mensajería interna de una organización de derechos humanos en una zona de conflicto.
- Mensajería secreta para parejas.
- Este proyecto lo resolvemos de manera individual. Te recomendamos una duracion de 1-3 sprints.
- Enfócate en aprender y no solamente en "completar" el proyecto. Te va a costar.
- Te sugerimos que no intentes saberlo todo antes de empezar a codear. No te preocupes demasiado ahora por lo que todavía no entiendas. Irás aprendiendo.
Estos son los requisitos que tu proyecto debe que cumplir para asegurar que tu trabajo cubra los objetivos principales.
1. Una interfaz que debe permitir a la usuaria:
-
Cifrar un mensaje
- Insertar el mensaje (texto) que quiere cifrar. El mensaje usa alfabeto simplificado (solamente mayúsculas y sin ñ).
- Elegir un numero de desplazamiento (offset) indicando cuántas posiciones quieres que el cifrado desplace cada caracter en el alfabeto. El numero sera positivo y entero (positive integer).
- Ver el resultado del mensaje cifrado.
-
Descifrar un mensaje
- Insertar el mensaje (texto) que quieres descifrar. El mensaje usa alfabeto simplificado (solamente mayúsculas y sin ñ).
- Elegir un numero desplazamiento (offset, que corresponda al que usamos para cifrar) indicando cuántas posiciones quieres que el cifrado desplace cada caracter en el alfabeto. El numero sera positivo y entero (positive integer).
- Ver el resultado del mensaje descifrado.
2. Pruebas unitarios de los métodos.
Los metódos de cipher (encode y decode) deben tener cobertura con pruebas unitarias.
3. Código de tu proyecto subido a tu repo y interfaz "desplegada".
El código final debe estar subido en un repositorio en GitHub. La interfaz o pagina web, debe ser "desplegada" usando GitHub Pages.
4. Un README que contiene una definición del producto.
En el README cuéntanos cómo pensaste en los usuarios y cuál fue tu proceso para definir el producto final a nivel de experiencia y de interfaz. Estas preguntas sirven como guia:
- Quiénes son los principales usuarios de producto.
- Cuáles son los objetivos de estos usuarios en relación con tu producto.
- Cómo crees que el producto que estás creando está resolviendo sus problemas.
Con estos requisitos cumplidos puedes agendar un Project Feedback con unx coach.
Las partes "opcionales" tienen como intención permitirte profundizar un poco más sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, decide sabiamente si quieres invertir el tiempo en profundizar/perfeccionar o aprender cosas nuevas en el siguiente proyecto.
El hito 1 no menciona qué pasaría con las letras minúsculas y otros caracteres (como espacios, puntuación, ñ, ...). El boilerplate incluye algunos tests (comentados en principio) que puedes usar como punto de partida para implementar el soporte para estos casos adicionales.
La lógica del proyecto debe estar implementada completamente en JavaScript. En este proyecto NO está permitido usar librerías o frameworks, solo JavaScript puro también conocido como Vanilla JavaScript.
Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio que contiene un boilerplate con tests (pruebas). Un boilerplate es la estructura basica de un proyecto que sirve como un punto de partida con archivos inicial y configuración basica de dependencias y tests.
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 que les damos contiene esta estructura:
./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│ ├── cipher.js
│ ├── index.html
│ ├── index.js
│ └── style.css
└── test
├── .eslintrc
└── cipher.spec.js
README.md: debe explicar la información necesaria para el uso de tu aplicación web, 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 tu markup (HTML) e incluir el CSS y JavaScript necesario.src/style.css: este archivo debe contener las reglas de estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el uso de frameworks de CSS (Bootstrap, Materialize, etc).src/cipher.js: acá debes implementar el objetocipher, el cual ya está exportado en el boilerplate. 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 descifrar.
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().
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.
Hacer que los sitios estén publicados (o desplegados) para que usuarias de la web puedan acceder a él es algo común en proyectos de desarrollo de software.
En este proyecto, utilizaremos Github Pages para desplegar nuestro sitio web.
El comando npm run deploy puede ayudarte con esta tarea y también puedes
consultar su documentación oficial.
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Tipos de datos primitivos
-
Strings (cadenas de caracteres)
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Pruebas unitarias (unit tests)
-
Módulos de ECMAScript (ES Modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Git: Instalación y configuración
-
Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
-
GitHub: Creación de cuenta y repos, configuración de llaves SSH
-
GitHub: Despliegue con GitHub Pages
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual
- 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 programa 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 la versión completa de Cmder que incluye Git bash y si tienes Windows 10 o superior puedes usar Windows Subsystem for Linux. - Una de las integrantes del equipo debe realizar un 🍴
fork del repo de tu cohort,
tus coaches te compartirán un link a un repo y te darán acceso de lectura
en ese repo. La otra integrante del equipo deber hacer un fork del
repositorio de su compañera y
configurar un
remotehacia el mismo. - ⬇️ 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. - Para ver la interfaz de tu programa en el navegador, usa el comando
npm startpara arrancar el servidor web y dirígete ahttp://localhost:5000en tu navegador. - A codear se ha dicho! 🚀
Súmate al canal de Slack #project-cipher para conversar y pedir ayuda del proyecto.
A continuación un video 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. La fórmula no es lo iportante del proyecto, no te confundas.
Terminal y shell de UNIX:
Control de versiones y trabajo colaborativo con Git y GitHub:
Desarrollo Front-end:
- Aprende más sobre
charCodeAt() - Aprende más sobre
String.fromCharCode() - Aprende más sobre
ASCII - Documentación de NPM
Organización del Trabajo:
- Metodologías Ágiles
- Scrum en menos de 2 minutos
- Scrum en Detalle. No esperamos que hagas todo eso desde este proyecto. Iremos profundizando poco a poco a lo largo del -bootcamp.
En resumen, los criterios de aceptación mínimos del proyecto para considerar Project Feedback:
- Tiene una interfaz que permite a la usuaria cifrar y descifrar.
- El proyecto será entregado incluyendo pruebas unitarios de los métodos de
cipher(encodeydecode). - El proyecto será entregado libre de errores de
eslint(warnings son ok). - El proyecto será entregado subiendo tu código a GitHub.
- La interfaz será "desplegada" usando GitHub Pages.
- El README contiene una definición del producto.