Client Extension no Liferay

Client Extensions são uma maneira moderna de integrar ou personalizar o Liferay sem a necessidade de desenvolvimento profundo diretamente no servidor. Elas permitem que você mantenha uma arquitetura desacoplada, facilitando o desenvolvimento e a manutenção contínua.

Em resumo, as client extensions são aplicações externas que interagem com o Liferay por meio de APIs e endpoints personalizados, aproveitando tecnologias modernas como React, Angular, e Vue.js.

Passos para criar uma Client Extension no Liferay

1. Preparação do ambiente de desenvolvimento

Antes de iniciar a criação de uma client extension, é necessário configurar o ambiente de desenvolvimento. Certifique-se de que possui as seguintes ferramentas instaladas:

Liferay DXP ou Liferay CE (dependendo da sua versão preferida)
Node.js e npm/yarn (para gerenciar pacotes e dependências)
Liferay CLI (Liferay Project Generator)

2. Configuração do projeto

A criação de uma client extension começa com a configuração do projeto em si. Utilize o Liferay CLI para inicializar um projeto de extensão:

npx @liferay/cli new <nome-do-projeto> --type client-extension
cd <nome-do-projeto>

Esse comando cria a estrutura básica do projeto, incluindo diretórios específicos para códigos JavaScript/React e arquivos de configuração.

3. Desenvolvimento da extensão

Agora que você tem a estrutura do projeto configurada, é hora de começar a desenvolver a extensão. Dependendo do que deseja criar, o desenvolvimento pode variar. Por exemplo, se você está desenvolvendo um widget React, deve estruturar os componentes dentro da pasta src e configurar corretamente os pontos de entrada no arquivo webpack.config.js.

Exemplo de um componente React simples:

import React from 'react';
import ReactDOM from 'react-dom';

const MeuWidget = () => {
    return <div>Olá, Liferay!</div>;
};

export default MeuWidget;

// Renderização no ponto de entrada
if (document.getElementById('meu-widget-root')) {
    ReactDOM.render(<MeuWidget />, document.getElementById('meu-widget-root'));
}

4. Configuração do manifesto

O Liferay utiliza um arquivo de manifesto (client-extension.json) para identificar e configurar a extensão:

{
    "name": "meu-widget",
    "type": "custom-element",
    "description": "Um exemplo de widget personalizado",
    "friendlyURLMapping": "meu-widget",
    "typeSettings": {
        "htmlElementName": "meu-widget"
    }
}

Esse arquivo define informações essenciais como o tipo da extensão, descrições, URLs amigáveis, e configurações específicas.

5. Teste e deploy

Depois de finalizar o desenvolvimento e configurar o manifesto, é importante testar a extensão localmente para garantir que tudo funcione conforme o esperado.

Build do projeto: Para criar a versão final da sua extensão, execute o comando de build:

  npm run build

Deploy no Liferay: Para fazer o deploy, mova os arquivos compilados para o diretório de deploy do Liferay ou utilize o comando CLI específico para client extensions:

  liferay deploy

6. Integração e configuração no Portal

Uma vez que o deploy for realizado com sucesso, a extensão aparecerá no painel de administração do Liferay. Para configurá-la:

Navegue até a seção de Configurações > Client Extensions.
Adicione a nova extensão ao layout desejado, configurando sua visualização e permissões conforme necessário.

Melhores práticas e dicas

Modularização do Código: Mantenha o código da client extension modular para facilitar a manutenção e evolução do projeto.
Documentação e Comentários: Adicione comentários explicativos e mantenha uma boa documentação interna para que outros desenvolvedores possam entender o propósito e a funcionalidade da extensão.
Segurança: Evite o uso de dados sensíveis diretamente no código da extensão. Utilize APIs seguras para proteger informações confidenciais.
Responsividade: Certifique-se de que a extensão seja responsiva e funcione bem em diferentes dispositivos.

Conclusão

Criar uma client extension no Liferay permite uma enorme flexibilidade para personalizar e estender as funcionalidades do portal, trazendo inovações rápidas e específicas às suas necessidades de negócio. O processo requer conhecimento técnico sobre desenvolvimento de front-end, ferramentas de build e uma compreensão clara do Liferay CLI, mas os resultados podem transformar a experiência de uso para os administradores e usuários finais do portal.

Fontes para Consulta

Documentação Oficial do Liferay DXP: Documentação de Desenvolvimento do Liferay DXP
Exemplos de Código e Recursos Open Source: Liferay GitHub

Gostou? Deixe um ❤️ e compartilhe com sua rede para que mais desenvolvedores possam explorar Client Extensions no Liferay!

Blog