Cree un blog 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, va a crear un blog sencillo en Flutter aprovechando Oracle Content Management como CMS sin cabecera. Este ejemplo de Flutter está disponible en GitHub.

El tutorial incluye tres pasos:

1. Preparación de Oracle Content Management
2. Crea el blog en Flutter
3. 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:

• conceptos clave
• Repositorios de activos

Para seguir este tutorial, necesitará:

• una suscripción a Oracle Content Management
• una cuenta 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

Nuestro blog constará de tres pantallas que permiten a los visitantes explorar artículos de blog organizados en temas. La primera pantalla, la pantalla de inicio, consistirá en una lista de temas del blog.

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

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

La segunda página, pantalla de tema, muestra las vistas previas de cada artículo del blog que pertenece a un tema. A continuación, se muestra el aspecto de una pantalla de tema individual:

Por último, la pantalla de artículo presenta el artículo final del blog, incluida la información sobre el autor del blog. A continuación, se muestra el aspecto de una página de artículo individual:

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, 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:

1. Cree un repositorio de canal y activos.
2. Cree un modelo de contenido mediante uno de estos dos métodos:
   • Método 1: Importación del paquete de activos de muestras de Oracle Content Management
   • Método 2: Crear su propio modelo de contenido

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:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.

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

   

3. En la esquina superior derecha, haga clic en Crear para crear un nuevo canal. Asigne al canal el nombre 'OCEGettingStartedChannel' para este tutorial y mantenga el acceso público. Haga clic en Guardar para crear el canal.

   

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

   

5. En la esquina superior derecha, haga clic en Crear para crear un nuevo repositorio de activos. Asigne al repositorio de activos el nombre 'OCEGettingStartedRepository' para este tutorial.

   

6. En el campo Canales de publicación, seleccione el canal OCEGettingStartedChannel para indicar a Oracle Content Management que el contenido del repositorio OCEGettingStartedRepository se puede publicar en el canal OCEGettingStartedChannel. Haga clic en Guardar cuando termine.

   

Creación de un modelo de contenido

El siguiente paso es crear un modelo de contenido. Puede utilizar uno de estos métodos:

• Método 1: Importación del paquete de activos de muestras de Oracle Content Management
• Método 2: Crear su propio modelo de contenido

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. Si lo prefiere, también puede crear su propio modelo de contenido en lugar de descargar el paquete de activos de ejemplo.

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:

1. 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 OCEGettingStarted_data.zip.

2. Conéctese a la interfaz web de Oracle Content Management como administrador.

3. 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 OCEGettingStartedRepository y haga clic en el botón Importar contenido en la barra de acción superior.

   

4. Cargue OCEGettingStarted_data.zip del equipo local en la carpeta Documents.

   

5. Una vez cargado, seleccione OCEGettingStarted_data.zip y haga clic en Aceptar para importar el contenido al repositorio de activos.

   

6. Una vez que el contenido se haya importado correctamente, navegue a la página Activos y abra el repositorio OCEGettingStartedRepository. Verá que ahora se han agregado todas las imágenes y elementos de contenido relacionados al repositorio de activos.

   

7. 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, OCEGettingStartedChannel.

   

8. Antes de la publicación, debe validar todos los activos. En primer lugar, agregue OCEGettingStartedChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.

   

9. 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).

Después de importar el paquete de activos de muestras de Oracle Content Management, puede empezar a crear el blog en Flutter.

Crear su propio modelo de contenido

En lugar de importar Oracle Content Management Samples Asset Pack, también puede crear su propio modelo de contenido.

Para este tutorial, estamos utilizando un tipo de contenido denominado 'OCEGettingStartedHomePage' para crear la pantalla de inicio de nuestro blog. Esta página inicial consta de una lista de temas de blog que se deben incluir en la pantalla.

Para crear tipos de contenido para el modelo de contenido:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Seleccione Contenido en el menú de navegación izquierdo y, a continuación, seleccione Tipos de Activo en la lista de selección de la cabecera de página.
3. Haga clic en Crear en la esquina superior derecha.
4. Seleccione crear un tipo de contenido (no un tipo de activo digital). Repita esta acción para todos los tipos de contenido necesarios.

Crearemos cuatro tipos de contenido, cada uno con su propio juego de campos:

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

El primer tipo de contenido, OCEGettingStartedHomePage, debe tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Nombre de compañía	Campo de texto de valor único	X	company_name
Logotipo de compañía	Campo de texto de valor único	X	company_logo
Temas	Campo de referencia de varios valores	X	Temas
URL de Contacto	Campo de texto de valor único	X	contact_url
Acerca de URL	Campo de texto de valor único	X	about_url

Este es el aspecto que debe tener la definición del tipo de contenido OCEGettingStartedHomePage:

El segundo tipo de contenido, OCEGettingStartedTopic, debe tener el siguiente campo:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Vista reducida	Campo de imagen de un solo valor	X	vista en miniatura

Este es el aspecto que debe tener el tipo de contenido OCEGettingStartedTopic:

El tercer tipo de contenido, OCEGettingStartedAuthor, debe tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Avatar	Campo de imagen de un solo valor	X	avatar

Este es el aspecto que debe tener el tipo de contenido OCEGettingStartedAuthor:

El cuarto y el tipo de contenido final, OCEGettingStartedArticle, deben tener los siguientes campos:

Nombre mostrado	Tipo de campo	necesario	Nombre de máquina
Fecha de publicación	Campo de fecha de valor único	X	published_name
Autor	Campo de referencia de valor único	X	autor
Imagen	Campo de imagen de un solo valor	X	imagen
Leyenda de Imagen	Campo de texto de valor único	X	image_caption
Contenido del artículo	Campo de texto grande de valor único	X	article_content
Tema	Campo de referencia de valor único	X	Tema

Este es el aspecto que debe tener el tipo de contenido OCEGettingStartedArticle:

Una vez que haya creado los tipos de contenido, puede agregar estos tipos de contenido al repositorio creado anteriormente, OCEGettingStartedRepository:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Vaya a OCEGettingStartedRepository.
3. Edite el repositorio y, en Tipos de activos, especifique los cuatro tipos de contenido recién creados. Haga clic en el botón Save (Guardar) para guardar los cambios.

Después de agregar los tipos de contenido al repositorio, puede abrir el repositorio OCEGettingStartedRepository en la página Activos y empezar a crear los elementos de contenido para todos los tipos de contenido.

Tarea 2: Construir el blog en Flutter

Para utilizar nuestro contenido de Oracle Content Management en una aplicación Flutter, podemos utilizar el ejemplo de blog 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.

Construir el blog en Flutter consta de estos pasos:

1. Instalar Flutter
2. Clonar el repositorio de ejemplo e instalar dependencias
3. Configuración de la aplicación Flutter
4. 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:

1. Obtenga el SDK de Flutter.
2. Actualice la variable de entorno de ruta.
3. Ejecute flutter doctor.
4. Siga los pasos descritos en el sitio web de Flutter para instalar un editor de su elección.
5. 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.
6. 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 del blog 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-blog-sample.git
cd oce-flutter-blog-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 blog 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': '47c9fb78774d4485bc7090bf7b955632'
};

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

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 y poder representarlo en nuestra aplicación Flutter de blog.

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:

1. Primero, buscamos elementos en el canal especificado en oce.dart.
2. Recupere los detalles de cada uno de los elementos del tema.

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

  // Fetch the top level values to be displayed on the home page.
  Future<TopicListModel> fetchHomePage() async {
    final Content content = Content();
    try {
      final dynamic topicListData = await content.queryItems(<String, String>{
        'q': '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
        'fields': 'all',
      });
      return TopicListModel.fromJson(topicListData);
    } catch (exception) {
      rethrow;
    }
  }

  // Fetch details about the specific topic
  Future<TopicListItemModel> fetchTopic(topicId) async {
    final Content content = Content();
    try {
      final dynamic data = await content.getItem(<String, String?>{
        'id': topicId,
        'fields': 'all',
        'expand': 'all',
      });
      TopicListItemModel topicListItemModel = TopicListItemModel.fromJson(data);
      topicListItemModel.thumbnailUrl = getMediumRenditionUrl(topicListItemModel.thumbnailId);
      return topicListItemModel;
    } catch (exception) {
      rethrow;
    }
  }

Página Tema

La página de tema recibe un ID de tema y necesita varias llamadas de datos para obtener todos sus datos:

1. Obtener todos los artículos para el tema especificado.
2. Obtenga las URL de representación de cada artículo.

Abra lib/networking/services.dart y busque la función que aparece a continuación, que la función fetchData utiliza en items_list.dart.

  // Get all the articles for the specified topic.
  //
  // @param {String} topicId - the id of the topic
  // @returns ArticleListModel which contains the list of articles for the topic
  Future<ArticleListModel>fetchArticles(topicId) async{
    final Content content = Content();
    try {
      final dynamic data = await content.queryItems(<String, String>{
        'q': '(type eq "OCEGettingStartedArticle" AND fields.topic eq "$topicId")',
        'fields': 'all',
        'orderBy': 'fields.published_date:desc',
      });
      ArticleListModel articleListModel = ArticleListModel.fromJson(data);
      for (ArticleListItemModel articleListItemModel in articleListModel.articlesList) {
        articleListItemModel.thumbnailUrl = getMediumRenditionUrl(articleListItemModel.thumbnailId);
      }
      return articleListModel;
    } catch (exception) {
      rethrow;
    }
  }

Página de Artículo

La página de artículo recibe un ID de artículo y requiere varias llamadas de datos para obtener todos sus datos:

1. Obtener los detalles de artículo para el artículo especificado.
2. Obtenga las URL de representación del avatar para el autor del artículo.

Abra lib/networking/services.dart y busque la función que aparece a continuación, que la función fetchData utiliza en item.dart.

  // Get details of the specified article.
  //
  // @param {String} articleId - The id of the article
  // @returns ArticleModel - the article
  Future<ArticleModel>fetchArticle(articleId) async{
    final Content content = Content();
    try {
      final dynamic data = await content.getItem(<String, String?>{
        'id': articleId,
        'expand': 'all',
      });
      ArticleModel articleModel =  ArticleModel.fromJson(data);
      articleModel.authorImageUrl = getMediumRenditionUrl(articleModel.authorImageId);
      articleModel.imageUrl = getRenditionUrl(articleModel.imageId);
      return articleModel;
    } catch (exception) {
      rethrow;
    }
  }

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

Componentes Flutter

La aplicación de blog desglosa cada pantalla 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 una de nuestras pantallas:

• Pantalla TopicsList
• Pantalla ArticlesList
• Pantalla de artículos

Pantalla TopicsList

La página inicial consta de una lista de temas en un canal. Lo presenta el componente TopicsList, ubicado en lib/screens/topic_list.dart.

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

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      topicListModel = await services.fetchHomePage();
      setState(() {
        topicListModel = topicListModel;
      });
      //for each topicid , fetch the topic
      for (var topicId in topicListModel!.topicIdList) {
        TopicListItemModel topic = await services.fetchTopic(topicId);
        setState(() {
          topics.add(topic);
          if (topics.length == topicListModel!.topicIdList.length) {
            dataFetched = true;
          }
        });
      }
    } catch (e) {
      setState(() {
        exception = e.toString();
      });
      print(exception.toString());
    }
  }

El componente utiliza el método fetchData para obtener datos mediante métodos definidos en el archivo services.dart. Este archivo también utiliza un componente ubicado en lib/components/topic_list_item.dart para presentar cada elemento de tema en la pantalla de temas.

Pantalla ArticlesList

La página Tema muestra los artículos de un tema. Lo presenta el componente ArticlesList, ubicado en lib/screens/articles_list.dart.

Abra lib/screens/articles_list.dart y busque la función fetchData, que se utiliza para obtener todos los datos de esta pantalla.

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      ArticleListModel articleListModel =
          await services.fetchArticles(widget.topicModel.id);
      setState(() {
        articles = articleListModel.articlesList;
      });
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

El componente utiliza el método fetchData para obtener datos del archivo services.dart. Este archivo también utiliza un componente ubicado en lib/components/article_list_item para representar cada elemento de tema en la pantalla de temas.

Pantalla de artículos

La página Artículo muestra los detalles de un artículo. Está representada por el componente Article, situado en lib/screens/article.dart.

Abra lib/screens/article.dart y busque la función fetchData, que se utiliza para obtener todos los datos de la pantalla de artículo.

  Future<void> fetchData() async {
    final Services services = Services();
    try {
      ArticleModel articleModel =
          await services.fetchArticle(widget.articleListItemModel.id);
      setState(() {
        this.articleModel = articleModel;
      });
    } catch (exception) {
      setState(() {
        this.exception = exception.toString();
      });
      print(exception.toString());
    }
  }

El componente Article utiliza el método fetchData descrito anteriormente para obtener datos del archivo services.dart. Este archivo también utiliza el componente ItemImage ubicado en lib/components/item_image para representar la imagen del artículo.

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

Ahora que hemos creado nuestro sitio de blog 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.

1. Si está utilizando Android Studio como editor, localice la barra de herramientas principal de Android Studio.
2. 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.
3. 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 blog 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 del blog, hemos instalado y ejecutado el sitio Flutter para recuperar el contenido necesario y ejecutar la aplicación.

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

Cree un blog con Oracle Content Management sin cabecera

F55466-01

Marzo de 2022

Copyright © 2021, 2022, Oracle and/or its affiliates.

Autor Principal: Oracle Corporation