Open the menu

    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.

    Exemplo de headless CMS
    Exemplo de headless CMS



    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:

    Controle de acesso no canal Blog
    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ção REST
    Configuração REST



    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:

    Configuração CORS
    Configuração CORS



    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
    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:

    AخA
     
    1
    {
    2
      "rows": [
    3
        {
    4
          "publishStartDate": {
    5
            "dayOfWeekName": "segunda-feira",
    6
            "hours": "13",
    7
            "seconds": "00",
    8
            "dayOfWeek": 2,
    9
            "month": "09",
    10
            "rawValue": 1630946160000,
    11
            "year": "2021",
    12
            "dayOfMonth": "06",
    13
            "minutes": "36",
    14
            "monthName": "setembro",
    15
            "value": "06/09/2021 13:36"
    16
          },
    17
          "introductionImage": {
    18
            "downloadInlineHref": "http://headlesscms.lumis.com.br/lumis/portal/file/fileDownload.jsp?fileId=402881DE7BBB7CE9017BBB9B51DF04B8&inline=1",
    19
            "downloadHref": "http://headlesscms.lumis.com.br/lumis/portal/file/fileDownload.jsp?fileId=402881DE7BBB7CE9017BBB9B51DF04B8",
    20
            "format": "png",
    21
            "macroType": "IMAGE",
    22
            "mediaId": "402881DE7BBB7CE9017BBB9B51DF04B7",
    23
            "mediaTitle": "Capa LinkedIn 3.png",
    24
            "fileSize": 53462,
    25
            "rawValue": "402881DE7BBB7CE9017BBB9B51DF04B7",
    26
            "name": "Capa LinkedIn 3.png",
    27
            "width": 1950,
    28
            "colorDepth": 32,
    29
            "href": "http://headlesscms.lumis.com.br/data/files/9B/40/FD/15/B9BBB7109EC7BBB7ED188204/Capa%20LinkedIn%203.png",
    30
            "contentType": "image/png",
    31
            "fileId": "402881DE7BBB7CE9017BBB9B51DF04B8",
    32
            "height": 488
    33
          },
    34
          "title": "Deserunt voluptatum in cupiditate molestia",
    35
          "introduction": "Consectetur, animi, debitis sed fugiat, eveniet, ea culpa nostrum lorem aute ut adipisci at temporibus cupidatat libero tempora consectetur, culpa",
    36
          "slug": "deserunt-voluptatum-in-cupiditate-molestia",
    37
          "tags": [
    38
            {
    39
              "name": "Tag 2",
    40
              "normalizedName": "tag-2"
    41
            },
    42
            {
    43
              "name": "Tag 3",
    44
              "normalizedName": "tag-3"
    45
            }
    46
          ]
    47
        },
    48
        {
    49
          "publishStartDate": {
    50
            "dayOfWeekName": "segunda-feira",
    51
            "hours": "11",
    52
            "seconds": "00",
    53
            "dayOfWeek": 2,
    54
            "month": "09",
    55
            "rawValue": 1630939860000,
    56
            "year": "2021",
    57
            "dayOfMonth": "06",
    58
            "minutes": "51",
    59
            "monthName": "setembro",
    60
            "value": "06/09/2021 11:51"
    61
          },
    62
          "title": "Et qui pariatur",
    63
          "introduction": "Veritatis ratione omnis sit libero excepturi fugiat perferendis et placeat, nemo recusandae. Nihil ea in quo in voluptatum ea eveniet, tempor nihi",
    64
          "slug": "et-qui-pariatur",
    65
          "tags": [
    66
            {
    67
              "name": "Tag 1",
    68
              "normalizedName": "tag-1"
    69
            },
    70
            {
    71
              "name": "Tag 2",
    72
              "normalizedName": "tag-2"
    73
            }
    74
          ]
    75
        }
    76
      ],
    77
      "totalCount": 2
    78
    }
    79

    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:

    103
     
    1
    {
    2
      "rows": [
    3
        {
    4
          "categorization": {
    5
            "serviceInstances": []
    6
          },
    7
          "lastModifiedDate": {
    8
            "dayOfWeekName": "segunda-feira",
    9
            "hours": "13",
    10
            "seconds": "19",
    11
            "dayOfWeek": 2,
    12
            "month": "09",
    13
            "rawValue": 1630946179920,
    14
            "year": "2021",
    15
            "dayOfMonth": "06",
    16
            "minutes": "36",
    17
            "monthName": "setembro",
    18
            "value": "06/09/2021 13:36"
    19
          },
    20
          "lastModifiedBy": {
    21
            "shortId": "admin",
    22
            "profileImageHref": "http://headlesscms.lumis.com.br/lumis/api/rest/lum-internal/users/00000000D00000000000000000000001/profileimage",
    23
            "rawValue": "00000000D00000000000000000000001",
    24
            "subtype": 0,
    25
            "name": "Administrator",
    26
            "principalId": "00000000D00000000000000000000001",
    27
            "type": 1
    28
          },
    29
          "contentId": "402881DE7BBB7CE9017BBB9E242D04EF",
    30
          "serviceInstanceId": "402881DE7BBB7CE9017BBB8ED9920134",
    31
          "language": {
    32
            "currentLocale": "pt_BR"
    33
          },
    34
          "title": "Et qui pariatur",
    35
          "content": "<p>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<p><img alt=\"Capa LinkedIn 3.png\" src=\"http://headlesscms.lumis.com.br/data/files/9B/40/FD/15/B9BBB7109EC7BBB7ED188204/Capa%20LinkedIn%203.png\"><span id=\"cke_bm_359C\" style=\"display: none;\"> <\/span><\/p>\n\n<p>Saepe 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\n<p>Ipsum, 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",
    36
          "versionNumber": {
    37
            "rawValue": 2,
    38
            "value": "2"
    39
          },
    40
          "tags": [
    41
            {
    42
              "name": "Tag 1",
    43
              "normalizedName": "tag-1"
    44
            },
    45
            {
    46
              "name": "Tag 2",
    47
              "normalizedName": "tag-2"
    48
            }
    49
          ],
    50
          "createdDate": {
    51
            "dayOfWeekName": "segunda-feira",
    52
            "hours": "11",
    53
            "seconds": "28",
    54
            "dayOfWeek": 2,
    55
            "month": "09",
    56
            "rawValue": 1630940308527,
    57
            "year": "2021",
    58
            "dayOfMonth": "06",
    59
            "minutes": "58",
    60
            "monthName": "setembro",
    61
            "value": "06/09/2021 11:58"
    62
          },
    63
          "versionContentId": "402881DE7BBB7CE9017BBBF7BB71057B",
    64
          "publishStartDate": {
    65
            "dayOfWeekName": "segunda-feira",
    66
            "hours": "11",
    67
            "seconds": "00",
    68
            "dayOfWeek": 2,
    69
            "month": "09",
    70
            "rawValue": 1630939860000,
    71
            "year": "2021",
    72
            "dayOfMonth": "06",
    73
            "minutes": "51",
    74
            "monthName": "setembro",
    75
            "value": "06/09/2021 11:51"
    76
          },
    77
          "createdBy": {
    78
            "shortId": "admin",
    79
            "profileImageHref": "http://headlesscms.lumis.com.br/lumis/api/rest/lum-internal/users/00000000D00000000000000000000001/profileimage",
    80
            "rawValue": "00000000D00000000000000000000001",
    81
            "subtype": 0,
    82
            "name": "Administrator",
    83
            "principalId": "00000000D00000000000000000000001",
    84
            "type": 1
    85
          },
    86
          "versionActive": "true",
    87
          "id": "402881DE7BBB7CE9017BBBF7BB4E057A",
    88
          "introduction": "Veritatis ratione omnis sit libero excepturi fugiat perferendis et placeat, nemo recusandae. Nihil ea in quo in voluptatum ea eveniet, tempor nihi",
    89
          "workflowAssignedTo": {
    90
            "shortId": "admin",
    91
            "profileImageHref": "http://headlesscms.lumis.com.br/lumis/api/rest/lum-internal/users/00000000D00000000000000000000001/profileimage",
    92
            "rawValue": "00000000D00000000000000000000001",
    93
            "subtype": 0,
    94
            "name": "Administrator",
    95
            "principalId": "00000000D00000000000000000000001",
    96
            "type": 1
    97
          },
    98
          "slug": "et-qui-pariatur"
    99
        }
    100
      ],
    101
      "totalCount": 1
    102
    }
    103



    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:

    Alterando o slug
    Alterando o slug

    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:

    Redirecionamento para o novo slug
    Redirecionamento para o novo slug