- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Consideraciones generales
- 4. Definición del producto
- 5. Organización del equipo
- 6. Historias de usuario
- 7. Diseño de la interfaz de usuario
- 8. Consideraciones técnicas
- 9. Objetivos de aprendizaje
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.
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.
Este proyecto es parte del proceso de aprendizaje en el bootcamp de Laboratoria, este proyetco es el tercero realizado.
El objetivo principal de este proyecto fue construir una Red Social que permita a cualquier usuario crear una cuenta de acceso y loguearse con ella; crear, editar, borrar y "likear" publicacciones.
- Este proyecto se resolvió en duplas.
- El rango de tiempo en el que se completó este proyecto fue de 6 sprints.
- El proyecto se entregó en GitHub con la interfaz desplegada en Firebase.
Nuestro proyecto es una red social dirigida a usuarios con interés por la dinámica de las piedras viajeras. La piedra viajera es una piedra decorada, que pude contener un mensaje de aliento, esperanza o una reflexión. Éstas tienen el fin de dar un mensaje o mayor alegría al día de una persona.
Los principales objetivos de nuestros usuarios al utilizar nuestra página son crear una cuenta de acceso y loguearse con ella; loguearse con Facebook y Google, editar su perfil, crear, editar, borrar y "likear" publicacciones que contengan texto, imágenes y ubicación de piedras que encontraron o que ellos pintaron.
Como herramienta de organización utilizamos Trello, en donde hicimos toda la planeación de trabajo de cada sprint que duró este proyecto (6):
Para las historias de usuario nos basamos principalmente en las necesidades compartidas por Laboratoria para los usuarios y las complementamos con los usuarios a los que consultamos o de los que recibimos feedback.
El prototipo de alta fidelidad fue elaborado en Figma.
Se buscó un diseño responsive, basándonos en el mobile first.
Durante el desarrollo de estre proyecto se hicieron tests de usabilidad con distintos usuarios los cuales nos brindaron feedback sobre el diseño de nuestra página, en donde se pudo corregir:
- La posición del contenido de los posts.
- La geolocalización del punto actual en el que se encontraban.
- Que se pudiera ocultar y ver las contraseñas.
- Que los botones de editar y eliminar post estuvieran ocultos dentro de un menú en cada post.
- Scroll de los posts.
La lógica del proyecto se implementó completamente en JavaScript (ES6), HTML y CSS. NO estuvo permitido usar librerías o frameworks, solo vanilla JavaScript.
-
[✓] 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