Integrando Next.js e Material UI

Um mapa das Igrejas de Olinda

Recentemente surgiu uma sugestão de escrever sobre a integração entre Next.js e Material UI. Após umas outras demandas, escrevi uma pequena crônica sobre os principais passos para fazer essa integração.

Mapa das Igrejas de Olinda

Como sempre, eu precisava de algum contexto para aplicar o que estava aprendendo. Alguns meses atrás eu tive conhecimento do Mapa do Frevo e sua forma de apresentar uma solução para um problema. Como bom Olindense e também entusiasta de frevo, achei impressionante aquilo. Pensei em algumas formas de fazer mais algo para o Frevo daquele ponto de vista, mas não cheguei a nenhuma boa ideia para acrescentar. Foi então que ainda pensando em Olinda cheguei em algo que poderia ter uma visualização semelhante: as Igrejas de Olinda.

A visualização serviria inicialmente para mostrar horários das Missas, algum possível site (ou rede social) e localização das Igrejas. Para um primeiro momento, as Missas poderiam ser assistidas pelo site (ou rede social) e em um momento futuro pós-pandemia poderia ajudar turistas a terem uma experiência completa de não apenas visitar algumas Igrejas, mas assistir uma Missa nelas. Contudo, após uma pesquisa e algumas entrevistas eu tomei conhecimento de alguns lugares que já faziam isso como a hora da missa e o Guia Turístico da Prefeitura de Olinda. Como esse projeto não tem como objetivo um viés total voltado para inovação e sim mais para aprender um pouco da integração de Next.js com o Material UI, eu decidi continuar.

Design do site

Logo de início, a ideia era que a visualização desse pequeno sistema fosse vista primeiro. Então cheguei na frase: conheça horários das Missas, site e localização das Igrejas. Haveria ainda o título e um botão para acessar o mapa. Um primeiro protótipo feito no Figma pode ser visto na Figura 1. Para as cores, a inspiração veio da própria Santa Sé. Como fonte temos: Georgia.

A imagem utilizada para o fundo deveria representar bem as Igrejas. Uma das mais emblemáticas é a Matriz de São Salvador do Mundo, também conhecida como Catedral da Sé. Situada no alto da cidade, tem visões belíssimas ao seu redor e como o nome sugere, é a sé da Arquidiocese de Olinda e Recife. Além de tudo, a imagem ainda se encaixou com algumas ideias de visualização prévias.

Figura 1: O protótipo

Entretanto, na hora de começar a desenvolver, começaram a surgir alguns problemas. A maioria estava relacionada a responsividade dessa página inicial. Inicialmente, eu tinha pensando em já deixar os textos na imagem, sem de fato ser necessário escrever eles em código.

Mas isso foi por água abaixo quando se mudava as dimensões de exibição de possíveis dispositivos. Os textos perdiam a nitidez. Então, os textos passaram a ter que ser escritos no código. Com isso, ficou melhor também manter os padrões de elementos de HTML como <p>, <h1>, <button> e não fixar tamanho para os textos. Isso facilitaria a manutenção da responsividade. Houve também uma atenção especial para a imagem de fundo para dispositivos móveis. Para a visão vertical foi utilizado um outro recorte da imagem.

Contudo, mesmo assim foi impossível manter a ideia de uma barra de aplicativos no topo e/ou hamburger button. O hamburger button se chocaria com a descrição que estava em um local interessante e mesmo modificar a margem direita não seria algo modular de ser feito. Então, onde empregar o Material UI que era o foco do projeto?

Get Luís H. Delgado Santos’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

A solução veio ao olhar mais uma vez para o Mapa do Frevo e ver que ele tinha um viés colaborativo. Somando isso à barra de aplicativo e o botão para acessar o mapa, veio a ideia de colocar essa barra mais embaixo com essas duas funcionalidades.

Integração entre Next.js e Material UI

Para criar um projeto com Next.js você poder ver esse outro artigo AQUI. Não focarei no restante da escrita para o resto da página, bem como para o seu respectivo CSS. Indo para o Material UI, para instalá-lo basta executar o seguinte comando:

