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

Introducción

Flutter es un marco de código abierto de Google para crear hermosas aplicaciones compiladas originalmente y multiplataforma desde una sola base de código. El código flutter se compila en ARM o código de máquina Intel, así como en JavaScript, para un rendimiento rápido en cualquier dispositivo. Flutter puede ser una potente herramienta para crear aplicaciones que consumen contenido de Oracle Content Management. Armada con el modelo de contenido adecuado, puede crear rápidamente una interfaz de usuario Flutter que forma una galería típica.

En este tutorial, vamos a crear una galería simple en Flutter aprovechando Oracle Content Management como CMS sin cabecera. Este ejemplo de Flutter está disponible en GitHub.

El tutorial incluye tres pasos:

Preparación de Oracle Content Management
Crear la galería de imágenes en Flutter
Preparación de la aplicación para el despliegue

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
un equipo Windows o Mac con Node versión 10 o superior

Lo que estamos construyendo

Nuestra galería de imágenes constará de varias pantallas de imágenes de alimentos y bebidas disponibles en una cafetería.

Esta imagen muestra una galería de imágenes con diferentes tipos de bagels, algunos con crema o toppings, 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 encontrar las taxonomías disponibles, que utilizamos el recurso de API de REST GET /published/api/v1.1/taxonomies.

A continuación, necesitamos obtener el conjunto de categorías para cada una de las taxonomías. Para ello, utilice la API de REST GET /published/api/v1.1/taxonomies/{id}/categories.

Para crear la vista previa de una categoría, como Bagels, necesitamos contar el número de imágenes y las URL de las cuatro primeras imágenes.

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

Nuestra solicitud para encontrar los activos publicados en la categoría especifica los criterios de categoría a través de una cadena de consulta, de la siguiente manera:

"(taxonomies.categories.nodes.id eq 892CD6BC4F654249A00CB7942EE8C773)"

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

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

Tarea 1: Preparación de Oracle Content Management

Este tutorial se basa en la suposición de que ha creado el repositorio de activos y que 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 Inicio rápido para aprender a registrarse en Oracle Cloud, aprovisionar una instancia de Oracle Content Management y configurar Oracle Content Management como un 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 repositorio de canal y activos.
Importación del 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 repositorio de canal y 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 Publicar canales 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 al canal el nombre 'OCEImageGalleryChannel' 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 al repositorio de activos el nombre 'OCEImageGalleryRepository' 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.

Importación del paquete de activos de muestras de Oracle Content Management

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

Puede cargar una copia del contenido que estamos utilizando en este tutorial desde Oracle Content Management Samples Asset Pack. Esto le permitirá experimentar con los tipos de contenido y modificar el contenido. Puede descargar el archivo de paquete de activos, OCESamplesAssetPack.zip, y extraerlo a un directorio de su elección:

Descargue Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) desde la página de 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 OCEImageGalería_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 de la barra de acción superior.
Cargue OCEImageGalería_data.zip de la computadora local en la carpeta Documentos.
Una vez cargado, seleccione OCEImageGalería_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 ahora se han agregado todas las imágenes y elementos de contenido relacionados 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 creado anteriormente, OCEImageGalleryChannel.
Antes de la publicación, debe validar todos los activos. En primer lugar, agregue OCEImageGalleryChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.
Una vez validados los activos, puede publicar todos los activos en el canal seleccionado haciendo clic en el botón Publicar en la esquina superior derecha.

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

En esta imagen se muestra la página Assets, donde se publican todos los activos.

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 Flutter.

Cargue sus propios activos de imagen

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

Esta imagen muestra la página de inicio de 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:

Conéctese a 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 de la computadora local o elija 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 al canal el nombre 'OCEImageGalleryTaxonomy' para este tutorial.
Haga clic en Crear.
Ahora puede crear la taxonomía agregando categorías. Haga clic en Agregar una categoría.
Asigne al artículo de categoría principal el nombre 'Alimento' y agregue las siguientes categorías secundarias:
- desayuno
- Postre
- bebida
- Sandwiches
Haga clic en 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 poder 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 en el repositorio OCEImageGalleryRepository:

Conéctese a 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.
Una vez que 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.

Tarea 2: Crear la galería de imágenes en Flutter

Para consumir nuestro contenido de Oracle Content Management en una aplicación Flutter, podemos utilizar el ejemplo de la galería Flutter, disponible como repositorio de código abierto en GitHub.

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

La creación de la galería de imágenes en Flutter consta de los siguientes pasos:

Instalar Flutter
Clonar el repositorio de ejemplo e instalar dependencias
Configuración de la aplicación Flutter
Utilizar la API de REST de Oracle Content Management para recuperar contenido

Instalar Flutter

Lo primero que debe hacer para empezar a usar Flutter es configurar su entorno. Puede encontrar las instrucciones para configurarlo en el sitio web de Flutter. Utilice la opción correspondiente al sistema operativo. A continuación, se muestra un resumen de los pasos de instalación:

Obtenga el SDK de Flutter.
Actualice la variable de entorno de ruta.
Ejecute flutter doctor.
Siga los pasos descritos en el sitio web de Flutter para instalar un editor de su elección.
Agregue un plugin de editor para Android Studio, IntelliJ, VS Code o Emacs. Las instrucciones especifican cómo instalar los plugins Flutter y Dart en el editor.
Modifique los valores del archivo android.properties para hacer referencia a las ubicaciones adecuadas, las versiones de sdk y kotlin. También puede que necesite modificar los valores del archivo android.gradle para las versiones adecuadas.

Clonación del repositorio de ejemplo e instalación de dependencias

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

Primero tendrá que clonar el ejemplo de GitHub en su equipo local y cambiar el directorio en la raíz del repositorio:

git clone https://github.com/oracle-samples/oce-flutter-gallery-sample.git
cd oce-flutter-gallery-sample

Abra el proyecto desde Android Studio o cualquier otro editor que desee. Para obtener todos los paquetes que se utilizan en el proyecto, haga clic en el botón Obtener paquetes.

Configuración de la aplicación Flutter

En este ejemplo de galería Flutter, debe configurar algunos fragmentos de información para que las solicitudes de la API de REST puedan dirigirse a la URL de instancia y la versión de API correctas con el token de canal correcto. Estos valores definidos en lib/config/oce.dart son utilizados por las funciones definidas en lib/networking/content.dart para establecer el punto final para la API de REST.

Verá la siguiente información en lib/config/oce.dart:

const Map<String, String> config = <String, String>{
  'serverUrl': 'https://samples.mycontentdemo.com',
  'apiVersion': 'v1.1',
  'channelToken': 'e0b6421e73454818948de7b1eaddb091'
};

Cambie cada par clave-valor para que refleje la URL de la instancia, la versión de API a la que desea dirigir y el token de canal asociado al canal de publicación. El canal de este tutorial es OCEImageGalleryChannel.

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

La API de REST para Content Delivery proporciona acceso a los 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 de Oracle Content Management para recuperar contenido a fin de poder representarlo en nuestra aplicación Flutter de galería de imágenes.

El archivo lib/networking/content.dart tiene métodos para conectarse al servidor especificado en el archivo oce.dart mediante la API de REST y devolver la respuesta de él.

  //Utility method to build up the URL for published content.
  String _getPublishedContentServerURL() {
    final String? serverUrl = data['serverUrl'] as String?;
    final String? apiVersion = data['apiVersion'] as String?;
    return '$serverUrl/content/published/api/$apiVersion/';
  }

  // Adds the channel token to the URL
  String _addChannelToURL(String currUrl) {
    final String? channelToken = data['channelToken'] as String?;
    return '$currUrl?channelToken=$channelToken';
  }

  //Make an http get call and return the response if successful
  Future<dynamic> _get(String url) async {
    dynamic responseJson;
    try {
      final Response response = await get(Uri.parse(url));
      responseJson = _returnResponse(response);
    } on SocketException {
      throw FetchDataException(kConnectionError);
    }
    return responseJson;
  }

  //Return the json decoded response body if response status is successful
  dynamic _returnResponse(Response response) {
    switch (response.statusCode) {
      case 200:
        final Map<String, dynamic>? responseJson =
            json.decode(response.body.toString()) as Map<String, dynamic>?;
        return responseJson;
      case 400:
        throw BadRequestException(response.body.toString());
      case 401:
      case 403:
        throw UnauthorizedException(response.body.toString());
      case 500:
      default:
        throw FetchDataException('StatusCode : ${response.statusCode}');
    }
  }

Para representar las imágenes, content.dart también proporciona métodos auxiliares para recuperar las diversas representaciones de un activo.

  String getMediumRenditionUrl(Map<String, String> args) {
    final String itemId = args['id'];
    if (itemId == null) return null;
    String url = _getPublishedContentServerURL();
    url = '${url}assets/$itemId/Medium';
    // add the channel token to the URL
    url = _addChannelToURL(url);
    url = '$url&format=jpg&&type=responsiveimage';
    return url;
  }

  String getRenditionURL(Map<String, String> args) {
    final String itemId = args['id'];
    if (itemId == null) return null;
    String url = _getPublishedContentServerURL();
    url = '${url}assets/$itemId/native';
    // add the channel token to the URL
    url = _addChannelToURL(url);
    return url;
  }

El archivo lib/networking/services.dart contiene todo el código para obtener datos para la aplicación.

Datos de la página inicial

La página inicial requiere varias llamadas de datos para obtener todos sus datos:

En primer lugar, cargamos las taxonomías para el canal especificado en oce.dart.
Para cada una de las taxonomías, obtenemos todas las categorías de esa taxonomía.
Para cada categoría, obtenemos cuatro elementos de contenido en esa categoría.
Para cada uno de estos elementos, extraemos sus URL de representación.

Abra lib/networking/services.dart y busque las siguientes funciones, lo que ayuda a obtener todos los datos de la página inicial.

La función fetchTaxonomies() junto con la función fetchCategories() obtiene todas las categorías en todas las taxonomías. A continuación, se llama a la función fetchItemsForCategory para agregar los cuatro elementos de categoría a cada categoría. Finalmente, se llama a retrieveThumbnailURL para obtener las URL de vista en miniatura.

  // Fetch the taxonomies for the channel
  Future<List<String>> fetchTaxonomies() async {
    final Content content = Content();
    try {
      dynamic data = await content.getTaxonomies();
      dynamic taxonomies = data['items'];
      List<String> idArray = [];
      for (var taxonomy in taxonomies) {
        idArray.add(taxonomy['id']);
      }
      return idArray;
    } catch (exception) {
      rethrow;
    }
  }

  // Fetch the categories for the specified taxonomyId.
  Future<List<dynamic>> fetchCategories(taxonomyId) async {
    final Content content = Content();
    dynamic data = await content.queryTaxonomyCategories({
      'id': '$taxonomyId',
    });
    return data['items'];
  }

  // Fetch the items that belong to the specified category
  Future<dynamic> fetchItemsForCategory(String categoryId, bool limit) async {
    final Content content = Content();
    dynamic data = await content.queryItems({
      'q': '(taxonomies.categories.nodes.id eq "$categoryId")',
      'fields': 'all',
      'expand': 'all',
      'limit': limit ? '4' : '100',
      'totalResults': 'true',
    });
    return data;
  }

  // Retrieve the thumbnail URL for the item specified.
  Future<String> retrieveThumbnailURL(identifier) async {
    final Content content = Content();
    dynamic data = await content.getItem({
      'id': identifier,
      'fields': 'all',
      'expand': 'all',
    });
    String url = data['fields']['renditions'][1]['formats'][0]['links'][0]['href'];
    return url;
  }

Página Cuadrícula de Imagen

La página de cuadrícula de imagen recibe un ID de categoría y necesita varias llamadas de datos para obtener todos sus datos:

Obtener todos los elementos para la categoría especificada.
Para cada elemento, obtenga sus URL de representación.

Abra lib/networking/services.dart y busque la siguiente función, que utiliza la función fetchData en image_grid.dart.

  Future<dynamic> fetchItemsForCategory(String categoryId, bool limit) async {
    final Content content = Content();
    dynamic data = await content.queryItems({
      'q': '(taxonomies.categories.nodes.id eq "$categoryId")',
      'fields': 'all',
      'expand': 'all',
      'limit': limit ? '4' : '100',
      'totalResults': 'true',
    });
    return data;
  }

Llama a fetchItemsForCategory, como la página inicial, pero sin límite, para que se devuelvan todos los elementos, no solo cuatro.

Ahora que tenemos nuestra consulta de datos, podemos representar las respuestas en nuestros componentes Flutter.

Componentes Flutter

La aplicación de galería desglosa cada página en una serie de componentes más pequeños.

Las siguientes secciones proporcionan una visión general de cómo Flutter presenta nuestra aplicación en cada uno de nuestros componentes:

Componente HomePage
Componente ImageGrid
Componente ImagePager

Componente HomePage

La página inicial consta de una lista de categorías para una taxonomía, con una vista previa de cuatro elementos en esa categoría. Lo presenta el componente HomePage ubicado en lib/screens/home_page.dart. El componente utiliza las funciones definidas en el archivo services.dart para obtener los datos.

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      List<String> taxonomyIdArray = await services.fetchTaxonomies();
      // For each taxonomy, fetch the categories and append them to an array
      for (var taxonomyId in taxonomyIdArray) {
        List<dynamic> data = await services.fetchCategories(taxonomyId);
        for (var categoryData in data) {
          categories.add(CategoryListItemModel.fromJson(categoryData));
        }
        setState(() {
          categories = categories;
        });
      }
    } catch (exception) {
      setState(() => this.exception = exception.toString());
      print(exception.toString());
    }
  }

Este archivo también utiliza un componente ubicado en lib/components/card_grid.dart para representar las imágenes en una cuadrícula.

Componente ImageGrid

El componente ImageGridPage muestra los elementos de la categoría. Lo presenta el componente ImageGrid, ubicado en lib/screens/image_grid.dart.

El componente realiza una llamada para obtener los datos del archivo services.dart.

  Future<void> fetchData() async {
    final Services services = Services();

    String categoryId = widget.category.id;
    try {
      dynamic categoryItems =
          await services.fetchItemsForCategory(categoryId, false);
      items = categoryItems['items'];
      setState(() {
        dataFetched = true;
      });
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

Componente ImagePager

El componente ImagePager ubicado en lib/screens/image_pager.dart muestra los elementos en un formulario de buscapersonas deslizante.

Tarea 3: Preparación de la aplicación para su despliegue

Ahora que hemos creado nuestro sitio de galería de imágenes Flutter, necesitamos desplegarlo en un emulador o dispositivo para poder depurar cualquier problema y obtener una vista previa de la aplicación antes de activarla.

Siga las instrucciones del sitio web de Flutter de su editor para ejecutar la aplicación.

Si está utilizando Android Studio como editor, localice la barra de herramientas principal de Android Studio.
En el selector de destino, seleccione un dispositivo Android para ejecutar la aplicación. Si no aparece ninguno como disponible, seleccione Tools > Android > AVD Manager y cree uno allí. Para obtener más información, consulte Gestión de AVD.
Haga clic en el icono de ejecución de la barra de herramientas o llame al elemento de menú Run > Run.

Conclusión

En este tutorial, hemos creado un sitio de galería en Flutter, que se puede encontrar en GitHub. Este sitio 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 instalado y ejecutado el sitio Flutter para recuperar el contenido necesario y crear el sitio.

Para obtener más información sobre Flutter, vaya al sitio web de Flutter.

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 Muestras de Oracle Content Management de Oracle Help Center.

Título e Información de Copyright

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

F55474-01

Marzo de 2022

Autor Principal: Oracle Corporation