Continuando con el desarrollo que se trae del Backend, vamos a realizar los wireframe de usuarios y productos

para ello podremos utilizar el aplicativo de Draw.io, Adobe XD o Figma.

Estas herramientas nos permiten diseñar wireframes, mockups, prototipos y ayuda con la parte de estilos e
interacción entre objetos de diseño, además tiene licencia gratis o versiones de prueba gratuita.

Incluir los enlaces de cada aplicativo.

Recuerda que:

● La estética de los wireframes debe ser simple, los colores deben ser en escala de grises (blanco, negro y todos
los grises en medio).

● No se deben usar más de dos fuentes de caracteres. A esta altura no es necesario emplear la tipografía como
medio para comunicar jerarquía de la información.

● No se debe recargar los wireframes con imágenes y videos, pero si donde van ubicados, para ello utilizamos un
rectángulo con una equis para representar donde van las imágenes y un triángulo (play icon) para representar
donde van los videos.

● Considera el tamaño de las pantallas donde vas a ejecutar tu aplicación y así mismo haz un diseño para cada
uno. Se debe tener en consideración los dispositivos, la orientación de las pantallas y el contexto de uso para
ubicar qué recursos deben ir.
Para el siguiente ejemplo utilizaremos Draw.io para la
realización de los wireframes.

Seleccionamos la opción de Device para guardarla en el

equipo de trabajo.

Incluir los enlaces de cada aplicativo.

Seleccionamos para esta ocasión Create New Diagram, si ya tienes un diagrama trabajado anteriormente
seleccione Open Existing Diagram.
En la ventana de selección del tipo de diagrama seleccionamos los siguientes:
Guardamos el archivo fuente de nuestro diagrama en la ruta o ubicación de preferencia.
Para finalizar tendremos en la parte central las figuras que conformarán nuestro wireframe y en el menú de la
parte izquierda tendremos las figuras disponibles en pestañas de categorías y en el menú de la parte derecha
tendremos las propiedades de las figuras que tengamos seleccionada o en la que estemos trabajando.
Para la página principal o index realizaremos la siguiente propuesta.

Index
Para la página de usuarios realizaremos la siguiente propuesta.

Usuarios:
Para la página productos realizaremos la siguiente propuesta.

Productos:
La estructura básica para dar comienzo es la siguiente:
Vamos agregar el CDN de Bootstrap (CSS y Bundle), además agregamos dos etiquetas <header> y
<section>para definir la cabecera y el cuerpo, las dos principales secciones a usar.
Siguiendo el diseño, ahora vamos a determinar dentro de la cabecera el espacio para el logo y nombre del website
y el menú superior.
Siguiendo el diseño, ahora vamos a determinar dentro de la cabecera el espacio para el logo y nombre del website
y el menú superior.

Propiedad Descripción

d-flex Muestra los elementos hijos con un display flex proporcionando a los elementos flexibilidad para modificar
sus dimensiones y ocupar los espacios libres.

flex-wrap Muestra los elementos hijos en varias filas si dichos elementos ocupan el ancho disponible posicionando los
siguientes en una nueva fila.

justify-content-center Alinea centralmente los elementos del contenedor de forma horizontal.

py Define un margen interno del elemento en la parte superior e inferior.

mb Define el margen exterior del elemento en la parte inferior.

mb-md

me-md Define el margen al final del elemento para soporte RTL.

border-bottom Borde inferior del elemento.

align-items-center Alinea centralmente los elementos del contenedor de forma verticalmente.

nav Valores por defecto definidos para un contenedor de Navegación.

nav-pills Valores por defecto definidos para un contenedor de Navegación.

nav-item Valores por defecto definidos para un elemento dentro del contenedor de Navegación.

nav-link Valores por defecto definidos para un elemento a o hipervínculo.

Siguiendo el diseño, ahora vamos a determinar dentro de la sección las filas que contendrá nuestra información:
Propiedad Descripción

row Define una nueva fila para el contenedor.

col Define una columna, cuando no se especifica la cantidad de columnas se obtiene la

cantidad de columnas disponibles.

text-center Centra el texto de forma vertical.

text-justify En Bootstrap 5 no incluye esta clase. se puede crear usando text-align: justify;

btn Valores por defecto definidos para un botón.

btn-primary Establece el estilo del botón.

rounded-circle Establece una forma de círculo.

Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:
Seguimos con nuestro diseño de usuarios:

Creamos un nuevo archivo HTML llamado usuarios.html y

el formulario que nos servirá para crear o editar los
usuarios llamado form_usuarios.html.
Implementamos la estructura básica usada anteriormente y agregamos el CDN de Bootstrap.
Siguiendo el diseño, ahora vamos a determinar dentro de la cabecera el espacio para el logo y nombre del website
y el menú superior.
Siguiendo el diseño, ahora vamos a determinar dentro de la sección las filas que contendrá nuestra Administración
de usuarios:
Propiedad Descripción

fw-bold Establece el estilo de la fuente en negrita.

w-auto Establece el ancho en automático.

table Valores por defecto definidos para una tabla.

table-striped Establece el estilo zebra a las filas de la tabla.

table-bordered Define todos los bordes de los lados de una tabla.

table–primary Define el color de la tabla.

form-check Valores por defecto definidos para un checkbox.

form-switch Establece el estilo del checkbox y representa un interruptor.

form-check-input Valores por defecto definidos para un checkbox.

Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:
A Continuación implementamos la estructura básica usada anteriormente y agregamos el CDN de Bootstrap a
nuestro form_usuarios.html.
Siguiendo el diseño, ahora vamos a determinar dentro de la cabecera el espacio para el logo y nombre del website
y el menú superior.
Siguiendo el diseño, ahora vamos a determinar dentro de la sección las filas que contendrá nuestro Formulario de
usuarios:
Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:
Seguimos con nuestro diseño de productos:

Creamos un nuevo archivo HTML llamado productos.html y

el formulario que nos servirá para crear o editar los
usuarios llamado form_productos.html.
Implementamos la estructura básica usada anteriormente y agregamos el CDN de Bootstrap.
Siguiendo el diseño, ahora vamos a determinar dentro de la cabecera el espacio para el logo y nombre del website
y el menú superior.
Siguiendo el diseño, ahora vamos a determinar dentro de la sección las filas que contendrá nuestra Administración
de productos:
Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:
A Continuación implementamos la estructura básica usada anteriormente y agregamos el CDN de Bootstrap a
nuestro form_productos.html.
Siguiendo el diseño, ahora vamos a determinar dentro de la cabecera el espacio para el logo y nombre del website
y el menú superior.
Siguiendo el diseño, ahora vamos a determinar dentro de la sección las filas que contendrá nuestro Formulario de
productos:
Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:

Etiquetas más comunes de HTML 5. <<Listado de etiquetas en HTML5.pdf>>

Introducción a Bootstrap <<Introduction · Bootstrap v5.1 >>

Como han estudiado a través de los capítulos anteriores, el uso de los microservicios, la independencia del
backend y el frontend, es aquí donde hacemos la magia de poder usar un frontend que se comunicará usando
peticiones HTTP y para esto vamos a trabajar con AJAX.

● Ajax, Asynchronous JavaScript And XML, es quizás, la forma más convencional de realizar peticiones al servidor
de forma asíncrona. Para utilizar Ajax será necesario definir cuatro pasos en nuestro proyecto.

○ Lo primero será crear una instancia de XMLHttpRequest()

○ Una vez con la instancia, definimos a qué dirección y bajo qué método del protocolo HTTP trabajaremos.
En este caso como queremos obtener algo del servidor haremos uso de GET (También es posible emplear
POST).

○ El tercer paso será definir una función para el atributo onreadystatechange. Esta función nos permitirá
conocer el estatus de la petición y si la respuesta por parte del servidor fue exitosa o no.

○ El último paso será proceder con la petición utilizando el método send.

Algo importante a mencionar es que la respuesta se nos da mediante un string, es por ello que debemos
especificar que el tipo de respuesta será un Json.

Basado en: https://www.linkedin.com/pulse/crud-ajax-rest-whats-deal-antonio-nesic/

El primer paso será la creación de una carpeta llamada js en nuestro proyecto las cual contendrá todos los scripts
con extensión .js que usaremos para nuestro ejemplo.

Como segundo paso crearemos el archivo request.js el cual contendrá una función que nos permita enviar una
petición y reutilizarla cuantas veces sea requerido, además de tener la url base de nuestra api.
Nuestra función sendRequest nos permitirá trabajar con diferentes Endpoints, con peticiones GET, POST, PUT y
DELETE, también incluiremos la información para las peticiones POST y PUT (La información se proporcionará en
JSON).

Usando como ejemplo la Administración de usuarios al cual le agregaremos el código javascript para la
Visualización, Creación, Edición y Eliminación de usuarios.

El HTML de los siguientes archivos.

Agregaremos las siguientes instrucciones a usuarios.html:

En el atributo onclick del elemento button definiremos lo siguiente:

window.location=’’, nos permitirá redireccionar nuestra página a la url especificada como ‘form_usuarios.html’.
Incluimos los scripts request y usuarios, además de incluir un script
para definir qué función usará cuando la página se cargue por
completo. La función loadData() la definiremos a continuación y será la
encargada de traer todos los registros de los usuarios y visualizarlos en
nuestra tabla.

EL código JS de nuestro script usuarios.js:

En la función loadData haremos uso de la función sendRequest() creada anteriormente en request.js donde le
proporcionamos el endpoint, el método y la información para esta petición será un string vacío.

A continuación obtenemos nuestro elemento table desde el HTML haciendo uso de document.getElementById() y
eliminamos los elementos hijos con la propiedad innerHTML.
En la función onload obtenemos la respuesta de nuestra
petición que nos llegará como un array de objetos
desde nuestra API y posteriormente la recorremos
mediante la función forEach de los arrays, para cada
elemento de nuestro array agregaremos una nueva fila
a la tabla con la información del usuario que está
representado como un objeto, para acceder a las
propiedades hacemos uso del punto (.) seguido del
nombre de la propiedad como en nuestro ejemplo el
objeto está representado por el element del ciclo
forEach sería element.propiedad.
Para los botones de acción de Editar y Eliminar definiremos los valores a su atributo onclick:

● Para el atributo onclick de Editar especificamos a donde lo redireccionaremos además de proporcionarle un

parámetro id del usuario a la URL, el cual nos servirá para recuperar los datos a la hora de editar nuestro
usuario.

● Para el atributo onclick de Eliminar especificamos la función deleteUser() que recibe un parámetro idUsuario y
la definiremos a continuación.

A continuación implementaremos la función deleteUser() que recibirá un parámetro idUsuario que nos servirá para
concatenarlo al endpoint. Una vez finalizada la petición llamaremos nuevamente a la función loadData() para
cargar los datos en nuestra tabla.
Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:

Si ocurre un error al cargar los datos nos mostrar un resultado similar al siguiente:
Agregaremos las siguientes instrucciones a form_usuarios.html:

En el atributo onclick del elemento button definiremos lo siguiente:

Incluimos los scripts request y usuarios, además de incluir un script para definir qué función usará cuando la
página se cargue por completo. La función loadUser() la definiremos a continuación y será la encargada de traer el
usuario y visualizarlos en los campos del formulario si existe el parámetro id en la URL.

Para obtener el parámetro id proporcionado por la URL hacemos uso del objeto URLSearchParams() y le
proporcionamos los parámetros de la URL actual mediante window.location.search y posteriormente validamos la
existencia del id mediante la función get() que recibe el nombre del parámetro que buscamos.
El código JS de nuestro script usuarios.js:
En la función loadUser haremos uso de la función sendRequest() creada anteriormente en request.js donde le
proporcionamos el endpoint, el método y la información para esta petición será un string vacío.

A continuación obtenemos nuestros elementos del formulario desde el HTML haciendo uso de
document.getElementById().
A continuación implementaremos las funciones onload y onerror para obtener los resultados. En la función onerror
definimos una alerta que mostrará un mensaje indicando que hubo un error durante la petición.
En la función onload obtenemos la respuesta de nuestra petición que nos llegará como un objeto desde nuestra
API y posteriormente accederemos a las propiedades haciendo el uso del punto (.) seguido del nombre de la
propiedad como en nuestro ejemplo el objeto está representado por la variable data sería data.propiedad.

Del objeto recibido en la petición le asignaremos a nuestros elementos del formulario el valor correspondiente a
cada uno de ellos.
A continuación implementaremos la función saveUser().

Esta función la implementaremos para editar(Solo si existe el valor id del elemento user-id) y registrar usuarios.
Una vez obtenido los valores de cada elemento del formulario pasaremos a crear un objeto con las propiedades y
sus respectivos valores que será proporcionado a la petición. Una vez finalizada la petición redireccionamos a
usuarios.html.
Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:
Continuamos con el ejemplo de Administración de productos al cual le agregaremos el código javascript para la
Visualización, Creación, Edición y Eliminación de productos. El siguiente proceso es muy similar al ejemplo anterior.

