Material UI

Diseña Aplicaciones Web con Material UI

Ana Beatriz González Sánchez

• 8 min read
Diseña Aplicaciones Web con Material UI

Una de las habilidades más importantes de un programador es adaptarse bajo cualquier tecnología en el menor tiempo posible, por lo que siempre estamos a la espera de probar nuevas herramientas y lenguajes. En esta ocasión analizaremos la plataforma Material UI.


Material UI es una biblioteca de componentes de interfaz de usuario de React que implementa las directrices de diseño de Material Design, desarrollado por Google. Además nos proporciona una colección de componentes reutilizables, como botones, barras de navegación, etc., que siguen los principios de diseño de Material Design.

Dicha biblioteca es de código abierto, lo que significa que podemos contribuir con mejoras y nuevas funcionalidades de manera gratuita. Por otro lado, cuenta con una comunidad activa que ofrece amplia documentación y ejemplos para ayudarte a comenzar y utilizarla de manera efectiva.

Ahora comienza la magia para hacer el diseño de una ecommerce con Material UI, con los siguientes pasos:

  • Crea un proyecto de React con create-react-app.
  • Instala Material UI en tu proyecto utilizando npm o yarn, ejecutando el siguiente comando en la terminal:

npm install @material-ui/core @material-ui/icons

En la raíz del proyecto creamos un archivo product-data.js, que contiene un arreglo con los datos de cada producto.

  • En la carpeta src, creamos una carpeta components, compuesta por los componentes que aplicaremos a nuestra aplicación.
  • Tendremos el primer componente Appbar en la carpeta components, bajo el nombre Navbar. Más adelante te explicaré el proceso para cambiar los colores predefinidos por Material UI.


Seguimos con el IconButton de menú, reemplazado por el logo de nuestra empresa. Luego el botón LOGIN, cambiamos el texto y aplicamos variant='outlined', así le damos un toque personal y exclusivo. También agregamos el componente ShoppingCart que puede utilizarse para mostrar elementos individuales en el carrito de compras, como productos y cantidades.

  • En la carpeta components, creamos un archivo product.js, para pegar el código del componente Card de Material UI.


Una vez que pegamos el código lo primero que debemos hacer es cambiar el nombre del componente por el nombre del archivo Product. En la imagen a continuación, presento del lado izquierdo el componente disponible en Material UI, mientras que el de la derecha es el adecuado para nuestra ecommerce. Para lograrlo, debemos seguir estos pasos:

En el encabezado de la tarjeta reemplazamos el componente Avatar por el título del producto.

1) El elemento IconButton es reemplazado por el parámetro de precio. Para ello, utilizamos una biblioteca de Javascript accounting, una herramienta que facilita las operaciones y el formateo de números en aplicaciones web de manera más sencilla. Es necesario instalarlo con este comando desde nuestra consola.

npm i accounting

2) Ahora eliminamos el ícono FavoriteIcon para agregar un botón con el ícono de carrito de compras.



3) Para mostrar las estrellas de cada producto creamos un array. La función .fill() se utiliza para llenar todos los elementos del array con el valor rating, que tenemos en el archivo product-data.js con los datos de cada producto. Seguidamente, la función .map recorre cada elemento del array original hasta llegar a la cantidad establecida, devolviendo un nuevo array con los resultados de aplicar dicha función.

  • Enseguida, debemos crear un archivo Products.js que tendrá como función envolver el componente Product.js para llamar el arreglo product con la información de cada producto y aplicar estilos de esta manera.


Algunas tendencias de Material UI con React son:

  • Usar el tema oscuro: es una opción que nos permite cambiar el color de fondo y el contraste de los elementos de la UI para crear una experiencia más cómoda y agradable para los usuarios, especialmente en entornos con poca luz.

Para este diseño, implementé el modo oscuro usando el componente createTheme, el cual he creado un archivo solo para esa función. Por otro lado, si prefieres el modo claro, el comando es light como te muestro en la siguiente imagen:

  • Añadir animaciones y transiciones: son efectos visuales que dan vida y dinamismo a la UI, mejorando la interacción y la retroalimentación con los usuarios. Con Material UI, puedes usar componentes como Collapse, Fade, Grow, Slide y Zoom para crear animaciones y transiciones sencillas y elegantes.
  • Definir la paleta de colores de la aplicación: colormind.io podría ser una opción porque es una herramienta en línea que ayuda a generar esquemas de colores armoniosos y atractivos. Para utilizarla, solo hacemos clic en el botón Generate y así ocurrirá la magia.

Para personalizar los componentes, es necesario aplicar createTheme porque podemos especificar los colores, fuentes, tamaños, espaciados y otros estilos de diseño que se utilizarán en todos los componentes de la aplicación. También se pueden agregar estilos globales, como las clases CSS generadas automáticamente y los estilos de enrutamiento, a través de createTheme.

