A continuación se presentara toda la información respecto al examen, tanto el uso de Herramientas Externas como partes del codigo creado para el mismo. El tiempo estimado para resolver el problema en cuestion tomo 2 horas como minimo. La planeacion de este tomo como una hora, para estructurar y definir el uso de las acciones del sistema, y otras 2 horas para la parte visal de todo el sitio, como mi CV y Documentacion.
Para la parte visual del Examen se uso Bootstrap como Framework principal. Para la parte de los iconos visuales se decidio usar FontAwesom v4. Por su puesto se uso una hoja de estilos CSS personalizada para obtener mejor resultado para la distrubucion de los elementos. En cuanto a las alertas se inclino por el uso de SweetAlert2, herramienta Javascript.
En este caso el uso se limito mas al uso de solo JavaScript, con la ayuda de la libreria de JQuery. Usando la variedad de funciones que proporciona esta herramienta se logro solucuionar el problema, desde el uso de Ajax hasta el de clcik() para establecer y controlar los eventos del sistema.
Usted deberá realizar una interfaz de usuario con un diseño que tenga buena usabilidad, sea intuitivo y cumpla con las especificaciones que se describen a continuación:
1.Crear una tabla de pago donde se listaran los productos de la orden de compra.
2. Crear
un formulario donde se pueda agregar productos a la tabla antes mencionada.
1. Para obtener la información de la orden de compra así como los porductos, usted deberá realizar una peticion (request) usando el metodo GET a la siguiente URL: Oculto por Privacidad
2. Es importante que tenga en cuenta que para acceder al API debera enviar el token en el Authorization header de la petición: Oculto por Privacidad
3. Usted obtendrá un JSON con la información de la orden y deberá desplegar los productos en la tabla del punto 1 de la descripción del examen, los cuales se encuentran en el atributo items del JSON.
4. Los campos que debe considerar para mostrar de los productos son: sku, name, quantity y price.
5. También deberá indicar en alguna parte al principio de la página web el número de la orden indicado en el atributo number.
6. En el formulario ya mencionado debe incluir los mismos campos de los productos mostrados, es decir, sku, name, quantity y price, al igual que un botón de agregar que al hacer click, la información capturada se agregue a la tabla de productos de la orden.
7. (Opcional) Agregar todos los campos del formulario como requeridos y si no se captura información en alguno de éstos, marcarlo de color rojo e indicar que es requerido.
8. (Opcional) Agregar boton de pagar y que al hacer click, muestre una alerta indicando que el proceso fue exitoso, esta alerta deberá tener un diseño agradable.
Se creo una tabla mostrando los productos proporcionados por el Punto 1 de Especificaciones, obteniendo los datos atravez del metodo Ajax. Estos se mostraron usando la clase Card de Bootstrap, dando al usuario meta una agradable vista del listado de los productos.
Como se podra notar en esta parte del codigo, se aprovecho los datos ortogados para dar mejor vista a la información y asi mostrar mas coherencia en la vista.
En esta parte se muestra la cantidad total de los productos a comprar, el SubTotal o Total a pagar, el Id Siguiente que iria en la base de datos y rellenar con una Imagen Default cuando no exista una en el producto mostrado
Se empieza con la funcion click() para guardar el formulario de Agregar Producto, condicionando la validacion de llenado de formulario el cual al pasarlo, da inicio para guardar los nuevos datos.
Se optienen los datos de los Inputs para alacenarlos en variables, posteriormente se almacenan en el JSON para conservar datos y se muestran en pantalla.
Se suma el precio al total para mostrarlo, al igual que se incrementa en 1 la ID del Producto y para finalizar, se limpian los valores de los input para ingresar otro a futuro.
Al abrir "Proceder al Pago", se muestra una pantalla, que a su vez activa esta funcion. Como inicio detecta si hay un nuevo producto agregado o se mantienen los originales.
Si no hay cambios, se muestra el total en pantalla, y la lista original de los productos.
Si se decide no continuar con la compra y cierran la ventana, esta se reinica para seguridad de articulos duplicados.
En caso contrario, si hay cambios de productos, pasa exactamente los mismo pero con los datos nuevos.
Pensaba ponerle Menú a la documentacion, pero me dio pereza ya que esta parte es algo que no pidieron como tal. La verdad ya me quiero poner a jugar Fortnite, asi que disfruten del uso del Scroll a lo desgraciado.