Bienvenida a esta nueva red social TechShare El objetivo de este proyecto tiene como proposito ser una red social en la que se puedan compartir desde dudas, memes, investigaciones, o cualquie tipo de dato que sea sobre el area de tecnologia. En esta Red Social se permite a cualquier usuario crear una cuenta de acceso y loguearse con ella; crear, editar, borrar y "likear" publicacciones.
Historia de Usuario-1
Yo/como: Usuario interesado en programación. Quiero: Poder registrarme y crear una cuenta en "TechShare". Para: Acceder a todas las funcionalidades de la plataforma y ser parte de la comunidad.
Criterios de Aceptación:
Debe haber un formulario de registro en la interfaz. El formulario debe incluir campos para nombre de usuario, correo electrónico y contraseña. Debe haber una opción para registrarse usando una cuenta de Google. Después de registrarse, el usuario debe poder iniciar sesión con su cuenta. Definición de Terminado:
El formulario de registro debe funcionar correctamente. Los datos de usuario deben almacenarse de manera segura. El usuario debe poder iniciar sesión después de registrarse. Actividad
Historia de Usuario-2
Yo/como: Usuario registrado en "TechShare" o programador. Quiero: Iniciar sesión en mi cuenta para acceder a todas las funcionalidades de la plataforma. Para: Participar en la comunidad, publicar ejemplos de código y acceder a recursos educativos.
Criterios de Aceptación:
Debe haber un formulario de inicio de sesión en la interfaz. El formulario debe incluir campos para correo electrónico y contraseña. Debe haber una opción para iniciar sesión con una cuenta de Google. Definición de Terminado:
El formulario de inicio de sesión debe funcionar correctamente. Los usuarios deben poder acceder a sus cuentas después de iniciar sesión.
Historia de usuario-3
Yo/como: Usuario interesado en la tecnologia/programacion. Quiero: Poder publicar mis ideas y reflexiones sobre programación en "TechShare." Para: Compartir conocimientos, experiencias o preguntas con la comunidad y obtener retroalimentación.
Criterios de Aceptación:
Debe haber una sección en la plataforma para crear y publicar pensamientos. Los usuarios deben poder escribir y formatear sus ideas en un editor de texto. Las publicaciones deben incluir campos para el título y las etiquetas. Debe haber validaciones para garantizar que se incluya contenido en la publicación. Definición de Terminado:
Los usuarios pueden crear y publicar sus pensamientos en la plataforma. Los pensamientos se muestran en el muro/timeline de la comunidad.
Historia de usuario-4
Yo/como: Usuario registrado en "TechShare." Quiero: Poder interactuar con los pensamientos de otros usuarios dando "like" y editando mis propios pensamientos. Para: Participar en discusiones, mostrar aprecio por los pensamientos de otros y mejorar mis propios pensamientos.
Criterios de Aceptación:
Los usuarios deben poder dar "like" a los pensamientos de otros usuarios. Debe haber un sistema de comentarios en los pensamientos para permitir discusiones. Los usuarios pueden editar sus propios pensamientos después de publicarlos. Debe haber una confirmación antes de eliminar un pensamiento. Definición de Terminado:
Los usuarios pueden interactuar con los pensamientos de otros usuarios dando "like" y comentando. Los usuarios pueden editar sus propios pensamientos después de publicarlos.
Historia de usuario-5 Yo/como: Usuario registrado en "TechShare." Quiero: Poder eliminar los post.
Criterios de Aceptación:
Los usuarios deben poder "eliminar" a sus propios pensamientos. Debe haber un sistema de comentarios un boton en el que ellos puedan realizar esta funcion
Definición de Terminado:
Los usuarios pueden interactuar con sus propias publicaciones dando la opcion de eliminar si asi lo requieren.
Para comenzar se realizó un prototipo de baja fidelidad
Se realizo un prototipo de alta fidelidad en Figma donde se muestra el funcionamiento y diseño de la página en cada una de las vistas. Se realizo un logo para la app
se realizo una serie de test de usuabilidad y en base a eso fuimos eligiendo el mejor diseño que se adaptara a nuestra idea
De acuerdo a los test de usuabilidad se decidio dejar el siguiente diseño, incluyendo la parte responsive.
"HOME"
"LOGIN"
"REGISTER"
"FEED"
se realizaron las pruebas unitarias de cada de las vistas
- Desarrollar una SPA con temática de red social
- Aplicar los conceptos de responsividad en el desarrollo de las vistas (templates)
- Implementar un router para la navegación entre las diferentes vistas de la aplicación
- Emplear un servicio externo para la persistencia de datos de la aplicación
- Crear una suite de pruebas unitarias que permitan testear código asíncrono
Para lograr estos objetivos, deberás aprender y hacer uso de las siguientes herramientas o habilidades técnicas:
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 flexbox en CSS
-
Uso de CSS Grid Layout
-
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)
-
Pruebas unitarias (unit tests)
-
Pruebas asíncronas
-
Uso de mocks y espías
-
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 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
-
Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
-
Firebase Auth
-
Firestore
-
Este proyecto se debe trabajar en equipos de tres.
-
El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints.
-
La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS 😃. Para este proyecto no está permitido utilizar frameworks o librerías de CSS y JS.
-
La división y organización del trabajo debe permitir, sin excepciones, que cada integrante del equipo practique el aprendizaje de todo lo involucrado en cada historia. No se dividan el trabajo como en una fábrica.
-
¿Hasta acá has avanzado en tus proyectos con cierta fluidez y sin mayores problemas? Sé generosa con tus compañeras, permíteles aprender y practicar sin restricciones, aunque tome un poco más de tiempo. Aproveha de coachearlas, de hacer pair programming, una de las mejores maneras de aprender es explicando verbalmente.
-
¿Se te está haciendo difícil y te cuesta un poco más avanzar? No te quedes con las partes "fáciles" del proyecto, conversa, negocia, exige tu oportunidad para practicar y aprender lo que se te hace más difícil.
-
-
Solamente pueden trabajar en una única historia por vez, no pueden avanzar a la siguiente sin haber completado la anterior. La historia se completa cuando se cumplen todos sus Criterios de Aceptación + toda su Definición de Terminado.
Para comenzar tendrás que hacer un fork y clonar este repositorio.
Este proyecto no incluye un boilerplate completo, solo algunos archivos de configuración basico, así es que tendrás que definir la estructura de carpetas y escribir tus propias Pruebas Unitarias (tests). Para hacerlo, puedes guiarte de los proyectos anteriores y/o organizar los archivos siguiendo una estructura de Modelo-Vista-Controlador.
En este proyecto vamos a usar una herramienta llamada
Vite para empaquetar nuestros módulos y arrancar
el servidor de desarrollo, el cual provee nuestros archivos utilizando
la estrategia Hot Module Replacement
(HMR),
esto significa que cuando hagas cambios en los archivos que estén siendo
servidos, el navegador automáticamente se actualizará sin tener que refrescar
y volver a cargar todo el sitio. Debes tener especial cuidado de no tener
ninguna dependencia circular en tu código ya que
eso puede ocasionar problemas con HMR.
(eslint-plugin-import tiene una regla
import/no-cycle
que va a avisar si las tiene.)
En el README.md cuéntanos brevemente cómo descubriste las necesidades de los
usuarios y cómo llegaste a la definición final de tu producto. Es importante
que detalles:
- Quiénes son los principales usuarios de producto.
- Qué problema resuelve el producto / para qué le servirá a estos usuarios.
Una vez que entiendas las necesidades de tus usuarixs, escribe las Historias de Usuario que representen todo lo que necesitan hacer/ver en la Red Social. Cada una de tus Historias de Usuario debe tener:
-
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 para que, como equipo, sepan que esa historia está terminada y lista para publicarse. Todas tus Historias de Usuario (salvo excepciones), deben incluir estos aspectos en su Definición de Terminado (más todo lo que necesiten agregar):
- Debe ser una SPA.
- Debe ser responsive.
- Deben haber recibido code review de al menos una compañera de otro equipo.
- Hicieron los test unitarios
- Testearon manualmente buscando errores e imperfecciones simples.
- Hicieron pruebas de usabilidad e incorporaron el feedback de los usuarios como mejoras.
- Desplegaron su aplicación y etiquetaron 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.
Debe verse bien en dispositivos de pantallas grandes
(computadoras/es, laptops, etc.) y pequeñas (tablets, celulares, etc.). Te
sugerimos seguir la técnica de mobile first (más detalles sobre esta técnica
al final).
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.
El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
interfaz será desplegada usando GitHub pages u otro servicio de hosting
(Firebase, Netlify, Vercel, etc) que puedas haber encontrado en el camino.
Revisa la documentación de Vite
para guiarte con eso.
Súmate al canal de Slack #project-social-network para conversar y pedir ayuda del proyecto.
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.
Para usar Firebase hay que crear un proyecto en la consola de Firebase e
instalar la dependencia firebase utilizando npm.
Lee las instrucciones paso a paso aqui.
Otras: