O Liferay é uma ferramenta que traz nativamente várias funcionalidades prontas. Algumas delas são gerenciamento de conteúdo, gerenciamento de usuário, sistema de categorização, entre outras.

Se você é desenvolvedor Liferay há um tempo, provavelmente já implementou algum código backend para interagir com essas funcionalidades a partir de APIs do código fonte, como JournalArticleLocalService ou UserLocalService.

Porém, nos últimos anos o foco tem sido cada vez mais remover a responsabilidade do backend, seja por meio de ferramentas no-code/low-code ou por meio de APIs Rest que facilitem o acesso aos recursos da plataforma.

Hoje veremos como utilizar essas APIs Rest nativas para exibir conteúdos web dentro do nosso React Widget, criado neste post.

APIs do Headless

Nas versões mais antigas do Liferay, era comum utilizarmos as APIs Rest geradas pelos serviços remotos dos Service Builders quando precisávamos implementar uma lógica mais complexa no front.

Essas APIs são disponibilizadas no endpoint /api/jsonws e costumam ser um tanto quanto difíceis de usar. Geralmente possuem muitos parâmetros de entrada e dão bastantes erros.

Foi aí que as APIs Headless surgiram. São endpoints que disponibilizam acessos a recursos do portal, porém, por seguir os padrões Rest, a integração acontece de maneira mais simples e direta.

Você encontra todos esses endpoints pelo path /o/api, junto de uma documentação dos campos que devem ser enviados e do que esperar como resposta. Note que você precisa estar logado para ter acesso a esses endpoints.

 

 

Os endpoints ficam divididos em vários grupos, dentro do select REST Applications. Para o post de hoje, iremos utilizar um endpoint no grupo headless-delivery/v1.0

 

 

Pesquise por Structured Content e abra o primeiro endpoint da seção

 

 

No Headless, StructuredContent são os nossos Conteúdos Web (ou Journal Article no backend, e sim, o Liferay adora dar vários nomes diferentes para a mesma entidade). Nós vamos listar todos os conteúdos do nosso site principal.

Para pegar o id do site basta entrar na sua página inicial, abrir o console do JavaScript e executar o comando

themeDisplay.getScopeGroupId();

 

 

Para o Liferay, Group é o mesmo que Site. Preencha o input de siteId no Headless e aperte em execute. Caso retorne um erro 403, basta recarregar a página e refazer o mesmo procedimento. Na seção de response aparecerá os conteúdos web do site.

 

 

Certifique-se de que existem conteúdos criados. Caso você não saiba como criar conteúdos, dê uma olhada nesse vídeo do nosso canal: Entendendo TUDO sobre CONTEÚDO WEB!.

Na seção acima do response conseguimos ver o comando curl da requisição

 

 

Perceba que a requisição é relativamente simples de se fazer e o response é um JSON com todos os dados relevantes dos conteúdos web. Agora basta integrar nosso React Widget com esse endpoint.

Chamando endpoint pelo React Widget

Nós iremos utilizar o comando nativo fetch para realizar as chamadas AJAX. No mesmo diretório do arquivo index.js, crie o arquivo api.js com o seguinte código

async function fetchWebContents() {
  return (
    await fetch(
      `/o/headless-delivery/v1.0/sites/${themeDisplay.getScopeGroupId()}/structured-contents`,
      {
        headers: {
          accept: "application/json",
          "x-csrf-token": Liferay.authToken,
        },
      }
    )
  ).json();
}

export default {
  fetchWebContents,
};

No arquivo AppComponent.js, cole o seguinte código

import React, { useEffect, useState } from "react";
import api from "./api";

export default function AppComponent() {
  const [webContents, setWebContents] = useState([]);

  useEffect(() => {
    api.fetchWebContents().then((response) => setWebContents(response.items));
  }, []);

  return (
    <>
      {webContents.map((webContent) => (
        <div key={webContent.id} className="container">
          <h2>{webContent.title}</h2>
          <p>{webContent.description}</p>
          <div className="infos">
            <span>{webContent.creator.name}</span>|
            <span>{webContent.dateCreated}</span>
          </div>
        </div>
      ))}
    </>
  );
}

Aqui nós realizamos a chamada da API Headless dentro de um useEffect e guardamos os resultados da resposta dentro de um state do componente funcional. A parte visual do componente consiste apenas na listagem desses conteúdos.

Para melhorar a apresentação do componente, copie esse código no arquivo style.scss dentro da pasta css

.container {
	display: flex;
	flex-direction: column;
	border-radius: 15px;
	padding: 25px;
	align-items: flex-start;
}

.infos {
	span {
		color: #6b6c7e;
		margin: 0 20px;

		&:first-child {
			margin-left: 0;
		}
	
		&:last-child {
			margin-right: 0;
		}
	}
}

 

Agora, ao recarregar a página você deve ver uma lista de conteúdos web

 

 

Inspecionando o network, podemos ver a requisição para o Headless

 

 

E a resposta

 



 

Com isso você consegue integrar sua aplicação React com várias funcionalidades nativas do seu portal, apenas consultando os endpoint do Headless.

Por este post é só, até a próxima!