npm install @material-ui/core

Para ver se a instalação havia funcionado, decidi utilizar a primeira barra de aplicativos de exemplo do Material UI. Você pode vê-la AQUI. Decidi esse caminho ao invés de testes mais formais porque achei suficiente para o projeto. Após a barra ser visualizada corretamente logo inicialmente, seria o momento de fazer uma de acordo com o que foi pensado anteriormente. Haviam, basicamente, dois caminhos a focar: tema e botão.

Tema

Como o Material UI utiliza a coloração baseada em tema, para modificar as cores que queria, teria que criar um novo tema. O novo tema criado foi simples, voltado apenas para resolver as cores mencionadas anteriormente. Utilizei de dois artifícios: createMuiTheme e ThemeProvider.

createMuiTheme

O createMuiTheme será o tema em si. Defini apenas duas cores na paleta, a primária e a secundária.

const churchTheme = createMuiTheme({
 palette: {
  primary: {
   main: '#5A2E0B',
  },
  secondary: {
   main: '#D7D7D7',
  }
 },
});

ThemeProvider

O ThemeProvider receberá o tema e ele poderá servir para todos os nós dentro desse bloco.

<ThemeProvider theme={churchTheme}>
 <main className={styles.main}>
  {/* Parte de código já feita */}
  <div className={styles.map}>
   <AppBar color="primary" position="static">
    <Toolbar>
     {/* Os botões ficarão aqui */}
    </Toolbar>
   </AppBar>
  </div>
 </main>
</ThemeProvider>

Botão

Uma vez resolvido o problema do tema, foi a vez do botão. Aqui basicamente, haviam duas ações a serem feitas: estilo e clique. Para o estilo, selecionamos a coloração secundária e estilizações mais específica foram feitas no arquivo CSS da página. O trecho do arquivo .js, com o que foi mencionado, está logo a seguir.

<Button className={styles.button} color="secondary" onClick={addChurch}>Adicionar Igreja</Button>
<Button className={styles.button} color="secondary" onClick={accessMap}>Acessar o Mapa</Button>

Parte do arquivo CSS pode ser visto a seguir. O main e map são exibidos porque o <Button> se encontra dentro desses blocos.

.main {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.map {
 position: absolute;
 width: 100%;
 top: 80%;
}
.button {
 flex-grow: 2;
}

Para o clique, definimos as funções a serem chamadas por cada um da forma mais simples possível dentro da própria function Home().

const addChurch = () => {
 Router.push('https://forms.gle/49MYmgjFsumwah3bA')
}
const accessMap = () => {
 Router.push('https://www.google.com/maps/d/edit?mid=1FnwmzldJKxOTJPvf-EfdHozkaERgIiVK&usp=sharing')
}

Resultados

Além dessa página inicial que conversamos aqui, temos, obviamente, o mapa e um formulário para que pessoas possam adicionar Igrejas e suas respectivas informações. Como no Mapa do Frevo, o mapa também foi feito aqui com o My Maps do Google. O formulário que dá o tom de colaborativo ao projeto, visto que é através dele que as pessoas podem adicionar Igrejas, foi feito através do Google Forms. Para acessar o resultado basta clicar no link a seguir.

Mapa das Igrejas de Olinda

Para conferir o código completo, o projeto está disponível no GitHub.

luisdelgado/Mapa-das-Igrejas-de-Olinda

Alguns links

Antonio Aureliano. O Mapa do Frevo https://mapadofrevo.com/

Luís Delgado. (15 outubro 2020). “Oi Mundo” com Next.js https://luisdelgados.medium.com/oi-mundo-com-next-js-f9090d4e189d

a hora da missa http://www.ahoradamissa.com/olinda/p_olinda.html

Guia Turístico da Prefeitura de Olinda http://www.olinda.pe.gov.br/guia-turistico/igrejas/#.VwJkfmErLBs

A Santa Sé A SANTA SÉ

Material-UI https://material-ui.com/pt/

Barra de Aplicativos https://material-ui.com/pt/components/app-bar/

Temas https://material-ui.com/pt/customization/theming/