Creando una Red Social

Bienvenida a tu primer proyecto del track de Frontend en Laboratoria.

En este proyecto construirás una red social, cuya temáticas dejaremos a tu elección.

Aquí algunas ideas para inspirarte:

• Alimentación
• Feminismo
• Educación
• Salud
• Energías Renovables

Las caraterísticas técnicas de tu aplicación serán las siguientes:

• Debe ser una Single-Page Application SPA (versión traducida)
• Debe ser diseñada con un enfoque mobile first (versión traducida)
• Debe permitir la persintencia de datos

Para implementar tu aplicación usarás HTML5, CCS3 o SASS, Vanilla JavaScript(ES6+), Firebase o LocalStogarge

Objetivo

El objetivo de este proyecto es construir una Red Social, Single-Page Application (SPA), responsiva en la que podamos escribir, leer, actualizar y eliminar datos.

Para ello deberás poner en juego tu creatividad para generar ideas que lleven a una solución original y valiosa del problema, trabajando en equipo buscando feedback constante.

En otras palabras, seguirás afianzando todo lo aprendido en el Common Core, pero en particular verás :

Planificación

• Te recomendamos utilizar projects, issues y milestones de GitHub para gestionar la planificación de tu proyecto. Estos recursos serán la fuente de organización de tu equipo y a través de estas herramientas tus coaches podrán ver el avance del proyecto y darte feedback.

• Escribir, de manera colaborativa, las Definiciones de terminado y Criterios de Aceptación por cada Historia de usuario que te daremos para este proyecto y que se deberán ver reflejadas en tu planificación.

• Priorizar la implementación de tus funcionalidades, en función al esfuerzo que demandan en relación al valor que le aportan al usuario, y ejecutar en equipo todas las historias de usuario dentro del tiempo estimado para cada sprint y que finalmente se vean reflejadas en publicaciones completamentamente funcionales al final de cada sprint.

• Adquirir la disciplina de la completitud, terminando una historia de usuario antes de pasar a la siguiente (es decir, que cumple con Definición de Terminado y Criterios de Aceptación contemplando todos los puntos que son objetivos de aprendizaje para este proyecto).

Desarrollo frontend

Arquitectura de la aplicación

• Diseñar la arquitectura de tu aplicación, modularizando tu código a través de es modules (import y export)

• Familiarizarte con el patrón modelo - vista - controlador (MVC).

Tecnologías HTML5 y CSS3/SASS

• Aplicar HTML5 semántico en tu proyecto.
• Aplicar y reforzar los conceptos fundamentales de CSS3.
• Implementar selectores de clase evitando la redundancia de estilos en CCS3.
• Utilizar flexbox para lograr un diseño mobile first, implementando un layout que te permita crear un diseño adaptativo para mobile y desktop

A continuación te proporcionamos el layout (diseño) de la vista mobile y desktop que deberás replicar visualmente y cuyo contenido, colores y fuentes de texto, dejaremos a tu elección.

• Vista mobile

  

• Vista Desktop

  

JavaScript (ES6+)

• Utilizar modulos de ES6 para poder modularizar tu código JavaScript.
• Reforzar tu conocimiento sobre el uso de Template literals (Template strings).
• Reforzar tu conocimiento de la manipulacion de los elementos del DOM a traves JavaScript.
• Implementar un sistema de rutas para cambiar de una vista a otra de manera dinámica (SPA).
• Testear la lógica de tu aplicación, con Jest cuidando que el coverage pase el 90% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas).

Persistencia de datos

En los proyectos anteriores solo has consumido (leído) datos, por ejemplo, a través de un archivo json o utilizando fetch.

En este proyecto diseñarás la estructura de esos datos, la forma de consultarlos, actualizarlos, modificarlos y eliminarlos según los requerimiento del usuario. Para llevarlo a cabo utilizaras Firestore de Firebase o LocalStogarge una Web Storage API

Firebase

El objetivo de usar Firestore en este proyecto, es que aprendes a manejar y persistir datos a traves de una base de datos no relacional, en tiempo real y puedas implementar operaciones CRUD (Creación, Lectura, Actualización y eliminación) de datos.

Consideraciones generales del proyecto

• Este proyecto debe ser desarrollado en equipos de trabajo de 3 integrantes.

• La duración propuesta del proyecto es 3 sprints, con una duración de una semana cada uno.

• Te daremos las historias de usuario con el fin de presentarte los requerimientos y funcionalidades que desea el usuario final.

• La planificación es vital, para ello te recomendamos utilizar el flujo de trabajo colaborativo que nos ofrecen los projects de GitHub, para que puedas escribir tus definiciones de terminado y criterios de aceptación por cada historia de usuario con el objetivo que determinen, en equipo, qué hacer en el sprint y cómo se realizará.

