Burger Queen (API Client)

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Historias de usuario
• 5. Despliegue
• 6. Equipo de Desarrollo

1. Preámbulo

Angular es uno de los frameworks de JavaScript más utilizados por lxs desarrolladorxs alrededor del mundo, y hay una razón para eso. En el contexto del navegador, mantener la interfaz sincronizada con el estado es difícil. Al elegir un framework para nuestra interfaz, nos apoyamos en una serie de convenciones e implementaciones probadas y documentadas para resolver un problema común a toda interfaz web. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las características específicas de nuestra aplicación.

Cuando elegimos una de estas tecnologías no solo importamos un pedacito de código para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una arquitectura, una serie de principios de diseño, un paradigma, unas abstracciones, un vocabulario, una comunidad, etc.

Como desarrolladoras Front-end, estos kits de desarrollo nos resultan de gran ayuda para implementar rápidamente características de los proyectos en los que trabajamos.

2. Resumen del proyecto

BurgerApp es un sistema de pedidos diseñado para satisfacer las necesidades del cliente, ofreciendo una experiencia culinaria más rápida y satisfactoria.

La interfaz muestra de manera clara y organizada los dos menús disponibles: Breakfast y Meals, con todos sus productos. Los meseros/as pueden ir seleccionando los productos que desean agregar al pedido de los comensales, y la interfaz irá mostrando un resumen detallado del pedido, así como realizar modificaciones o cancelaciones en caso de que el cliente cambie de opinión. Una vez que el pedido esté completo, se enviará automáticamente a la cocina para su preparación.

El equipo de cocina se beneficia significativamente de BurgerApp, ya que reciben los pedidos en tiempo real, lo que les permite comenzar a preparar las hamburguesas de inmediato. Esto ha optimizado los tiempos de preparación y ha agilizado la entrega de los pedidos a los clientes, garantizando una experiencia culinaria más rápida y satisfactoria.

Además, el sistema cuenta con una funcionalidad de administrador que permite la modificación, administración y eliminación de productos asi como de usuarios, lo que facilita la gestión y actualización de la plataforma.

3. Objetivos de aprendizaje

HTML

• [✨] Uso de HTML semántico

CSS

• [✨] 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 media queries

Control de Versiones (Git y GitHub)

• [✨] 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)

HTTP

• [✨] Consulta o petición (request) y respuesta (response).
• [✨] Cabeceras (headers)
• [✨] Cuerpo (body)
• [✨] Verbos HTTP
• [✨] Códigos de status de HTTP
• [✨] Encodings y JSON
• [✨] CORS (Cross-Origin Resource Sharing)

Angular

• [✨] Components & templates
• [✨] Directivas estructurales (ngIf / ngFor)
• [✨] @Input | @Output
• [✨] Creación y uso de servicios
• [✨] Manejo de rutas
• [✨] Creación y uso de Observables.
• [✨] Uso de HttpClient
• [✨] Estilos de componentes (ngStyle / ngClass)

Bases de datos

• [✨] Modelado de datos

Centrado en el usuario

• [✨] Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• [✨] Crear prototipos de alta fidelidad que incluyan interacciones
• [✨] Seguir los principios básicos de diseño visual

Investigación

• [✨] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

4. Historias de Usuario

5. Despliegue

La interfaz fue desplegada usando Vercel: Burger Queen App Desplegada

Puedes ingresar para visualizar el proyecto dándole click aquí ☝️☝️☝️ y se mostrará la interfaz del logín donde podrás ingresar con los siguientes usuarios y contraseñas.

Usuarios	Contraseña
user.admin@systers.xyz	123456
user.chef@systers.xyz	123456
lady.waiter@systers.xyz	123456

La apiMock fue desplegada usando Render : Appi-Mock Desplegada

6. Equipo de Desarrollo

¡Hola🤚! Somos un equipo apasionado que ha unido 🤜fuerzas🤛 para darle vida a este proyecto. Valoramos la diversidad de ideas y experiencias ya que cada una de nosotras aporta un conjunto único de habilidades y perspectivas que enriquecen el proceso creativo✨.

Nos hemos embarcado en este emocionante viaje de desarrollo colaborativo, utilizando herramientas como Live Share para el Pair-programming. Esta metodología nos ha permitido trabajar en estrecha coordinación, compartir ideas en tiempo real y superar obstáculos de manera eficiente.

Cada paso ha sido una oportunidad para aprender y crecer, no solo en términos de desarrollo técnico, sino también en cuanto a habilidades de comunicación y trabajo en equipo🫂.

Link-GitHub Diana Quispe

Link-GitHub Indira Davoin