Telegrama - Mensajes Secretos Cifrados

Índice

• 1. Descripción
• 2. Usuarias objetivo
• 3. Características principales
• 4. Hito: Criterios de aceptación mínimos del proyecto
• 5. Hito Opcional: Agrega soporte para minúsculas y otros caracteres
• 6. Consideraciones técnicas
• 7. Objetivos de aprendizaje
• 8. Pistas, tips y lecturas complementarias
• 9. Para considerar Project Feedback

---

1. Descripción

Telegrama es una aplicación que te permite enviar mensajes secretos cifrados a tus amigas. La idea detrás de la aplicación es brindar diversión y complicidad en la comunicación afectiva entre personas cercanas. Imagina ser la única que comparte el número de "offset" que descifra el código y mantener el contenido de los mensajes en secreto.
Esta aplicación se basa en el cifrado César, uno de los primeros métodos de cifrado conocidos y 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

2. Usuarias objetivo

Telegrama está diseñada pensando en amigas, niñas, adolescentes y jóvenes adultas que buscan añadir un toque de misterio y complicidad a sus relaciones interpersonales. La aplicación les permite cifrar y descifrar mensajes de una manera sencilla y atractiva.

3. Características principales

• Cifrado de mensajes secretos con un número de "offset" proporcionado por la usuaria.
• Descifrado de mensajes utilizando el mismo número de "offset" utilizado para el cifrado.
• Interfaz de usuario intuitiva y fácil de usar.
• Diseño inspirado en el concepto de telegramas, con tonos oscuros para crear un ambiente misterioso y reservado.

4. Hito: Criterios de aceptación mínimos del proyecto

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.

5. Hito Opcional: Agrega soporte para minúsculas y otros caracteres

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 de los críterios mínimos 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.

6. Consideraciones técnicas

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

Descripción de scripts / archivos

• 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 objeto cipher, el cual ya está exportado en el boilerplate. Este objeto (cipher) debe contener dos métodos:
  • cipher.encode(offset, string): offset es el número de posiciones que queremos mover a la derecha en el alfabeto y string el mensaje (texto) que queremos cifrar.
  • cipher.decode(offset, string): offset es el número de posiciones que queremos mover a la izquierda en el alfabeto y string el mensaje (texto) que queremos descifrar.
• src/index.js: acá debes escuchar eventos del DOM, invocar cipher.encode() o cipher.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 para cipher.encode() y cipher.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.

Deploy

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.

---

7. Objetivos de aprendizaje

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.

HTML

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de datos primitivos

  Links

  • Valores primitivos - MDN

• Strings (cadenas de caracteres)

  Links

  • Strings
  • String — Cadena de caracteres - MDN

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

Control de Versiones (Git y GitHub)

• 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

  Links

  • Sitio oficial de GitHub Pages

Centrado en el usuario

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Crear prototipos de alta fidelidad que incluyan interacciones

• Seguir los principios básicos de diseño visual

8. Pistas, tips y lecturas complementarias

Prepara tu PC para trabajar

Antes de comenzar instala lo siguiente:

1. Node.js
2. git Si estas en Linux es muy probable que ya este instalado 👀. Para conocer más de git visita este enlace
3. Un editor de código, te sugerimos Code

Después en GitHub:

1. Crear una cuenta. Conoce más de GitHub en este link
2. Realiza un fork de este proyecto
3. Configura tu SSH Key en GitHub. Puedes revisar este video o artículo

Luego en una shell ejecuta lo siguiente. Si estas en Windows puedes usar Git Bash:

1. Clona el fork en tu PC
2. Ubica la shell en el proyecto que clonaste
3. Instala las dependencias del proyecto con npm install
4. Para arrancar el servidor web npm start y dirígete a http://localhost:3000 en tu navegador.
5. A codear se ha dicho! 🚀

Recursos y temas relacionados

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 importante del proyecto, no te confundas.

Terminal y shell de UNIX:

Link

Control de versiones y trabajo colaborativo con Git y GitHub:

Link

Desarrollo Front-end:

• Aprende más sobre charCodeAt()
• Aprende más sobre String.fromCharCode()
• Aprende más sobre ASCII
• Aprende más sobre objetos y como definir métodos

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.

---

9. Para considerar Project Feedback

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 (encode y decode).
• 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.