Base de conhecimento

Criando projetos em Angular, React e Vue com o Lumis Portal

O objetivo desse documento é apresentar os passos para a construção de um projeto típico utilizando tecnologias de front-end como Angular, React e Vue.

1 Introdução

Tipicamente, quando trabalhamos com projetos de single page applications (SPA) ou outros em tecnologias como Angular, React e Vue, haverá um diretório raiz estático que representará o projeto. Este, possui sub-diretórios que armazenam arquivos que representam estilos, controles, sub-layouts, etc. Esses projetos normalmente se comunicam com o backend através de chamadas ajax usando protocolo http/Json.

Como exemplo, os seguintes passos descrevem como um projeto feito em Angular (mas também pode se aplicar para outras tecnologias como React e Vue), pode ser implementado no Lumis Portal.

2 Passo a passo

2.1 Criação do projeto

  1. Crie um projeto e módulo que representem essa solução em Angular.
  1. Crie um componente no novo módulo que represente os arquivos estáticos do Angular.

Neste componente, coloque os arquivos estáticos da solução no diretório componentfiles/www/. Por padrão, ao realizar o deploy do componente, todos arquivos em www serão copiados para a raiz do website.

  1. Se o ambiente possuir múltiplos websites e você quiser que este componente seja copiado somente para um deles, você deve modificar o arquivo componentdefinition.xml para especificar algum canal de referência que fique dentro do webiste deste projeto.

No exemplo abaixo estamos referenciando (na tag publicFilesChannelId) um canal cujo identificador é “XXX” para limitar a cópia do componente apenas ao website que o contém.

<?xml version="1.0" encoding="UTF-8"?>

<lumis-component xmlns="http://www.lumis.com.br/lumisportal/xsd/component" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.lumis.com.br/lumisportal/xsd/component http://www.lumis.com.br/lumisportal/xsd/component">

<version>1.0.0.0</version>

<description>IntranetNow Services</description>

<publicFilesChannelId>XXX</publicFilesChannelId>

</lumis-component>

Obs: Esse recurso apresentado no passo 3 está disponível apenas a partir da versão 11.0 do Lumis Portal.

  1. Crie um tema que represente este projeto Angular.

Mova o arquivo principal de layout do projeto (index.html por exemplo) para dentro do diretório www do tema.

  1. Referencie esse arquivo (index.html) dentro do layout da página do portal.

2.2 Acessando Conteúdos via REST

Para expor conteúdos publicados no gestor de conteúdo do Lumis Portal via JSON, de modo que eles possam ser consumidos pelo seu projeto em Angular, você deve configurar as instâncias de serviço de conteúdo em questão para que disponibilizem seus conteúdos através da API. 

Detalhes de como realizar essa configuração estão disponíveis no manual, e podem ser visualizados clicando aqui

Detalhes de uso da API também estão disponíveis no manual, e podem ser visualizados clicando aqui

Dessa forma, seu projeto em Angular pode montar listas e detalhes de conteúdos consumidos a partir das API’s REST de serviços do Lumis Portal. Todas as API’s garantem a segurança nos acessos aos conteúdos.

2.3 Utilizando a busca do Lumis Portal

Se sua solução deve possuir busca, você pode aproveitar os benefícios do framework de busca do Lumis Portal. Para isso, deve ser montada uma página do Lumis Portal de detalhes de conteúdos para onde os resultados de busca serão automaticamente direcionados, sem esforço de desenvolvimento. Dessa forma, mecanismos de busca como o Google também vão automaticamente indexar todos os conteúdos sem esforço adicional.

2.4 Utilizando o controle de acesso do Lumis Portal

Se seu projeto possui áreas separadas com controle de acesso específico por área, recomendamos criar um canal no Lumis Portal com o controle de acesso apropriado e, dentro dele, você pode ter sub-projetos em Angular. Com isso você pode aproveitar todos os benefícios do framework de segurança que o Lumis Portal oferece sem esforço de desenvolvimento.

2.5 Utilizando autenticação do Lumis Portal

Para realizar o login, você pode ter componentes em Angular que chamam a API de login do Lumis Portal via rest.  Além disso, caso seja desejável apresentar uma tela de login para um usuário que tentou acessar uma url restrita, deve ser montada no Lumis Portal uma página de login para o website da solução.

2.6 SEO

Trabalhando com páginas de detalhes de conteúdos, os publicadores vão ter total controle de SEO / url dos conteúdos para melhorar a performance de busca do site. As páginas principais, que os publicadores precisam ter controle para influenciar SEO (como a Home, por exemplo) também devem ser montadas no Lumis Portal.

3 Conclusão

A partir dos passos acima, é possível montar soluções que aproveitam todos os benefícios de tecnologias de front-end como Angular, React e Vue, sem perder as grandes vantagens que os frameworks do Lumis Portal oferecem. Importante destacar também que é possível montar soluções híbridas, em parte construídas a partir dessas tecnologias e em parte através de outras formas tradicionais.