LumisXP como headless CMS

Esse guia irá mostrar os passos necessários para configurar o LumisXP para ser consumido como um headless CMS.

Um CMS headless é um CMS que é responsável por entregar conteúdo e abstrair como esse conteúdo será utilizado. O conteúdo pode, por exemplo, ser utilizado por um framework de front-end (React, Vue.js etc) para gerar um HTML para ser consumido por um usuário final em um navegador ou ser utilizado por um aplicativo móvel para exibir esse conteúdo em um celular.

Escolha ou criação do serviço a ser utilizado

Nesse guia, iremos utilizar um serviço de Lista + Detalhes para exemplificar o que deve ser feito para configurar corretamente o LumisXP para ser consumido como headless CMS.
Um requisito importante para isso é que o serviço utilize o metadado de slug.

Como exemplo, vamos utilizar o serviço de Blog, que permite a criação de posts e possui interfaces REST para consultar uma lista de posts e detalhes de um post.
Esse serviço possui o metadado de slug.

Criação das instâncias de serviço

Para esse guia, vamos utilizar uma nova instância do serviço de Blog juntamente com algumas instâncias de serviço auxiliares:

Estrutura criada (canal Blog) — Estrutura criada (canal `Blog`)

Após criar o canal e as instâncias de serviço e ter associado a instância de serviço de Blog com as demais instâncias de serviço, vamos configurar o controle de acesso no canal Blog:

Para esse guia, utilizaremos um ambiente onde qualquer usuário tem acesso às informações do Blog. Por isso demos acesso de todos os usuários visualizarem o conteúdo das instâncias de serviço.
Caso não fosse esse o cenário, um controle de acesso deveria ser feito.

Configuração REST do serviço de Blog

Para acessar os dados do blog via REST, precisamos habilitar o suporte REST na instância de serviço:

Configurações para o LumisXP não bloquear chamadas externas

Para poder acessar os REST para consumir os dados do blog, precisamos configurar o LumisXP para permitir chamadas CORS, nas configurações:

Chamando a lista de posts

Nos exemplos a seguir, vamos assumir que o LumisXP sendo acessado como headless CMS está escutando no endereço http://headlesscms.lumis.com.br.

A primeira coisa a ser feita é configurar o REST de lista para retornar todos os campos. Isso porque, por padrão, nesse serviço o REST de lista não traz o campo de introdução.

Habilitando todos os campos no REST de lista

Após essa configuração pronta, podemos chamar o REST em http://headlesscms.lumis.com.br/lumis/api/rest/blog/lumgetdata/list?lumReturnFields=title,introduction,introductionImage,slug,publishStartDate,tags.
Nessa chamada, temos:

http://headlesscms.lumis.com.br

É o endereço do LumisXP sendo utilizado como headless CMS.

/lumis/api/rest/blog/lumgetdata/list

É o caminho do REST para a lista de postagens do blog.

lumReturnFields=title,introduction,introductionImage,slug,publishStartDate,tags

É um parâmetro que define quais campos estarão presentes na resposta. No caso:

title: Título da postagem.
introduction: Introdução da postagem.
introductionImage: Imagem de introdução da postagem.
slug: slug da postagem.
publishStartDate: Data de publicação da postagem.
tags: Tags da postagem.

