This content originally appeared on DEV Community and was authored by Carlos Fortes
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
- Client Extensions em Liferay: Client Extensions Overview
- Liferay CLI e Ferramentas de Linha de Comando: Liferay CLI Guide
- Referência de APIs do Liferay: Liferay API Explorer
- Exemplos de Código e Recursos Open Source: Liferay GitHub
- Comunidade e Fóruns do Liferay: Liferay Community Forums
Esses links são essenciais para quem deseja se aprofundar e ter suporte durante o processo de desenvolvimento de client extensions no Liferay.
This content originally appeared on DEV Community and was authored by Carlos Fortes
Carlos Fortes | Sciencx (2024-11-13T01:00:00+00:00) Client Extension no Liferay. Retrieved from https://www.scien.cx/2024/11/13/client-extension-no-liferay/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.