Capítulo 4 - Definição dos modelos do Content Services

O Capítulo 4 do tutorial AEM Headless aborda o papel dos modelos editáveis AEM no contexto dos serviços de conteúdo AEM. Modelos editáveis são usados para definir a estrutura de conteúdo JSON que o AEM Content Services expõe aos clientes por meio da composição de componentes AEM habilitados para o Content Services.

Compreender a função dos modelos nos serviços de conteúdo AEM

Modelos editáveis AEM são usados para definir os pontos de extremidade HTTP que são acessados para expor o conteúdo do Evento como JSON.

Tradicionalmente, os modelos editáveis do AEM são usados para definir páginas da Web, no entanto, esse uso é simplesmente convencional. Modelos editáveis podem ser usados para compor qualquer conjunto de conteúdo; como esse conteúdo é acessado: como um HTML em um navegador, como o JSON consumido pelo JavaScript (editor de AEM SPA) ou por um aplicativo móvel é uma função de como essa página é solicitada.

No AEM Content Services, os modelos editáveis são usados para definir como os dados JSON são expostos.

Para o aplicativo WKND Mobile, criaremos um único Modelo Editável que é usado para direcionar um único ponto de extremidade de API. Embora este exemplo seja simples de ilustrar os conceitos de AEM Headless, você pode criar várias páginas (ou pontos de extremidade), cada uma expondo diferentes conjuntos de conteúdo para criar uma API mais complexa e mais bem organizada.

Noções básicas sobre o endpoint da API

Para entender como compor nosso ponto de extremidade de API e entender qual conteúdo deve ser exposto ao nosso Aplicativo WKND Mobile, vamos rever o design.

Decomposição da página de API de eventos

Como podemos ver, temos três conjuntos lógicos de conteúdo para fornecer ao aplicativo móvel.

  1. O Logotipo
  2. A Linha da Marca
  3. A lista de Eventos

Para fazer isso, podemos mapear esses requisitos para componentes AEM (e, no nosso caso, AEM WCM Componentes principais) para expor o conteúdo necessário como JSON.

  1. O Logotipo é exibido por meio de um componente de Imagem
  2. A Linha da Marca é exibida por meio de um componente de Texto
  3. A lista de Eventos é exibida por meio de um componente de Lista de Fragmentos de Conteúdo que, por sua vez, faz referência a um conjunto de Fragmentos de Conteúdo de Evento.
NOTE
Para oferecer suporte à exportação JSON de Páginas e Componentes do Serviço de Conteúdo do AEM, as Páginas e os Componentes devem derivar dos Componentes Principais do WCM do AEM.
Os Componentes Principais do WCM do AEM têm funcionalidade interna para dar suporte a um esquema JSON normalizado de Páginas e Componentes exportados. Todos os componentes do WKND Mobile usados neste tutorial (Página, Imagem, Texto e Lista de fragmentos de conteúdo) são derivados dos Componentes principais WCM do AEM.

Definição do modelo de API de eventos

  1. Navegue até Ferramentas > Geral > Modelos >WKND Mobile.

  2. Criar o modelo Events API:

    1. Toque em Criar na barra de ação superior
    2. Selecione o modelo WKND Mobile - Empty Page
    3. Toque em Avançar na barra de ação superior
    4. Digite Events API no campo Título do modelo
    5. Toque em Criar na barra de ação superior
    6. Toque em Abrir e abra o novo modelo para edição
  3. Primeiro, permitimos os três Componentes AEM identificados de que precisamos para modelar o conteúdo editando a Política do Contêiner de Layout Raiz. Verifique se o modo Estrutura está ativo, selecione Layout Container [Root] e toque no botão Política.

  4. Em Propriedades > Componentes Permitidos, pesquise por WKND Mobile. Permitir os seguintes componentes do grupo de componentes WKND Mobile para que eles possam ser usados na página de API Events.

    • WKND Mobile > Image

      • O logotipo do aplicativo
    • WKND Mobile > Text

      • O texto de introdução do aplicativo
    • WKND Mobile > Content Fragment List

      • A lista de categorias de Evento disponíveis para exibição no aplicativo
  5. Toque na marca de seleção Concluído no canto superior direito ao concluir.

  6. Atualize a janela do navegador para ver a lista de Componentes Permitidos recentemente no painel esquerdo.

  7. No localizador Componentes no painel à esquerda, arraste os seguintes Componentes AEM:

    1. Image para o Logotipo
    2. Text para a Linha de Marca
    3. Content Fragment List para os eventos
  8. Para cada um dos componentes acima, selecione-os e pressione o botão desbloquear.

  9. No entanto, verifique se o contêiner de layout está bloqueado para impedir que outros componentes sejam adicionados ou que esses três componentes sejam removidos.

  10. Toque em Informações da página > Exibir no Administrador para retornar à lista de modelos WKND Mobile. Selecione o modelo Events API recém-criado e toque em Habilitar na barra de ações superior.

NOTE
Observe que os componentes usados para exibir o conteúdo são adicionados ao próprio modelo e bloqueados. Isso permite que os autores editem os componentes predefinidos, mas não adicionem ou removam componentes arbitrariamente, pois alterar a própria API pode quebrar as suposições em torno da estrutura JSON e quebrar aplicativos de consumo. Todas as APIs precisam ser estáveis.

Próximas etapas

Opcionalmente, instale o pacote de conteúdo do com.adobe.aem.guides.wknd-mobile.content.chapter-4.zip no AEM Author via Gerenciador de Pacotes do AEM. Este pacote contém as configurações e o conteúdo descritos neste e nos capítulos anteriores do tutorial.

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