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

Introducción

Angular es una plataforma para crear aplicaciones web para equipos móviles y de escritorio.

En este tutorial se presentan los pasos básicos para crear un visor de imágenes con Angular, con Oracle Content Management como sistema de gestión de contenido y su SDK de contenido. Verá cómo se pueden utilizar las taxonomías para categorizar el contenido y cómo se pueden utilizar diferentes representaciones de activos digitales para distintos casos de uso. Este ejemplo angular está disponible en GitHub.

El tutorial incluye tres pasos:

Preparación de Oracle Content Management
Creación de la Galería de Imágenes en Angular
Preparar 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 la versión 10 o superior del nodo

Lo que estamos creando

Nuestra galería de imágenes consistirá en varias páginas 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.

Para echar un vistazo a lo que estamos construyendo, aquí está el estado final de nuestro tutorial, una versión en directo de este sitio de galería de imágenes:

https://headless.mycontentdemo.com/samples/oce-angular-gallery-sample

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 necesitamos encontrar las taxonomías disponibles, que hacemos con el método getTaxonomies() del SDK de contenido.

Nota: La implantación de getTaxonomies utiliza el recurso de la 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. Esto se realiza mediante el método queryTaxonomyCategories() del SDK de contenido.

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

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

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

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

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

Para optimizar la carga de la imagen, utilizaremos una representación de la imagen denominada 'Thumbnail'. Consulte retrieveThumbnailURL(), en src/scripts/services.js, para conocer el código que examina el juego de representaciones disponibles para cada imagen.

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 estar conectado 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 han creado tipos de contenido).

Si aún no tiene una instancia de Oracle Content Management, consulte Inicio rápido para obtener más información sobre cómo 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 de dos formas. Hay un paquete de activos descargable disponible que rellena 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.
Importación del paquete de activos de muestras de Oracle Content Management
Cargar 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 de la izquierda 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 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 de la izquierda y, a continuación, elija 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 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 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 en un directorio de su elección:

Descargue el paquete de activos de muestras de Oracle Content Management (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 OCEImageG Gallery_data.zip.
Conéctese a la interfaz web de Oracle Content Management como administrador.
Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, elija 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 OCEImageG Gallery_data.zip desde su equipo local en la carpeta Documentos.
Una vez que se haya cargado, seleccione OCEImageG Gallery_data.zip y haga clic en Aceptar para importar el contenido en su repositorio de activos.
Una vez que el contenido se haya importado correctamente, vaya a la página Activos y abra el repositorio OCEImageGalleryRepository. Verá que ahora se han agregado todas las imágenes y los 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 publicar, debe validar todos los activos. Primero agregue OCEImageGalleryChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.
Después de validar 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 hecho esto, puede ver en la página Activos que todos los activos se han publicado. (Puede indicar el icono situado encima del nombre del activo).

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

Después de importar el paquete de activos de muestras de Oracle Content Management, puede iniciar la creación de la galería de imágenes en Angular.

Cargar 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 inicial consta del título "Galería de imágenes", así como álbumes de recopilación de imágenes que tienen activos de imagen.

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:

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 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 de la izquierda y, a continuación, elija 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 cree la taxonomía agregando categorías. Haga clic en Agregar una categoría.
Asigne un nombre al elemento de categoría principal 'Food' y agregue las siguientes categorías secundarias:
- desayuno
- Postular
- Bebidas
- Sándwiches
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 Promocionar 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 de la izquierda y, a continuación, elija 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 la categoría en la barra de búsqueda o seleccione una categoría de la estructura jerárquica de la 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: Creación de la Galería de Imágenes en Angular

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

Nota: Recuerde que el uso del ejemplo angular es opcional y lo utilizamos en este tutorial para empezar a utilizarlo rápidamente. También puede crear su propia aplicación Angular, como un andamio de CLI Angular con soporte adicional de representación en el servidor, mediante la CLI Angular.

Para construir la galería de imágenes en Angular:

Clonar el repositorio de ejemplo e instalar dependencias
Configuración de la aplicación angular
Trabajar con el SDK de Oracle Content Management Content
Uso del SDK de Oracle Content Management Content para recuperar contenido

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

La muestra de blog angular está disponible como repositorio de código abierto en GitHub.

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

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

Ahora que tiene su base de código, debe descargar dependencias para la aplicación. Ejecute el siguiente comando desde el directorio raíz:

npm install

Configuración de la aplicación angular

En este ejemplo de galería de imágenes angulares, debe configurar algunos fragmentos de información para que el SDK de Oracle Content Management Content (y cualquier otra solicitud) pueda dirigir la URL de instancia y la versión de API correctas con el token de canal correcto. Estos valores se utilizan en src/scripts/server-config-utils.js para instanciar un nuevo cliente de entrega.

Esta aplicación utiliza un archivo .env que lee Webpack cuando agrupa las aplicaciones cliente y servidor. Mediante webpack.DefinePlugin, los valores leídos del archivo .env se pueden poner a disposición de cualquier parte de la aplicación.

Abra el archivo .env en un editor de texto. Verá la siguiente información:

# The connection details for the Oracle Content Management server to be used for this application
    SERVER_URL=https://samples.mycontentdemo.com
    API_VERSION=v1.1
    CHANNEL_TOKEN=e0b6421e73454818948de7b1eaddb091

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

Trabajar con el SDK de Oracle Content Management Content

Oracle Content Management ofrece un SDK de contenido en dos versiones distintas, en función de si lo está aprovechando en un contexto del cliente (paquete de exploradores) o en un contexto del servidor (Node.js).

Ambos SDK están disponibles como bibliotecas de código abierto en GitHub:

Además, el SDK de contenido está disponible como módulo NPM con cada instancia de Oracle Content Management, donde {server} a continuación representa la URL de la instancia (consulte Inicio rápido para obtener información sobre cómo recuperar la URL de la instancia):

Explorador: {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-1.1.0.tgz
Node.js: {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-node-1.1.0.tgz

Es posible que también desee utilizar el paquete minificado del cliente: {server}/_sitesclouddelivery/renderer/app/sdk/js/content.min.js

Uso del SDK de Oracle Content Management Content para recuperar contenido

Ahora podemos aprovechar el SDK de Oracle Content Management Content para recuperar contenido de modo que podamos presentarlo en nuestra aplicación angular.

El SDK de Oracle Content Management Content utiliza un objeto DeliveryClient para especificar el punto final. Puede realizar todas las solicitudes con ese objeto de cliente.

La carpeta src/scripts contiene el código para obtener datos de Oracle Content Management mediante el SDK de contenido.

El archivo src/scripts/server-config-utils.js importa el SDK de Oracle Content Management Content y, a continuación, crea un cliente de entrega mediante la configuración especificada en .env.

El siguiente comando importa el SDK:

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

El siguiente comando crea el cliente de entrega:

return createDeliveryClient(serverconfig);

El archivo src/scripts/services.js contiene todo el código para obtener datos para la aplicación. Hay una función principal para cada componente de página en la aplicación para obtener todos los datos de esa página.

Para presentar las imágenes, services.js proporciona un método auxiliar para recuperar el juego de orígenes de un activo que se construye a partir de las entregas para el activo.

function getSourceSet(asset) {
      const urls = {};
      urls.srcset = '';
      urls.jpgSrcset = '';
      if (asset.fields && asset.fields.renditions) {
        asset.fields.renditions.forEach((rendition) => {
          addRendition(urls, rendition, 'jpg');
          addRendition(urls, rendition, 'webp');
        });
      }
      // add the native rendition to the srcset as well
      urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
      urls.native = asset.fields.native.links[0].href;
      urls.width = asset.fields.metadata.width;
      urls.height = asset.fields.metadata.height;
      return urls;
    }

Datos de la página inicial

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

En primer lugar, cargamos las taxonomías para el canal especificado en .env.
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 esos elementos, obtenemos sus URL de representación.

Abra src/scripts/services.js y busque la función getHomePageData(), que se utiliza para obtener todos los datos de la página inicial.

export function getHomePageData() {
      const deliveryClient = getClient();
      // get the categories for all taxonomies then add all the category items to each category
      return fetchAllTaxonomiesCategories(deliveryClient).then(
        (initialCategories) => addItemsToCategories(deliveryClient, initialCategories).then(
          (categories) => {
            // pull out all of the items for all of the categories then
            // append the computed renditionUrls to each item.
            const allItems = categories.map((category) => category.items);
            const items = flattenArray(allItems);
            // for each item, retrieve the rendition urls and add it to the item
            items.forEach((item) => {
              item.renditionUrls = getSourceSet(item);
            });
            return { categories };
          },
        ),
      );
    }

getHomePageData() llama a fetchAllTaxonomiesCategories() para obtener todas las categorías en todas las taxonomías.

function fetchAllTaxonomiesCategories(client) {
      return client
        .getTaxonomies()
        .then((topLevelItem) => {
          const taxonomyIds = topLevelItem.items.map((taxonomy) => taxonomy.id);
    
          const promises = [];
          // loop over each taxonomy id
          taxonomyIds.forEach((taxonomyId) => {
            // add a promise to the total list of promises to get the categories
            // for the specific taxonomy id
            promises.push(
              fetchCategoriesForTaxonomyId(client, taxonomyId)
                .then((categoriesTopItem) => categoriesTopItem.items),
            );
          });
    
          // execute all the promises returning a single dimension array of all
          // of the categories for all of the taxonomies (note: no taxonomy information)
          // is returned.
          return Promise.all(promises)
            .then((arrayOfCategoryArray) => flattenArray(arrayOfCategoryArray));
        })
        .catch((error) => logError('Fetching taxonomies failed', error));
    }

fetchAllTaxonomiesCategories() llama a fetchCategoriesForTaxonomyId() para obtener todas las categorías de una taxonomía específica.

function fetchCategoriesForTaxonomyId(client, taxonomyId) {
      return client
        .queryTaxonomyCategories({
          id: `${taxonomyId}`,
        })
        .then((topLevelItem) => topLevelItem)
        .catch((error) => logError('Fetching categories for taxonomy failed', error));
    }

A continuación, se llama a la función addItemsToCategories para agregar los cuatro elementos de categoría a cada categoría.

function addItemsToCategories(client, categories) {
      const promises = [];
    
      // loop over each category
      categories.forEach((category) => {
        // add a promise to the total list of promises to get the items
        // for the specific category
        promises.push(
          fetchItemsForCategory(client, category.id, true).then(
            (topLevelItem) => {
              // add the item to the category before returning it
              category.items = topLevelItem.items;
              category.totalResults = topLevelItem.totalResults;
              return {
                ...category,
              };
            },
          ),
        );
      });
    
      // execute all the promises before returning the data
      return Promise.all(promises).then((arrayOfItems) => flattenArray(arrayOfItems));
    }

Por último, se llama a getSourceSet que se ha visto anteriormente para obtener las URL de representación de cada elemento.

Datos de página de cuadrícula de imagen

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

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

Abra src/scripts/services.js y busque la función getImageGridPageData(), que se utiliza para obtener todos los datos de la página de cuadrícula de imagen.

export function getImageGridPageData(categoryId) {
      const client = getClient();
    
      return fetchItemsForCategory(client, categoryId, false).then(
        (topLevelItem) => {
          const { totalResults } = topLevelItem;
          // for each item, retrieve the rendition urls and add it to the item
          topLevelItem.items.forEach((item) => {
            item.renditionUrls = getSourceSet(item);
          });
          return {
            totalResults,
            items: topLevelItem.items,
          };
        },
      );
    }

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 presentar las respuestas en nuestros componentes angulares.

Representación del Cliente frente al del Servidor

Con la representación de cliente (CSR), el cliente es responsable de crear y representar el contenido de una página web mediante JavaScript. Con la representación de servidor (SSR), toda la página se crea en el servidor y se devuelve al cliente una página web completa.

Cuando se solicita la página web del servidor en la representación del cliente, el documento HTML devuelto contiene HTML de esqueleto y no contiene contenido real. Contiene una referencia a un paquete JavaScript, que el cliente solicita del servidor. Al recibir este paquete, el cliente ejecuta JavaScript y rellena la página web. Hasta que el cliente haya terminado de ejecutar JavaScript, todo el usuario ve una página web en blanco. Una desventaja de las aplicaciones representadas por el cliente es que cuando algunos exploradores web indexan el sitio, no hay contenido real que indexar.

Con la representación de servidor (SSR), toda la página se crea en el servidor y se devuelve al cliente una página web completa. La ventaja de esto es que los exploradores web pueden indexar todo el contenido en la página web.

Representación Angular del Servidor

El flujo de la aplicación de galería de imágenes angulares es el siguiente:

El cliente realiza una solicitud al servidor para una ruta determinada.
El servidor Express recibe la solicitud.
El servidor Express transfiere todas las solicitudes del cliente para las páginas al motor Express de Angular Univeral
El motor Express de Angular Univeral toma un archivo HTML de plantilla y lo rellena con lo siguiente
1. Marcado de la ruta indicada
2. Datos de ruta serializados
3. Referencias a cualquier hoja de estilo
4. Referencias a paquetes de JavaScript para ejecutar en el cliente
El servidor Express devuelve el documento HTML creado por el motor Express de Angular Univeral al cliente
El cliente recibe el HTML y lo representa. El usuario verá una página web totalmente formada.
El cliente solicita cualquier paquete JavaScript del servidor. Después de recibirlo, el cliente ejecuta JavaScript en el paquete.
1. "hidrata" el HTML, agregando en cualquier JavaScript del cliente como listeners de eventos.
2. Angular toma automáticamente los datos serializados de la página e los inyecta en el código JavaScript para que estén disponibles para los componentes.
Si el documento HTML contenía una hoja de estilo, el cliente solicita la hoja de estilo.

La CLI angular admite la adición de soporte de representación del servidor a una aplicación angular existente. Consulte https://angular.io/guide/universal para obtener más información.

Servidor Express del Servidor

La aplicación de servidor utiliza un servidor Express para recibir la solicitud y reenviarla al motor Express de Angular Univeral.

El archivo del servidor Express se encuentra en server.js. Este archivo lo crea la CLI angular al agregar soporte de representación del servidor.

Componentes angulares

Los componentes angulares se escriben en TypeScript y definen una plantilla que define la vista. Estas plantillas contienen HTML, directivas angulares y marcas de enlace normales, que permiten a Angular ajustar el HTML antes de que se represente.

En las siguientes secciones se ofrece una visión general de cómo Angular presenta nuestra aplicación en cada uno de nuestros componentes:

Módulo de aplicación
Módulo raíz para representación del servidor
Solucionador de página inicial
Solucionador de página de cuadrícula de imagen
Componente de aplicación
Componente inicial
Componente de galería
Componente de cuadrícula de imagen

Módulo de aplicación

Módulo de aplicación ubicado en src/app/app.module.ts. Inicia la aplicación con el componente de aplicación.

Este archivo define las distintas rutas de nuestra aplicación. En nuestro sitio, queremos proporcionar dos rutas:

La página inicial, que consta de la lista de categorías
Página de cuadrícula de imagen, que muestra todos los elementos de un ID de categoría determinado.

La página de cuadrícula de imagen toma un argumento proporcionado por Oracle Content Management en su URL.

Las rutas de la página inicial y de la cuadrícula de imagen definen los solucionadores utilizados para obtener todos los datos necesarios para la ruta antes de crear los componentes de la ruta.

const appRoutes: Routes = [
      // home page - list of categories in all taxonomies
      {
        path: 'home',
        component: HomeComponent,
        resolve: { routeData: HomePageDataResolver }
      },
      // no path specified, go to home
      {
        path: '',  redirectTo: '/home', pathMatch: 'full'
      },
      // Grid of images for the selected category
      {
        path: 'category/:categoryId',
        component: ImageGridComponent,
        resolve: { routeData: ImageGridDataResolver }
      },
    ];

Este módulo de aplicación es el punto de entrada al presentar la aplicación en el cliente.

Módulo raíz para representación del servidor

El punto de entrada principal de esta aplicación Angular, al presentar la aplicación en el servidor, es el módulo de servidor de aplicaciones ubicado en src/app/app.server.module.ts.

Este módulo importa el módulo de aplicación, ubicado en src/app/app.server.module.ts, junto con ServerModule de Angular. La aplicación del servidor inicia el mismo componente de aplicación que el cliente y utiliza todos los mismos componentes.

La CLI angular crea el archivo del módulo de servidor al agregar soporte de representación del servidor.

Solucionador de datos de página inicial

El solucionador de datos de la página inicial, ubicado en src/resolvers/home-page-data.resolver.ts, gestiona la obtención de los datos que se van a presentar en la página inicial.

Cuando el cliente se está hidratando, estos datos se obtienen de transferState, que se rellenó durante la representación del servidor y se serializó en el documento HTML devuelto al cliente.

Durante la representación del servidor o la representación del cliente cuando se ha producido la navegación del cliente, transferState no contendrá los datos. Los datos se obtienen del servidor de Oracle Content Management, mediante el SDK de contenido, llamando al método getHomePageData() desde src/scripts/services.js.

Solucionador de datos de cuadrícula de imagen

El solucionador de datos de cuadrícula de imagen, ubicado en src/resolver/image-grid-data.resolver.ts, gestiona la obtención de los datos que se van a presentar en la página de cuadrícula de imagen.

Cuando el cliente se está hidratando, estos datos se obtienen de transferState, que se rellenó durante la representación del servidor y se serializó en el documento HTML devuelto al cliente.

Componente de aplicación

El componente de aplicación, ubicado en src/app/app.component.ts, define la vista raíz.

Este componente contiene las etiquetas de enlace de enrutador. Angular intercambiará componentes dentro y fuera de la página dentro de esas etiquetas, según la ruta actual.

Componente inicial

La página inicial consta de una lista de categorías para una taxonomía, con una vista previa de cuatro elementos de esa categoría.

Abra el componente Home, ubicado en src/app/home/home.component.ts. En ngOnInit, el componente obtiene los datos de la ruta activa, que ha rellenado el solucionador de la página inicial.

ngOnInit() {
      const data = this.route.snapshot.data.routeData;
       . . .
    }

Cuando el componente se presenta, obtiene todos los datos de sus variables de miembro. La categoría y el mapa de vistas en miniatura de la imagen se pasan al componente Gallery.

El marcador para el componente de inicio se encuentra en src/app/home/home.component.html.

Componente de galería

El componente Gallery representa la categoría individual de la lista. Este componente muestra una vista previa de cuatro de los elementos de la categoría.

Ubicado en src/app/galería/component.ts, el componente Gallery recibe todos sus datos como propiedades. No obtiene ningún dato adicional del servidor.

El marcado para el componente Galería está situado en src/app/galería/galería-componente.html.

Componente de cuadrícula de imagen

El componente Cuadrícula de Imágenes muestra los elementos de la categoría cuyo ID se transfiere al componente en la URL.

Abra el componente Image Grid, ubicado en src/app/image-grid-component.ts. En ngOnInit, el componente obtiene los datos de la ruta activa rellenada por el solucionador de página de cuadrícula de imagen.

ngOnInit() {
      // get the values from the routed URL
      this.categoryId = this.route.snapshot.paramMap.get(PAGE_PARAM_CATEGORY_ID);
      this.categoryName = this.route.snapshot.queryParamMap.get(PAGE_PARAM_CATEGORY_NAME);
    
      const data = this.route.snapshot.data.routeData;
      . . .
    }

Cuando el componente se presenta, obtiene todos los datos de sus variables de miembro.

El marcador del componente de cuadrícula de imágenes se encuentra en src/app/image-grid-component.html.

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

Ahora que hemos creado nuestro sitio de galería de imágenes angulares, necesitamos verlo en un servidor de desarrollo local para depurar cualquier problema y obtener una vista previa de la aplicación antes de que se active.

Prepare la aplicación para el despliegue en dos pasos:

Puesta en marcha de un servidor de desarrollo local
Utilizar scripts para crear y ejecutar la aplicación en desarrollo y producción

Introducción a un servidor de desarrollo local

Puede iniciar un servidor de desarrollo localmente ejecutando el siguiente comando.

npm run dev

A continuación, abra el explorador en http://localhost:4200 para ver el sitio en acción.

Uso de scripts para crear y ejecutar la aplicación en desarrollo y producción

Para la producción, el script de creación se utilizaría para crear el cliente y el código de servidor.

npm run build

Este script ejecuta primero la creación del cliente y, a continuación, ejecuta la creación del servidor. El dist/server y el dist/browser creados deben desplegarse en la máquina del servidor antes de iniciar la aplicación del servidor, con el siguiente comando:

npm run start

Conclusión

En este tutorial, creamos un sitio de galería en Angular, 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 Angular para recuperar el contenido necesario y crear el sitio.

Para obtener más información sobre Angular, visite el sitio web de Angular.

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 el Centro de ayuda de Oracle.

Título e Información de Copyright

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

F51773-01

Diciembre de 2021

Autor Principal: Oracle Corporation