Capítulo 7 - Consumo AEM Content Services a partir de um aplicativo móvel

O Capítulo 7 do tutorial usa um aplicativo móvel Android nativo para consumir conteúdo AEM Content Services.

O aplicativo móvel do Android

Este tutorial usa um aplicativo móvel Android nativo simples para consumir e exibir o conteúdo do evento exposto pelos Serviços de conteúdo AEM.

O uso do Android é pouco importante e o aplicativo móvel que está sendo consumido pode ser gravado em qualquer estrutura para qualquer plataforma móvel, por exemplo, iOS.

O Android é usado para tutorial devido à capacidade de executar um Emulador Android no Windows, macOs e Linux, sua popularidade e por ser gravado como Java, uma linguagem bem compreendida pelos desenvolvedores AEM.

O aplicativo móvel Android do tutorial ​não tem como objetivo instruir como criar aplicativos móveis Android ou transmitir práticas recomendadas de desenvolvimento do Android, mas ilustrar como os serviços de conteúdo AEM podem ser consumidos de um aplicativo móvel.

Como AEM os Content Services conduzem a experiência do aplicativo móvel

Mapeamento de aplicativos móveis para serviços de conteúdo

  1. O logotipo ​conforme definido pelo Events API componente de imagem da página.
  2. A linha de tag conforme definido no Events API componente de Texto da página.
  3. Essa Lista de eventos é derivada da serialização dos Fragmentos de conteúdo do evento, expostos por meio do componente Lista de fragmentos de conteúdo configurado.

Demonstração do aplicativo móvel

Configuração do aplicativo móvel para uso não local

Se AEM Publish não estiver sendo executado em http://localhost:4503 o host e a porta podem ser atualizados no Settings do Aplicativo móvel para apontar para a propriedade Host/porta de publicação do AEM.

Execução do aplicativo móvel localmente

  1. Baixe e instale o Android Studio para instalar o Emulador do Android.
  2. ​Baixe o APK arquivo Android GitHub > Assets > wknd-mobile.x.x.xapk
  3. Abra Android Studio
    • Na primeira inicialização do Android Studio, um prompt para instalar o Android SDK aparecerá. Aceite os padrões e conclua a instalação.
  4. Abra o Android Studio e selecione Profile ou Debug APK
  5. Selecione o arquivo APK (wknd-mobile.x.x.apk) baixado na Etapa 2 e clique em OK
    • Se solicitado a Criar uma nova pasta ou Usar existente, selecione Usar existente.
  6. Na primeira inicialização do Android Studio, clique com o botão direito do mouse em wknd-mobile.x.x na lista Projetos e selecione Abrir configurações do módulo.
    • Em Modules > wknd-mobile.x.x > guia Dependências, selecione Plataforma Android API 29. Toque em OK para fechar e salvar as alterações.
    • Se não fizer isso, você verá um erro "Selecione Android SDK" ao tentar iniciar o emulador.
  7. Abra o Gerenciador AVD selecionando Ferramentas > Gerenciador AVD ou tocando no ícone Gerenciador AVD na barra superior.
  8. Na janela AVD Manager, clique em + Criar Dispositivo Virtual… se você ainda não tiver um dispositivo registrado.
    1. À esquerda, selecione a categoria Telefone.
    2. Selecione um Pixel 2.
    3. Clique no botão Next.
    4. Selecione Q com Nível de API 29.
      • Na primeira inicialização do AVD Manager, você será solicitado a Baixar a API com versão. Clique no link Download ao lado da versão "Q" e conclua o download e a instalação.
    5. Clique no botão Next.
    6. Clique no botão Finish.
  9. Feche a janela AVD Manager.
  10. Na barra de menu superior, selecione wknd-mobile.x.x no menu suspenso Executar/Editar configurações.
  11. Toque no botão Executar ao lado do Executar/Editar Configuração selecionado
  12. Na janela pop-up, selecione o dispositivo virtual Pixel 2 API 29 recém-criado e toque em OK
  13. Se o aplicativo WKND Mobile não carregar imediatamente, encontre e toque no ícone WKND na tela inicial do Android no emulador.
    • Se o emulador for iniciado, mas a tela do emulador permanecer preta, toque no botão power na janela de ferramentas do emulador, ao lado da janela do emulador.
    • Para rolar dentro do dispositivo virtual, clique e segure e arraste.
    • Para atualizar o conteúdo do AEM, puxe para baixo a partir da parte superior até o ícone Atualizar
      e versão.

O código do aplicativo móvel

Esta seção destaca o código do aplicativo móvel do Android que mais interage e depende AEM Content Services e da saída JSON.

Após a carga, o Aplicativo móvel faz HTTP GET para /content/wknd-mobile/en/api/events.model.json, que é o ponto final do AEM Content Services configurado para fornecer o conteúdo para direcionar o Aplicativo móvel.

Como o Modelo editável da API de eventos (/content/wknd-mobile/en/api/events.model.json) está bloqueado, o Aplicativo móvel pode ser codificado para procurar informações específicas em locais específicos na resposta JSON.

Fluxo de código de alto nível

  1. Abrir o WKND Mobile aplicativo chama uma solicitação HTTP GET para a Publicação do AEM em /content/wknd-mobile/en/api/events.model.json para coletar o conteúdo e preencher a interface do usuário do aplicativo móvel.
  2. Ao receber o conteúdo do AEM, cada um dos três elementos de visualização do Aplicativo móvel, o logotipo , a linha de tag e a lista de eventos, são inicializados com o conteúdo do AEM.
    • Para se vincular ao conteúdo AEM ao elemento de exibição do aplicativo móvel, o JSON que representa cada componente AEM é um objeto mapeado para um Java POJO, que, por sua vez, é vinculado ao elemento de Exibição do Android.
      • Componente de imagem JSON → POJO de logotipo → Imagem do logotipo
      • Componente de texto JSON → TagLine POJO → ImageView de texto
      • Lista de fragmentos de conteúdo JSON → Eventos POJO >Visualização de eventos
    • O código do aplicativo móvel pode mapear o JSON para os POJOs devido aos locais conhecidos na maior resposta JSON. Lembre-se, as chaves JSON de "imagem", "texto" e "contentfragmentlist" são ditadas pelo backup AEM nomes de nó dos Componentes. Se esses nomes de nó forem alterados, o Aplicativo móvel será interrompido, pois não saberá como extrair o conteúdo necessário dos dados JSON.

Chamar o ponto final dos serviços de conteúdo AEM

A seguir encontra-se uma destilação do código no MainActivity do Aplicativo Móvel responsável por chamar AEM Content Services para coletar o conteúdo que move a experiência do Aplicativo Móvel.

protected void onCreate(Bundle savedInstanceState) {
    ...
    // Create the custom objects that will map the JSON -> POJO -> View elements
    final List<ViewBinder> viewBinders = new ArrayList<>();

    viewBinders.add(new LogoViewBinder(this, getAemHost(), (ImageView) findViewById(R.id.logo)));
    viewBinders.add(new TagLineViewBinder(this, (TextView) findViewById(R.id.tagLine)));
    viewBinders.add(new EventsViewBinder(this, getAemHost(), (RecyclerView) findViewById(R.id.eventsList)));
    ...
    initApp(viewBinders);
}

private void initApp(final List<ViewBinder> viewBinders) {
    final String aemUrl = getAemUrl(); // -> http://localhost:4503/content/wknd-mobile/en/api/events.mobile.json
    JsonObjectRequest request = new JsonObjectRequest(aemUrl, null,
        new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                for (final ViewBinder viewBinder : viewBinders) {
                    viewBinder.bind(response);
                }
            }
        },
        ...
    );
}

onCreate(..) é o gancho de inicialização do aplicativo móvel e registra o 3 personalizado ViewBinders responsável pela análise do JSON e pelo vínculo dos valores aos View elementos.

initApp(...) é chamada de , que faz com que a solicitação HTTP GET para o ponto final AEM Content Services na AEM Publish colete o conteúdo. Ao receber uma Resposta JSON válida, a resposta JSON é passada para cada ViewBinder que é responsável por analisar o JSON e vinculá-lo aos elementos móveis View.

Análise da resposta JSON

Em seguida, analisaremos o LogoViewBinder, que é simples, mas destaca várias considerações importantes.

public class LogoViewBinder implements ViewBinder {
    ...
    public void bind(JSONObject jsonResponse) throws JSONException, IOException {
        final JSONObject components = jsonResponse.getJSONObject(":items").getJSONObject("root").getJSONObject(":items");

        if (components.has("image")) {
            final Image image = objectMapper.readValue(components.getJSONObject("image").toString(), Image.class);

            final String imageUrl = aemHost + image.getSrc();
            Glide.with(context).load(imageUrl).into(logo);
        } else {
            Log.d("WKND", "Missing Logo");
        }
    }
}

A primeira linha de bind(...) navega até a Resposta JSON por meio das chaves :items → root → items que representa o Contêiner de layout de AEM ao qual os componentes foram adicionados.

Aqui é feita uma verificação para uma chave chamada image, que representa o componente Imagem (novamente, é importante esse nome de nó → A chave JSON é estável). Se esse objeto existir, ele será lido e mapeado para o POJO de imagem personalizado por meio da biblioteca Jackson ObjectMapper. O Image POJO é explorado abaixo.

Por fim, o logotipo src é carregado na ImageView do Android usando a biblioteca auxiliar Glide.

Observe que devemos fornecer o esquema de AEM, o host e a porta (via aemHost) para a instância de publicação do AEM, pois AEM Content Services fornecerá apenas o caminho JCR (ou seja, /content/dam/wknd-mobile/images/wknd-logo.png) ao conteúdo referenciado.

A imagem POJO

Embora seja opcional, o uso do Jackson ObjectMapper ou recursos semelhantes fornecidos por outras bibliotecas como Gson ajuda a mapear estruturas JSON complexas para POJOs Java sem o tédio de lidar diretamente com os próprios objetos JSON nativos. Nesse caso simples, mapeamos a chave src do objeto JSON image para o atributo src no POJO da imagem diretamente por meio da anotação @JSONProperty.

package com.adobe.aem.guides.wknd.mobile.android.models;

import com.fasterxml.jackson.annotation.JsonProperty;

public class Image {
    @JsonProperty(value = "src")
    private String src;

    public String getSrc() {
        return src;
    }
}

O POJO do evento, que requer selecionar muito mais pontos de dados do objeto JSON, se beneficia dessa técnica mais do que a Imagem simples, que tudo o que queremos é o src.

Explore a experiência do aplicativo móvel

Agora que você tem uma ideia de como AEM Content Services pode conduzir uma experiência móvel nativa, use o que você aprendeu para executar as seguintes etapas e ver suas alterações refletidas no aplicativo móvel.

Após cada etapa, atualize o Aplicativo móvel e verifique a atualização da experiência móvel.

  1. Criar e publicar novo Event Fragmento de conteúdo
  2. Cancelar a publicação de um Fragmento de conteúdo Event existente
  3. Publicar uma atualização para a Linha de Tag

Parabéns

Você concluiu com o tutorial AEM Headless!

Para saber mais sobre os Serviços de conteúdo e o AEM como um CMS sem cabeçalho, visite a documentação do Adobe e os materiais de ativação:

Nesta página