- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Hacker edition
- 7. Entrega
- 8. Pistas, tips y lecturas complementarias
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.
En este proyecto construimos una Red Social, siendo la música el tema principal
Esta Red Social permite a cualquier usuario crear una cuenta de acceso y loguearse con ella; crear, editar, borrar y "likear" publicacciones.
En este proyecto construimos una Single-page Application (SPA) [responsive] (con más de una vista / página) en la que podemos leer y escribir datos, misma que utiliza [Firebase] para la autenticación de usuarios y hosting, tambien nos apoyamos de [Firestore] para la recopilación, sincronización y almacenamiento de datos.
Nuestra web tiene 4 componentes: *Home, siendo la pantalla donde inicia la app y que te redirige a los sitios para iniciar sesión o registrarte. * Register: Lugar en donde puedes registrarte usando algún nombre de usuario, correo y contraseña ó, si bien lo prefieres, puedes ingresar tu cuenta de google.
Login: En este sitio puedes iniciar sesión con el correo y contraseña que anteriormente brindaste, al igual, puedes ingresar desde tu cuenta de google.
Feed: Permite visualizar y realizar los post, mismo que puedes editar las veces que quieras y/o eliminar en el momento que te sea necesario.
Los principales usuarios del producto son personas de entre 20-35 años con acceso a internet que les interesa compartir sus canciones, bandas y conciertos favoritos y así poder encontrar otras personas que compartan sus mismos gustos. Para crear las historias de usuario realizamos un formulario donde nos compartieron las facilidades accesibilidad y de diseño.
Para planificar nuestros horarios y avances, utilizamos Trello como herramienta. Haciendo columnas para ubicar los faltantes y avances de las historias de usuarios, así como de nuestros bloqueos para poder solicitar ayuda en momentos de bloqueos.
Los prototipos de baja fidelidad de hicieron basados en las historias de usuario anteriores para así después trabajar con los prototipos de alta fidelidad y poder trabajar en su diseño una vez terminada la funcionabilidad de la página.
- 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
Para lograr estos objetivos, aprendimos e hicimos uso de las siguientes herramientas o habilidades técnicas:
-
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)
-
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
-
Firebase Auth
-
Firestore