El capítulo 7 del tutorial utiliza una aplicación móvil nativa de Android para consumir contenido de AEM Content Services.
Este tutorial utiliza un aplicación móvil nativa y sencilla 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 aplicación móvil consumidora 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 AEM entienden bien.
La aplicación móvil Android del tutorial es notpensado para instruir sobre cómo crear aplicaciones móviles de Android o transmitir las prácticas recomendadas de desarrollo de Android, pero más bien para ilustrar cómo se puede consumir AEM servicios de contenido desde una aplicación móvil.
Si AEM Publish no se está ejecutando en http://localhost:4503 el host y el puerto se pueden actualizar en la aplicación móvil Settings para señalar a la propiedad host/puerto de AEM Publish.
Esta sección resalta el código de la aplicación móvil de Android que interactúa más y depende de AEM Content Services y de su salida JSON.
Al cargar, la aplicación móvil realiza HTTP GET
a /content/wknd-mobile/en/api/events.model.json
que es el punto final de AEM Content Services configurado para proporcionar el contenido que conduce la aplicación móvil.
Porque la plantilla editable de la API de eventos (/content/wknd-mobile/en/api/events.model.json
) está bloqueado, la aplicación móvil se puede codificar para buscar información específica en ubicaciones específicas en la respuesta JSON.
HTTP GET
solicitud para 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.A continuación se muestra una destilación del código en la aplicación móvil MainActivity
responsable de invocar AEM Content Services para recopilar el contenido que impulsa la experiencia de 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 ViewBinders
responsable de analizar el JSON y enlazar los valores a la variable View
elementos.
initApp(...)
a continuación, se llama a , lo que hace que la solicitud de GET HTTP 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
que es responsable de analizar el JSON y vincularlo al móvil View
elementos.
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 claves :items → raíz → :items que representa el contenedor de diseño de AEM al que se agregaron los componentes.
A partir de 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 vía el Jackson ObjectMapper
biblioteca. La imagen POJO es explorada a continuación.
Finalmente, el logotipo src
se carga en ImageView de Android usando la variable Glide biblioteca de ayuda.
Tenga en cuenta que debemos proporcionar el esquema de AEM, host y puerto (mediante aemHost
) a la instancia de AEM Publish, ya que AEM Content Services solo proporcionará la ruta JCR (es decir, /content/dam/wknd-mobile/images/wknd-logo.png
) al contenido al que se hace referencia.
Aunque es opcional, el uso de la variable Jackson ObjectMapper o funciones similares proporcionadas por otras bibliotecas como Gson, ayudan a asignar estructuras JSON complejas a los POJO de Java sin el tedio de tratar directamente con los propios objetos JSON nativos. En este simple caso, asignamos la variable src
de la variable image
objeto JSON, para src
en el POJO de imagen directamente a través del @JSONProperty
anotación.
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 la src
.
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.
¡Ha completado el tutorial AEM sin encabezado!
Para obtener más información sobre AEM Content Services y AEM as a Headless CMS, visite la documentación y otros materiales de habilitación de Adobe: