- 1. ¿En qué consiste Petlandia ?
- 2. Desarrollo del Producto
- 3. Los principales usuarios de producto
- 4. El problema que resuelve el producto y para qué servirá
- 5. Prototipos
- 6. Historias de Usuario desarrolladas
- 7. Test de usabilidad
- 8. Objetivos de aprendizaje
Petlandia es una red social de entretenimiento para los amantes de las mascotas, en cuál podran compartir a través de fotos o estados los momentos más divertidos junto a ellos.
El producto presenta 4 vistas: una vista como ingreso de usuario registrado y otro para registrarse. Dentro de la app, como usuario registrado y en sesión, se presenta dos vistas, una llamada "home", en que se registra los posts del usuario, visualiza grupos de apoyo sobre mascotas, y su perfil. La ultima vista es "profile", donde el usuario logeado visualiza los posts únicos de él, y además puede modificar sus datos de perfil.
Se realizó entrevistas a 5 personas de entre 15 y 30 años para determinar el perfil de nuestro usuario y conocer acerca de las expecttivas del desarrollo de un producto como Petlandia.
El usuario de Petlandia se presenta en el siguiente Arquetipo:
En base a este perfil de usuario, se aplicaron entrevistas con las siguientes preguntas:
- ¿Puede contarme un poco sobre usted, a qué se dedica y qué hobbies tiene?.
- ¿Qué redes sociales es usted usuario en los últimos años? ¿Cuál ha sido su favorito?
- ¿Ha conseguido una red social cuyo tema principal ha sido las mascotas?
- ¿Le gustaría dedicar su tiempo de entretenimiento a una red social cuyo tema principal sea las mascotas?
- ¿Qué actividades le gustaría hacer en una red social cuyo tema principal sea las mascotas?
- ¿Hay algo de lo que no hayamos hablado que quisiera comentar?
- Las personas más interesadas en usar una red social enfocada en mascotas son de entre 20 y 30 años.
- La red social que más usan son Facebook e Instagram.
- El 80% de ellos desconocía de alguna red social enfocadas en mascotas.
- Como usuarios activos de una red social como Petlandia les gustaría agregar el nombre de sus mascotas a su perfil , compartir las fotos de sus mascotas y además hacer meetups con otros amantes de las mascotas.
- Como usuarios pasivos , les gustaría poder ver las fotos de las mascotas de otros usuario y quizás comentarlas.
A partir de los resultados de la entrevistas se identifica que Petlandia proporcionara un medio de comunicación para que diversos usuarios con mascotas puedan socializar, compartir información sobre sus mascotas y el cuidado a los mismos. Este producto garantiza una comunicación con seguridad para el usuario, quien puede compartir su información de manera segura con la comunidad de amantes de pets.
Como producto de las entrevistas , desarrollamos los prototipos de baja y alta fidelidad para vista mobile y desktop.
-
Como usuario nuevo debo poder crear una cuenta con email y password válidos para ingresar a la red social.
-
Como usuario registrado debo poder iniciar sesión con email y password válidos para ingresar a la red social.
-
Como usuario nuevo debo poder iniciar sesión con mi cuenta de Google 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 posts para poder elegir la privacidad de mis publicaciones.
-
Yo como usuario loggeado, puedo dar like y llevar un conteo de likes en las publicaciones para poder indicar que me gusta una publicación.
-
Yo como usuario loggeado debo poder escribir, guardar, editar o eliminar un comentario en una publicación para poder compartir mi opinión o hacer preguntas.
-
Yo como usuario loggeado debo poder visualizar los datos de mi perfil creado y editarlos para actualizar mi información.
Resultados del test de usabilidad :
- Mostrar el prototipo de alta fidelidad.
- Modificar la pregunta planteada en el input del post.
- Añadir el botón para eliminar las fotos antes de realizarse las publicaciones.
- Permitir tener información sobre adopción de mascotas, cuidado de mascotas y otras redes sociales relacionados a la temática.
El objetivo principal de aprendizaje de este proyecto es construir una Single-page Application (SPA) que se adapte al patrón modelo - vista - controlador MVC y que sea responsive (con más de una vista / página) en la que podamos leer, escribir, actualizar y eliminar datos.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox | Grid en CSS.
- Uso de selectores del DOM.
- Manejo de eventos del DOM (aprovecha el objeto de evento en sus handlers, uso de event delegacion.)
- Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- History API.
- localStorage.
- Uso de template strings
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (
import|export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Uso de callbacks.
- Consumo de Promesas.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | code reviews |tags)
- Organización en Github (projects | issues | labels | milestones)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (onAuthStateChanged | onSnapshot)
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- Planear y ejecutar tests de usabilidad.