Capítulo 7 - Consumir serviços de conteúdo de AEM de um aplicativo móvel

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

O aplicativo móvel do Android

Este tutorial usa um aplicativo simples nativo para dispositivos móveis do Android a fim de consumir e exibir o conteúdo do Evento exposto pelo AEM Content Services.

O uso do Android não é muito importante, e o aplicativo para dispositivos móveis de consumo pode ser escrito em qualquer estrutura para qualquer plataforma móvel, por exemplo, iOS.

O Android é usado como tutorial devido à capacidade de executar um Android Emulator no Windows, macOs e Linux, sua popularidade e que pode ser escrito como Java, uma linguagem bem compreendida pelos desenvolvedores do AEM.

O objetivo do tutorial para o aplicativo móvel do Android é​ não ​instruir como criar aplicativos do Android Mobile ou transmitir práticas recomendadas de desenvolvimento do Android AEM, mas sim ilustrar como o Content Services pode ser consumido de um aplicativo móvel.

Como o AEM Content Services orienta a experiência do aplicativo móvel

Demonstração do aplicativo móvel

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

Se o AEM Publish não estiver sendo executado em http://localhost:4503, o host e a porta poderão ser atualizados no Settings do Aplicativo Móvel para apontar para a propriedade AEM host/porta do Publish.

Execução local do aplicativo móvel

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 do AEM Content Services e da saída JSON.

Após o carregamento, o Aplicativo Móvel faz HTTP GET para /content/wknd-mobile/en/api/events.model.json, que é o ponto de acesso 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

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

Veja a seguir uma destilação do código no MainActivity do aplicativo móvel responsável por invocar o AEM Content Services para coletar o conteúdo que orienta 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 os três ViewBinders personalizados responsáveis pela análise do JSON e pela associação dos valores aos elementos View.

initApp(...) é então chamado, o que faz a solicitação HTTP GET para o ponto de acesso AEM Content Services no Publish AEM para coletar 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 associá-lo aos elementos View móveis.

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 pela Resposta JSON por meio das chaves :items → root → :items, que representa o Contêiner de Layout AEM ao qual os componentes foram adicionados.

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

Finalmente, o src do logotipo é carregado no ImageView do Android usando a biblioteca auxiliar Glide.

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

O POJO de imagem image-pojo

Embora seja opcional, o uso do Jackson ObjectMapper ou de recursos semelhantes fornecidos por outras bibliotecas, como o Gson, ajuda a mapear estruturas JSON complexas em 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 de 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 de Evento, que requer a seleção de 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ê entende como os Serviços de conteúdo para AEM podem impulsionar a experiência nativa em dispositivos móveis, use o que você aprendeu para executar as etapas a seguir e ver suas alterações refletidas no aplicativo móvel.

Após cada etapa, puxe para atualizar o aplicativo móvel e verifique a atualização da experiência móvel.

Parabéns

Você concluiu o tutorial sobre AEM Headless!

Para saber mais sobre o AEM Content Services e o AEM as a Headless CMS, visite Adobe outra documentação e materiais de ativação: