Documentación del Examen

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.



Herramientas Usadas
Parte Visual

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.

Links de Herramientas


Parte Tecnica

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.

Links de Herramientas


Examen

Descripcion

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.

Especificaciones

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.



Resolucion del Examen

Descripcion Punto 1

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.

Codigo Usado

Ajax - Especificaciones Punto 1, 2, 3
$.ajax({ type: 'GET', url: 'Oculto por Privacidad', data: {}, dataType: 'json', headers: { 'Authorization': 'Oculto por Privacidad' }, success: itemsData })
Seleccion y Muesta de Datos - Descripcion Punto 1 - Especificaciones Punto 4

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.

function itemsData (data) { // Selecciona los items del JSON itemsArray = data.order.items // Mestra los datos itemsArray.forEach(item => { // Suma los valores Price para dar el Subtotal subtotal += parseInt(item.price) // Muestra en pantalla la lista de productos $('[print_table]').append('Aqui va el HTML a mostrar') })
Datos Extras a mostrar

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

// Muestra diferentes datos // Cantidad a comprar itemsArrayLenght = itemsArray.length $('[cant]').text(itemsArrayLenght) // Subtotal a pagar $('.subtotal').text('$' + subtotal) $('.cantidad').text('$' + subtotal) // Id Siguiente solo visual IntitemLeg = parseInt(itemsArrayLenght) - 1 nextID = parseInt(itemsArray[IntitemLeg].id) nextID = nextID + 1 $('#ItemIDForm').attr('placeholder', nextID) $('#ItemIDForm').attr('value', nextID) // Identifica las imagenes Nulas y las Remplaza por una Default img = $('.img') for (let i = 0; i < img.length; i++) { long = img[i].src.length getURLImg = img[i].src.substring((long - 4), long) if (getURLImg == 'null') { img[i].src = 'Imagen Default' } }
Mostar Numero de Orden - Especificaciones Punto 5
// Muestra el numero de Orden $('.orderNumber').html(data.order.number)
Agrega un nuevo Producto - Especificaciones Punto 6 y 7

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 gruardar el nuevo producto $('.addProductBTN').click(function () { Se repite esta Condicional con los otros campos // Validacion de Formulario if ($('#ItemSku').val() == '') { $('#ItemSku').addClass('emptyForm') $('#ItemSku').change(function () { $('#ItemSku').removeClass('emptyForm') }) Aqui va la Alerta de SweetAlert2 } else { // Alerta Alerta SweetAlert2 // Values del formulario nextIDSTR = nextID.toString() NameProduct = $('#ItemName').val() CantProduct = parseInt($('#ItemCantidad').val()) PriceProduct = parseInt($('#ItemPrice').val()) * CantProduct SKUProduct = $('#ItemSku').val() // Agrega al JSON temporalmente itemsArray.push({Aqui mantiene Actualizado el JSON}) // Agrega Visualmente el articulo $('[print_table]').append('Aqui va HTML a mostrar') // Subtotal a pagar subtotal += PriceProduct $('.subtotal').text('$' + subtotal) // Cierra la ventana de Nuevo Producto $('.close').click() // Incrementa el ID nextID = nextID + 1 $('#ItemIDForm').attr('placeholder', nextID) $('#ItemIDForm').attr('value', nextID) $('[cant]').text(itemsArrayLenght + CantProduct) // Limpia los inputs $('#ItemName').val('') $('#ItemPrice').val('') $('#ItemSku').val('') $('#ItemCantidad').val('') itemsArraynew = itemsArray } })
Vista de Confirmacion de Orden de Compra - Especificaciones Punto 8

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.

// Genera la orden de compra $('.apagar').click(function () { $('.cantidad').text('$' + subtotal) if (jQuery.isEmptyObject(itemsArraynew)) { // Mestra los datos itemsArray.forEach(item => { // Suma los valores Price para dar el Subtotal subtotal += parseInt(item.price) // Muestra en pantalla la lista de productos $('.productosPagar').append('HTML a Mostrar') $('.pago').on('hidden.bs.modal', function () { $('.productoapagar').remove() }) }) } else { // Mestra los datos itemsArraynew.forEach(item => { // Suma los valores Price para dar el Subtotal subtotal += parseInt(item.price) // Muestra en pantalla la lista de productos $('.productosPagar').append('HTML a Mostrar') $('.pago').on('hidden.bs.modal', function () { $('.productoapagar').remove() }) }) } })
Solo Redirecciona a esta venta al Pagar el Producto
// Redirecciona al completar $(".pagarProducto").click(function(){ window.location.href = "docs.html"; })

Comentarios Extras (innecesarios)

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.