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 Android nativo para consumir conteúdo do AEM Content Services.

O aplicativo móvel Android

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

A utilização de Android O não é importante, e o aplicativo móvel 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 emulador Android no Windows, macOs e Linux, sua popularidade e que pode ser escrito como Java, uma linguagem bem compreendida pelos desenvolvedores do AEM.

O aplicativo móvel Android do tutorial é​ não ​O objetivo era instruir como criar aplicativos móveis Android ou transmitir práticas recomendadas de desenvolvimento do Android, mas sim ilustrar como os Serviços de conteúdo AEM podem ser consumidos 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 a publicação do AEM não estiver sendo executada no http://localhost:4503 o host e a porta podem ser atualizados no campo Settings para apontar para a propriedade AEM Publish host/port.

Execução local do aplicativo móvel

O código do aplicativo móvel

Esta seção destaca o código de 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 que direciona o aplicativo móvel.

Como o modelo editável da API de eventos (/content/wknd-mobile/en/api/events.model.json) estiver bloqueado, o aplicativo móvel poderá 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 do aplicativo móvel MainActivity responsável por chamar os Serviços de conteúdo AEM para coletar o conteúdo que impulsiona 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 por analisar o JSON e vincular os valores ao View elementos.

initApp(...) em seguida, é chamado de, o que faz a solicitação HTTP GET para o ponto de acesso AEM Content Services no AEM Publish para coletar o conteúdo. Ao receber uma Resposta JSON válida, a resposta JSON é transmitida a cada ViewBinder responsável por analisar o JSON e vinculá-lo ao dispositivo móvel View elementos.

Análise da resposta JSON

Em seguida, examinaremos 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 para baixo na Resposta JSON por meio das chaves :itens → raiz → :itens que representa o Contêiner de layout AEM ao qual os componentes foram adicionados.

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

Por último, o logótipo src é carregado no ImageView do Android usando o Glide biblioteca auxiliar.

Observe que devemos fornecer o esquema, o host e a porta do AEM (via aemHost) para a instância de publicação do AEM, pois o AEM 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 opcional, a utilização do Mapeador de Objetos Jackson Para recursos semelhantes fornecidos por outras bibliotecas, como Gson, ajuda a mapear estruturas JSON complexas em POJOs Java sem o tédio de lidar diretamente com os próprios objetos JSON nativos. Neste caso simples, mapeamos o src chave do image objeto JSON, para o src no POJO de imagens diretamente através da variável @JSONProperty anotação.

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 é a 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 com o tutorial 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: