- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
Instagram, Snapchat, Twitter, Facebook, Twitch, Linkedin, etc. Las redes sociales han invadido nuestras vidas. Las amamos u odiamos, y muchos no podemos vivir sin ellas.
Hay redes sociales de todo tipo y para todo tipo de intereses. Por ejemplo, en una ronda de financiamiento con inversionistas, se presentó una red social para químicos en la que los usuarios podían publicar artículos sobre sus investigaciones, comentar en los artículos de sus colegas, y filtrar artículos de acuerdo a determinadas etiquetas o su popularidad, lo más reciente, o lo más comentado.
action!, es una red social pensada para que actores productores y directores puedan interactuar de forma directa.
El objetivo es que los usuarios puedan encontrar información de castings, producciones, información relacionada con el medio facilmente y sin necesitad de intermediarios.
Para acceder a esta red social solo se necesita un correo electrónico. Hay dos formas para registrarte, la primera con una cuenta de correo de google y la segunda ingresando tu nombre de usuario, correo electrónico y creando una contraseña.
Aquí se podrán realizar publicaciones, editarlas y eliminarlas. Las publicaciones son visibles para todos los usuarios, también darle like a las publicaciones que más te gusten o quitar tu like si es que ya no lo quieres tener.
En este proyecto construimos action!, una Red Social para actores, productores y directores en donde pueden interactuar.
action! permite a cualquier usuario crear una cuenta de acceso ingresando su nombre de usuario, email y contraseña y loguearse con ella o también puede loguearse con su cuenta de Gmail; puede crear, editar, borrar y "likear" publicaciones.
El objetivo principal de aprendizaje de este proyecto es construir una Single-page Application (SPA) responsive (con más de una vista / página) en la que podamos leer y escribir datos.
Los objetivos de aprendizaje que revisamos durante este proyecto son:
- [✓] Uso de HTML semántico
-
[✓] Uso de selectores de CSS
-
[✓] Modelo de caja (box model): borde, margen, padding
-
[✓] Uso de flexbox en CSS
-
[✓] Uso de selectores del DOM
-
[✓] Manejo de eventos del DOM (listeners, propagación, delegación)
-
[✓] Manipulación dinámica del DOM
-
[✓] Ruteado (History API, evento hashchange, window.location)
-
[✓] Arrays (arreglos)
-
[✓] Objetos (key, value)
-
[✓] Diferenciar entre tipos de datos primitivos y no primitivos
-
[✓] 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)
-
[✓] Módulos de ECMAScript (ES Modules)
-
[✓] Uso de linter (ESLINT)
-
[✓] Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
[✓] Diferenciar entre expresiones (expressions) y sentencias (statements)
-
[✓] Callbacks
-
[✓] Promesas
-
[✓] Git: Instalación y configuración
-
[✓] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
-
[✓] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
-
[✓] GitHub: Creación de cuenta y repos, configuración de llaves SSH
-
[✓] GitHub: Despliegue con GitHub Pages
-
[✓] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
-
[✓] GitHub: Organización en Github (projects | issues | labels | milestones | releases)
- [✓] Diseñar un producto o servicio poniendo a la usuaria en el centro
-
[✓] Crear prototipos de alta fidelidad que incluyan interacciones
-
[✓] Seguir los principios básicos de diseño visual
- [✓] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
-
[✓] Firebase Auth
-
[✓] Firestore
-
El proyecto lo trabajamos en equipo de tres.
-
La lógica del proyecto se imprementó completamente en JavaScript (ES6+), HTML y CSS.
Este proyecto no incluía un boilerplate, así es que se definió la estructura de carpetas.
action!, es una red social pensada para que actores productores y directores puedan interactuar de forma directa. Hicimos una breve encuesta y la pasamos a personas relacionadas con el medio. Nos basamos en esas respuestas para ir definiendo nuestra red social.
El objetivo es que los usuarios puedan encontrar información de castings, producciones, información relacionada con el medio facilmente y sin necesitad de intermediarios, al mismo tiempo actores, directores y productores pueden conocerse e interactuar.
Una vez entendidas la necesidades, escribimos las Historias de Usuario que representen todo lo que necesitan hacer/ver en la Red Social. Cada una de tus Historias de Usuario tenía:
-
Criterios de Aceptación: todo lo que debe ocurrir para satisfacer las necesidades del usuario.
-
Definición de terminado: todos los aspectos técnicos que deben cumplirse y así como equipo sabíamos que cada historia estaba terminada y lista para publicarse.
Los siguientes aspectos se incluyeron:
-
Es una SPA (Single Page Application).
-
Es responsive.
-
Testeamos manualmente buscando errores e imperfecciones simples.
-
Hicimos pruebas de usabilidad e incorporamos el feedback de los usuarios como mejoras.
-
Desplegamos la aplicación.
-
Etiquetamos la versión (git tag).
Debes definir cuál será el flujo que seguirá el usuario dentro de tu aplicación y, con eso, diseña la Interfaz de Usuario (UI por sus siglas en inglés) que siga este flujo.
action! se ve bien en dispositivos de pantallas grandes
(computadoras/es, laptops, etc.) y pequeñas (tablets, celulares, etc.). Seguimos la técnica de mobile first.
- Login con Firebase:
- Para el login y las publicaciones en el muro usamos Firebase.
- Se puede crear una cuenta de acceso y autenticación con cuenta de correo y contraseña, y también con una cuenta de Google.
- Validaciones:
- Solamente se permite el acceso a usuarios con cuentas válidas.
- No pueden haber usuarios repetidos.
- La cuenta de usuario debe ser un correo electrónico válido.
- Lo que se escriba en el campo (input) de contraseña es secreto.
- Comportamiento:
- Al enviarse el formulario de registro o inicio de sesión, se valida.
- Si hay errores, se muestran mensajes descriptivos para ayudar al usuario a corregirlos.
- Validaciones:
- Al publicar, se valida que exista contenido en el input.
- Comportamiento:
- Al recargar la aplicación, verifica si el usuario está logueado antes de mostrar contenido.
- Se puede publicar un post.
- Se puede dar y quitar like a una publicación. Máximo uno por usuario.
- Se lleva un conteo de los likes.
- Se puede eliminar un post específico.
- Pide confirmación antes de eliminar un post.
- Al dar click para editar un post, cambia el texto por un input que permita editar el texto y luego guardar los cambios.
- Al recargar la página debo puedo ver los textos editados.
-
Entrevistamos usuarios para conocer sus opiniones y basarnos en ellas.
-
Hicimos un prototipo de baja fidelidad.
-
Hicimos un prototipo de alta fidelidad.
-
La implementación en código siguió los lineamientos del diseño.
-
Hicimos test de usabilidad con la herramienta Maze. Los mapas de calor que obtuvimos nos permitieron ver como interactúa el usuario con nuestra applicación.
