Colaboradoras :
Demo
- 1. Wanderlust
- 2. Resumen del proyecto
- 3. Historias de usuario
- 4. Consideraciones del comportamiento de la interfaz de usuario (UI)
- 5. Consideraciones técnicas UX
- 6. Objetivos de aprendizaje
Wanderlust es una red social de viajes donde los usuarios pueden compartir sus aventuras y descubrir nuevos destinos a través de la experiencia de otros viajeros. La aplicación utiliza la tecnología de Firebase para almacenar y recuperar datos de usuarios y publicaciones.
En Wanderlust , los usuarios pueden publicar sus experiencias de viaje y compartir fotos de lugares hermosos que hayan visitado. Además, cuenta con una sección de exploración donde los usuarios pueden ver todas las publicaciones e interactuar con otras publicaciones dando "Me gusta" , también tiene una función de edición para los usuarios que hayan publicado, lo que les permite editar sus publicaciones existentes o eliminarlas por completo.
- 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
Realizar una encuesta nos ayudó mucho porque nos permitió obtener información valiosa sobre las necesidades y expectativas de los usuarios en relación a nuestra red social. Gracias a la encuesta, pudimos recopilar información sobre las características específicas que los usuarios esperaban de nuestra plataforma, su experiencia previa en otras redes sociales y la forma en que interactúan con estas plataformas.
Los resultados de la encuesta también nos ayudaron a definir el enfoque y la estrategia de nuestra red social. Pudimos identificar nuestro público objetivo, definir las características principales de la plataforma y establecer el tono y la voz de la marca. En resumen, la encuesta nos permitió crear una plataforma relevante y útil para los usuarios, reduciendo el riesgo de crear una red social que no tenga éxito debido a la falta de interés o necesidad por parte de los usuarios.
El objetivo principal de Wanderlust, red social de viajes donde los usuarios pueden compartir sus aventuras y descubrir nuevos destinos a través de la experiencia de otros viajeros, es crear una comunidad de viajeros apasionados por explorar el mundo y compartir sus vivencias.
Los principales usuarios de esta red social son las personas que disfrutan viajar, descubrir nuevas culturas y tener experiencias únicas. Wanderlust fue creado para personas de diferentes edades, géneros y nacionalidades, pero con una pasión compartida por los viajes.
Además, esta red social podría resultar especialmente atractiva para aquellos que buscan inspiración e ideas para planear sus próximos viajes, así como para aquellos que disfrutan compartiendo sus aventuras con otros y creando una comunidad en línea de viajeros entusiastas. También podrían ser usuarios aquellos que deseen encontrar recomendaciones y consejos de otros viajeros acerca de lugares para visitar, entre otros aspectos relacionados con los viajes.
- Iniciar sesión con correo electrónico y contraseña o cuenta de Google.
- Crear una publicación con texto y una imagen.
- Editar y eliminar publicaciones propias.
- Dar "like" y "dislike" a las publicaciones de otros usuarios.
Realizar el prototipo de baja del proyecto nos ayudó a visualizar y comprender mejor cómo sería la idea en la práctica. Al crear una maqueta o representación básica del diseño, se pudo evaluar su funcionalidad y hacer ajustes antes de comprometer con la construcción completa. También pudimos utilizar el prototipo de baja para obtener comentarios y opiniones de posibles usuarios finales. Sus sugerencias y observaciones nos permitieron mejorar y refinar el diseño antes de avanzar a la siguiente etapa del proyecto.
✔️ 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.
-
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.
✔️ Hacer seciones de testing de usabilidad con el producto en HTML. Cuando lanzamos nuestra red social, queríamos asegurarnos de que ofreciera una experiencia de alta calidad para nuestros usuarios. Por eso, realizamos pruebas rigurosas antes de cada lanzamiento de nuevas funcionalidades y actualizaciones. De esta manera, podemos identificar y corregir errores antes de que afecten a nuestros usuarios.
Además, las pruebas también nos han ayudado a identificar problemas específicos que pueden estar afectando la red social. Por ejemplo, si un gran número de usuarios experimenta problemas al cargar imágenes, podemos identificar la causa y trabajar en soluciones para corregir el problema lo más rápido posible.
Otro beneficio de las pruebas es que nos han permitido mejorar la eficiencia de la red social. Al identificar y corregir problemas de rendimiento, hemos logrado mejorar el tiempo de carga y la velocidad general de la red social, lo que es beneficioso tanto para nuestros usuarios como para nosotros.
Por último, las pruebas también nos han ayudado a planificar a largo plazo. Al recopilar información sobre cómo los usuarios interactúan con la red social, podemos identificar áreas que necesitan mejoras y desarrollar nuevas funcionalidades y características que satisfagan las necesidades de nuestros usuarios.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Modelo de caja (box model): borde, margen, padding
-
Uso de flexbox en CSS
-
Uso de CSS Grid Layout
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Ruteado (History API, evento hashchange, window.location)
-
Arrays (arreglos)
-
Objetos (key, value)
-
Diferenciar entre tipos de datos primitivos y no primitivos
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Uso de bucles/ciclos (while, for, for..of)
-
Funciones (params, args, return)
-
Pruebas unitarias (unit tests)
-
Pruebas asíncronas
-
Uso de mocks y espías
-
Módulos de ECMAScript (ES Modules)
-
Uso de linter (ESLINT)
-
Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
Diferenciar entre expresiones (expressions) y sentencias (statements)
-
Callbacks
-
Promesas
-
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
-
GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
-
GitHub: Organización en Github (projects | issues | labels | milestones | releases)
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual
-
Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
-
Firebase Auth
-
Firestore