- 1. Preámbulo
- 2. Definición del proyecto
- 3. Consideraciones generales
- 4. Tecnologías Utilizadas
- 5. Flujo de trabajo
- 6. Estructura de archivos
- 7. Pruebas unitarias
- 8. Interfaz desplegada
- 9. Desarrolladoras
El objetivo de este proyecto es adquirir conocimientos en el manejo de una single page application (SPA), aprender a manejar herramientas como Firebase y ganar experiencia en el trabajo colaborativo a través de una situación y contexto ficticios. Nuestro objetivo es diseñar una interfaz interactiva que permita ingresar, validar datos e interactuar a través de una red social, nuestra tematica esta enfocada en el proceso diverso el cual es criar, y para ello hemos creado Guide Ma+Pa.
Para nuestro proyecto Guide Ma+Pa, deberemos tener en cuenta las necesidades y expectativas de nuestros usuarios al momento de realizar el proceso de diseño de la interfaz,debemos comprender quiénes son nuestros usuarios y qué información desean ver y/o interactuar. Con base en esta comprensión, crearemos una interfaz amigable y fácil de usar que satisfaga las necesidades de nuestros usuarios.
- Este proyecto se debe trabajar en equipos de tres.
- El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints.
- La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS 😃. (Sin hacer uso de librerias).
Github Project: Es una herramienta de Github en la cual en lugar de aplicar una metodología específica a un proyecto proporciona características flexibles que puedes personalizar en función de las necesidades y los procesos del equipo, ya sea panel de tareas y/o hoja de ruta.
Excalidraw: Es una herramienta de pizarra colaborativa virtual que le permite esbozar fácilmente diagramas que parecen dibujados a mano.
Firebase: Es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles adquirida por Google. La cual utlizaremos apara la autenticación del usuario y el almacenamiento de la información de la app.
Vite: Es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web, nos permite que el navegador automáticamente se actualice sin tener que refrescar y volver a cargar todo el sitio, al momento de realizar cambios.
Figma: Es una herramienta de diseño de interfaces de usuario, que permite crear, colaborar y prototipar diseños de manera eficiente y efectiva.
HTML: Es un lenguaje utilizado para estructurar y presentar contenido en la web, proporcionando elementos y etiquetas para crear y dar la estructura de una página.
JavaScript: Es un lenguaje de programación que se utiliza para agregar interactividad y funcionalidad a las páginas web, permitiendo crear efectos dinámicos, manipular datos y responder a las acciones del usuario.
CSS: Es un lenguaje de estilo utilizado para definir la presentación y apariencia visual de una página web, permitiendo controlar el diseño, el formato y los estilos de los elementos en el HTML. Y con su caracteristica CSS Grid podemos adapatar el diseño.
Git: Es un sistema de control de versiones que facilita el seguimiento de los cambios en el código fuente, permitiendo gestionar y controlar las distintas versiones del proyecto, facilitando el trabajo colaborativo y la gestión de ramas y fusiones.
GitHub: Es una plataforma online basada en Git que ofrece alojamiento de repositorios remotos y herramientas colaborativas, permitiendo compartir, colaborar y gestionar proyectos de forma más sencilla.
Github Pages: Permite a los usuarios de GitHub crear y compartir sitios web públicos para proyectos, documentación, portafolios, etc.
Jest: Es un framework de pruebas unitarias de JavaScript, permite realizar afirmaciones y crear casos de prueba para verificar si el código se comporta como se espera.
Para establecer un flujo de trabajo eficiente, comenzamos organizando nuestro espacio en Github Project. Segmentamos todas las tareas requeridas en el proyecto, los objetivos de aprendizaje, las historias de usuario y los prototipos de baja y alta fidelidad. Progresivamente, profundizamos en cada uno de ellos, dividiéndolos en categorías como "Backlog", "Sprint Backlog" , "In progress", "In review" y "Ready". Este enfoque nos permitió tener una visión clara de las tareas pendientes y su progreso, lo que contribuyó a un desarrollo efectivo del proyecto.
Criar hijos es una de las experiencias más gratificantes y significantes de la vida de cualquier persona, sin embargo, es una tarea desafiante que requiere dedicación, paciencia y esfuerzo, lo cual es ¡agotador!. En Guide Ma+Pa, creemos firmemente que la crianza puede ser una aventura enriquecedora y positiva para padres y madres (mapadres) incluso para quienes aún no lo son. Nuestra plataforma ofrece un espacio seguro en donde puedes compartir recursos, consejos y apoyo para fomentar la colaboración en la crianza. Desde el anhelado embarazo hasta la desafiante adolescencia, queremos formar una comunidad confiable que brinde una experiencia gratificante y enriquecedora en este viaje maravilloso de criar.
¡Únase a Guide Ma+Pa y descubra la alegría de criar juntos!
Con estas historias de usuario definiremos lo que el usuario desea de nuestro proyecto.
Criterio de aceptación general:
- Registro de usuario.
- Login e Inicio de sesión.
- Visualizar muro con publicaciones.
- Editar post.
- Borrar post.
Definicion de terminado General:
- Registro fácil e intuitivo.
- Cumple con los criterios de aceptación.
- Debe ser una SPA.
- Es responsive.
- Pasan los test unitarios.
- Recibimos code review de al menos una compañera de otro equipo.
- La documentación se encuentra actualizada en el readme.
- Se realizan pruebas manuales buscando errores e imperfecciones simples.
- Se implementa todo el feedback que recibimos.
- Despliegue de aplicación y etiquetaron la versión (git tag).
YO como mapadre DESEO crear una cuenta y unirme a la plataforma, PARA conectarme con otros papás y poder compartir experiencias y obtener consejos utiles para la crianza. Además, deseo tener la opción de registrarme utilizando mi cuenta de Google para evitar la necesidad de recordar una contraseña adicional.
Criterios de Aceptación:
- Cuenta con un boton claro donde poder realizar el registro desde la página de Inicio.
- Al hacer clic en el botón "crear cuenta" debe redirigir a una página de registro que pueda ingresar:
- nombre , apellido , nombre de usuario, correo, contraseña, confirmación de contraseña.
- botón de confirmar registro. (mensaje de confirmación que indique que mi cuenta ha sido creada exitosamente).
- Los errores en el formulario deben ser señalados de manera amigable en caso de que no se haya proporcionado la información necesaria o si hay un formato incorrecto en algún campo.
- Que la contraseña requiera contenidos mínimos de seguridad (6-10 caracteres, una mayúscula y un número, sin caracteres acentuados, no puede empezar ni terminar c on un espacio en blanco).
- verifique el correo sea valido y único, es decir, que no se repita en otro usuario.
- El usuario registrado también ha de ser único.
- En caso de que ya se encuentre registrado, lo derive a iniciar sesión.
- En caso de que el usuario exista dar opciones de sugerencia.
- En caso de que la contraseña no coincida indicar que la corrija.
- Que la contraseña tenga un maskify, es decir, que no se visualice la contraseña correcta.
- Si elijo la opción "Registrarme con Google", al hacer clic en ese botón, debo ser redirigido a la página de inicio de sesión de Google, donde puedo autenticarme con mi cuenta de Google existente.
Definición de terminado
- Cambiar los mensajes de alert a párrafos cuando exista un error en los input y definir un color para check
- Agregar un mensaje cuando den eviar y no hay datos en el formulario.
- En el login agregar breve descripcion de la pagina y nombre abajo del logo.
- Terminar el formato de css(botones, fuentes , etc.) para que se asemeje mas al prototipo de alta
- Convertir a la funcion registerUser a una funcion asincrona para que se pueda llamar a la funcion navigateTo.
- Configurar FirestoreDatabase para almacenar los datos del usuario cuando se registra (crear funciones correspondientes)
- Agregar la funcionalidad de logout en el timeline (agregar icono, dar formato en css)
YO como mapadre, DESEO entrar facilmente a la plataforma iniciando sesión tanto con mi correo y contraseña como con mi cuenta de Google, PARA ingresar rápidamente a acceder al contenido que deseo ver.
Criterio de Aceptación:
- Ingresar con usuario/correo y contraseña.
- Campos de inicio de sesión claros.
- Junto al formulario de inicio de sesión con correo y contraseña, se debe proporcionar un botón adicional para "Iniciar sesión con Google".
- Ingresar a la página de Guide Ma+Pa.
Definición de terminado
- Al ingresar mi dirección de correo electrónico y contraseña válidos, se debe validar la información y permitirme acceder a mi cuenta, si la combinación de correo electrónico y contraseña no coincide con una cuenta existente, se debe mostrar un mensaje de error indicando que las credenciales son incorrectas; los mensajes de error son los siguientes
- En caso de que no exista el correo devolver mensaje /"Correo electrónico ingresado no existe ",
- En caso de que la contraseña sea errónea: "la contraseña es incorrecta".
- En caso que no escriba un correo "Ingresa un correo".
- En caso de que el usuario no escriba contraseña, "Escribe la contraseña".
- Que exista un botón de "entrar/iniciar sesión".
- Al hacer clic en el botón "Iniciar sesión con Google", debo ser redirigido a la página de inicio de sesión de Google, donde puedo autenticarme con mi cuenta de Google existente.
- Después de iniciar sesión con éxito, debo ser redirigido a la página de inicio.
YO como usaria, DESEO ver el contenido que me interesa publicado en el feed de la plataforma PARA nutrirme de nuevos conocimientos respecto a maternidad.
Criterio de Aceptación:
- Verificar si el usuario está logueado antes de mostrar contenido
- Mensaje de Bienvenida
- Ver contenido en el muro
- Diseño organizado y fácil de leer, donde cada publicación debe incluir el nombre del autor, y el contenido compartido.
Definición de terminado
- En el header se muestra el logotipo de la aplicacion y el boton para cerrar sesion.
- El boton de cerrar sesion te redirige al la pagina de inicio de la aplicacion.
- Se muestra un saludo y el nombre del usuario logueado.
- Hay un intup para escribir el mensaje y un boton para publicar.
- Las publicaciones se muestran de forma clara.
- la estructura de la vista está hecha dinamicamente con css grid.
- hacer una función para leer los datos de firestore y poder mostrar el nombre del usuario con el mensaje de bienvenida.
- hacer las configuraciones con grid para dividir la página y dar proporciones del muro
YO como mapadre DESEO poder publicar y editar el contenido que comparto sobre mis experiencias, consejos y recursos desmitificando las expectativas de la maternidad, PARA que otros mapadres puedan expresar (desahogarse) sus miedos y culpas o angustias.
Criterios de Aceptación
- Hay una opción para editar mi publicación después de haberla creado.
- Se debe abrir un editor de texto o un formulario donde pueda modificar mi publicación.
- Al modificar la publicación no debe permitir guardarla si no contiene texto.
- Al modificar la publicación debe tener la opcion de cancelar o guardar cambios.
- Debe existir una caja de texto y un botón claramente visible que me permita acceder a la función de "Publicar"
- Solo puedo publicar comentarios con información, nunca mensajes vacíos.
Definición de terminado
- El nombre del usuario aparece en cada nueva publicacion.
- Las publicaciones contienen máximo 300 caracteres.
- Los botones de editar y eliminar solo aparecen en publicaciones del usuario logueado, no puede modificar publicaciones de otros usuarios.
- El mensaje a editar se muestra en una ventana modal
- En la modal aparecen dos botones para aceptar y guardar cambios.
- Al dar click en el boton de aceptar, la modificación de la publicación se muestra en el muro.
YO como mapadre DESEO tener la opción de eliminar publicaciones específicas de mi feed PARA que pueda mantener mi experiencia personalizada y enfocada en el contenido que es relevante para mí.
Criterios de Aceptación:
- Debe existir un botón o icono claramente visible en cada publicación de mi feed que indique la opción para "Eliminar".
- Al hacer clic en el botón de "Eliminar" en una publicación, debo recibir una confirmación para asegurarme de que realmente deseo eliminar esa publicación.
- Una vez que haya confirmado mi decisión de eliminar la publicación, esta debe desaparecer inmediatamente de mi feed.
Definición de terminado
- El boton de eliminar solo aparecen en publicaciones del usuario logueado, no se puede eliminar publicaciones de otros usuarios.
- El mensaje confirmar la eliminación de una publicación se muestra en una ventana modal
- En la modal aparecen dos botones para borrar publicacion y cancelar.
En cuanto al diseño de la página, lo primero después de definir el tema a trabajar fue desarrollar un prototipo de baja fidelidad. Para ello realizamos prototipo de baja fidelidad en Excalidraw que llevamos posteriormente a Figma.
el cual se puede interactuar haciendo "Click aquí".
Se solicito feedback a través de un formulario y asi obtener opiniones y sugerencias para realizar mejoras iterativas de nuestro proyecto.
Tras las diversidad de respuestas optamos por los siguientes cambios.
.
├── README.md
├── package.json
├── explaindev.json
├── vite.config.js
├── src
| ├── lib
| | ├── credentials.js
| | ├── firebaseConfig.js
| | ├── initializerFirebase.js
| | ├── localStore.js
| ├── components
| | ├── registrer.js
| | ├── login.js
| | ├── timeline.js
| | ├── error.js
| | ├── newPost.js
| ├── images
| ├── imagReadme
| ├── style
| | ├── registrer.css
| | ├── login.css
| | ├── timeline.css
| ├── index.html
| ├── main.js
| ├── test
| | ├── login.spec.js
| | ├── register.spec.js
| | ├── credentials.spec.js
|
main.js: En este archivo estan configuradas las rutas y el comportamiento de la navegación en la aplicación, así como manejo del estado de autenticación de Firebase.
index.html: Dentro de este archivo se encuentra el root del proyecto.
README.md: En este archivo esta la descripcion detallada del proyecto.
package.json: Este archvo contiene las configuraciones de firebase y de vite para el despliegue y los test del proyecto.
explaindev.json:Este archivo contiene el nombre del proyecto.
vite.config.js: Este archivo contiene una función con las configuraciones de vite.
src: Esta carpeta almacena los componetes de la aplicación, imagenes, svg, archivos de estilo, archivos con extención js y el archivo index.html
lib: contiene el archivo credentials.js que contiene las funciones puras que usamos en las diferentes conmonentes o vistas de la aplicacion. firebaseConfig.js que configura el objeto firebaseConfig que contiene la configuración del proyecto en firebase. Finalme el archivo initializerFirebase.js, en el cual se importan y exportan los modulos auth, firestore, app desde firebase.
firebaseConfig.js: Contiene "firebaseConfig" el cual es un objeto de configuración de Firebase. Este objeto contiene los valores necesarios para conectar la aplicación web con los servicios de Firebase.
initializerFirebase.js: Es donde se inicializa Firebase y se exportan varias funciones y objetos relacionados con la autenticación y la base de datos.
credentials.js:esta enfocado en la autenticación y manejo de usuarios de la aplicación.
components: Contiene las diferentes vistas de nuestra SPA siendo sus principales archivos login.js, . register.js, timeline.js y error.js.
login.js: Este componente crea y configura la interfaz de usuario para la página de inicio de sesión. Esta es la vista principal de la aplicacion y default del router
registrer.js: Este componente crea y configura la interfaz de usuario para la página de registro. Es donde aparece el formulario para que los nuevos usuarios puedan crear una nueva alta de usuario.
timeline.js: Este componente crea y configura la interfaz de usuario para el muro de la aplicación.Contiene la vista donde el usuario puede visualizar sus publicaciones, las de otros usuarios registrados, realizar publicaciones nuevas, editar o eliminar sus publicaciones.
error.js: Este componente crea y configura la interfaz de usuario para mostrar un mensaje de error cuando se accede a una página que no se encuentra (error 404).
images: Contiene las imágenes utilizadas en la página.
imagReadme: Contiene todas las imágenes de este readme.
style:Esta carpeta, contiene los estilos CSS del sitio web, aplicados para darle una apariencia visual atractiva a la página.
registrer.css: Contiene el estilo de el conponente register.js
login.css: Contiene el estilo de el conponente login.js
timeline.css: Contiene el estilo de el conponente timeline.js
index.html: Contiene la etiqueta head con los metadatos y con la importación de las hojas de estilo de css. Contiene dentro del body una etiqueta div con id root para identificar que ahí se agregaran los elementos de cada componente o vista de la SPA. También contiene dos etiquetas script, una de tipo modulo para manejar las importaciones de los diferantes módulos y otro script para importar los iconos usados en register importados desde la página de fontawesome.
main.js: Este archivo contiene la función del root para la SPA.
test: En esta carpeta se encuentran los archivos login.spec.js,register.spec.js contienen los test
login.spec.js: En este archivo se encuentran los test de la renderización de los botones e inputs que son necesarios para iniciar sesión con email y contraseña, con una cuenta de google y para registrarse.
register.spec.js: Aquí se encuentran los test de la validación de todos los inputs para que se registre un nuevo usuario. Tambien se verifica que llame correctamente a la función createUserWithEmailAndPassword.
credentials.spec.js: contiene un test de las funciones puras usadas en la aplicación.
Estos test contribuyen al mantenimiento y la calidad del código, permiten detectar rápidamente problemas que puedan surgir tras cambios en el código. Se encuentran en la carpeta test.
Versión móvil Esta es la interfaz final de la aplicación web en la vista de movil equivalente a 480 px.
Versión tableta Esta es la interfaz final de la aplicación web en la vista de tableta equivalente a 720 px.
Versión escritorio Esta es la interfaz final de la aplicación web en la vista de escritorio.