Creación de una galería de imágenes en Java para Android con Oracle Content Management desacoplado

Introducción

El entorno de desarrollo Android que utiliza Java o Kotlin puede ser una potente herramienta para crear aplicaciones que consumen contenido de Oracle Content Management. Armado con el modelo de contenido adecuado, puede crear rápidamente la interfaz de usuario de Android que compone una galería de imágenes típica.

En este tutorial, crearemos una aplicación de galería de imágenes sencilla para Android con Java aprovechando Oracle Content Management como CMS horizontal. Este ejemplo de Android está disponible en GitHub. El tutorial incluye tres pasos:

Preparación de Oracle Content Management
Crear la galería de imágenes en Android Studio
Ejecución de la aplicación

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

Para seguir este tutorial, necesitará:

una suscripción a Oracle Content Management
una cuenta de Oracle Content Management con el rol de administrador de contenido
una computadora Windows o Mac con herramientas Android configuradas
conocimiento existente de la programación Java y Android, ya que este tutorial asume que ya está familiarizado con los conceptos comunes de desarrollo de Android mediante Java

Lo que estamos construyendo

Nuestra galería de imágenes estará compuesta por varias páginas de imágenes de alimentos y bebidas disponibles en una cafetería.

Esta imagen muestra la demostración de la galería, profundizando en la categoría de alimentos de desayuno con diferentes tipos de bagels, algunos con crema o ingredientes, o ambos.

Las categorías son nodos secundarios de una taxonomía y se pueden organizar en jerarquías. Para nuestra galería de imágenes, queremos mostrar todas las categorías disponibles independientemente de la organización. Para ello, primero debemos buscar las taxonomías disponibles, que hacemos con la clase GetTaxonomiesRequest de la biblioteca de Oracle Content Management para configurar y realizar la solicitud.

Nota: La implantación de GetTaxonomiesRequest utiliza el recurso de API de REST GET /published/api/v1.1/taxonomies.

Para cada taxonomía encontrada, obtenemos su conjunto de categorías. Para ello, se utiliza la clase GetTaxonomyCategoriesRequest de la biblioteca de Oracle Content Management.

Nota: La implantación de GetTaxonomyCategoriesRequest utiliza GET de API de REST /published/api/v1.1/taxonomies/{id}/categories.

Para cada categoría de taxonomía devuelta, se muestra una vista previa que consta del nombre de la categoría, el número de imágenes de la categoría y las representaciones en miniatura de las cuatro primeras imágenes.

Esta imagen muestra imágenes en la categoría Desayuno.

Nota: Además de publicar los activos digitales que deseamos ver, también debe publicar las taxonomías en el canal.

Para continuar, deberá tener una suscripción activa a Oracle Content Management y conectarse con el rol de administrador de contenido.

Paso 1: Preparación de Oracle Content Management

Este tutorial se basa en la suposición de que ha creado el repositorio de activos y actualmente tiene un modelo de contenido vacío (es decir, no se ha creado ningún tipo de contenido).

Si aún no tiene una instancia de Oracle Content Management, consulte el inicio rápido para obtener información sobre cómo registrarse en Oracle Cloud, aprovisionar una instancia de Oracle Content Management y configurar Oracle Content Management como CMS sin cabecera.

Para este tutorial, tendrá que crear un modelo de contenido de dos formas. Hay un paquete de activos descargable disponible que rellenará su repositorio vacío con tipos de contenido y contenido asociado, o bien puede crear su propio modelo de contenido y contenido.

Para preparar Oracle Content Management:

Cree un canal y un repositorio de activos.
Importar el paquete de activos de muestras de Oracle Content Management
Cargue sus propios activos de imagen
Crear taxonomías y enlazarlas a activos de imagen

Creación de un canal y un repositorio de activos

Primero debe crear un canal y un repositorio de activos en Oracle Content Management para poder publicar contenido.

Para crear un canal y un repositorio de activos en Oracle Content Management:

