Cree un blog en Oracle JET con Oracle Content Management sin cabecera

Introducción

Oracle JavaScript Extension Toolkit (Oracle JET) es un conjunto de herramientas de desarrollo JavaScript completo, modular y de código abierto diseñado para ayudar a los desarrolladores a crear interfaces de usuario atractivas. Se basa en los estándares del sector y en el popular marco de código abierto, Preact, que es una alternativa ligera a React con una API similar. Oracle JET incorpora funcionalidades y servicios avanzados que ayudan a los desarrolladores a crear mejores aplicaciones más rápido.

En este tutorial, crearemos un blog sencillo en Oracle JET en la arquitectura de DOM virtual (VDOM) aprovechando Oracle Content Management como CMS sin cabecera, así como su kit de desarrollo de software (SDK) para la entrega de contenido. Este ejemplo de Oracle JET está disponible en GitHub.

El tutorial consta de tres pasos:

1. Preparación de Oracle Content Management
2. Crear el blog en Oracle JET
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 de Oracle Content Management con el rol de administrador de contenido
• un equipo Windows o Mac con Node versión 12 o superior

Lo que estamos construyendo

Nuestro blog consistirá en un sitio de dos páginas que permite a los visitantes explorar artículos de blog organizados en temas. La primera página, la página inicial, consistirá en la marca (nombre y logotipo de la compañía), algunos enlaces y una lista de artículos ordenados por tema. La segunda página, la página del artículo, mostrará un artículo del blog, incluyendo información sobre el autor del blog.

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

Este es el aspecto que tendrá la página de artículos al final de este tutorial:

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 haya terminado.

   

Creación de un modelo de contenido

El siguiente paso es crear un modelo de contenido. Puede utilizar 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

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 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 de la computadora local en la carpeta Documentos.

   

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 Oracle JET.

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 página de inicio de nuestro blog. Esta página inicial consta de marcas (nombre y logotipo de la compañía), algunas URL de enlaces y una lista de temas del blog que se deben incluir en la página.

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 la empresa	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 la 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
Miniatura	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 un solo valor	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.
4. Haga clic en el botón 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: Creación del blog en Oracle JET

Para consumir el contenido de Oracle Content Management en una aplicación Oracle JET, puede utilizar el ejemplo de blog de Oracle JET, que está disponible como repositorio de código abierto en GitHub.

Nota: Recuerde que el uso del ejemplo de Oracle JET es opcional y lo utilizamos en este tutorial para empezar rápidamente. También puede crear su propia aplicación Oracle JET, como una de las plantillas iniciales del equipo de Oracle JET.

Para crear el blog en Oracle JET:

1. Clonar el repositorio de ejemplo e instalar dependencias
2. Instalar la CLI de Oracle JET y agregar componentes de la interfaz de usuario de Oracle Spectra
3. Configurar la aplicación Oracle JET
4. Trabajar con el SDK de Oracle Content Management Content
5. Uso del SDK de contenido para recuperar contenido

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

El ejemplo del blog de Oracle JET 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 a la raíz del repositorio:

git clone https://github.com/oracle-samples/oce-jet-blog-sample.git
cd oce-jet-blog-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

Instalar la CLI de Oracle JET y agregar componentes de la interfaz de usuario de Oracle Spectra

A continuación, para ejecutar comandos de Oracle JET, debe instalar la CLI de Oracle JET. No debe haber ninguna acción por su parte, ya que se trata de una dependencia instalada en el archivo package.json. Si hay problemas con la CLI de Oracle JET, puede seguir las instrucciones de la documentación de la CLI de Oracle JET. La CLI de Oracle JET se puede encontrar en GitHub. Necesitará la CLI de Oracle JET para instalar algunos componentes personalizados y también para servir la aplicación.

Después de esto, debe instalar algunos componentes personalizados que utilizará en este ejemplo de Oracle JET. Estos componentes tienen su propio CSS asociado a ellos que utilizará. Los componentes de la interfaz de usuario de Spectra son:

• oj-sp-welcome-page
• oj-sp-image-card
• página de visión general de oj-sp-item
• Visión general de oj-sp-item

Para agregar estos componentes, debe configurar el URI de intercambio como referencia e instalar los componentes personalizados de Oracle JET (para instancias de EE. UU.:):

ojet configure --exchange-url=https://devinstance4wd8us2-wd4devcs8us2.uscom-central-1.oraclecloud.com/profile/devinstance4wd8us2-wd4devcs8us2/s/devinstance4wd8us2-wd4devcs8us2_compcatalog_3461/compcatalog/0.2.0
ojet add component oj-sp-welcome-page oj-sp-image-card oj-sp-item-overview-page oj-sp-item-overview --username=comp.catalog --password=bXwphh6RMFjn#g

Consulte la documentación de Visual Builder para obtener más información sobre la conexión a la URL de intercambio de componentes.

Configurar la aplicación Oracle JET

En este ejemplo de blog de Oracle JET, 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.

Abra src/config/content.json en un editor de texto. Verá la siguiente información:

{
  "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. El token de canal está en el archivo src/config/content.json. También puede agregar el valor 'expressServerPort' aquí para el número de puerto de host local.

Nota: Se recomienda almacenar estos valores como variables de entorno en el proveedor de alojamiento o en un archivo .env local. La revelación de la URL de instancia o el token de canal al público puede provocar ataques distribuidos de denegación de servicio (DDoS). Este riesgo se mitiga al garantizar que el uso compartido de recursos de origen cruzado (CORS) de la instancia se configure correctamente.

Trabajar con el SDK de Oracle Content Management Content

Oracle Content Management ofrece un SDK para ayudar a detectar y utilizar contenido en las aplicaciones. El SDK se publica como un módulo NPM y el proyecto se aloja en GitHub.

Obtenga más información sobre el SDK aquí.

El SDK se ha registrado como una dependencia de tiempo de ejecución de este proyecto en el archivo package.json.

Uso del SDK de contenido para recuperar contenido

Ahora podemos aprovechar el SDK de contenido para recuperar contenido y poder representarlo en nuestra aplicación Oracle JET.

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 contenido y, a continuación, crea un cliente de entrega mediante la configuración especificada en src/config/content.json.

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 representar las imágenes, services.js proporciona un método auxiliar para recuperar el juego de orígenes de un activo que se crea a partir de las representaciones del 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, 'png');
      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 página inicial

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

1. En primer lugar, se consultan los elementos del canal especificado en src/config/content.json.
2. A continuación, para cada uno de los elementos del tema, recuperamos sus detalles.
3. Finalmente, se recogen todos los datos del artículo para cada uno de los temas.

Abra src/scripts/services.js y busque la función getTopicsListPageData(), que obtiene todos los datos del tema de la página inicial.

export function getTopicsListPageData() {
  const client = getClient();

  return fetchHomePage(client)
    .then((data) => (
      getRenditionURLs(client, data.logoID)
        .then((renditionUrls) => {
          data.companyThumbnailRenditionUrls = renditionUrls;
          return data;
        })
    ));
}

La función fetchHomePage(), llamada por la función getTopicsListPageData(), obtiene todos los elementos del canal. Obtiene el ID de logotipo, el nombre de la compañía, las URL de acerca y contacto, y una lista de temas. Tenga en cuenta que estamos consultando la página inicial denominada 'HomePage_JET' para este blog de ejemplo.

function fetchHomePage(client) {
  return client.queryItems({
    q: '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage_JET")',
  }).then((data) => {
    const logoID = data.items[0].fields.company_logo.id;
    const title = data.items[0].fields.company_name;
    const aboutUrl = data.items[0].fields.about_url;
    const contactUrl = data.items[0].fields.contact_url;

    const { topics } = data.items[0].fields;
    const promises = [];

    topics.forEach((origTopic) => {
      // add a promise to the total list of promises to get the full topic details
      promises.push(
        fetchTopic(client, origTopic.id)
          .then((topic) => topic),
      );
    });

    // execute all the promises returning a single dimension array of all
    // of the topics and the other home page data
    return Promise.all(promises)
      .then((allTopics) => (
        {
          logoID,
          companyTitle: title,
          aboutUrl,
          contactUrl,
          topics: flattenArray(allTopics),
        }
      )).catch((error) => logError('Fetching topics failed', error));
  }).catch((error) => logError('Fetching home page data failed', error));
}

A continuación, se llama a la función fetchTopic() para cada ID de tema a fin de obtener los detalles completos del tema.

function fetchTopic(client, topicId) {
  return client.getItem({
    id: topicId,
    expand: 'fields.thumbnail',
  }).then((topic) => {
    topic.renditionUrls = getSourceSet(topic.fields.thumbnail);
    return topic;
  }).catch((error) => logError('Fetching topic failed', error));
}

getTopicsListPageData() también llama a getRenditionURLs() para obtener la URL de la imagen que se va a representar.

function getRenditionURLs(client, identifier) {
  return client.getItem({
    id: identifier,
    expand: 'fields.renditions',
  }).then((asset) => getSourceSet(asset))
    .catch((error) => logError('Fetching Rendition URLs failed', error));
}

A continuación, en la página inicial, también llamamos a la función fetchTopicArticles(topicId) para cada tema. Se utiliza para obtener todos los artículos para el tema especificado y las URL de representación.

export function fetchTopicArticles(topicId) {
  const client = getClient();
  return client.queryItems({
    q: `(type eq "OCEGettingStartedArticle" AND fields.topic eq "${topicId}")`,
    orderBy: 'fields.published_date:desc',
  }).then((data) => {
    const promises = [];
    const articles = data.items;

    articles.forEach((article) => {
      // add a promise to the total list of promises to get the article url
      promises.push(
        getRenditionURLs(client, article.fields.image_16x9.id)
          .then((renditionUrls) => {
            article.renditionUrls = renditionUrls;
            return {
              ...article,
            };
          }),
      );
    });

    // execute all the promises and return all the data
    return Promise.all(promises)
      .then((allArticles) => ({
        topicId,
        articles: flattenArray(allArticles),
      }));
  }).catch((error) => logError('Fetching topic articles failed', error));
}

El método fetchTopicArticles() también utiliza getRenditionURLs(), como se ha visto anteriormente, para obtener la imagen del artículo.

Datos de 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 del artículo especificado. Para cada artículo, obtenga sus URL de representación.
2. Obtenga las URL de representación para el avatar del autor.

Abra src/scripts/services.js y busque la función fetchArticleDetails(articleId), que obtiene los datos de la página del artículo.

export function fetchArticleDetails(articleId) {
  const client = getClient();
  return client.getItem({
    id: articleId,
    expand: 'fields.author,fields.image',
  }).then((article) => {
    const title = article.fields.author.name;
    const date = article.fields.published_date;
    const content = article.fields.article_content;
    const imageCaption = article.fields.image_caption;
    const { name } = article;
    const renditionUrls = getSourceSet(article.fields.image);
    const avatarID = article.fields.author.fields.avatar.id;
    // Get the author's avatar image
    return getRenditionURLs(client, avatarID)
      .then((authorRenditionUrls) => (
        // return an object with just the data needed
        {
          id: articleId,
          name,
          title,
          date,
          content,
          imageCaption,
          renditionUrls,
          authorRenditionUrls,
        }
      ));
  }).catch((error) => logError('Fetching article details failed', error));
}

El método fetchArticleDetails() también utiliza getRenditionURLs(), como se ha visto anteriormente, para obtener la imagen del avatar.

Estructura y páginas de Oracle JET

En las siguientes secciones se proporciona una visión general de cómo Oracle JET presenta nuestros datos:

• Flujo de aplicaciones de blog de Oracle JET
• Página TopicsList
• Página ArticleDetails

Flujo de aplicaciones de blog de Oracle JET

El punto de entrada principal de esta aplicación Oracle JET es el archivo src/app.tsx. Este archivo importa el enrutador previo y todas las páginas de la aplicación.

En nuestro sitio, queremos proporcionar tres rutas:

• La página inicial, que consta de la lista de temas y muestra todos los artículos del tema seleccionado. Este es el archivo TopicsListPage.tsx.
• Página de artículo individual, que muestra el artículo seleccionado y los detalles del autor. Este es el archivo ArticleDetailsPage.tsx.
• Página no encontrada en una página, que es para todas las rutas no válidas. Éste es el NotFoundPage.tsx.

Como se ve en el siguiente código de enrutador, la ruta predeterminada de la página inicial '/' es para TopicsListPage y cada artículo se aloja en el servidor + 'article/:articleId' para ArticleDetailsPage. Se enruta aquí mediante el método path() en el enrutador preact. Las rutas no válidas se envían a NotFoundPage.

Nota: Se puede modificar el soporte adicional para una ruta de enrutador base aquí en Preact Router agregando base_url antes de la ruta deseada. En el código de ejemplo se incluye un método especial appRoute() para sustituir el método Preact Router path() en el caso de base_url.

<Router>
  <TopicsListPage path="/" />
  <ArticleDetailsPage path="/article/:articleId" />
  <NotFoundPage default />
</Router>

Página TopicsList

La página TopicsList (inicio) consta de una lista de temas compuesta por temas individuales, así como la lista de artículos para el tema seleccionado.

La clase TopicsListPage recupera los datos mediante la función fetchData(), a la que se llama durante la fase componentDidMount del tiempo de ejecución.

La función fetchData() es la siguiente:

fetchData() {
  this.setState(() => ({
    loading: true,
  }));

  getTopicsListPageData()
    .then((data) => {
      const promiseArr = [];
      for (let i = 0; i < data.topics.length; i += 1) {
        promiseArr.push(
          fetchTopicArticles(data.topics[i].id).then(
            (topicArticlesData) => { data.topics[i].articleData = topicArticlesData; },
          ),
        );
      }
      Promise.all(promiseArr).then(() => {
        this.setState({
          data,
          loading: false,
        });
      });
    });
}

Observe que el estado se define en load para mostrar el círculo de progreso cuando se carga inicialmente y, a continuación, se define en false cuando finaliza la carga. La función getTopicsListPageData() se llama una vez y se llama a fetchTopicArticles() para cada tema. El resultado es una promesa que se resuelve en esta sección del código.

Una vez que tenemos todos los datos, creamos la página de bienvenida del cuerpo con el cuerpo.

El cuerpo se crea de la siguiente forma, donde utilizamos un componente oj-sp-image-card:

const bodyElems = [];
let articleCards = [];
topics.forEach(
  (topic) => {
    bodyElems.push(
      <div className='topicType'>
        <div className='topicHeading'>{topic.name}</div>
        <div>{topic.description}</div>
      </div>,
    );
    topic.articleData.articles.forEach((article) => {
      articleCards.push(
        <oj-sp-image-card
          primaryText={article.name}
          secondaryText={article.description}
          imageSrc={article.renditionUrls.native}
          footerType='none'
          onClick={ function openArticleLink() { route(`/article/${article.id}`); } }
        />,
      );
    });
    bodyElems.push(
      <div className='articleItem'>
        {articleCards}
      </div>,
    );
    articleCards = [];
  },
);

Aquí, bodyElems es una matriz de elementos HTML que introduciremos en el componente oj-sp-welcome-page. bodyElems alterna entre una cabecera de tema con descripción y las tarjetas de imagen reales para cada artículo de ese tema.

Cada tarjeta de imagen tiene una imagen con una relación de aspecto de 16:9. Esto se debe a la restricción de utilizar tamaños de imagen 16:9 para el componente oj-sp-image-card, y la representación 16:9 se muestra en renditionUrls con el nombre de ojspcard para este código de blog de ejemplo de Oracle JET. Observe también que la acción onClick de la tarjeta de imagen es una función que se dirige a la página de artículo.

TopicsListPage devuelve lo siguiente, que incluye el componente oj-sp-welcome-page con bodyElems ranurado en el interior:

<oj-sp-welcome-page
  pageTitle={companyTitle}
  overlineText= 'Home'
  displayOptions={{
    imageStretch: 'full',
  }}
  illustrationForeground={companyThumbnailRenditionUrls.native}
  primaryAction={{
    label: 'About Us',
    icon: 'oj-ux-ico-information',
    display: 'on',
  }}
  onspPrimaryAction={ function openAboutLink() { window.open(aboutUrl, '_blank'); } }
  secondaryAction={{
    label: 'Contact Us',
    icon: 'oj-ux-ico-contact-edit',
    display: 'on',
  }}
  onspSecondaryAction={ function openContactLink() { window.open(contactUrl, '_blank'); } }
>
{bodyElems}
</oj-sp-welcome-page>

El componente oj-sp-welcome-page crea la cabecera de la página, así como proporciona el espacio para que bodyElems se introduzca en ella. Como se ha visto, tenemos un título de página, el texto de superposición 'Home', algunos botones y una imagen de visualización. La imagen de visualización tiene un origen en el campo illustrationForeground y la imagen se amplía mediante el parámetro displayOptions. Hay dos botones, 'Acerca de nosotros' y 'Contacto', que tienen iconos en la biblioteca oj-ux, y ambos botones abren enlaces en una nueva pestaña a las páginas que nos rodean y contactan.

Página ArticleDetails

La página ArticleDetails consta de todos los datos relacionados con el propio artículo, como el autor, las imágenes y el texto.

La clase ArticleDetails recupera los datos mediante la función fetchData(), a la que se llama durante la fase componentDidMount del tiempo de ejecución.

La función fetchData() es la siguiente:

fetchData(articleId) {
  this.setState(() => ({
    loading: true,
  }));

  fetchArticleDetails(articleId)
    .then((data) => this.setState(() => ({
      data,
      loading: false,
    })));
  }
}

Observe que el estado se define en load para mostrar el círculo de progreso cuando se carga inicialmente y, a continuación, se define en false cuando finaliza la carga. La función fetchArticleDetails() se llama una vez para articleId en el que estamos. El resultado es una promesa que se resuelve en esta sección del código.

Una vez que tenemos todos los datos, creamos la página articleDetails.

La página se crea de la siguiente forma, donde utilizamos un componente oj-sp-item-overview-page con el componente oj-sp-item-overview ranurado en la sección 'overview' y el contenido principal ranurado en la sección 'main':

<oj-sp-item-overview-page
  overviewExpanded={false}
  translations={{
    goToParent: 'Back to Home',
  }}
  onspGoToParent={ function goToParent() { route('/'); } }
>
  <div slot='overview'>
    <oj-sp-item-overview
      itemTitle={title}
      itemSubtitle={formattedDate}
      photo={{
        src: data.authorRenditionUrls.small,
      }}
    />
  </div>
  <div slot='main'>
    <h1 style='text-align:center'>{name}</h1>
    <figure>
      {data.renditionUrls && (
        <picture>
          <source type='image/webp' srcSet={data.renditionUrls.srcset} />
          <source srcSet={data.renditionUrls.jpgSrcset} />
          <img
            src={data.renditionUrls.small}
            alt='Article'
            width={parseInt(data.renditionUrls.width, 10) * 0.66}
            height={parseInt(data.renditionUrls.height, 10) * 0.66}
          />
        </picture>
      )}
      <figcaption style='text-align:center'>{imageCaption}</figcaption>
    </figure>
    {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
    <div dangerouslySetInnerHTML={{ __html: cleancontent }} />
  </div>
</oj-sp-item-overview-page>

El componente oj-sp-item-overview-page proporciona el diseño de la página articleDetails. En particular, overviewExpanded es falso para sustituir ahora toda la página, las traducciones para goToParent son 'Volver a Inicio' y onspGoToParent es una función que completa la lógica para volver a la página topicsList.

Hay dos espacios que puede incluir oj-sp-item-overview-page, y estos son el espacio 'overview' y el espacio 'main', que contienen detalles sobre el autor del artículo y proporcionan el contenido del artículo, respectivamente.

El componente oj-sp-item-overview se divide en la sección 'descripción general' y proporciona un diseño de columna para los detalles del autor. itemTitle es el nombre del autor, el subtítulo es la fecha con formato y la foto es el origen de la foto del autor.

La sección 'principal' ranurada contiene todos los detalles del artículo, que incluyen el título del artículo, una imagen con título, así como el texto del blog del artículo.

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

Ahora que hemos creado nuestro sitio de blog de Oracle JET, necesitamos verlo en un servidor de desarrollo local para poder depurar cualquier problema y previsualizar la aplicación antes de que se active.

El archivo package.json ubicado en la raíz del proyecto contiene scripts que facilitan la creación de paquetes y la ejecución de la aplicación.

Desarrollo

Puede utilizar el script de desarrollo durante el desarrollo:

npm run dev

Este script crea los paquetes de cliente y servidor e inicia la aplicación en un servidor local. Webpack comprobará los cambios de código y volverá a crear los paquetes de cliente y servidor si es necesario.

Producción

Para producción, el script de compilación se utilizaría para crear los paquetes de cliente y servidor:

npm run build

Cuando finaliza el script, la aplicación se puede ejecutar con el siguiente comando:

npm run start

Conclusión

En este tutorial, hemos creado un sitio de blog en Oracle JET, 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 blog, hemos instalado y ejecutado el sitio de Oracle JET para recuperar el contenido necesario y crear el sitio.

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

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 en Oracle JET (VDOM) con Oracle Content Management sin cabecera

F38762-05

Noviembre de 2022

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

Autor Principal: Oracle Corporation