Creación de un sitio mínimo en Flutter con Oracle Content Management sin cabecera

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 compone un blog típico.

En este tutorial, vamos a crear un sitio mínimo sencillo 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
Construye el sitio mínimo 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

Con Flutter mínimo, puede recuperar fácilmente imágenes y otro contenido del repositorio de Oracle Content Management.

Para echar un vistazo a lo que estamos creando, este es el estado final de nuestro tutorial, un sitio básico mínimo de Flutter que consume contenido de Oracle Content Management.

Este es el aspecto que tendrá la pantalla inicial al final de este tutorial:

En esta imagen se muestra una página de llegada para un sitio mínimo de Flutter.

Este es el aspecto que tendrá la pantalla de contacto al final de este tutorial:

En esta imagen, se muestra la página de contacto para un sitio mínimo de Flutter.

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

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, necesitará crear un modelo de contenido. Hay un paquete de activos descargable disponible que rellenará el repositorio vacío con tipos de contenido y contenido asociado.

Para preparar Oracle Content Management:

Crear un canal y un repositorio de activos
Importación del paquete de activos de muestras de Oracle Content Management

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 'OCEMinimalChannel' 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 'OCEMinimalRepository' para este tutorial.
En el campo Canales de publicación, seleccione el canal OCEMinimalChannel para indicar a Oracle Content Management que el contenido del repositorio OCEMinimalRepository se puede publicar en el canal OCEMinimalChannel. 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. Si desea importar Oracle Content Management Samples Asset Pack, 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 OCEMinimal_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 OCEMinimalRepository y haga clic en el botón Importar contenido en la barra de acción superior.
Cargue OCEMinimal_data.zip desde la computadora local en la carpeta Documentos.
Una vez cargado, seleccione OCEMinimal_data.zip y haga clic en Aceptar para importar el contenido al repositorio de activos.
Una vez que el contenido se haya importado correctamente, navegue a la página Activos y abra el repositorio OCEMinimalRepository. 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, OCEMinimalChannel.
Antes de la publicación, debe validar todos los activos. En primer lugar, agregue OCEMinimalChannel 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.

Tarea 2: Creación del sitio mínimo en Flutter

Para consumir nuestro contenido de Oracle Content Management en una aplicación Flutter, podemos utilizar el ejemplo de sitio mínimo Flutter, que está 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 construcción del sitio mínimo 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 sitio mínimo de 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-minimal-sample.git
cd oce-flutter-minimal-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 mínimo de 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': 'ba0efff9c021422cb134c2fd5daf6015'
};

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

También debemos configurar las imágenes que se van a utilizar en toda la aplicación. En el mismo archivo, verá lo siguiente:

const Map<String, String> appConfig = <String, String>{
  'homePage': 'Banner1.jpg',
  'contactUs' : 'Banner2.jpg',
  'logo' : 'Logo.png',
  'footerLogo' : 'Powered_by_OCE.png',
};

Cambie el nombre de cada imagen para reflejar los valores de la instancia.

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, de modo que podamos representarlo en nuestra aplicación Flutter mínima.

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.

Recuperando datos de imagen

Abre lib/networking/services.dart y encuentra la función que aparece a continuación, lo que ayuda a obtener todas las imágenes de esta aplicación.

  // Get all the images needed for the app
  Future<AppImages> getAppImages() async {
    final Content content = Content();
    final String homepageImage = appConfig['homePage'];
    final String contactUsImage = appConfig['contactUs'];
    final String logoImage = appConfig['logo'];
    final String footerImage = appConfig['footerLogo'];
    AppImages images;
    try {
      final dynamic data = await content.queryItems(<String, String>{
        'q':
            '(name eq "$homepageImage" OR name eq "$contactUsImage" OR name eq "$logoImage" OR name eq "$footerImage")',
        'fields': 'all',
        'expand': 'all',
      });
      final List<dynamic> items = data['items'] as List<dynamic>;
      String homePageImageGUID,
          contactUsImageGUID,
          headerLogoGUID,
          footerLogoGUID;
      for (int i = 0; i < items.length; i++) {
        final String name = items[i]['name'] as String;
        final String id = items[i]['id'] as String;
        if (name == homepageImage) {
          homePageImageGUID = id;
        } else if (name == contactUsImage) {
          contactUsImageGUID = id;
        } else if (name == logoImage) {
          headerLogoGUID = id;
        } else if (name == footerImage) {
          footerLogoGUID = id;
        }
      }
      //If any of the image ids are null, let the user know but continue loading the app
      if (homePageImageGUID == null ||
          contactUsImageGUID == null ||
          headerLogoGUID == null ||
          footerLogoGUID == null) {
        print(kFileNameError);
      }
      images = AppImages(
        headerLogoUrl: content.getRenditionURL(<String, String>{'id': headerLogoGUID}),
        footerLogoUrl: content.getRenditionURL(<String, String>{'id': footerLogoGUID}),
        contactUsImageUrl:
            content.getMediumRenditionUrl(<String, String>{'id': contactUsImageGUID}),
        homePageImageUrl: content.getMediumRenditionUrl(<String, String>{'id': homePageImageGUID}),
      );
    } catch (exception) {
      rethrow;
    }
    return images;
  }
;

Ahora que tenemos nuestras consultas de datos, podemos representar las respuestas en nuestros componentes de ejecución.

Componentes Flutter

La aplicación mínima 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 LoadingScreen
Componente HomePage
Componente ContactUs

Componente LoadingScreen

LoadingScreen es un widget con estado que representa el componente LoadingScreen, ubicado en lib/screens/loading_screen.dart.

El archivo lib/screens/loading_screen.dart contiene todo el código para obtener datos para la pantalla y realiza llamadas a las funciones definidas en services.dart.

  Future<void> getData() async {
    final Services services = Services();
    try {
      final AppImages images = await services.getAppImages();
      if (images != null) {
        Navigator.push<dynamic>(context,
            MaterialPageRoute<dynamic>(builder: (BuildContext context) {
          return HomePage(appImages: images);
        }));
      }
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

El componente utiliza el método getData para obtener datos mediante el método definido en el archivo services.dart.

Componente HomePage

El componente HomePage presenta la pantalla de inicio, ubicada en lib/screens/home_page.dart.

El componente HomePage lo inicia el componente LoadingScreen, que le transfiere los datos. No obtiene ningún dato adicional del servidor.

También utiliza el componente ScreenLayout definido en el archivo lib/components/screen_layout.dart, así como el componente ImageStack definido en el archivo lib/components/image_stack.dart.

Componente ContactUs

La pantalla Contacto es presentada por el componente ContactUs, ubicado en lib/screens/contact_us.dart.

El componente ContactUs es iniciado por el componente NavDrawer, definido en el archivo lib/components/navdrawer.dart, que transfiere los datos a él. No obtiene ningún dato adicional del servidor. También utiliza el componente ImageStack definido en el archivo lib/components/image_stack.dart.

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

Ahora que hemos creado nuestro sitio mínimo Flutter, necesitamos desplegarlo en un emulador o dispositivo para poder depurar cualquier problema y previsualizar la aplicación antes de que se active.

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 mínimo 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 de sitio mínimo, 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 un sitio mínimo en Flutter con Oracle Content Management sin cabecera

F55461-01

Marzo de 2022

Autor Principal: Oracle Corporation