/SCL008-Social-Network

Primary LanguageJavaScript

Creando una Red Social

Índice

Preámbulo

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.

Resumen del proyecto

En este proyecto construirás una Red Social sobre lo que decidan tú y tu equipo. Podría ser, por ejemplo, sobre alimentación saludable, feminismo, educación, salud, energías renovables, amantes de las empanadas o de los tacos de canasta, etc.

Tu Red Social tendrá que permitir a cualquier usuario crear una cuenta de acceso y loguearse con ella; crear, editar, borrar y "likear" publicacciones.

Objetivos de Aprendizaje

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.

Consideraciones generales

  • Este proyecto se debe "resolver" en tríos.

  • 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 del trabajo debe permitir que todo el equipo practique el aprendizaje de todo lo esperado cada sprint. No se dividan el trabajo como en una fábrica.

  • Trabajen en una sola historia por vez, no pueden avanzar a la siguiente sin haber completado la anterior.

Para comenzar tendrás que hacer un fork y clonar este repositorio.

Parte obligatoria

General

Este proyecto no incluye un boilerplate, 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.

Definición del producto

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. Comparte fotos de entrevistas (si las tienes), cuestionarios y tus sketches/(bocetos).

Es importante que detalles:

  • Quiénes son los principales usuarios de producto.
  • Qué problema resuelve el producto / para qué le servirá a estos usuarios.

Historias de usuario

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 todas las que necesiten agregar):

    • Debe ser una SPA.
    • Debe ser responsive.
    • Debes haber recibido code review de al menos una compañera de otro equipo.
    • Haces test unitarios y, además, has testeado tu producto manualmente.
    • Hiciste pruebas de usabilidad e incorporaste el feedback del usuario.
    • Desplegaste tu aplicación y has etiquetado tu versión (git tag).

Diseño de la Interfaz de Usuario (prototipo de baja fidelidad)

Debes definir cuál será el flujo que seguirá el usuario dentro de tu producto y con eso deberás diseñar la Interfaz de Usuario (UI por sus siglas en inglés) de esta red social que siga este flujo. Este diseño debe representar la solución que se implementará finalmente en código.

Responsive

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).

Pruebas unitarias (unit tests)

Los tests unitarios deben cubrir un mínimo del 70% de statements, functions, lines, y branches.

Implementación de la Interfaz de Usuario (UI y comportamiento de Interfaz de Usuario)

Estas son consideraciones para que escribas las Definiciones de Terminado de tus H.U.:

Creación de cuenta de usuario e inicio de sesión

  • 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 con cuenta de Google.
  • Validaciones:
    • La aplicación solo permitirá 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 un formulario de registro o inicio de sesión, debe validarse.
    • En caso haya errores, el sistema debe mostrar mensajes de error para ayudar al usuario a corregirlos.
    • Al recargar la aplicación, se debe verificar si el usuario está logueado antes de mostrarle el contenido.

Muro/timeline de la red social

  • Validaciones:
    • Al apretar el botón de publicar, debe validar que exista contenido en el input.
  • Comportamiento:
    • Poder publicar un post.
    • Poder dar y quitar like a una publicación.
    • 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.

Hacker edition

  • 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.

Consideraciones técnicas Front-end

El corazón de este proyecto incluye:

  • Separar la manipulación del DOM de la lógica (Separación de responsabilidades).
  • Contar con multiples vistas para esto tu aplicacion debera ser una Single Page Application (SPA)
  • Que el sitio sea responsive, ya dicho.
  • 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.

Además, podrías agregar algunas tareas nuevas de acuerdo a tus decisiones:

  • Recuerda que no hay un setup de tests definido, dependerá de la estructura de tu proyecto también, pero algo que no debes de olvidar es pensar en éstas pruebas, incluso te podrían ayudar a definir la estructura y nomenclatura de tu lógica.

Consideraciones técnicas UX

Desde el punto de vista de UX, deberás:

  • Hacer al menos 2 o 3 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 con el producto en HTML.

Entrega

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 que puedas haber encontrado en el camino.

Evaluación

Recuerda revisar la rúbrica para ver la descripción detallada de cada habilidad y cada nivel. Esta es una lista de todas las habilidades involucradas en este proyecto y que evaluaremos cuando lo completes:

Habilidades Blandas/Socioemocionales

Habilidad
Planificación y organización
Autoaprendizaje
Solución de Problemas
Dar y recibir feedback
Adaptabilidad
Trabajo en equipo
Responsabilidad
Comunicación eficaz
Presentaciones

Habilidades Técnicas, Front-end

Habilidad
JavaScript
Estilo
Nomenclatura/semántica
Funciones/modularidad
Estructuras de datos
Tests
HTML
Validación
Estilo
Semántica
SEO
CSS
DRY
Responsive
SCM
Git
GitHub
CS
Lógica
Arquitectura

Habilidades Técnicas, UX

Habilidad
User Centricity
Visual Desing

Pistas / Tips / Lecturas complementarias

Mobile first

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.

Múltiples vistas

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.

Escritura de datos

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: