diff --git a/.gitignore b/.gitignore index 47735411..afd23ac4 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ coverage/ node_modules/ .yarn.lock -package-lock.json \ No newline at end of file +package-lock.json +src/firebase/config.js \ No newline at end of file diff --git a/README.md b/README.md index c4715efc..e69de29b 100644 --- a/README.md +++ b/README.md @@ -1,519 +0,0 @@ -# Creando una Red Social - -## Í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. 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. - -![adem-ay-Tk9m_HP4rgQ-unsplash](https://user-images.githubusercontent.com/110297/135544666-4efa54f1-4ff6-4c4c-b398-6df04ef56117.jpg) - -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](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. - -Tu Red Social tendrá que permitir a cualquier usuario crear una cuenta de -acceso y loguearse con ella; crear, editar, borrar y _"likear"_ publicacciones. - -El objetivo principal de aprendizaje de este proyecto es construir una -[Single-page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application) -[_responsive_](https://curriculum.laboratoria.la/es/topics/css/02-responsive) (con más de una vista / página) -en la que podamos **leer y escribir datos**. - -## 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)** - -### user-centricity - -- [ ] **Diseñar un producto o servicio poniendo a la usuaria en el centro** - -### product-design - -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** - -- [ ] **Seguir los principios básicos de diseño visual** - -### research - -- [ ] **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](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 Is NOT Mobile Only - Nielsen Norman Group](https://www.nngroup.com/articles/mobile-first-not-mobile-only/) diff --git a/src/images/deformitoLlorando.png b/src/images/deformitoLlorando.png new file mode 100644 index 00000000..65bb4041 Binary files /dev/null and b/src/images/deformitoLlorando.png differ diff --git a/src/images/deformitoTierno.png b/src/images/deformitoTierno.png new file mode 100644 index 00000000..50c8fdb6 Binary files /dev/null and b/src/images/deformitoTierno.png differ diff --git a/src/images/deformitoTip.png b/src/images/deformitoTip.png new file mode 100644 index 00000000..e1bdf5c6 Binary files /dev/null and b/src/images/deformitoTip.png differ diff --git a/src/images/deformitoTriste.png b/src/images/deformitoTriste.png new file mode 100644 index 00000000..2bdcee5b Binary files /dev/null and b/src/images/deformitoTriste.png differ diff --git a/src/images/error.jpg b/src/images/error.jpg new file mode 100644 index 00000000..36a24b65 Binary files /dev/null and b/src/images/error.jpg differ diff --git a/src/images/fondo.jpg b/src/images/fondo.jpg new file mode 100644 index 00000000..f517241a Binary files /dev/null and b/src/images/fondo.jpg differ diff --git a/src/images/home.png b/src/images/home.png new file mode 100644 index 00000000..5b16d137 Binary files /dev/null and b/src/images/home.png differ diff --git a/src/images/user.png b/src/images/user.png new file mode 100644 index 00000000..b36923c3 Binary files /dev/null and b/src/images/user.png differ diff --git a/src/index.html b/src/index.html index 788db3c9..1c375c59 100644 --- a/src/index.html +++ b/src/index.html @@ -4,9 +4,13 @@ - Document + Tips para el Adulto Independiente + +
+
+ - \ No newline at end of file + diff --git a/src/lib/firebase/auth.js b/src/lib/firebase/auth.js new file mode 100644 index 00000000..9dfaf387 --- /dev/null +++ b/src/lib/firebase/auth.js @@ -0,0 +1,76 @@ +import { + auth, + provider, + signInWithPopup, + doc, db, + setDoc, getDoc, signOut +} from "./init.js"; + + +export const loginGoogle = () => { + + const btnGoogle = document.querySelector('.logIn'); + btnGoogle.addEventListener('click', (event) => { + event.preventDefault(); + + loginWithGoogle(); + }); +}; + + + +export const loginWithGoogle = () => { + signInWithPopup(auth, provider) + .then((result) => { + // This gives you a Google Access Token. You can use it to access the Google API. + //const credential = GoogleAuthProvider.credentialFromResult(result); + //const token = credential.accessToken; + // The signed-in user info. + const user = result.user; + const userFirestore = setDoc(doc(db, "users", user.uid),{ + name : user.displayName, + email: user.email + }); + console.log(user); + console.log(userFirestore); + window.location.href = "#/feed"; + }) + .catch((error) => { + // Handle Errors here. + const errorCode = error.code; + const errorMessage = error.message; + // The email of the user's account used. + //const email = error.customData.email; + // The AuthCredential type that was used. + //const credential = GoogleAuthProvider.credentialFromError(error); + // ... + console.log() + }); + + +} + + + +export const logOut = () => { + signOut(auth).then(() => { + // Sign-out successful. + console.log('log out') + console.log(currentUser()); + }).catch((error) => { + console.log(error); + // An error happened. + }); +}; + +//console.log(logOut(auth)); + +// export const getUser = async (id) => { +// try { +// const data = doc(db, 'users', id); +// const userData = await getDoc(data); +// return userData.data(); +// } catch (err) { +// console.log(err); +// } +// }; diff --git a/src/lib/firebase/config.js b/src/lib/firebase/config.js new file mode 100644 index 00000000..0dcfb3ad --- /dev/null +++ b/src/lib/firebase/config.js @@ -0,0 +1,9 @@ +// Your web app's Firebase configuration +export const firebaseConfig = { + apiKey: "AIzaSyBBsF0xI43K_mjmI_NUtb01CE4BApx7u2A", + authDomain: "adultoindependiente-4f40c.firebaseapp.com", + projectId: "adultoindependiente-4f40c", + storageBucket: "adultoindependiente-4f40c.appspot.com", + messagingSenderId: "525789460084", + appId: "1:525789460084:web:69113ad92df61afaef8321" +}; \ No newline at end of file diff --git a/src/lib/firebase/firestore.js b/src/lib/firebase/firestore.js new file mode 100644 index 00000000..b15ef99f --- /dev/null +++ b/src/lib/firebase/firestore.js @@ -0,0 +1,32 @@ +//funciones firestore +import { db, collection, addDoc, onSnapshot, doc, getDoc, deleteDoc, updateDoc } from "./init.js"; + + +//Función que guarda los datos del formulario del post en firebase +export const savePost = ( title, text) => { + + //Agrega un doc a una colección en formato de objeto + addDoc(collection(db,'posts'),{title:title, text:text}); + //console.log(collection(db,'posts'),{autor:autor, title:title, text:text}); +}; + + +//obtiene los docs en tiempo real +export const onGetPost = (callback) => onSnapshot(collection(db, "posts"), callback); +//console.log(onGetPost()); + + + +export const editPost = (id) => { + const postRef = getDoc(doc(db,'posts',id)); + return postRef; +}; + +export const deletePost = (id) => { + const delDocRef = deleteDoc(doc(db,'posts',id)) + return delDocRef; +}; + +export const updatePost = (id, {title:title, text:text}) => { + updateDoc(doc(db,'posts',id), {title:title, text:text}); +}; \ No newline at end of file diff --git a/src/lib/firebase/init.js b/src/lib/firebase/init.js new file mode 100644 index 00000000..f07b8b77 --- /dev/null +++ b/src/lib/firebase/init.js @@ -0,0 +1,30 @@ + +//Conexión con Firebase +import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js' +//configuracion firebase +import { firebaseConfig } from './config.js'; +//Importando funciones firebase auth +import { getAuth, signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-auth.js'; +//Importando funciones relacionadas a firestore +import { getFirestore, collection, getDocs, addDoc,onSnapshot, query, doc, getDoc, deleteDoc, updateDoc, setDoc } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-firestore.js'; + + + +// Initialize Firebase +const app = initializeApp(firebaseConfig); + +//Autenticación +const auth = getAuth(); + +//Provider +const provider = new GoogleAuthProvider(); + +// Get firestore +const db = getFirestore(app); + + + + +//Exportar funciones firebase-firestore +export { initializeApp, signInWithEmailAndPassword, auth, signInWithPopup, provider, GoogleAuthProvider, collection, getDocs, addDoc,onSnapshot, query, doc, db, deleteDoc, getDoc, onAuthStateChanged, updateDoc, setDoc, signOut }; + diff --git a/src/lib/index.js b/src/lib/index.js deleted file mode 100644 index d1930899..00000000 --- a/src/lib/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// aqui exportaras las funciones que necesites - -export const myFunction = () => { - // aqui tu codigo - console.log('Hola mundo!'); -}; diff --git a/src/lib/router.js b/src/lib/router.js new file mode 100644 index 00000000..baf0d718 --- /dev/null +++ b/src/lib/router.js @@ -0,0 +1,25 @@ +import { menuLogin } from './views/templateMenu.js'; +import { feed } from './views/templateFeed.js'; +import { loginGoogle } from './firebase/auth.js'; + + +export const changeRoutes = (hash) => { + const containerRoot = document.getElementById('root'); + //containerRoot.innerHTML = ""; + switch (hash){ + case '#/menuLogin': + containerRoot.appendChild(menuLogin()); + loginGoogle(); + + break; + case '#/feed': + containerRoot.appendChild(feed()); + + break; + default: + containerRoot.innerHTML= `

Error (╯°□°）╯︵ ┻━┻

` + }; +}; + + + diff --git a/src/lib/views/templateFeed.js b/src/lib/views/templateFeed.js new file mode 100644 index 00000000..d76026b8 --- /dev/null +++ b/src/lib/views/templateFeed.js @@ -0,0 +1,134 @@ +import { logOut } from "../firebase/auth.js"; +import { + savePost, + deletePost, + editPost, + onGetPost, + updatePost, +} from "../firebase/firestore.js"; +import { auth } from "../firebase/init.js"; + +//Muro de la red +export const feed = () => { + + const divFeed = document.createElement("div"); + const viewFeed = `
+
+ imagenPerfil +

Usuario

+ +
+
+
+
+ + +
+ +
+
+
`; + + divFeed.innerHTML = viewFeed; + + + const userOut = divFeed.querySelector('.logOutBtn'); + userOut.addEventListener('click', (e) => { + e.preventDefault(); + logOut(); + window.location.href = '#/'; + }); + + + let statusPost = ''; + let idPost =''; + + //Formulario enviado a DOM + const postForm = divFeed.querySelector("#postform"); + postForm.addEventListener("submit", (e) => { + e.preventDefault(); + //llama al input y textarea + const title = divFeed.querySelector("#postTitle"); + const postText = divFeed.querySelector("#postText"); + + console.log(title.value); + + statusPost !== true ? savePost(title.value, postText.value) : updatePost(idPost, {title: title.value, text: postText.value}); + + + //Resetea el formulario, lo limpia + postForm.reset(); + }); + + + //crea el post en tiempo real + const createPost = async () => { + onGetPost((snapShot) => { + let card = ""; + + const divPost = document.getElementById("rootPost"); + + //recorre el array de docs de firebase + snapShot.forEach((doc) => { + //console.log(doc.data()) + const docData = doc.data(); //el .data() convierte los objetos firebase a obj JS + + card += `
+
+ +

${docData.title}

+
+
+

${docData.text}

+
+
+ + +
+
`; + }); + + divPost.innerHTML = card; + + const btnsDelete = divPost.querySelectorAll(".btnDelete"); + btnsDelete.forEach((btn) => { + btn.addEventListener("click", (event) => { + deletePost(event.target.dataset.id); + }); + }); + + const btnsEdit = divPost.querySelectorAll(".btnEdit"); + btnsEdit.forEach((btn) => { + btn.addEventListener("click", async (event) => { + const doc = await editPost(event.target.dataset.id); + + const docData = doc.data(); + + const title = divFeed.querySelector("#postTitle"); + const postText = divFeed.querySelector("#postText"); + + title.value = docData.title; + postText.value = docData.text; + + statusPost = true; + idPost = doc.id; + + + + }); + }); + }); + }; + + //console.log(createPost()); + createPost(); + + + + + return divFeed; +}; diff --git a/src/lib/views/templateMenu.js b/src/lib/views/templateMenu.js new file mode 100644 index 00000000..ea067258 --- /dev/null +++ b/src/lib/views/templateMenu.js @@ -0,0 +1,29 @@ + +//Función que contiene vista del Menu +export const menuLogin = () => { + const divMenuLogin = document.createElement("div"); + const viewMenuLogin = `
+
+ + Tips Adulto Independiente +
+
+ Únete a la comunidad y + conoce todos los secretos + para vivir sol@ antes de los 30 +
+ +
+

+ ¿No tienes cuenta aún? Regístrate aquí. +

+
+
` + divMenuLogin.innerHTML = viewMenuLogin; + return divMenuLogin; + + +}; + diff --git a/src/main.js b/src/main.js index ac27e91a..cbe4c717 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,28 @@ // Este es el punto de entrada de tu aplicacion -import { myFunction } from './lib/index.js'; +//Rutas +import { menuLogin } from './lib/views/templateMenu.js'; +import { changeRoutes } from './lib/router.js'; + + +//Contiene o llama el div del html +export const root = document.getElementById('root'); + +//Init del router +const init = () => { + window.location.href="http://localhost:3000/#/menuLogin"; + const root = document.getElementById('root'); + root.innerHTML = menuLogin(); + changeRoutes(window.location.hash); + window.addEventListener('hashchange', () => { + root.innerHTML = ''; + changeRoutes(window.location.hash); + }); + +} + +//carga el init +window.addEventListener('load', init); + + -myFunction(); diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..9cb19ece --- /dev/null +++ b/src/style.css @@ -0,0 +1,141 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100&display=swap'); +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} +/*estilo de fondo*/ +body { + background: linear-gradient(rgba(201, 227, 233, 0.877), rgba(6, 106, 131, 0.938)), url('./images/fondo.jpg'); + background-attachment: fixed; + font-family: 'Roboto Flex', sans-serif; + font-style: normal; +} +/*titulo y deformito*/ +.tips{ + text-align: center ; + font-family: 'Montserrat'; + font-style: bold; + font-size: 40px; + color: #000000; + margin-top: 10px; + margin-bottom: 15px; +} +/*flexbox de la pagina de inicio, por favor no agregar más atributos a esta clase*/ +.containerIndex{ + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: center; +} + + +/*texto de únete...*/ +.comunity { + display: flex; + margin-left: 20%; + margin-right: 20%; + color: rgb(1, 10, 10); + background-color: rgb(247, 247, 247); + font-family: 'Montserrat'; + font-style: normal; + font-weight: 300; + font-size: 28px; + line-height: 24px; + text-align: center; + padding: 15px; + border-radius: 20px; + text-align: center; +} + +/*botoncito de inicio de sesión y registro de adorno*/ +.logIn, + .signUp { + display: flex; + flex-direction: row; + justify-content: center; + font-family: 'Montserrat'; + font-style: bold; + font-size: 25px; + color: #000000; + border-radius: 50px; + padding: 10px; + margin-top: 50px; + margin-bottom: 10px; + margin-left: auto; + margin-right: auto; +} +.feeed{ + display: flex; + flex-direction: column; + align-items: center; + flex-direction: row; + justify-content: center; +} + +/*flexbox de la pagina de inicio, por favor no agregar más atributos a esta clase*/ +.containerForm{ + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + font-family: 'Montserrat'; + margin-top: 3%; + margin-bottom: 3%; +} + + +/*posts desde aqui*/ +.titlePost{ + height: 3vh; + width: 30vw; + background-color: rgba(201, 227, 233, 0.877); + border-radius: 10px; + text-align: center; + margin: 10px 0px 10px 0px; + font-family: 'Montserrat'; +} + +.textPost{ + height: 15vh; + width: 30vw; + background-color: rgba(201, 227, 233, 0.877); + border-radius: 10px; + text-align: center; + margin-bottom: 10px; + font-family: 'Montserrat'; + justify-content: center; + font-size: 15px; +} + + +.postTitle{ + width: 30vw; + font-family: 'Montserrat'; + font-size: 15px; + background-color: rgb(247, 247, 247); + + + + } +.postText{ +height: 15vh; +width: 30vw; +font-family: 'Montserrat'; +font-size: 15px; +background-color: rgb(247, 247, 247); + +} + +.textUser{ + height: 25vh; + width: 15vw; + background-color: rgba(201, 227, 233, 0.877); + border-radius: 10px; + text-align: center; + margin-bottom: 10px; + font-family: 'Montserrat'; + justify-content: center; + font-size: 15px;} diff --git a/thumb.png b/thumb.png deleted file mode 100644 index 0828f34c..00000000 Binary files a/thumb.png and /dev/null differ