Es una aplicación para mandar mensaje cifrados en situaciones de conflicto, protestas o cuando no hay acceso a internet, a través de la conexión bluetooth a cualquier contacto que cuente con la app y que se encuentre en un rango tal que sea posible trazar un camino a través de otros usuarios que también cuenten con la app.
Esta aplicación está pensada para cualquier persona que se encuentre en una situación de conflicto o que es partícipe de una protesta y no cuenta con un medio seguro para comunicarse, ya sea por represión o falta de canales de comunicación, en particular internet.
- Poder mandar y recibir mensajes cifrados.
- Una aplicación cuyo uso sea rápido e intuitivo.
- Interfaz discreta.
- No debe haber respaldo ni historial de mensajes.
- Enviar y recibir mensajes por canales de bluetooth.
- Mensajería personalizada a contactos de confianza.
Esta aplicación fue realizada con el fin de cubrir las necesidades de los usuarios a quienes esta dirigida. Es una herramiente eficiente, ya que muestra sus componentes en una misma pantalla. No hay pantallas extra que obstaculicen la interacción del usuario. Los colores son discretos, está pensada para uso con luz de día. Es intuitiva en su uso, al presentar los elementos en el orden en el que van siendo usados. Contiene dos botones que ayudan al usuario en caso de no saber cómo usarla, con mensajes discreto al final de la aplicación. El cifrado admite, en tres anillos, letras mayúsculas, minúsculas y números, también admite, aunque no cifra, caracteres especiales y puntuación para que el usuario pueda mandar un mensaje con toda la información que necesita expresar. Finalmente, en caso de equivocarse, valida la entrada de valores diferentes a un número y admite valores negativos para el offset, clave necesaria en el cifrado y descifrado.
En el primer skecth de la aplicación se propuso que toda la funcionalidad quedase en una sola pantalla, sin embargo,no quedaba tan claro el uso de componentes y como los elementos podran funcionar para mandar y recibir mensajes. También se sugirió que no había un contacto claro con quien se estuviese realizando la comunicación. Se agregó un habilitador para el canal de bluetooth que además muestre quienes son los contactos en rango pues por ese canal no es posible comunicarse con todos los contactos disponibles. Se cambiaron aspectos en la funcionalidad para validar la información que usa la aplicación.
Al aplicarse los cambios sugeridos y probar su usabilidad se obtuvo el siguiente resultado.
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
Para la estapa de desarrollo de UX, se investigaron las necesidades del usuario respondiendo las siguientes preguntas: -¿quién es el usuario? -¿qué busca conseguir? -¿cuándo utilizan el producto? -¿por qué deciden usarlo?
Se investigaron aplicaciones con usos similares y se cosideró la problemática que ya había resuelto la más popular en el mercado: bridgefy.
Se eligió el nombre IRIS por se la mensajera de los dioses en la mitología griega y se eligió un colibrí como logotipo por ser el animal que representa al mensajero de los dioses en la mitología maya. La paleta de colores usa como base el color azul con la intención de representar confianza y seriedad. La tipografía es sans-serif para que el susuario pueda leer fácilmente los textos y el uso de la aplicación sea fluído. Lo elementos se alinearon para que el usuario tenga acceso a cada uno en forma de cascada según los va requiriendo.
Como parte del diseño de la interfaz de usuario, se realizó el skecth, los wireframes y el prototipo. En cada caso se dio feedback para iterar y finalmente aplicar mejoras en el proyecto final.
- Uso correcto de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
Se usaron las etiquetas definidas para cada elemento y se les asignaron id, name, class, value, etc. según fue necesario. Se crearon los estilos llamando a los elementos con selectores de acuerdo al atributo asigando. El proyecto final corresponde con el diseño de prototipo.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM.
Se manejó el DOM para hacer cumplir distintas validaciones en la interfaz y evitar errores en el ingreso de información.
- Manipulación de strings.
- Uso de condicionales (if-else | switch).
- Uso de bucles (for | do-while).
- Uso de funciones (parámetros | argumentos | valor de retorno).
- Declaración correcta de variables (const & let).
Se usaron las funciones for e if-else para generar la función cypher, y se manejaron datos tipo booleano, string, number. Se crearon mas funciones para la interacción del usuario con la interfaz mandando parámetros, condicionando argumentos y retornando resultados. Debido a la funcionalidad, las variables se declararon como let.
- Testeo de tus funciones.
Con base en las pruebas unitarias para la primera edición del proyecto, las pruebas resultaron al 100%.
- Comandos de git (add | commit | pull | status | push).
- Manejo de repositorios de GitHub (clone | fork | gh-pages).
Se creó una cuenta en github, se intalaron los sistemas necesarios. Se dio fork al proyecto original para crear un repositorio propio en el cual trabajar, se clonó y editó, actualizando y descargando versiones por medio de los comandos status, add, commit, pull, push. Se publicó el proyecto.
- Uso de identificadores descriptivos (Nomenclatura | Semántica).
- Uso de linter para seguir buenas prácticas (ESLINT).
Se aplicaron las mejores prácticas. ESLINT formó parte de la paquetería de tests.
- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Hacker Edition
- 7. Pistas, tips y lecturas complementarias
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.
¿Qué tengo que hacer exactamente? En este proyecto crearás la primera aplicación web del bootcamp. Servirá para que el usuario pueda cifrar y descifrar un texto indicando un desplazamiento específico de caracteres (offset).
La temática es libre. Tú debes pensar en qué situaciones de la vida real se necesitaría cifrar un mensaje y pensar en cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, ¿marca?) 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.
El objetivo principal de aprendizaje es adquirir experiencia desarrollando aplicaciones web (WebApp) que interactúen con el usuario a través del navegador y la lógica, utilizando HTML5, CCS3 y JavaScript como herramientas.
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto.
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
- Uso correcto de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- Manipulación dinámica del DOM.
- Manipulación de strings.
- Uso de condicionales (if-else | switch).
- Uso de bucles (for | do-while).
- Uso de funciones (parámetros | argumentos | valor de retorno).
- Declaración correcta de variables (const & let).
- Testeo de tus funciones.
- Comandos de git (add | commit | pull | status | push).
- Manejo de repositorios de GitHub (clone | fork | gh-pages).
- Uso de identificadores descriptivos (Nomenclatura | Semántica).
- Uso de linter para seguir buenas prácticas (ESLINT).
- Este proyecto se debe resolver de manera individual.
- El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub pages. Si no sabes lo que es GitHub, no te preocupes, lo aprenderás durante este proyecto.
- Tiempo para completarlo: Toma como referencia 2 semanas. Trabaja durante el primer Sprint (una semana) y al final, trata de fijar un estimado de cuándo lo terminarás.
Usa este alfabeto simple (solamente mayúsculas y sin ñ).
- 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
La interfaz debe permitir al usuario:
- Elegir un desplazamiento (offset) indicando 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.
Antes de iniciar a codear, debes entender el problema que quieres solucionar y cómo tu aplicación lo soluciona.
- Trabaja tu primer prototipo con papel y lápiz (blanco y negro).
- Luego valida esta solución con una compañera (pedir feedback).
- Toma lo aprendido al momento de validar tu primer prototipo y desarrolla un
nuevo prototipo usando alguna herramienta para diseño de prototipos
(Balsamiq, Figma,
Google Slides, etc.)
Estos puntos los presentarás en el
README.md.
README.md:
Debe contener lo siguiente:
- Un título con el nombre de tu proyecto.
- Un resumen de 1 o 2 líneas de qué se trata tu proyecto.
- La imagen final de tu proyecto.
- Investigación UX:
- Explicar quiénes son los usuarios y los objetivos en relación con el producto.
- Explicar cómo el producto soluciona los problemas/necesidades de dichos usuarios.
- Luego colocarás la foto de tu primer prototipo en papel.
- Agregar un resumen del feedback recibido indicando las mejoras a realizar.
- Imagen del prototipo final.
Deberás maquetar de forma exacta el prototipo final que hiciste en balsamiq utilizando HTML5 y CSS3. En este momento elegirás los colores, tipo de fuente, etc a usar.
A continuación describimos los archivos que utilizarás:
src/index.html:
En este archivo va el contenido que se mostrará al usuario (esqueleto HTML). Encontrarás 3 etiquetas iniciales, las cuales si deseas puedes borrar y empezar de cero:
<header>: encabezado de tu proyecto.<main>: contenido principal de tu proyecto.<footer>: pie de página de tu proyecto.
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 CSS3 (Bootstrap, materialize, etc).
- La lógica del proyecto debe estar implementada completamente en JavaScript.
- En este proyecto NO está permitido usar librerías o frameworks, sólo vanilla JavaScript.
- No se debe utilizar la pseudo-variable
this.
Vas a tener 2 archivos JavaScript separando responsabilidades, a continuación indicamos qué harás en cada archivo:
src/cipher.js:
Acá escribirás las 2 funciones necesarias para el usuario pueda cifrar o descifrar.
Para esto debes implementar el objeto cipher, el cual ya se encuentra exportado en el
objeto global (window). Este objeto (cipher) contiene 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á escribirás todo el código que tenga que ver con la interacción del DOM (seleccionar,
actualizar y manipular elementos del DOM y eventos).
Es decir, en este archivo deberás invocar a cipher.encode(offset, string) y
cipher.decode(offset, string) según sea necesario para actualizar el resultado en la
pantalla(UI).
test/cipher.spec.js:
En este archivo tendrás que completar las pruebas unitarias de las funciones
cipher.encode(offset, string) y cipher.decode(offset, string) implementadas en cipher.js
utilizando Jest.
Tus pruebas unitarias deben dar un 70% en coverage (cobertura), statements (sentencias),
functions (funciones) y lines (líneas); y un mínimo del 50% de branches (ramas).
Las secciones llamadas Hacker Edition son opcionales. Si terminaste con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.
La descripción general de este proyecto 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.
Tampoco se menciona qué pasaría si el offset fuera negativo. Como parte del hacker edition te invitamos a explorar también esta caso por tu cuenta.
- 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 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. - 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! 🚀
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! :)
https://www.youtube.com/watch?v=f0zL6Ot9y_w
Diseño de experiencia de usuario (User Experience Design):
- Ideación
- Prototipado (sketching)
- Testeo e Iteración
Desarrollo Front-end:
- Valores
- Tipos
- Variables
- Control de flujo
- Tests unitarios
- Aprende más sobre
charCodeAt() - Aprende más sobre
String.fromCharCode() - Aprende más sobre
ASCII - Documentación de NPM
Herramientas:
- GitHub y GitHub Pages.
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.