Capítulo 7 - Consumo de AEM Content Services desde una aplicación móvil

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

La aplicación móvil de Android

Este tutorial utiliza una aplicación móvil nativa simple de Android para consumir y mostrar el contenido de Evento expuesto por AEM Content Services.

El uso de Android no es muy importante, y la consumidora aplicación móvil podría escribirse en cualquier marco para cualquier plataforma móvil, por ejemplo iOS.

Android se utiliza para tutoriales debido a la capacidad de ejecutar un emulador de Android en Windows, macOs y Linux, su popularidad y que puede escribirse como Java, un idioma que los desarrolladores de AEM entienden bien.

La aplicación móvil de Android del tutorial ​​no pretende instruir sobre cómo crear aplicaciones móviles de Android o transmitir las prácticas recomendadas de desarrollo de Android, sino más bien ilustrar cómo se pueden consumir los servicios de contenido de AEM desde una aplicación móvil.

Cómo impulsa AEM Content Services la experiencia de la aplicación móvil

Asignación de aplicaciones móviles a servicios de contenido

  1. El logotipo tal como se define en el Events API Componente de imagen de la página.
  2. La línea de etiqueta tal como se define en el Events API componente de texto de la página.
  3. Esta lista de eventos se deriva de la serialización de los fragmentos de contenido de evento, expuestos a través del componente de lista de fragmentos de contenido configurado.

Demostración de la aplicación móvil

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

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

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

  1. Descargue e instale Android Studio para instalar el emulador de Android.
  2. ​​Descargue el APK archivo Android GitHub > Assets > wknd-mobile.x.x.xapk
  3. Abra Android Studio
    • Al iniciar Android Studio por primera vez, aparecerá un mensaje para instalar el Android SDK. Acepte los valores predeterminados y finalice la instalación.
  4. Abra Android Studio y seleccione Perfil o Depuración de APK
  5. Seleccione el archivo APK (wknd-mobile.x.x.x.apk) descargado en el paso 2 y haga clic en OK
    • Si se le solicita Crear una nueva carpeta o Usar existente, seleccione Usar existente.
  6. En el primer inicio de Android Studio, haga clic con el botón derecho en wknd-mobile.x.x.x en la lista Proyectos y seleccione Abrir configuración del módulo.
    • En Modules > wknd-mobile.x.x.x > pestaña Dependencies, seleccione Android API 29 Platform. Pulse Aceptar para cerrar y guardar los cambios.
    • Si no lo hace, verá el error "Seleccione el SDK de Android" al intentar iniciar el emulador.
  7. Abra el Administrador de AVD seleccionando Herramientas > Administrador de AVD o tocando el icono Administrador de AVD en la barra superior.
  8. En la ventana AVD Manager, haga clic en + Crear dispositivo virtual… si aún no está registrado en el dispositivo.
    1. En la parte izquierda, seleccione la categoría Phone .
    2. Seleccione un Píxel 2.
    3. Haga clic en el botón Next.
    4. Seleccione Q con Nivel de API 29.
      • Tras el primer inicio de AVD Manager, se le pedirá que descargue la API con versiones. Haga clic en el vínculo Descargar junto a la versión "Q" y complete la descarga y la instalación.
    5. Haga clic en el botón Next.
    6. Haga clic en el botón Finish.
  9. Cierre la ventana AVD Manager.
  10. En la barra de menú superior, seleccione wknd-mobile.x.x.x en la lista desplegable Ejecutar/Editar configuraciones.
  11. Pulse el botón Ejecutar situado junto a la Ejecutar/Editar configuración seleccionada
  12. En la ventana emergente, seleccione el dispositivo virtual Pixel 2 API 29 recién creado y pulse OK
  13. Si la aplicación WKND Mobile no se carga inmediatamente, busque y pulse el icono WKND en la pantalla principal de Android en el emulador.
    • Si el emulador se inicia pero la pantalla del emulador sigue siendo negra, pulse el botón power en la ventana de herramientas del emulador junto a la ventana del emulador.
    • Para desplazarse dentro del dispositivo virtual, mantenga presionada la tecla y haga clic y arrastre.
    • Para actualizar el contenido desde AEM, desplácese hacia abajo desde la parte superior hasta el icono Actualizar
      y versión.

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

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

Al cargarse, la aplicación móvil realiza HTTP GET a /content/wknd-mobile/en/api/events.model.json, que es el punto final de los servicios de contenido de AEM configurado para proporcionar el contenido que debe conducir a la aplicación móvil.

Como 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

  1. Al abrir la aplicación WKND Mobile se invoca una solicitud HTTP GET a AEM Publish en /content/wknd-mobile/en/api/events.model.json para recopilar el contenido que rellenará la interfaz de usuario de la aplicación móvil.
  2. Al recibir el contenido de AEM, cada uno de los tres elementos de vista de la aplicación móvil, el logotipo , la línea de etiqueta y la lista de eventos, se inicializan con el contenido de AEM.
    • Para enlazar el contenido de AEM al elemento de vista de la aplicación móvil, el JSON que representa cada componente de AEM, es un objeto asignado a un POJO de Java, que a su vez está enlazado al elemento Vista de Android.
      • Componente de imagen JSON → Logotipo POJO → Logo ImageView
      • Componente de texto JSON → POJO TagLine → Texto ImageView
      • Lista de fragmentos de contenido JSON → Eventos POJO → Eventos RecyclerView
    • El código de aplicación móvil puede asignar el JSON a los POJO debido a las ubicaciones conocidas dentro de la mayor respuesta JSON. Recuerde que las claves JSON de "imagen", "texto" y "contentfragmentlist" están dictadas por los nombres de nodo de los componentes de AEM de respaldo. Si cambian estos nombres de nodo, la aplicación móvil se romperá porque no sabrá cómo crear el contenido necesario a partir de los datos JSON.

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

A continuación se muestra una destilación del código en el MainActivity de la aplicación móvil responsable de invocar los servicios de contenido de AEM 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 de la aplicación móvil y registra los 3 elementos personalizados ViewBinders responsables de analizar el JSON y enlazar los valores a los View elementos.

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

Análisis de la respuesta de JSON

A continuación, veremos el LogoViewBinder, que es sencillo, pero destaca 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");
        }
    }
}

La primera línea de bind(...) baja por la respuesta JSON a través de las teclas :items → raíz → :items que representa el contenedor de diseño de AEM al que se agregaron los componentes.

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

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

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

El POJO de imagen

Aunque es opcional, el uso de Jackson ObjectMapper o capacidades similares proporcionadas por otras bibliotecas como Gson, ayuda a asignar estructuras JSON complejas a los POJO de Java sin el tedio de tratar directamente con los propios objetos JSON nativos. En este caso sencillo, asignamos la clave src del objeto image JSON al atributo src del 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 eventos, que requiere la selección de muchos más puntos de datos del objeto JSON, se beneficia de esta técnica más que la imagen simple, que todo lo que queremos es el src.

Explorar la experiencia de la aplicación móvil

Ahora que conoce cómo AEM Content Services puede impulsar la experiencia nativa de Mobile, 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, actualice la aplicación móvil y confirme la actualización a la experiencia móvil.

  1. Crear y publicar nuevo Event fragmento de contenido
  2. Cancelar la publicación de un fragmento de contenido Event existente
  3. Publicar una actualización en la Línea de etiquetas

Felicitaciones

¡Ha completado el tutorial sin encabezado de AEM!

Para obtener más información sobre los servicios de contenido de AEM y AEM as a Headless CMS, visite la documentación y otros materiales de habilitación de Adobe:

En esta página