Conéctese a la interfaz web de Oracle Content Management como administrador.
Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Canales de publicación en la lista de selección de la cabecera de página.
En la esquina superior derecha, haga clic en Crear para crear un nuevo canal. Asigne el nombre 'OCEImageGalleryChannel' al canal para este tutorial y mantenga el acceso público. Haga clic en Guardar para crear el canal.
Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Repositorios en la lista de selección de la cabecera de página.
En la esquina superior derecha, haga clic en Crear para crear un nuevo repositorio de activos. Asigne el nombre 'OCEImageGalleryRepository' al repositorio de activos para este tutorial.
En el campo Canales de publicación, seleccione OCEImageGalleryChannel para indicar a Oracle Content Management que el contenido del repositorio OCEImageGalleryRepository se puede publicar en el canal OCEImageGalleryChannel. Haga clic en Guardar cuando termine.

Importar el paquete de activos de muestras de Oracle Content Management

Puede descargar un paquete de activos de ejemplo de Oracle Content Management preconfigurado que contiene todos los tipos de contenido y activos necesarios para este tutorial.

Puede cargar una copia del contenido que estamos utilizando en este tutorial desde el paquete de activos de muestras de Oracle Content Management. Esto le permitirá experimentar con los tipos de contenido y modificar el contenido. Descargue el archivo de paquete de activos, OCESamplesAssetPack.zip, y extráigalo en el directorio que desee:

Descargue el paquete de activos de muestras de Oracle Content Management (OCESamplesAssetPack.zip) desde la página descargas de Oracle Content Management. Extraiga el archivo zip descargado en una ubicación de la computadora. Después de la extracción, esta ubicación incluirá un archivo denominado OCEImageGallery_data.zip.
Conéctese a la interfaz web de Oracle Content Management como administrador.
Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Repositorios en la lista de selección de la cabecera de página. A continuación, seleccione OCEImageGalleryRepository y haga clic en el botón Importar contenido en la barra de acción superior.
Cargue OCEImageGallery_data.zip desde la computadora local en la carpeta Documentos.
Una vez cargado, seleccione OCEImageGallery_data.zip y haga clic en Aceptar para importar el contenido en el repositorio de activos.
Una vez que el contenido se haya importado correctamente, navegue a la página Activos y abra el repositorio OCEImageGalleryRepository. Verá que todas las imágenes y elementos de contenido relacionados se han agregado al repositorio de activos.
Haga clic en Seleccionar todo en la parte superior izquierda y, a continuación, en Publicar para agregar todos los activos importados al canal de publicación que ha creado anteriormente, OCEImageGalleryChannel.
Antes de publicar, debe validar todos los activos. En primer lugar, agregue OCEImageGalleryChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.
Después de validar los activos, publique todos los activos en el canal seleccionado haciendo clic en el botón Publicar en la esquina superior derecha.

Una vez hecho esto, puede ver en la página Activos que todos los activos se han publicado. (Puede hacerlo mediante el icono situado encima del nombre del activo).

En esta imagen se muestra la página Activos, con todos los activos almacenados.

Después de importar el paquete de activos de muestras de Oracle Content Management, puede empezar a crear la galería de imágenes en Android Studio.

Cargue sus propios activos de imagen

Para este tutorial, estamos utilizando un repositorio de activos denominado 'OCEImageGalleryRepository' para crear la página inicial de nuestro sitio de galería. Esta página de inicio consta del título 'Image Gallery' así como álbumes de recopilación de imágenes que tienen activos de imagen dentro.

Esta imagen muestra la página de inicio para la galería de imágenes, con imágenes de varias categorías de imágenes: sándwiches, bebidas, postre, desayuno y comida.

Para agregar activos de imagen al repositorio de activos de galería:

Inicie sesión en la interfaz web de Oracle Content Management.
Haga clic en Activos en el menú de navegación de la izquierda.
Abra el repositorio OCEImageGalleryRepository.
Haga clic en Agregar en la esquina superior derecha de la página para agregar activos de imagen al repositorio de activos de galería.
Cargue sus propios activos nuevos desde la computadora local o seleccione los activos existentes que ya están en Oracle Content Management.

Crear taxonomías y enlazarlas a activos de imagen

Debe crear una taxonomía en Oracle Content Management y, a continuación, asignar categorías a los activos del repositorio.

Para crear una taxonomía en Oracle Content Management:

Conéctese a la interfaz web de Oracle Content Management como administrador.
Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Taxonomías en la lista de selección de la cabecera de página.
En la esquina superior derecha, haga clic en Crear para crear una nueva taxonomía. Asigne el nombre 'OCEImageGalleryTaxonomy' al canal para este tutorial.
Haga clic en Crear.
Ahora puede agregar categorías para crear la taxonomía. Haga clic en Agregar una categoría.
Asigne al elemento de categoría principal el nombre "Alimento" y agregue las siguientes categorías secundarias:
- desayuno
- Postre
- Tragos
- Sandwiches
Haga clic en Done (Listo) en la parte superior derecha de la pantalla.
En la página Taxonomías, seleccione la taxonomía OCEImageGalleryTaxonomy y haga clic en Ascender en la barra de acciones para que esté disponible para su uso en los repositorios de activos.

A continuación, edite el repositorio OCEImageGalleryRepository para activar la taxonomía OCEImageGalleryTaxonomy para ese repositorio:

Conéctese a la interfaz web de Oracle Content Management como administrador.
Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Repositorios en la lista de selección de la cabecera de página.
Seleccione y edite el repositorio OCEImageGalleryRepository.
En el campo Taxonomías, seleccione OCEImageGalleryTaxonomy para que pueda asignar categorías de esa taxonomía a los activos del repositorio OCEImageGalleryRepository.
Haga clic en Guardar.

A continuación, asigne categorías de taxonomía a cada uno de los activos de imagen del repositorio OCEImageGalleryRepository:

Inicie sesión en la interfaz web de Oracle Content Management.
Haga clic en Activos en el menú de navegación de la izquierda.
Abra el repositorio OCEImageGalleryRepository.
Seleccione uno o más activos de imagen, haga clic en Más en la barra de acciones y, a continuación, seleccione Categorías en el menú.
En el panel Categorías, haga clic en Agregar categoría. Busque el nombre de categoría en la barra de búsqueda o seleccione una categoría de la estructura jerárquica de taxonomía y haga clic en Agregar para asignar la categoría seleccionada. Puede asignar varias categorías a un activo.
Cuando haya terminado de asignar taxonomías a todos los activos de imagen, seleccione todos los activos del repositorio y publíquelos en el canal OCEImageGalleryChannel.

Paso 2: Crear la galería de imágenes en Android Studio

Para consumir nuestro contenido de Oracle Content Management en la aplicación Android, podemos utilizar el ejemplo de galería de imágenes de Android, que está disponible como repositorio de código abierto en GitHub.

Nota: Recuerde que el uso del ejemplo de Android es opcional y lo usamos en este tutorial para comenzar rápidamente. También puede crear su propia aplicación.

Para crear la galería de imágenes en Android Studio:

Clonar el repositorio de ejemplo, SDK de Android y publicar el SDK localmente
Abrir la muestra de Android en Android Studio
Usar la API de REST de Oracle Content Management para recuperar contenido

Clonar el repositorio de ejemplo, el SDK de Android y publicar el SDK localmente

El ejemplo de galería de Android está disponible como un repositorio de código abierto en GitHub.

Primero deberá clonar el ejemplo de GitHub en la computadora local, así como el SDK de Android de GitHub si aún no lo ha hecho.

Una vez que tenga su código de ejemplo y el SDK, para poder utilizar el SDK de Android en el proyecto de ejemplo, debe crear y publicar el SDK en el repositorio de Maven local para que el proyecto de ejemplo lo pueda consumir. Abra el proyecto SDK de Android en Android Studio y ejecute la tarea publishToMavenLocal para crear y publicar el SDK en el repositorio de Maven local.

Abrir la muestra de Android en Android Studio

Al igual que con cualquier aplicación Android, tendrá que importarlo a Android Studio para que pueda crearlo y ejecutarlo desde allí en un emulador o dispositivo Android. El código de ejemplo ya está preconfigurado con el servidor y el canal de publicación que se utilizan para obtener datos para la aplicación de galería.

Uso de la API de REST de Oracle Content Management para recuperar contenido

La API de REST para Content Delivery proporciona acceso a activos publicados en Oracle Content Management. Los activos publicados incluyen elementos de contenido y activos digitales, así como sus representaciones. Ahora podemos aprovechar la API de REST para Content Management para recuperar contenido para que podamos presentarlo en nuestra aplicación de galería.

El archivo src/.../samples/gallery/MainActivity.java tiene una función para crear el objeto ContentDeliveryClient, que utilizan los objetos de solicitud para realizar llamadas a la API de REST. La siguiente función es una versión simplificada de la función de la aplicación de ejemplo que muestra los valores que se están utilizando.

void createDeliveryClient() {

    // inti and customize the SDK settings
    ContentSettings contentSettings = new ContentSettings();
   
    // initialize the cache settings (optional configured via settings in sample)
    contentSettings.setCacheSettings(new CacheSettings(context.getCacheDir()));

    // set the host and channel token
    String channelToken = "e0b7b1e6421e78189345448deaddb091";
    String host = "https://headless.mycontentdemo.com";

    // create client API we'll use in request objects to make SDK calls
    deliveryClient = ContentSDK.createDeliveryClient(
            host, channelToken, contentSettings);
}

Solicitar datos de la página inicial mediante el SDK de Oracle Content

Nota: La secuencia de llamadas de SDK para la página inicial inicial está en GalleryHomePageRepository.java.

La página inicial requiere varias llamadas de datos para que la página pueda mostrarse correctamente:

En primer lugar, cargamos las taxonomías para el token de canal suministrado anteriormente.
Para cada taxonomía devuelta, obtenemos todas las categorías de esa taxonomía.
Para cada categoría devuelta, obtenemos la lista de activos de esa categoría.
Se descargan las URL de imagen para las representaciones en miniatura y de medio para los cuatro primeros elementos de cada categoría.

En esta imagen se muestra la lista de categorías de taxonomía con vistas previas de los primeros 4 activos de cada categoría.

El punto de entrada para la recuperación de datos inicial es el método fetchHomePageData() en GalleryHomePageRepository.java. Este método ejecutará una serie de llamadas de SDK síncronas en un thread independiente y, a continuación, devolverá el resultado de forma asíncrona mediante una devolución de llamada.

Los datos de taxonomías inciales se recuperan mediante la clase GetTaxonomiesRequest y el método fetch() como se muestra a continuación.

// create request to get list of taxonomies, limiting the number of results to 10 max
GetTaxonomiesRequest request = new GetTaxonomiesRequest(deliveryClient).limit(10);

// get the list of taxonomies synchronously 
ContentResponse<TaxonomyList> response = request.fetch();

Tenga en cuenta que todas las API utilizan el patrón de creación de un objeto de solicitud con el objeto ContentDeliveryClient como parámetro.

El método de creador limit(<value>) está disponible porque GetTaxonomiesRequest amplía la clase PaginatedListRequest común utilizada para cualquier solicitud que obtenga una lista de datos.

Aquí utilizamos request.fetch() porque ya hemos creado un thread independiente para realizar varias llamadas de SDK en secuencia. En otra sección hay un ejemplo del uso de una llamada de SDK asíncrona.

Una vez que nuestra solicitud se haya completado correctamente, recuperaremos un objeto de tipo ContentResponse<TaxonomyList>. Si response.isSuccess() es true, la lista de taxonomías TaxonomyList procede del método getResult().

A continuación, debemos obtener una lista de las categorías de taxonomía disponibles. Seguimos en el thread independiente que creamos para las llamadas de SDK, por lo que la siguiente llamada también es una llamada síncrona para obtener la lista de categorías de taxonomía basadas en el ID de taxonomía.

// get list of taxonomy categories based on the taxonomy id
GetTaxonomyCategoriesRequest categoriesRequest = 
    new GetTaxonomyCategoriesRequest(deliveryClient, taxonomy.getId());

// get list synchronously
ContentResponse<TaxonomyCategoryList> response = categoriesRequest.fetch();

// get the list from the response (assuming successful)
TaxonomyCategoryList categoryList.getItems = response.getResult();

Para cada categoría, debemos seguir el mismo proceso general para obtener la lista de activos asociados a la categoría realizando una solicitud de búsqueda para buscar activos coincidentes para el ID de nodo de categoría.

// go through each category to get list of assets for that category
for(TaxonomyCategory category : categoryList.getItems()) {

    // setup search request to match "Image" type and the category node id
    SearchAssetsRequest assetsRequest = new SearchAssetsRequest(deliveryClient)
            .type(AssetType.TYPE_ASSET_IMAGE)
            .taxonomyCategoryNodeId(category.getId());

    // synchronous request to get matching assets
    ContentResponse<AssetSearchResult> searchResponse = assetsRequest.fetch();

    // search result from the response
    AssetSearchResult searchResult = searchResponse.getResult();

    // get the list of digital assets
    List<DigitalAsset> digitalAssetList = searchResult.getDigitalAssets();

}

Por último, para cada uno de los cuatro primeros activos de una categoría, generaremos la URL para descargar la representación del medio para la imagen grande y la representación en miniatura para las tres imágenes más pequeñas.

La URL se puede utilizar para representar la imagen mediante la biblioteca de imágenes de Android preferida, pero el ejemplo utiliza la biblioteca de código abierto común Glide.

// (the sample code verifies that there are at least 4 images in the list)
// get the medimum rendition image url for the first main image from the list.
String mainImageUrl = digitialAssetList.get(0).getRenditionUrl(RenditionType.Medium);

// example code using Glide to render the main image into an ImageView
Glide.with(context).load(mainImageUrl).into(mainImageView);

// get the thumbnail rendition for the other 3 images
String smallImageUrl1 = digitialAssetList.get(1).getRenditionUrl(RenditionType.Thumbnail);
String smallImageUrl2 = digitialAssetList.get(2).getRenditionUrl(RenditionType.Thumbnail);
String smallImageUrl3 = digitialAssetList.get(3).getRenditionUrl(RenditionType.Thumbnail);

// load small images using Glide, etc...

Obtener vista previa de imagen y página de galería

La página que contiene las vistas previas de todas las imágenes de la categoría utiliza una solicitud asíncrona para solicitar todas las imágenes que coinciden con el ID de nodo de la categoría.

Esta imagen muestra una galería de imágenes con diferentes tipos de bagels, algunos con crema o ingredientes, o ambos.

La llamada asíncrona se realiza con un método de devolución de llamada especificado para la respuesta, como se muestra a continuación. La versión completa de este código está en el archivo GalleryPhotosFragment.java.

public void fetchDigitalAssets() {

    // search for all matching image assets for the specific category node id
    SearchAssetsRequest assetsRequest = new SearchAssetsRequest(getDeliveryClient())
            .type(AssetType.TYPE_ASSET_IMAGE)
            .taxonomyCategoryNodeId(categoryNodeId);

    // fetch the results asynchronously and call the specified method when done
    assetsRequest.fetchAsync(this::showDigitalAssets);

}

public void showDigitalAssets(ContentResponse<AssetSearchResult> response) {
   // handle errors if response.isSuccess is false otherwise process results...
}

Al hacer clic en una imagen específica, la vista previa a tamaño completo utiliza la representación nativa del archivo.

Esta imagen muestra la vista previa de un bagel con queso crema y salmón.

Con un objeto digitalAsset, obtiene la URL de representación nativa y se presenta en Glide de la siguiente forma:

String fullSizeImageUrl = digitalAsset.getRenditionUrl(RenditionType.Native);

// example using Glide to render the main image into an ImageView
Glide.with(context).load(fullSizeImageUrl).into(fullSizeImageView);

Paso 3: Ejecución de la aplicación

Ahora que hemos creado nuestra aplicación de galería Android, necesitamos probarla en un emulador móvil o dispositivo de Android Studio para que podamos depurar cualquier problema y obtener una vista previa de la aplicación antes de que se active.

Conclusión

En este tutorial, creamos una aplicación de galería de imágenes para Android, que se puede encontrar en Github. Esta aplicación utiliza Oracle Content Management como CMS sin cabecera. Después de configurar Oracle Content Management con un canal de contenido publicado para el tutorial del sitio de galería, hemos ejecutado la aplicación para recuperar el contenido necesario.

Obtenga información sobre los conceptos importantes de Oracle Content Management en la documentación.

Puede encontrar más ejemplos como este en la página Ejemplos de Oracle Content Management en Oracle Help Center.

Título e Información de Copyright

Creación de una galería de imágenes en Java para Android con Oracle Content Management desacoplado

F81109-01

Mayo de 2023

Autor Principal: Oracle Corporation