Essa chamada produz, de acordo com os dados cadastrados:
{ "rows": [ { "publishStartDate": { "dayOfWeekName": "segunda-feira", "hours": "13", "seconds": "00", "dayOfWeek": 2, "month": "09", "rawValue": 1630946160000, "year": "2021", "dayOfMonth": "06", "minutes": "36", "monthName": "setembro", "value": "06/09/2021 13:36" }, "introductionImage": { "downloadInlineHref": "http://headlesscms.lumis.com.br/lumis/portal/file/fileDownload.jsp?fileId=402881DE7BBB7CE9017BBB9B51DF04B8&inline=1", "downloadHref": "http://headlesscms.lumis.com.br/lumis/portal/file/fileDownload.jsp?fileId=402881DE7BBB7CE9017BBB9B51DF04B8", "format": "png", "macroType": "IMAGE", "mediaId": "402881DE7BBB7CE9017BBB9B51DF04B7", "mediaTitle": "Capa LinkedIn 3.png", "fileSize": 53462, "rawValue": "402881DE7BBB7CE9017BBB9B51DF04B7", "name": "Capa LinkedIn 3.png", "width": 1950, "colorDepth": 32, "href": "http://headlesscms.lumis.com.br/data/files/9B/40/FD/15/B9BBB7109EC7BBB7ED188204/Capa%20LinkedIn%203.png", "contentType": "image/png", "fileId": "402881DE7BBB7CE9017BBB9B51DF04B8", "height": 488 }, "title": "Deserunt voluptatum in cupiditate molestia", "introduction": "Consectetur, animi, debitis sed fugiat, eveniet, ea culpa nostrum lorem aute ut adipisci at temporibus cupidatat libero tempora consectetur, culpa", "slug": "deserunt-voluptatum-in-cupiditate-molestia", "tags": [ { "name": "Tag 2", "normalizedName": "tag-2" }, { "name": "Tag 3", "normalizedName": "tag-3" } ] }, { "publishStartDate": { "dayOfWeekName": "segunda-feira", "hours": "11", "seconds": "00", "dayOfWeek": 2, "month": "09", "rawValue": 1630939860000, "year": "2021", "dayOfMonth": "06", "minutes": "51", "monthName": "setembro", "value": "06/09/2021 11:51" }, "title": "Et qui pariatur", "introduction": "Veritatis ratione omnis sit libero excepturi fugiat perferendis et placeat, nemo recusandae. Nihil ea in quo in voluptatum ea eveniet, tempor nihi", "slug": "et-qui-pariatur", "tags": [ { "name": "Tag 1", "normalizedName": "tag-1" }, { "name": "Tag 2", "normalizedName": "tag-2" } ] } ], "totalCount": 2 }

Detalhe nessa resposta é o campo slug, que pode ser utilizado para montar URLs amigáveis para o conteúdo. No caso dos conteúdos cadastrados (temos dois conteúdos cadastrados), temos os seguintes slugs:

deserunt-voluptatum-in-cupiditate-molestia
et-qui-pariatur

Chamando a lista de posts

Para obter os detalhes de uma postagem com o slug et-qui-pariatur, podemos chamar o seguinte endpoint: http://headlesscms.lumis.com.br/lumis/api/rest/blog/lumgetdata/details/blogpost/et-qui-pariatur.
Nesse endpoint, temos:

http://headlesscms.lumis.com.br: É o endereço do LumisXP sendo utilizado como headless CMS.
/lumis/api/rest/blog/lumgetdata/details: É o caminho do REST para os detalhes de postagens do blog.
blogpost: É o identificador do source da postagem de blog. Esse identificador varia de acordo com o serviço sendo utilizado.
et-qui-pariatur: É o slug do conteúdo sendo buscado.

