Material UI

Crie aplicativos da Web com Material UI

Ana Beatriz González Sánchez

May 8, 2024 • 8 min read

Uma das habilidades mais importantes de um programador é se adaptar a qualquer tecnologia no menor tempo possível, por isso estamos sempre esperando para experimentar novas ferramentas e linguagens. Nesta ocasião analisaremos a plataforma Material UI.

Material UI é uma biblioteca de componentes React UI que implementa as diretrizes de design do Material Design, desenvolvida pelo Google. Ele também nos fornece uma coleção de componentes reutilizáveis, como botões, barras de navegação, etc., que seguem os princípios de design do Material Design.

Esta biblioteca é de código aberto, o que significa que podemos contribuir com melhorias e novos recursos gratuitamente. Por outro lado, possui uma comunidade ativa que oferece ampla documentação e exemplos para ajudá-lo/a a começar e usá-lo de forma eficaz.

Agora começa a mágica de desenhar um ecommerce com Material UI, com os seguintes passos:

Crie um projeto React com create-react-app.
Instale Material UI em seu projeto usando npm ou yarn, executando o seguinte comando no terminal:

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

Na raiz do projeto criamos um arquivo product-data.js, que contém um array com os dados de cada produto.

Na pasta src, criamos outra chamada components, composto pelos componentes que aplicaremos em nossa aplicação.
Teremos o primeiro componente Appbar na pasta components, chamada Navbar. Posteriormente explicarei o processo de alteração das cores predefinidas pelo Material UI.

O próximo passo é o botão IconButton do menu, substituído pelo logotipo da nossa empresa. Então o botão LOGIN, mudamos o texto e aplicamos variant='outlined', assim damos um toque pessoal e exclusivo. Também adicionamos o componente ShoppingCart que pode ser usado para exibir itens individuais no carrinho de compras, como produtos e quantidades.

Na pasta components, criamos um arquivo product.js, para colar o código do componente Card do Material UI.

Depois de colar o código, a primeira coisa que devemos fazer é mudar o nome do componente para o nome do arquivo Product. Na imagem abaixo apresento do lado esquerdo o componente disponível no Material UI, enquanto o da direita é o adequado para o nosso ecommerce. Para conseguir isso, devemos seguir estas etapas:

No cabeçalho do cartão substituímos o componente Avatar pelo título do produto.

1) O elemento IconButton é substituído pelo parâmetro preço. Para fazer isso, usamos uma biblioteca Javascript accounting, uma ferramenta que facilita as operações e a formatação de números em aplicações web. É necessário instalá-lo com este comando do nosso console.

npm i accounting

2) Agora deletamos o ícone FavoriteIcon para adicionar um botão com o ícone do carrinho de compras.

3) Para mostrar as estrelas de cada produto criamos um array. A função .fill() é usado para preencher todos os elementos do array com o valor rating, que temos no arquivo product-data.js com os dados de cada produto. Então a função .map percorre cada elemento do array original até atingir o valor estabelecido, retornando um novo array com os resultados da aplicação da referida função.

A seguir, devemos criar um arquivo Products.js que terá a função de envolver o componente Product.js para chamar o array product com as informações de cada produto e aplique estilos desta forma.

Algumas tendências de Material UI com React são:

Utilizar o Dark Mode: É uma opção que nos permite alterar a cor de fundo e o contraste dos elementos da UI para criar uma experiência mais confortável e agradável para os usuários, principalmente em ambientes com pouca luz.

Para este design, implementei o modo escuro usando o componente createTheme, que criei um arquivo apenas para essa função. Por outro lado, se você preferir o modo claro, o comando é light como mostro na imagem a seguir:

Adicione animações e transições: são efeitos visuais que dão vida e dinamismo à UI, melhorando a interação e o feedback com os usuários. Com o Material UI, você pode usar componentes como Collapse, Fade, Grow, Slide e Zoom para criar animações e transições simples e elegantes.
Defina a paleta de cores do aplicativo: colormind.io pode ser uma opção porque é uma ferramenta online que ajuda a gerar esquemas de cores harmoniosos e atraentes. Para utilizá-lo, basta clicar no botão Generate e assim a mágica acontecerá.

Para personalizar os componentes, você precisa aplicar createTheme porque podemos especificar as cores, fontes, tamanhos, espaçamentos e outros estilos de layout a serem usados em todos os componentes da aplicação. Estilos globais, como classes CSS geradas automaticamente e estilos de roteamento, também podem ser adicionados via createTheme.

Imediatamente, criei um arquivo tema.js para definir as cores primary e secondary isso vai dar vida ao nosso ecommerce, como mostrei anteriormente. Neste momento, no arquivo App.js devemos chamar esta função, envolvendo os componentes criados como Navbar e CheckoutPage para mudar as novas cores.

Utilize ícones como elementos gráficos que representam ações, objetos, conceitos ou ideias de forma simples e clara. Com o Material UI temos um acervo de mais de mil ícones que seguem as diretrizes do Material Design e que podemos utilizar em botões, menus, listas, barras de navegação e outros componentes.

Neste componente Card, insirai estrelas abaixo da imagem do produto do lado esquerdo, que é a avaliação do usuário, e do lado direito um botão para retirar o produto do carrinho.

Implementar design responsivo é uma técnica que permite adaptar a UI ao tamanho e orientação da tela do dispositivo do usuário. Neste componente, usei o sistema de grade Grid três vezes, e seu princípio é dividir a tela em doze colunas.

Por exemplo, o Material UI possui pontos de interrupção para cada grade: xs, sm, md, lg e xl, definidos em uma tela de 1200 pixels. Portanto, aceitará apenas números inteiros.

Dessa forma, a primeira grade ocupará todo o espaço com xs={12}, enquanto a segunda terá outras condições. O componente FormRow ocupará o espaço de nove colunas, restando três colunas para a terceira grade, que indica a quantidade de produtos, Total e o botão CHECKOUT.

FormRow pode ser usado para criar linhas de elementos de formulário, como campos de entrada, caixas de seleção, botões de opção, etc. Além disso, fornece uma estrutura uniforme e consistente para os elementos do formulário, facilitando a leitura e a interação do usuário.

Este componente pode ser usado com outros componentes Material-UI, como FormLabel, FormControl, TextField, Checkbox, Radio, etc., para projetar e construir formulários com aparência e funcionalidade consistentes.

Um componente de notificação que informa o usuário sobre o status do seu pedido, como envio, entrega, etc. Você pode usar o componente Snackbar do Material UI para criar uma notificação temporária que aparece na parte inferior da tela.
Tabela: Um componente que exibe dados em linhas e colunas, com funções de classificação, paginação e seleção. Pode ser usado para exibir listas, relatórios, estatísticas, etc.

Cinco razões pelas quais você pode considerar comprar modelos de Material UI

1. Design profissional: os modelos de UI do Material são projetados por especialistas em UI/UX, o que significa que oferecem uma aparência visualmente atraente e moderna. Esses modelos seguem as diretrizes de design do Material Design, que é um guia de design estabelecido pelo Google, garantindo uma experiência de usuário consistente e de alta qualidade.

2. Economia de tempo: Comprar um template permitirá que você economize muito tempo no desenvolvimento do seu projeto. Esses modelos geralmente vêm com componentes e estilos predefinidos, permitindo que você simplesmente os personalize para atender às suas necessidades. Isso irá acelerar o processo de desenvolvimento e permitir que você se concentre em outros aspectos importantes do seu projeto.

3. Componentes e recursos adicionais: os modelos de UI de material geralmente incluem uma ampla variedade de componentes prontos para uso, como botões, barras de navegação, formulários, tabelas, gráficos, etc. Além disso, também podem incluir recursos adicionais, como integração com APIs populares, suporte para temas claros ou escuros, animações e transições suaves, entre outros.

4. Compatibilidade e suporte: os modelos Material UI são construídos na estrutura React ou Angular, o que os torna altamente compatíveis com essas estruturas e facilita sua integração. Além disso, eles costumam contar com suporte técnico e atualizações frequentes, garantindo que seu template esteja sempre atualizado e compatível com as versões mais recentes dos frameworks e bibliotecas que você utiliza.

5. Valor pelo preço: embora os modelos de Material UI tenham um custo, eles tendem a oferecer um grande valor pelo preço. O tempo que você economiza em desenvolvimento e design, bem como os recursos adicionais e a aparência profissional que você obtém, fazem com que o custo desses modelos seja um investimento que vale a pena.

Material UI é altamente avaliado e usado na comunidade React. Oferece compensações em termos de personalização, desempenho, consistência visual e reutilização de estilo.

Se você está procurando uma biblioteca de componentes com estilos predefinidos e consistentes, o Material UI pode ser a melhor opção. Por outro lado, se você precisa de mais flexibilidade para personalizar os estilos de seus componentes e usar CSS em JS, Styled Components pode ser a escolha certa.

Lembre-se sempre de avaliar as necessidades específicas do seu projeto e levar em consideração as vantagens e desvantagens desta biblioteca antes de tomar uma decisão. Explore, experimente e escolha a combinação que melhor se adapta às suas necessidades e objetivos!

Referências

💡

As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.