DocumentaçãoAEMTutoriais do AEMTutorial do AEM Headless

Modelagem de conteúdo

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Intermediário
  • Desenvolvedor

Bem-vindo ao capítulo de tutorial sobre fragmentos de conteúdo e endpoints do GraphQL no Adobe Experience Manager (AEM). Abordaremos como aproveitar os fragmentos de conteúdo, criar modelos de fragmento e usar endpoints do GraphQL no AEM.

Os fragmentos de conteúdo oferecem uma abordagem estruturada para gerenciar conteúdo em vários canais, fornecendo flexibilidade e reutilização. A ativação de fragmentos de conteúdo no AEM permite a criação de conteúdo modular, melhorando a consistência e a adaptabilidade.

Primeiro, guiaremos você pela ativação dos Fragmentos de conteúdo no AEM, abrangendo as configurações e definições necessárias para uma integração perfeita.

Em seguida, abordaremos a criação de modelos de fragmento, que definem a estrutura e os atributos. Saiba como projetar modelos alinhados aos seus requisitos de conteúdo e gerenciá-los de maneira eficaz.

Em seguida, demonstraremos a criação de fragmentos de conteúdo dos modelos, fornecendo orientação passo a passo sobre criação e publicação.

Além disso, exploraremos a definição de endpoints do AEM GraphQL. O GraphQL recupera dados do AEM com eficiência, e definiremos e configuraremos endpoints para expor os dados desejados. As consultas persistentes otimizarão o desempenho e o armazenamento em cache.

Ao longo do tutorial, forneceremos explicações, exemplos de código e dicas práticas. No final, você terá as habilidades para ativar Fragmentos de conteúdo, criar Modelos de fragmento, gerar Fragmentos e definir endpoints de AEM GraphQL e consultas persistentes. Vamos começar!

Configuração sensível ao contexto

  1. Navegue até Ferramentas > Navegador de configuração para criar uma configuração para a experiência headless.

    Criar pasta

    Forneça um título e nome e verifique as Consultas GraphQL persistidas e os Modelos de fragmentos de conteúdo.

Modelos de fragmentos do conteúdo

  1. Navegue até Ferramentas > Modelos de fragmento de conteúdo e selecione a pasta com o nome da configuração criada na etapa 1.

    Pasta de Modelo

  2. Dentro da pasta, selecione Criar e nomeie o modelo Teaser. Adicione os seguintes tipos de dados ao modelo Teaser.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Tipo de dados Nome Obrigatório Opções
    Referência de conteúdo Ativo sim Adicione uma imagem padrão se desejar. Exemplo: /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4
    Texto em linha única Título sim
    Texto em linha única Pré-título não
    Texto multilinha Descrição não Verificar se o tipo padrão é rich text
    Lista discriminada Estilo sim Renderizar como lista suspensa. As opções são Herói -> Herói e Destaque -> Destaque

    Modelo de teaser

  3. Dentro da pasta, crie um segundo modelo chamado Oferta. Clique em criar, dê ao modelo o nome "Oferta" e adicione os seguintes tipos de dados:

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Tipo de dados Nome Obrigatório Opções
    Referência de conteúdo Ativo sim Adicionar imagem padrão. Exemplo: /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Texto multilinha Descrição não
    Texto multilinha Artigo não

    Modelo de oferta

  4. Dentro da pasta, crie um terceiro modelo chamado Lista de imagens. Clique em criar, nomeie o modelo como "Lista de imagens" e adicione os seguintes tipos de dados:

    table 0-row-4 1-row-4
    Tipo de dados Nome Obrigatório Opções
    Referência de fragmento Listar itens sim Renderizar como vários campos. O modelo de fragmento de conteúdo permitido é Oferta.

    Modelo de Lista de Imagens

Fragmentos de conteúdo

  1. Agora navegue até o Assets e crie uma pasta para o novo site. Clique em criar e nomeie a pasta.

    Adicionar pasta

  2. Depois que a pasta for criada, selecione-a e abra suas Propriedades.

  3. Na guia Configurações de Nuvem da pasta, selecione a configuração criada anteriormente.

    Configuração de nuvem do AEM Headless da pasta de ativos

    Clique na nova pasta e crie um teaser. Clique em Criar e Fragmento do conteúdo e selecione o modelo Teaser. Nomeie o modelo Hero e clique em Create.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Nome Notas
    Ativo Deixe como valor padrão ou escolha um ativo diferente (vídeo ou imagem)
    Título Explore. Discover. Live.
    Pré-título Join use for your next adventure.
    Descrição Deixe em branco
    Estilo Hero

    fragmento principal

Pontos de extremidade GraphQL.

  1. Navegue até Ferramentas > GraphQL

    GraphiQL do AEM

  2. Clique em Criar, nomeie o novo ponto de extremidade e escolha a configuração recém-criada.

    Ponto de extremidade do AEM Headless GraphQL

Consultas persistentes de GraphQL

  1. Vamos testar o novo terminal. Navegue até Ferramentas > Editor de consultas do GraphQL e escolha nosso ponto de extremidade para o menu suspenso no canto superior direito da janela.

  2. No Editor de consultas, crie algumas consultas diferentes.

    code language-graphql 
    {
    teaserList {
        items {
        title
        }
    }
}

    Você deve obter uma lista contendo o único fragmento criado acima.

    Para este exercício, crie uma query completa que o aplicativo AEM headless usa. Crie uma query que retorne um único teaser por caminho. No editor de consultas, insira a seguinte consulta:

    code language-graphql 
    query TeaserByPath($path: String!) {
component: teaserByPath(_path: $path) {
    item {
    __typename
    _path
    _metadata {
        stringMetadata {
        name
        value
        }
    }
    title
    preTitle
    style
    asset {
        ... on MultimediaRef {
        __typename
        _authorUrl
        _publishUrl
        format
        }
        ... on ImageRef {
        __typename
        _authorUrl
        _publishUrl
        mimeType
        width
        height
        }
    }
    description {
        html
        plaintext
    }
    }
}
}

    Na entrada variáveis de consulta na parte inferior, digite:

    code language-json 
    {
    "path": "/content/dam/pure-headless/hero"
}
    note note
    NOTE
    Talvez seja necessário ajustar a variável de consulta path com base nos nomes da pasta e do fragmento.

    Execute a consulta para receber os resultados do fragmento de conteúdo criado anteriormente.

  3. Clique em Salvar para manter (salvar) a consulta e nomear a consulta teaser. Isso nos permite fazer referência à consulta por nome no aplicativo.

Próximas etapas

Parabéns! Você configurou o AEM as a Cloud Service com êxito para permitir a criação de fragmentos de conteúdo e endpoints do GraphQL. Você também criou um modelo de fragmento de conteúdo e um fragmento de conteúdo, além de definir um terminal GraphQL e uma consulta persistente. Agora você está pronto para seguir para o próximo capítulo do tutorial, em que aprenderá a criar um aplicativo AEM Headless React que consome os fragmentos de conteúdo e o endpoint do GraphQL criados neste capítulo.

Próximo capítulo: APIs AEM Headless e React

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4