Práctica del módulo 5 de LAUNCHX , el tema : VueJS(PASTELERIA)
En esta práctica ponemos en práctica los conocimientos adquiridos de vUEJS en el curso de LAUNCHX. La práctica consiste en crear una página para una pastelería. Se crea una página usando Vuejs la cual tiene varias vistas, las vistas a su vez se crean a partir de componentes. Se pueden pasar datos entre la vista de los clientes y la vista del pastelero por medio de la store con Vuex.
Link de los requerimientos de la pagina ---->>>LINK
Link del código desarrollado en VUEJS---->>>LINK
Link de la página desplegada en Github pages --->>> LINK
Capturas de pantalla del funcionamiento del sitio, se muestra la navegación por las distintas vistas del sitio, así como también se observa que el sitio es responsivo
- Página principal de la pastelería. 1.1 Página principal de la pasteleria para dispositivos pequeños. (Se observa como el navbar se contrae)
- Vista 'Pasteles' del sitio. En esta página se da a conocer a los clientes los sabores que se manejan en la pasteleria. 2.1 De igual forma la vista pasteles se muestra en dispositivos pequeños.
- Vista 'Realiza tu pedido' del sitio. En esta los clientes pueden realizar su pedido por medio de un formulario, el cual cuenta con validación de datos. Al no llenar cualquiera de los datos aparece una leyenda que pide al usuario llenar el campo y por consiguiente no permite avanzar de pagina 3.1 Vista para dispositivos pequeños, con todos los campos llenados. Las leyendas de 'favor de llenar los campos' son retiradas.
- Una vez llenado correctamente el formulario se despliega la siguiente vista que es 'Revisar pedido'. En esta vista el usuario puede validar que los datos ingresados hayan sido los correctos, de no ser así puede presionar el botón 'regresar' para volver a la página anterior y modificar cualquier cambio. En caso de que la información esté correcta deberá presionar 'Realizar pedido' el cual lo llevo a la siguiente vista
- Vista 'PedidoRealizado', esta vista simplemente le indica al usuario que su pedido fue tomado correctamente
- Por último la vista 'Inventario' que, en este caso, sería una vista única del pastelero. En esta vista se van registrando todos los pedidos que el usuario vaya haciendo en la vista 'Realiza tu pedido' , también cuenta con un inventario el cual muestra una etiqueta de color rojo cuando el stock es menor a 3. Así mismo se puede ir modificando el stock para cada elemento de forma manual 6.1 Vista del inventario para dispositivos pequeños