Essa chamada produz, de acordo com os dados cadastrados:
{ "rows": [ { "categorization": { "serviceInstances": [] }, "lastModifiedDate": { "dayOfWeekName": "segunda-feira", "hours": "13", "seconds": "19", "dayOfWeek": 2, "month": "09", "rawValue": 1630946179920, "year": "2021", "dayOfMonth": "06", "minutes": "36", "monthName": "setembro", "value": "06/09/2021 13:36" }, "lastModifiedBy": { "shortId": "admin", "profileImageHref": "http://headlesscms.lumis.com.br/lumis/api/rest/lum-internal/users/00000000D00000000000000000000001/profileimage", "rawValue": "00000000D00000000000000000000001", "subtype": 0, "name": "Administrator", "principalId": "00000000D00000000000000000000001", "type": 1 }, "contentId": "402881DE7BBB7CE9017BBB9E242D04EF", "serviceInstanceId": "402881DE7BBB7CE9017BBB8ED9920134", "language": { "currentLocale": "pt_BR" }, "title": "Et qui pariatur", "content": "Aut in minus sint, facilis ex eum voluptatem sed laboriosam, aut dolorum in ipsa, repellendus. Sunt nisi amet, suscipit natus quae ut quis adipisicing a adipisicing voluptatum qui sint in et illo dicta veniam, expedita recusandae. Exercitationem distinctio. Voluptates necessitatibus tempora sequi tempor ea porro dolor ut sed tempora architecto sunt, voluptas non porro laborum mollitia illum, error adipisci eligendi exercitation fugit, perspiciatis, voluptates sint in nostrum aperiam similique blanditiis ipsum non et eu at veniam<\/p>\n\n<img alt=\"Capa LinkedIn 3.png\" src=\"http://headlesscms.lumis.com.br/data/files/9B/40/FD/15/B9BBB7109EC7BBB7ED188204/Capa%20LinkedIn%203.png\"> <\/span><\/p>\n\nSaepe est, provident, sunt, dolores corporis anim ullamco accusamus laboriosam, commodi nulla sapiente est mollit ullamco repellendus. Iusto laboris omnis temporibus voluptatibus reprehenderit rerum et possimus, molestiae dolore ut commodo ea excepteur quisquam omnis id quidem laboriosam, consequuntur optio, sunt, quidem ratione molestiae aut dolor harum sit iste qui duis vel cillum est blanditiis ducimus, quisquam eum dolore ut est, quo autem cupidatat sint dignissimos vel pariatur. Ut voluptatem. Animi, rerum sint officia non consequatur modi consequatur? Tempore, eu minim sit deserunt aliquip incididunt sunt sint natus e<\/p>\n\nIpsum, quis culpa, aut voluptatem, lorem architecto quia sequi blanditiis consequatur debitis consectetur, inventore voluptas sit, rerum fugiat nostrud iusto consequatur? Recusandae. Atque omnis assumenda quod itaque ea neque ut blanditiis et voluptatem esse rem earum nisi dicta reprehenderit nobis velit aut dignissimos laborum. Sunt illo quos nihil reprehenderit, excepteur rem at asperiores magnam laudantium, aut consequuntur blanditiis qui non obcaecati eni<\/p>\n", "versionNumber": { "rawValue": 2, "value": "2" }, "tags": [ { "name": "Tag 1", "normalizedName": "tag-1" }, { "name": "Tag 2", "normalizedName": "tag-2" } ], "createdDate": { "dayOfWeekName": "segunda-feira", "hours": "11", "seconds": "28", "dayOfWeek": 2, "month": "09", "rawValue": 1630940308527, "year": "2021", "dayOfMonth": "06", "minutes": "58", "monthName": "setembro", "value": "06/09/2021 11:58" }, "versionContentId": "402881DE7BBB7CE9017BBBF7BB71057B", "publishStartDate": { "dayOfWeekName": "segunda-feira", "hours": "11", "seconds": "00", "dayOfWeek": 2, "month": "09", "rawValue": 1630939860000, "year": "2021", "dayOfMonth": "06", "minutes": "51", "monthName": "setembro", "value": "06/09/2021 11:51" }, "createdBy": { "shortId": "admin", "profileImageHref": "http://headlesscms.lumis.com.br/lumis/api/rest/lum-internal/users/00000000D00000000000000000000001/profileimage", "rawValue": "00000000D00000000000000000000001", "subtype": 0, "name": "Administrator", "principalId": "00000000D00000000000000000000001", "type": 1 }, "versionActive": "true", "id": "402881DE7BBB7CE9017BBBF7BB4E057A", "introduction": "Veritatis ratione omnis sit libero excepturi fugiat perferendis et placeat, nemo recusandae. Nihil ea in quo in voluptatum ea eveniet, tempor nihi", "workflowAssignedTo": { "shortId": "admin", "profileImageHref": "http://headlesscms.lumis.com.br/lumis/api/rest/lum-internal/users/00000000D00000000000000000000001/profileimage", "rawValue": "00000000D00000000000000000000001", "subtype": 0, "name": "Administrator", "principalId": "00000000D00000000000000000000001", "type": 1 }, "slug": "et-qui-pariatur" } ], "totalCount": 1 }

Alterando o slug de um conteúdo

Quando um conteúdo muda de slug, ao tentar obter seus detalhes, um redirect para o novo endereço será realizado. Por exemplo, vamos supor que a postagem do exemplo anterior tenha seu slug alterado de et-qui-pariatur para et-qui-pariatur--novo:

Nesse cenário, ao realizar uma requisição para os detalhes da postagem usando o slug anterior (http://headlesscms.lumis.com.br/lumis/api/rest/blog/lumgetdata/details/blogpost/et-qui-pariatur), um redirecionamento será realizado para http://headlesscms.lumis.com.br/lumis/api/rest/blog/lumgetdata/details/blogpost/et-qui-pariatur--novo: