Creando una Red Social

Índice

• 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. Entrega
• 8. Pistas, tips y lecturas complementarias

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

2. 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, de la Feijoada, o de lo que sea.

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

Por lo tanto, en este proyecto construirás una Single-page Application (SPA) responsive (con más de una vista / página) en la que podamos leer y escribir datos.

Los objetivos generales de este proyecto son los siguientes

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

3. Objetivos de aprendizaje

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.

HTML

• [ ] Uso de HTML semántico

  Links

  * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)

CSS

• [ ] Uso de selectores de CSS

  Links

  * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)

• [ ] Modelo de caja (box model): borde, margen, padding

  Links

  * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)

• [ ] Uso de flexbox en CSS

  Links

  * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) * [Flexbox Froggy](https://flexboxfroggy.com/#es) * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

• [ ] Uso de CSS Grid Layout

  Links

  * [A Complete Guide to Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) * [Grids - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)

Web APIs

• [ ] Uso de selectores del DOM

  Links

  * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)

• [ ] Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)

• [ ] Manipulación dinámica del DOM

  Links

  * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)

• [ ] Ruteado (History API, evento hashchange, window.location)

  Links

  * [Manipulando el historial del navegador - MDN](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)

JavaScript

• [ ] Arrays (arreglos)

  Links

  * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

• [ ] Objetos (key, value)

  Links

  * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)

• [ ] Diferenciar entre tipos de datos primitivos y no primitivos

• [ ] Variables (declaración, asignación, ámbito)

  Links

  * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)

• [ ] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)

• [ ] Uso de bucles/ciclos (while, for, for..of)

  Links

  * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)

• [ ] Funciones (params, args, return)

  Links

  * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)

• [ ] Pruebas unitarias (unit tests)

  Links

  * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)

• [ ] Pruebas asíncronas

  Links

  * [Tests de código asincrónico con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/asynchronous)

• [ ] Uso de mocks y espías

  Links

  * [Manual Mocks con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/manual-mocks)

• [ ] Módulos de ECMAScript (ES Modules)

  Links

  * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)

• [ ] Uso de linter (ESLINT)

• [ ] Uso de identificadores descriptivos (Nomenclatura y Semántica)

• [ ] Diferenciar entre expresiones (expressions) y sentencias (statements)

• [ ] Callbacks

  Links

  * [Función Callback - MDN](https://developer.mozilla.org/es/docs/Glossary/Callback_function)

• [ ] Promesas

  Links

  * [Promise - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) * [How to Write a JavaScript Promise - freecodecamp (en inglés)](https://www.freecodecamp.org/news/how-to-write-a-javascript-promise-4ed8d44292b8/)

Control de Versiones (Git y GitHub)

• [ ] 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

  Links

  * [Sitio oficial de GitHub Pages](https://pages.github.com/)

• [ ] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

• [ ] GitHub: Organización en Github (projects | issues | labels | milestones | releases)

Centrado en el usuario

• [ ] Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• [ ] Crear prototipos de alta fidelidad que incluyan interacciones

• [ ] Seguir los principios básicos de diseño visual

Investigación

• [ ] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

  Links

  * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)

Firebase

• [ ] Firebase Auth

  Links

  * [Primeros pasos con Firebase Authentication en sitios web - Documentación oficial](https://firebase.google.com/docs/auth/web/start?hl=es) * [Administra usuarios en Firebase (onAuthStateChanged)](https://firebase.google.com/docs/auth/web/manage-users?hl=es#get_the_currently_signed-in_user)

• [ ] Firestore

  Links

  * [Firestore - Documentación oficial](https://firebase.google.com/docs/firestore?hl=es) * [Reglas de seguridad de Firestore - Documentación oficial](https://firebase.google.com/docs/rules?hl=es) * [Obtén actualizaciones en tiempo real con Cloud Firestore - Documentación oficial](https://firebase.google.com/docs/firestore/query-data/listen?hl=es)

4. Consideraciones generales

• Este proyecto se debe trabajar en equipos de tres.

• La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS :smiley:. 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.

5. Criterios de aceptación mínimos del proyecto

5.1 Boilerplate

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.

5.2 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. Es importante que detalles:

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

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

5.4 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 aplicación y, con eso, diseña la Interfaz de Usuario (UI por sus siglas en inglés) que siga este flujo.

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

5.6 Consideraciones del comportamiento de la interfaz de usuario (UI)

Estas consideraciones te ayudarán a escribir 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 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.

Muro/timeline

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

5.7 Consideraciones técnicas Front-end

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

Pruebas unitarias (unit tests)

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

5.8 Consideraciones técnicas UX

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

6. Hacker edition

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.

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

---

8. Pistas, tips y 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:

• Modulos: Export
• Modulos: Import
• Diseño web, responsive design y la importancia del mobile first - Media Click
• Mobile First: el enfoque actual del diseño web móvil - 1and1
• Mobile First - desarrolloweb.com
• Mobile First Is NOT Mobile Only - Nielsen Norman Group