Agregaremos las siguientes instrucciones a productos.html:

En el atributo onclick del elemento button definiremos lo siguiente:

window.location=’’, nos permitirá redireccionar nuestra página a la url especificada como ‘form_productos.html’.

Incluimos los scripts request y usuarios, además de incluir un script para definir qué función usará cuando la
página se cargue por completo. La función loadData() la definiremos a continuación y será la encargada de traer
todos los registros de los productos y visualizarlos en nuestra tabla.

Agregaremos las siguientes instrucciones a form_productos.html:

En el atributo onclick del elemento button definiremos lo siguiente:

Incluimos los scripts request y productos, además de incluir un script para definir qué función usará cuando la
página se cargue por completo. La función loadProducto() la definiremos a continuación y será la encargada de
traer el producto y visualizarlos en los campos del formulario si existe el parámetro id en la URL.

Para obtener el parámetro id proporcionado por la URL hacemos uso del objeto URLSearchParams() y le
proporcionamos los parámetros de la URL actual mediante window.location.search y posteriormente validamos la
existencia del id mediante la función get() que recibe el nombre del parámetro que buscamos.
EL código JS de nuestro script productos.js:

En la función loadData() haremos uso de la función sendRequest() creada anteriormente en request.js donde le
proporcionamos el endpoint, el método y la información para esta petición será un string vacío.

● Obtenemos nuestro elemento table desde el HTML haciendo uso de document.getElementById() y eliminamos
los elementos hijos con la propiedad innerHTML.

● Implementaremos las funciones onload y onerror para obtener los resultados. En la función onerror definimos
una fila de nuestra tabla que mostrará un mensaje indicando que hubo un error durante la petición.

● En la función onload obtenemos la respuesta de nuestra petición que nos llegará como un array de objetos
desde nuestra API y posteriormente la recorremos mediante la función forEach de los arrays, para cada
elemento de nuestro array agregaremos una nueva fila a la tabla con la información del producto que está
representado como un objeto, para acceder a las propiedades hacemos uso del punto (.) seguido del nombre
de la propiedad como en nuestro ejemplo el objeto está representado por el element del ciclo forEach sería
element.propiedad.
Para los botones de acción de Editar y Eliminar definiremos los valores a su atributo onclick:

● Para el atributo onclick de Editar especificamos a donde lo redireccionaremos además de proporcionarle un

parámetro id del usuario a la URL, el cual nos servirá para recuperar los datos a la hora de editar nuestro
producto.

● Para el atributo onclick de Eliminar especificamos la función deleteProducto() que recibe un parámetro
idProducto y la definiremos a continuación.
A continuación implementaremos la función deleteProducto() que recibirá un parámetro idProducto que nos servirá
para concatenarlo al endpoint. Una vez finalizada la petición llamaremos nuevamente a la función loadData() para
cargar los datos en nuestra tabla.

En la función loadProducto() haremos uso de la función sendRequest() creada anteriormente en request.js donde
le proporcionamos el endpoint, el método y la información para esta petición será un string vacío.

● Obtenemos nuestros elementos del formulario desde el HTML haciendo uso de document.getElementById().

● Implementaremos las funciones onload y onerror para obtener los resultados. En la función onerror definimos
una alerta que mostrará un mensaje indicando que hubo un error durante la petición.

● En la función onload obtenemos la respuesta de nuestra petición que nos llegará como un objeto desde
nuestra API y posteriormente accederemos a las propiedades haciendo el uso del punto (.) seguido del nombre
de la propiedad como en nuestro ejemplo el objeto está representado por la variable data sería
data.propiedad.
Del objeto recibido en la petición le asignaremos a nuestros elementos del formulario el valor correspondiente a
cada uno de ellos.
A continuación implementaremos la función saveProducto().

Esta función la implementaremos para editar(Solo si existe el valor id del elemento product-id) y registrar
productos. Una vez obtenido los valores de cada elemento del formulario pasaremos a crear un objeto con las
propiedades y sus respectivos valores que será proporcionado a la petición. Una vez finalizada la petición
redireccionamos a productos.html.
Una vez terminado los pasos anteriores tendremos un resultado similar al siguiente:

Si ocurre un error al cargar los datos nos mostrar un resultado similar al siguiente:
Código fuente del ejemplo práctico.

● Introduction · Bootstrap v5.1

● Trabajando con objetos - JavaScript

● https://www.json.org/json-es.html

● https://es.wikipedia.org/wiki/Gson