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:

1. Navegue até a seção de Configurações > Client Extensions.


2. 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

1. 
   Documentação Oficial do Liferay DXP:
   


2. 
   Liferay CLI e Ferramentas de Linha de Comando:
   


3. 
   Exemplos de Código e Recursos Open Source:
   

Esses links são essenciais para quem deseja se aprofundar e ter suporte durante o processo de desenvolvimento de client extensions no Liferay.