+
## Índice
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del proyecto](#2-resumen-del-proyecto)
-* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje)
-* [4. Consideraciones generales](#4-consideraciones-generales)
-* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto)
-* [6. Hacker edition](#6-hacker-edition)
-* [7. Entrega](#7-entrega)
-* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias)
+* [1. Definición del producto](#1-definición-del-producto)
+* [2. Historia de usuarios](#2-historia-de-usuarios)
+* [3. Prototipos](#3-prototipos)
+* [4. Test de usabilidad](#4-Test-de-usabilidad)
+* [5. Objetivos de aprendizaje](#5-objetivos-de-aprendizaje)
+
+## 1. DEFINICIÓN DEL PRODUCTO
+
+### Definición del problema
+
+Con las mejoras en el flujo de datos a partir de tecnologías como 4G y 5G, el crecimiento de contenido audiovisual variado, de calidad y asequible a través de plataformas de streaming, se están creando comunidades de discusión sobre series, películas, documentales, cortometrajes, etc., donde las opiniones generan un valor sobre cada contenido para el usuario influenciado las decisiones sobre lo próximo que verá y al tiempo le permite compartir con personas que tienen intereses afines.
+
+
+### Perfil del usuario
+
+Nuestros usuarios son personas entre los 18 y los 50 años tiene un interés por las películas, series y demás contenido audiovisual, que tienen acceso a las plataformas de streaming como Netflix, Disney +, Amazon Prime o Hulu o servicios de televisión o que frecuentan el cine, y a quiénes les gusta compartir y comparar opiniones sobre estas producciones.
+
+Nuestros usuarios abarcan desde aquel que se dedica profesionalmente a hacer reviews hasta personas que solo buscan aportar su opinión o una buena recomendación. Quieren poder agregar recomendaciones de otros a su lista de pendientes, y agregar una lista donde aparezca aquello que vio y quiere recomendar a la comunidad o comentar, participar en discusiones, poder buscar una película por su título ver las reviews asociadas y darles like, saber quién escribió la reseña (y si le gusta poder seguirlo).
+
+
+## 2. HISTORIAS DE USUARIO
+
+* H1: El usuario se puede loguear o registrar
+* H2: El usuario puede realizar posts y visualizarlos en su muro
+* H3: El usuario podrá ingresar a su perfil y ver su información general
+* H4: El usuario tendrá más opciones para interactuar en la red social
+
+## 3. PROTOTIPOS DE ALTA Y BAJA FIDELIDAD
+
+### Prototipos de baja fidelidad
-## 1. Preámbulo
+.jpg)
+
+.jpeg)
+
-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.
+### Prototipos de alta fidelidad
-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.
+Movil: https://www.figma.com/proto/vVV1qI2KgMuUCAKSVx8nxJ/Prototyping-in-Figma?node-id=31%3A492&scaling=scale-down
+
+Desktop: https://www.figma.com/proto/vVV1qI2KgMuUCAKSVx8nxJ/Prototyping-in-Figma?node-id=51%3A79&scaling=min-zoom
+
+Tablet: https://www.figma.com/proto/vVV1qI2KgMuUCAKSVx8nxJ/Prototyping-in-Figma?node-id=77%3A180&scaling=scale-down
-## 2. Resumen del proyecto
+### Paleta de colores
-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](https://es.wikipedia.org/wiki/Empanada)
-o de los [Tacos de Canasta](https://es.wikipedia.org/wiki/Taco), de la
-[Feijoada](https://es.wikipedia.org/wiki/Feijoada), o de lo que sea.
+.jpeg)
-Tu Red Social tendrá que permitir a cualquier usuario crear una cuenta de
-acceso y loguearse con ella; crear, editar, borrar y _"likear"_ publicacciones.
+
+## 2. Test de Usabilidad
+
+En los tests de usabilidad que se realizaron con nuestras compañeras y coach se identifico que la paleta de colores que estabamos utilizando era la correcta, les gusto el diseño de la página, como sugerencias nos dijeron que pusieramos la letra mas grande, adicional que le cambiaramos el color si era un link, y que el fondo del timeline fuera diferente al tono blanco para que la experiencia visual del usuario fuera mejor.
+
+El usuario interactua con la pagina de la siguiente manera:
+
+1. Primero el usuario entra a una pagina de Bienvenida a la red social donde puede ingresar.
+2. Segundo encuentra una sección donde se puede loguear, tiene la opción de crear una cuenta o entrar con Google, adicional tiene la opción de recuperar la contraseña si la ha olvidado.
+3. Tercero al haberse logueado ya puede ingresar al timeline, donde puede realizar una publicación teniendo en cuenta tres categorias: Películas, series o documentales. Además puede dar o quitar like a otras publicaciones.
+4. Cuarto tiene una sección de perfil, donde puede cambiar su foto, agregar una biografia, y ver sus publicaciones, las cuales puede editar o eliminar.
## 3. Objetivos de aprendizaje
@@ -105,219 +136,3 @@ El objetivo principal de aprendizaje de este proyecto es construir una
* [ ] Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
* [ ] Planear y ejecutar tests de usabilidad.
-## 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](https://firebase.google.com/products/database/)
- - 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)](https://es.wikipedia.org/wiki/Single-page_application)
-* 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](https://firebase.google.com/) 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_](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-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](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
-con [`window.history`](https://developer.mozilla.org/es/docs/Web/API/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](https://firebase.google.com/).
-
-Otras:
-
-* [Modulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export)
-* [Modulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import)
-* [Diseño web, responsive design y la importancia del mobile first - Media Click](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/)
-* [Mobile First: el enfoque actual del diseño web móvil - 1and1](https://www.1and1.es/digitalguide/paginas-web/diseno-web/mobile-first-la-nueva-tendencia-del-diseno-web/)
-* [Mobile First - desarrolloweb.com](https://desarrolloweb.com/articulos/mobile-first-responsive.html)
-* [Mobile First - ZURB](https://zurb.com/word/mobile-first)
-* [Mobile First Is NOT Mobile Only - Nielsen Norman Group](https://www.nngroup.com/articles/mobile-first-not-mobile-only/)
diff --git a/_mocks_/firebase_mock.js b/_mocks_/firebase_mock.js
deleted file mode 100644
index a00ef286..00000000
--- a/_mocks_/firebase_mock.js
+++ /dev/null
@@ -1,32 +0,0 @@
-
-const auth = () => {
- return{
- createUserWithEmailAndPassword: (email,pass) => {
- return new Promise ((resolve) =>{
- resolve(`Se creo un usuario con ${email} y ${pass}`);
- })
- }
- /*sendPasswordResetEmail: (email) => {
- return new Promise ((resolve) => {
- resolve (`Se envio un correo de restablecer contraseña a ${email}`)
- })
- }*/
- /*signInWithEmailAndPassword: (email,password) => {
- return new Promise ((resolve) =>{
- resolve (`Se pudo loguear con ${email} y contraseña ${password}`)
- })
- },
- signInWithPopup: (user) => {
- return new Promise ((resolve) =>{
- resolve (`${user} se logueo con Google`)
- })
- }*/
- }
-}
-/*const firebase = {
- auth:auth
-}*/
-
-export default jest.fn(() => {
- return auth;
-})
\ No newline at end of file
diff --git a/package.json b/package.json
index 796f1d15..5344d097 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"eslint-plugin-jest": "^22.1.2",
"htmlhint": "^0.11.0",
"jest": "^24.8.0",
+ "mock-cloud-firestore": "^0.12.0",
"regenerator-runtime": "^0.13.1",
"serve": "^11.0.2",
"stylelint": "^10.1.0",
diff --git a/src/components/modal.js b/src/components/modal.js
index 20833ad9..ebabdbfb 100644
--- a/src/components/modal.js
+++ b/src/components/modal.js
@@ -1,6 +1,7 @@
import { commentPublish } from '../lib/firebaseFirestore.js';
export const publish = (userPhoto, userID, userName) =>{
+ const photoDefault = 'https://www.nicepng.com/png/detail/202-2022264_usuario-annimo-usuario-annimo-user-icon-png-transparent.png';
const modal = document.createElement('section');
modal.setAttribute('class', 'modal');
modal.innerHTML = ``
let photo = modal.querySelector('#userPhoto');
- photo.src = `${userPhoto}`;
+ photo.src = `${(userPhoto === null ? photoDefault : userPhoto)}`;
const publish = modal.querySelector('#formComment');
- //const img = form.loadImg.value;
+
publish.addEventListener('submit', (e)=>{
e.preventDefault();
let comment = publish.comment.value;
diff --git a/src/components/printPost.js b/src/components/printPost.js
index 1c8f95aa..87e3a898 100644
--- a/src/components/printPost.js
+++ b/src/components/printPost.js
@@ -1,15 +1,17 @@
-import { deletePost } from '../lib/firebaseFirestore.js';
+import { deletePost, likePost } from '../lib/firebaseFirestore.js';
import { updateFieldData } from '../lib/firebaseFirestore.js';
+import {currentUser} from '../lib/firebaseAuth.js';
//Imprime el post en el timeline y en profile
export default (post, user, postid) => {
+ let photoDefault = "https://www.nicepng.com/png/detail/202-2022264_usuario-annimo-usuario-annimo-user-icon-png-transparent.png";
const newpost = document.createElement('div');
newpost.setAttribute('id', postid);
newpost.setAttribute('class', 'post');
newpost.innerHTML = `${user.name}
${post.date.toDate().toDateString()}
@@ -21,6 +23,11 @@ export default (post, user, postid) => {
-
- 
- 00000
+ 
+ ${post.likes.length}
- 00000
+ 0