Inmediatamente, he creado un archivo tema.js para configurar los colores primary y secondary que darán vida a nuestra ecommerce, como te mostré anteriormente. En este instante, desde el archivo App.js debemos llamar esta función, envolviendo a los componentes creados como Navbar y CheckoutPage para modificar los nuevos colores.

  • Utilizar los iconos como elementos gráficos que representan acciones, objetos, conceptos o ideas de forma simple y clara. Con Material UI tenemos una colección de más de mil iconos que siguen las directrices de Material Design y que podemos usar en botones, menús, listas, barras de navegación y otros componentes.

En este componente Card, inserté estrellas debajo de la imagen del producto del lado izquierdo, que es la valoración de parte del usuario y del lado derecho es un botón para eliminar el producto del carrito.

  • Implementar el diseño responsivo es una técnica que permite adaptar la UI al tamaño y la orientación de la pantalla del dispositivo del usuario. En este componente, utilicé el sistema de cuadrícula Grid tres veces, además tiene como principio de fraccionar la pantalla en doce columnas.


Por ejemplo, Material UI tiene puntos de interrupción para cada cuadrícula: xs, sm, md, lg y xl, establecidos en una pantalla de 1200 píxeles. Por lo tanto, aceptará solo números enteros.

De esa forma, la primera cuadrícula ocupará todo el espacio con xs={12}, mientras que la segunda tendrá otras condiciones. El componente FormRow tomará el espacio de nueve columnas, dejando tres columnas para la tercera cuadrícula, que indica la cantidad de productos, Total y el botón CHECKOUT.

FormRow se puede utilizar para crear filas de elementos de formulario, como campos de entrada, casillas de verificación, botones de radio, etc. Además, proporciona una estructura uniforme y coherente para los elementos del formulario, lo que facilita la lectura y la interacción del usuario.



Este componente se puede utilizar con otros componentes de Material-UI, como FormLabel, FormControl, TextField, Checkbox, Radio, etc., para diseñar y construir formularios con una apariencia y funcionalidad consistentes.

  • Un componente de notificación que informe al usuario sobre el estado de su pedido, como el envío, la entrega, etc. Puedes usar el componente Snackbar de Material UI para crear una notificación temporal que aparezca en la parte inferior de la pantalla.
  • Tabla: Un componente que muestra datos en filas y columnas, con funciones de ordenación, paginación y selección. Se puede usar para mostrar listas, informes, estadísticas, etc.

Cinco razones por las que podrías considerar comprar las plantillas de Material UI

1. Diseño profesional: Las plantillas de Material UI están diseñadas por expertos en UI/UX, lo que significa que ofrecen un aspecto visualmente atractivo y moderno. Estas plantillas siguen las directrices de diseño de Material Design, que es una guía de diseño establecida por Google, lo que garantiza una experiencia de usuario coherente y de alta calidad.

2. Ahorro de tiempo: Comprar una plantilla te permitirá ahorrar mucho tiempo en el desarrollo de tu proyecto. Estas plantillas suelen venir con componentes predefinidos y estilos preestablecidos, lo que te permite simplemente personalizarlos para adaptarlos a tus necesidades. Esto acelerará el proceso de desarrollo y te permitirá concentrarte en otros aspectos importantes de tu proyecto.

3. Componentes y características adicionales: Las plantillas de Material UI suelen incluir una amplia gama de componentes listos para usar, como botones, barras de navegación, formularios, tablas, gráficos, etc. Además, también pueden incluir características adicionales como integración con APIs populares, soporte para temas oscuros o claros, animaciones y transiciones suaves, entre otros.

4. Compatibilidad y soporte: Las plantillas de Material UI están construidas sobre el framework de React o Angular, lo que las hace altamente compatibles con estos frameworks y facilita su integración. Además, suelen contar con soporte técnico y actualizaciones frecuentes, lo que garantiza que tu plantilla esté siempre actualizada y sea compatible con las últimas versiones de los frameworks y las bibliotecas que utilices.

5. Valor por el precio: Aunque las plantillas de Material UI tienen un costo, suelen ofrecer un gran valor por el precio. El tiempo que ahorras en desarrollo y diseño, así como las características adicionales y la apariencia profesional que obtienes, hacen que el costo de estas plantillas sea una inversión valiosa.

Material UI, es altamente valorado y utilizado en la comunidad de React. Ofrece ventajas y desventajas en términos de personalización, rendimiento, consistencia visual y reutilización de estilos.

Si buscas una biblioteca de componentes con estilos predefinidos y consistentes, Material UI puede ser la mejor opción. Por otro lado, si necesitas una mayor flexibilidad para personalizar los estilos de tus componentes y utilizar CSS en JS, Styled Components puede ser la elección adecuada.

Recuerda siempre evaluar las necesidades específicas de tu proyecto y tomar en cuenta las ventajas y desventajas de esta biblioteca antes de tomar una decisión. ¡Explora, experimenta y elige la combinación que mejor se adapte a tus requerimientos y objetivos!

Referencias

💡
Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.