- 1. Descripción
- 2. Historias de usuario
- 3. Diseño de la Interfaz de Usuario
- 4. Criterios de aceptación mínimos del proyecto
- 5. Hacker edition
- 6. Pistas, tips y lecturas complementarias
Las redes sociales han invadido nuestras vidas. Las amamos u odiamos, y muchos no podemos vivir sin ellas.'Skyy' es una red social libre sin ningun concepto aún, puede adaptarse a cualquier ámbito; además, permite la interacción entre usuarios para un mejor dinamismo de la información posteada.
-
Vista Mobile
-
Vista Desktop
Estas consideraciones te ayudarán a escribir las Definiciones de Terminado de tus H.U.:
- Login con Firebase:
- [✔️🦔] Para el login y las publicaciones en el muro puedes utilizar Firebase
- [✔️🦔] Creación de 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 debe ser secreto.
- Comportamiento:
- [✔️🦔] Al enviarse el formulario de registro o inicio de sesión, debe validarse.
- [✔️🦔] Si hay errores, se deben mostrar mensajes descriptivos para ayudar al usuario a corregirlos.
- Validaciones:
- [✔️🐟]Al publicar, se debe validar que exista contenido en el input.
- Comportamiento:
- [✔️🐟]Al recargar la aplicación, se debe verificar si el usuario está logueado antes de mostrar contenido.
- [✔️🐟]Poder publicar un post.
- [✔️🐟]Poder dar y quitar like a una publicación. Máximo uno por usuario.
- [✔️🐟]Llevar un conteo de los likes.
- [✔️🐟]Poder eliminar un post específico.
- Pedir confirmación antes de eliminar un post.
- [✔️🐟]Al dar click para editar un post, debe cambiar el texto por un input que permita editar el texto y luego guardar los cambios.
- [✔️🐟]Al guardar los cambios debe cambiar de vuelta a un texto normal pero con la información editada.
- [✔️🐟]Al recargar la página debo de poder ver los textos editados.
- [✔️🦄] Separar la manipulación del DOM de la lógica (Separación de responsabilidades).
- [✔️🦄] Contar con múltiples vistas. Para esto, tu aplicación debe ser una Single Page Application (SPA)
- [✔️🦄] Alterar y persistir datos. Los datos que agregues o modifiques deberán persistir a lo largo de la aplicación. Te recomendamos que uses Firebase para eso también.
-
[✔️🦊] Recuerda que no hay un setup de tests definido, dependerá de la estructura de tu proyecto. Algo que no debes de olvidar es pensar en éstas pruebas, te pueden ayudar a definir la estructura y nomenclatura de tu lógica.
-
[✔️🦊] Los tests unitarios deben cubrir un mínimo del 70% de statements, functions, lines, y branches.
- Hacer al menos 2 entrevistas con usuarios.
- [✔️🦊] Hacer un prototipo de baja fidelidad.
- [✔️🦊] Asegurarte de que la implementación en código siga los lineamientos del diseño.
- [✔️🦊] Hacer sesiones de testing de usabilidad con el producto en HTML.
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.
- [✔️🐉]Permite crear posts con imágenes.
- Permite buscar usuarios, agregar y eliminar "amigos".
- Permite definir la privacidad de los posts (público o solamente para amigos).
- Permite ver su muro de cualquier usuario "no-amigo" (solamente los posts públicos).
- [✔️🐉]Permite comentar o responder una publicación.
- [✔️🐉]Permite editar perfil. *solo el banner
El concepto de mobile first hace referencia a un proceso de diseño y desarrollo donde partimos de cómo se ve y cómo funciona la aplicación en un dispositivo móvil primero, y más adelante se ve como adaptar la aplicación a pantallas progresivamente grandes y características específicas del entorno desktop. Esto es en contraposición al modelo tradicional, donde primero se diseñaban los websites (o webapps) para desktop y después se trataba de arrugar el diseño para que entre en pantallas más chicas. La clave acá es asegurarse de que desde el principio diseñan usando la vista responsive de las herramientas de desarrollador (developer tools) del navegador. De esa forma, partimos de cómo se ve y comporta la aplicación en una pantalla y entorno móvil.
En proyectos anteriores nuestras aplicaciones habían estado compuestas de una
sola vista principal (una sóla página). En este proyecto se introduce la
necesidad de tener que dividir nuestra interfaz en varias vistas o páginas
y ofrecer una manera de navegar entre estas vistas. Este problema se puede
afrontar de muchas maneras: con archivos HTML independientes (cada uno con su
URL) y links tradicionales, manteniendo estado en memoria y rederizando
condicionalmente (sin refrescar la página), manipulando el historial del
navegador
con window.history.
En este proyecto te invitamos a explorar opciones y decidir una opción
de implementación.
En los proyectos anteriores hemos consumido (leído) datos, pero todavía no habíamos escrito datos (salvar cambios, crear datos, borrar, ...). En este proyecto tendrás que crear (salvar) nuevos datos, así como leer, actualizar y modificar datos existentes. Estos datos se podrán guardar de forma remota usando Firebase.
Otras:
Social Network is a project done by Maribel Maza for Laboratoria ,
August 2021 🤗