• Para que todas las miembros de tu equipo puedan lograr los objetivos de aprendizaje, deberán determinar cuál será la estrategia de desarrollo que utilizarán: división por sub-historias, pair programming, code reviews, etc.

Restricciones Técnicas

• Debes utilizar flexbox o CSSGrid para posicionar tus elementos. Si está permitido el uso de frameworks de CCS (bootstrap), y de componentes flotantes.

• Ya te damos un diseño (layout) de la vista mobile y desktop, queremos que lo repliques a nivel pixel perfect, el contenido, paleta de colores y fuentes, depende de la temática que van a elegir como equipo. La implementación de ese layout deberá formar parte de la definición de terminado de tus historias de usuario.

• Los test son fundamentales y deberán formar parte de tu definición de terminado, te recomendamos que comiences a implementarlos desde el comienzo.

Historias de Usuario

• Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social.

• Como usuario nuevo debo poder tener la opción de iniciar sesión con mi cuenta de Google o Facebook para ingresar a la red social sin necesidad de crear una cuenta de email válido.

• Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen.

• Como usuario loggeado debo poder ver todos los posts públicos y privados que he creado hasta ese momento, desde el más reciente hasta el más antiguo, así como la opción de poder cambiar la configuración de privacidad de mis post.

• Yo como usuario loggeado, puedo dar like y llevar un conteo de likes en mi publicación así como poder escribir, guardar, editar o eliminar un comentario en mi publicación.

• Al final debo poder ingresar a la red social y poder visualizar los datos de mi perfil creado o editarlos.

• Te dejamos un ejemplo de cómo definir criterios de aceptación y definiciones de terminado para una H.U. Si se te complica definirlas o no tienes idea de que considerar para cada H.U. es de gran ayuda revisar redes sociales como facebok, twitter, instagram, devopedia o la red social que más te guste y puedas evaluar qué consideran en cada funcionalidad para darla como terminada y aceptada.

  Como usuario nuevo debo poder crear una cuenta con email y password para poder iniciar sesion. Por otro lado, necesito también tener la opción de iniciar sesión con mi cuenta de Google o Facebook.

  Criterios de aceptación

  • Si el mail o password no es válido, al momento de logearme, debo poder ver un mensaje de error.
  • Debe ser visible si hay algún mensaje de error.
  • Debo poder ver esta página de creación en Móviles y desktop (responsive).
  • No debe necesitar recargar la página para crear una cuenta (SPA).

  Definición de terminado

  • La funcionalidad cumple satisface los criterios de aceptación.
  • La funcionalidad tiene test unitarios.
  • El diseño visual corresponde al prototipo de alta fidelidad.
  • El código de esta funcionalidad recibió code review.
  • La funcionalidad esta desplegada y pública para ser probada.
  • La funcionalidad fue probada manualmente.
  • Se hicieron pruebas de usuabilidad y se implementó el feedback si se consideró necesario.

Objetivos de aprendizaje

Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto anterior en la siguiente sección.

Objetivos de aprendizajes pendientes

HTML y CSS

• HTML semántico
• CSS flexbox
• Construir tu aplicación respetando el diseño realizado (maquetación).

DOM y Web APIs

• Manipulación dinámica del DOM
• History API
• [localStorage]

Javascript

• Uso de callbacks
• Consumo de Promesas
• Uso ES modules (import | export)

Firebase

• Firestore
• Firebase Auth
• Firebase security rules
• Uso de onSnapshot | onAuthStateChanged

Testing

• Testeo de tus funciones
• Testeo asíncrono
• Mocking

Colaboración en Github

• Branches
• Pull Requests
• Tags

Organización en Github

• Projects
• Issues
• Labels
• Milestones

Buenas prácticas de desarrollo

• Modularización
• Nomenclatura / Semántica
• Linting

---

Recursos

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

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 Firestore o de forma local utilizandolocalStorage.

Autenticación y autorización

Hasta el momento, los proyectos han sido pensados como recursos públicos, donde todos los usuarios compartían un mismo rol y la misma información.

En este proyecto tendrás que diferenciar la información a mostrar y modificar, dependiendo de la identidad del usuario. De la misma manera deberás crear reglar de autorización para el acceso a los datos.

Para esto utilizaras respectivamente Firebase authentication y Firestore security rules

CSS

En este proyecto queremos que ganes confianza y experiencia con CSS profesional, por eso usarás flexbox para posicionar tus elementos.

Recuerda que no puedes usar frameworks CSS, sólo vanilla css o sass.

Otras:

• Pildora SPA
• Repositorio de pildora de SPA
• Pildora de mock Firebase
• Repositorio de pildora de mock Firebase
• Pildora MVC
• 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 - ZURB
• Mobile First Is NOT Mobile Only - Nielsen Norman Group

---