AEM Capítulo 7: Consumo de servicios de contenido desde una aplicación móvil (en inglés)

El capítulo 7 del tutorial utiliza una aplicación móvil nativa de Android AEM para consumir contenido de los servicios de contenido de la.

La aplicación móvil de Android

Este tutorial usa una aplicación nativa simple de Android AEM Mobile para consumir y mostrar el contenido de eventos expuesto por los servicios de contenido de la aplicación de.

El uso de Android no es muy importante, y la aplicación móvil que la consume se puede escribir en cualquier módulo para cualquier plataforma móvil, por ejemplo, iOS.

Android se utiliza para el tutorial debido a la capacidad de ejecutar un Android AEM Emulator en Windows, macOs y Linux, su popularidad y que puede escribirse como Java, un lenguaje bien entendido por los desarrolladores de.

La aplicación móvil de Android del tutorial no está ​pensada para indicar cómo generar aplicaciones móviles de Android o transmitir las prácticas recomendadas de desarrollo de Android AEM, sino para ilustrar cómo se pueden consumir los servicios de contenido de la aplicación móvil.

AEM Cómo impulsan los servicios de contenido la experiencia de la aplicación móvil

Demostración de aplicaciones móviles

Configuración de la aplicación móvil para un uso de host no local

AEM Si Publish AEM no se está ejecutando en http://localhost:4503, el host y el puerto se pueden actualizar en Settings de la aplicación móvil para que apunten a la propiedad host/puerto de Publish.

Ejecución local de la aplicación móvil

El código de la aplicación móvil

En esta sección se destaca el código de la aplicación móvil de Android AEM que más interactúa y depende de los servicios de contenido de la aplicación y de su salida JSON.

AEM Tras la carga, la aplicación móvil realiza HTTP GET en /content/wknd-mobile/en/api/events.model.json, que es el extremo de Content Services configurado para proporcionar contenido que dirija la aplicación móvil.

Debido a que la plantilla editable de la API de eventos (/content/wknd-mobile/en/api/events.model.json) está bloqueada, la aplicación móvil se puede codificar para buscar información específica en ubicaciones específicas en la respuesta JSON.

Flujo de código de alto nivel

AEM Invocación del punto final de servicios de contenido de

AEM A continuación se muestra una destilación del código de MainActivity de la aplicación móvil responsable de invocar los servicios de contenido de la aplicación para recopilar el contenido que impulsa la experiencia de la aplicación móvil.

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(..) es el vínculo de inicialización para la aplicación móvil y registra a los 3 ViewBinders personalizados responsables de analizar el JSON y enlazar los valores a los elementos View.

A continuación, se llama a initApp(...), que realiza la solicitud de GET AEM AEM HTTP al punto final de los servicios de contenido de la en la interfaz de usuario de Publish para recopilar el contenido de la aplicación. Al recibir una respuesta JSON válida, la respuesta JSON se pasa a cada ViewBinder responsable de analizar el JSON y enlazarlo a los elementos móviles View.

Análisis de la respuesta JSON

A continuación veremos LogoViewBinder, que es simple, pero resalta varias consideraciones 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");
        }
    }
}

AEM La primera línea de bind(...) navega hacia abajo en la respuesta JSON a través de las claves :items → root → :items, que representa el contenedor de diseño de la al que se agregaron los componentes.

Desde aquí se realiza una comprobación de una clave denominada image, que representa el componente de imagen (de nuevo, es importante que este nombre de nodo → clave JSON sea estable). Si este objeto existe, se leerá y se asignará al POJO de imagen personalizado a través de la biblioteca Jackson ObjectMapper. El POJO de imagen se explora a continuación.

Por último, src del logotipo se carga en Android ImageView mediante la biblioteca de ayuda Glide.

AEM AEM Tenga en cuenta que debemos proporcionar el esquema, el host y el puerto de la (a través de aemHost) a la instancia de Publish AEM, ya que los servicios de contenido solo proporcionarán la ruta JCR (es decir, los servicios de contenido). /content/dam/wknd-mobile/images/wknd-logo.png) al contenido referenciado.

El POJO de imagen image-pojo

Aunque es opcional, el uso de Jackson ObjectMapper o capacidades similares proporcionadas por otras bibliotecas, como Gson, ayuda a asignar estructuras JSON complejas a POJO de Java sin el tedio de tratar directamente con los propios objetos JSON nativos. En este caso simple, asignamos la clave src desde el objeto JSON image al atributo src en el POJO de imagen directamente a través de la anotación @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;
    }
}

El POJO de evento, que requiere la selección de muchos más puntos de datos del objeto JSON, se beneficia de esta técnica más que de la imagen simple, que solo queremos que sea src.

Explorar la experiencia de la aplicación móvil

AEM Ahora que comprende cómo los servicios de contenido de pueden impulsar la experiencia nativa en dispositivos móviles, utilice lo que ha aprendido para realizar los siguientes pasos y ver los cambios reflejados en la aplicación móvil.

Después de cada paso, tire de la aplicación móvil para actualizarla y verifique la actualización de la experiencia móvil.

Felicitaciones

AEM Ha completado el tutorial sin encabezado de la aplicación de la aplicación de la aplicación de la aplicación de seguridad de!

AEM AEM Para obtener más información acerca de los servicios de contenido de la y la configuración de un CMS sin encabezado, visite otra documentación y materiales de habilitación de Adobe: