Capítulo 4 - Definição de modelos de serviços de conteúdo

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

Noções básicas sobre a função dos modelos nos serviços de conteúdo do AEM

Modelos editáveis do AEM são usados para definir os pontos finais HTTP que serã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 uma convenção. 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 JSON consumido pelo JavaScript (Editor SPA do AEM) ou um Aplicativo móvel é uma função de como essa página é solicitada.

Nos Serviços de conteúdo do AEM, os modelos editáveis são usados para definir como os dados JSON são expostos.

Para o aplicativo WKND Mobile, criaremos um modelo editável único que será usado para direcionar um único endpoint da API. Embora este exemplo seja simples de ilustrar os conceitos do AEM Headless, você pode criar várias páginas (ou endpoints) cada uma expondo diferentes conjuntos de conteúdo para criar uma API mais complexa e mais organizada.

Noções básicas do ponto final da API

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

Decomposição da página da API Eventos

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

  1. O Logo
  2. A Linha de Tag
  3. A lista de Eventos

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

  1. O Logotipo será exibido por meio de um Componente de imagem
  2. O Linha de Tag será exibido por meio de um Componente de texto
  3. A lista de Eventos será exibida por meio de um componente da Lista de fragmentos de conteúdo que, por sua vez, faz referência a um conjunto de Fragmentos de conteúdo de evento.
OBSERVAÇÃO

Para ser compatível com a exportação JSON de páginas e componentes do AEM Content Service, as páginas e os componentes devem derivar dos Componentes principais do WCM AEM.

Os Componentes principais do WCM no AEM têm funcionalidade integrada para suportar um esquema JSON normalizado de páginas e componentes exportados. Todos os componentes 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.

Como definir o modelo da API de eventos

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

  2. Crie o modelo Events API:

    1. Toque em Criar na barra de ações superior
    2. Selecione o modelo WKND Mobile - Empty Page
    3. Toque em Próximo na barra de ação superior
    4. Insira Events API no campo Título do modelo
    5. Toque em Criar na barra de ações superior
    6. Toque em Abrir para abrir o novo modelo para edição
  3. Primeiro, permitimos os três Componentes do AEM identificados, necessários para modelar o conteúdo ao editar a Política da Raiz Contêiner de layout. Certifique-se de que o modo Estrutura está ativo, selecione o Layout Container [Root] e toque no botão Política.

  4. Em Propriedades > Componentes permitidos pesquise WKND Mobile. Permita os seguintes componentes do grupo de componentes WKND Mobile para que possam ser usados na página da API Events.

    • WKND Mobile > Image

      • O logotipo do aplicativo
    • WKND Mobile > Text

      • O texto introdutório 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 recém- permitidos no painel esquerdo.

  7. No Localizador de Componentes no painel esquerdo, arraste os seguintes Componentes do AEM:

    1. Image para o logotipo
    2. Text para a linha de tag
    3. Content Fragment List para os eventos
  8. Para cada um dos componentes acima, selecione-os e pressione o botão ​de desbloqueio.

  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 em Admin para retornar à lista de modelos WKND Mobile. Selecione o modelo Events API recém-criado e toque em Ativar na barra de ação superior.

OBSERVAÇÃO

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 adicione ou remova arbitrariamente os componentes, pois alterar a própria API pode quebrar as suposições em torno da estrutura JSON e interromper os aplicativos de consumo. Todas as APIs precisam ser estáveis.

Próximas etapas

Como opção, instale o pacote de conteúdo com.adobe.aem.guides.wknd-mobile.content.chapter-4.zip no AEM Author por meio do Gerenciador de pacotes do AEM. Este pacote contém as configurações e o conteúdo descrito neste e nos capítulos anteriores do tutorial.

Nesta página