Crie um Blog no Oracle JET com o Oracle Content Management Sem Interface

Introdução

O Oracle JavaScript Extension Toolkit (Oracle JET) é um kit de ferramentas de desenvolvimento JavaScript completo, modular e de código aberto, projetado para ajudar os desenvolvedores a criar interfaces de usuário interativas. Ele se baseia nos padrões do setor e na popular estrutura de código-fonte aberto, Preato, que é uma alternativa leve para Reagir com uma API semelhante. O Oracle JET adiciona funcionalidades e serviços avançados para ajudar desenvolvedores a criar aplicativos melhores com mais rapidez.

Neste tutorial, vamos criar um blog simples no Oracle JET na arquitetura DOM (Virtual DOM) aproveitando o Oracle Content Management como um CMS sem interface do usuário, bem como seu kit de desenvolvimento de software (SDK) para entrega de conteúdo. Esta amostra do Oracle JET está disponível em GitHub.

O tutorial consiste em três etapas:

1. Preparar o Oracle Content Management
2. Crie o Blog no Oracle JET
3. Preparar seu aplicativo para implantação

Pré-requisitos

Antes de continuar com este tutorial, recomendamos que você leia as seguintes informações primeiro:

• Conceitos-Chave
• Repositórios de Ativos

Para seguir este tutorial, você precisará de:

• uma assinatura do Oracle Content Management
• uma conta do Oracle Content Management com a atribuição de Administrador de Conteúdo
• um computador Windows ou Mac com Node versão 12 ou superior

O que estamos construindo

Nosso blog consistirá em um site de duas páginas que permite aos visitantes explorar artigos de blog organizados em tópicos. A primeira página, a página inicial, consistirá em branding (nome e logotipo da empresa), alguns links e uma lista de artigos classificados por tópico. A segunda página, a página do artigo, mostrará um artigo de blog, incluindo informações sobre o autor do blog.

Esta é a aparência da página inicial no final deste tutorial:

É assim que a página do artigo será exibida no fim deste tutorial:

Para continuar, você precisará ter uma assinatura ativa no Oracle Content Management e estar conectado com a atribuição de Administrador de Conteúdo.

Tarefa 1: Preparar o Oracle Content Management

Se você ainda não tiver uma instância do Oracle Content Management, consulte o Início Rápido para saber como se registrar no Oracle Cloud, provisionar uma instância do Oracle Content Management e configurar o Oracle Content Management como um CMS sem interface.

Para este tutorial, você precisará criar um modelo de conteúdo de duas maneiras. Há um pacote de ativos com download disponível que preencherá seu repositório vazio com tipos de conteúdo e conteúdo associado ou você poderá criar seu próprio modelo de conteúdo e conteúdo.

Para preparar o Oracle Content Management:

1. Crie um repositório de canais e ativos.
2. Crie um modelo de conteúdo usando um dos dois métodos:
   • Método 1: Importar o Pacote de Ativos de Amostras do Oracle Content Management
   • Método 2: Criar seu próprio modelo de conteúdo

Criar um Canal e um Repositório de Ativos

Primeiro você precisa criar um canal e um repositório de ativos no Oracle Content Management para que possa publicar conteúdo.

Para criar um canal e um repositório de ativos no Oracle Content Management:

1. Efetue log-in na interface Web do Oracle Content Management como administrador.

2. Escolha Conteúdo no menu de navegação esquerdo e escolha Publicando Canais na lista de seleção no cabeçalho da página.

   

3. No canto superior direito, clique em Criar para criar um novo canal. Nomeie o canal 'OCEGettingStartedChannel' para a finalidade deste tutorial e mantenha o acesso público. Clique em Salvar para criar o canal.

   

4. Escolha Conteúdo no menu de navegação esquerdo e escolha Repositórios na lista de seleção no cabeçalho da página.

   

5. No canto superior direito, clique em Criar para criar um novo repositório de ativos. Nomeie o repositório de ativos 'OCEGettingStartedRepository' para a finalidade deste tutorial.

   

6. No campo Canais de Publicação, selecione o canal OCEGettingStartedChannel para indicar ao Oracle Content Management que o conteúdo no repositório OCEGettingStartedRepository pode ser publicado no canal OCEGettingStartedChannel. Clique em Salvar quando terminar.

   

Criar um Modelo de Conteúdo

A próxima etapa é criar um modelo de conteúdo. Você pode usar um destes dois métodos:

• Método 1: Importar o Pacote de Ativos de Amostras do Oracle Content Management
• Método 2: Criar seu próprio modelo de conteúdo

Importar o Pacote de Ativos de Amostras do Oracle Content Management

Você pode fazer download de uma amostra de pacote de ativos do Oracle Content Management pré-configurada que contenha todos os tipos de conteúdo e ativos necessários para este tutorial. Se preferir, você também poderá criar seu próprio modelo de conteúdo em vez de fazer download do pacote de ativos de amostra.

Você pode fazer upload de uma cópia do conteúdo que estamos usando neste tutorial do Oracle Content Management Samples Asset Pack. Isso permitirá experimentar os tipos de conteúdo e modificar o conteúdo. Se quiser importar o Pacote de Ativos de Amostras do Oracle Content Management, você poderá fazer download do arquivo compactado do pacote de ativos, OCESamplesAssetPack.zip, e extraí-lo para um diretório de sua escolha:

1. Faça download do Pacote de Ativos de Amostras do Oracle Content Management (OCESamplesAssetPack.zip) na página downloads do Oracle Content Management. Extraia o arquivo zip baixado para um local em seu computador. Após a extração, esse local incluirá um arquivo chamado OCEGettingStarted_data.zip.

2. Efetue log-in na interface Web do Oracle Content Management como administrador.

3. Escolha Conteúdo no menu de navegação esquerdo e escolha Repositórios na lista de seleção no cabeçalho da página. Agora selecione OCEGettingStartedRepository e clique no botão Importar Conteúdo na barra de ação superior.

   

4. Faça upload de OCEGettingStarted_data.zip do computador local para a pasta Documentos.

   

5. Após o upload, selecione OCEGettingStarted_data.zip e clique em OK para importar o conteúdo para o repositório de ativos.

   

6. Depois que o conteúdo tiver sido importado com sucesso, navegue até a página Ativos e abra o repositório OCEGettingStartedRepository. Você verá que todas as imagens e itens de conteúdo relacionados foram adicionados ao repositório de ativos.

   

7. Clique em Selecionar Tudo na parte superior esquerda e em Publicar para adicionar todos os ativos importados ao canal de publicação criado anteriormente, OCEGettingStartedChannel.

   

8. Antes de publicar, você precisa validar todos os ativos. Primeiro adicione OCEGettingStartedChannel como um canal selecionado e, em seguida, clique no botão Validar.

   

9. Depois que os ativos tiverem sido validados, você poderá publicar todos os ativos no canal selecionado clicando no botão Publicar no canto superior direito.

   

Uma vez concluído, você pode ver na página Ativos que todos os ativos foram publicados. (Você pode informar pelo ícone acima do nome do ativo.)

Após importar o Pacote de Ativos de Amostras do Oracle Content Management, você pode iniciar a criação do blog no Oracle JET.

Crie seu próprio modelo de conteúdo

Em vez de importar o Pacote de Ativos de Amostras do Oracle Content Management, você também pode criar seu próprio modelo de conteúdo.

Para este tutorial, estamos usando um tipo de conteúdo chamado 'OCEGettingStartedHomePage' para criar a home page do nosso blog. Esta página inicial consiste em branding (nome e logotipo da empresa), alguns URLs para links e uma lista de tópicos do blog que devem ser incluídos na página.

Para criar tipos de conteúdo para o modelo de conteúdo:

1. Efetue log-in na interface Web do Oracle Content Management como administrador.
2. Escolha Conteúdo no menu de navegação esquerdo e escolha Tipos de Ativo na lista de seleção no cabeçalho da página.
3. Clique em Criar no canto superior direito.
4. Escolha criar um tipo de conteúdo (não um tipo de ativo digital). Repita isso para todos os tipos de conteúdo obrigatórios.

Criaremos quatro tipos de conteúdo, cada um com seu próprio conjunto de campos:

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

O primeiro tipo de conteúdo, OCEGettingStartedHomePage, deve ter os seguintes campos:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
Nome da Empresa	Campo de texto de valor único	X	company_name
Logotipo da empresa	Campo de texto de valor único	X	company_logo
Tópicos	Campo de referência de vários valores	X	tópicos
URL do Contato	Campo de texto de valor único	X	contact_url
Sobre o URL	Campo de texto de valor único	X	about_url

Essa é a aparência da definição do tipo de conteúdo OCEGettingStartedHomePage:

O segundo tipo de conteúdo, OCEGettingStartedTopic, deve ter o seguinte campo:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
Miniatura	Campo de imagem de valor único	X	miniatura

Esse deve ser o formato do seu tipo de conteúdo OCEGettingStartedTopic:

O terceiro tipo de conteúdo, OCEGettingStartedAuthor, deve ter os seguintes campos:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
Avatar	Campo de imagem de valor único	X	avatar

Esse deve ser o formato do seu tipo de conteúdo OCEGettingStartedAuthor:

O quarto tipo de conteúdo final, OCEGettingStartedArticle, deve ter os seguintes campos:

Nome de exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
Data da Publicação	Campo de data de valor único	X	published_name
Autor	Campo de referência de valor único	X	criar
Imagem	Campo de imagem de valor único	X	imagem
Legenda da Imagem	Campo de texto de valor único	X	image_caption
Conteúdo do artigo	Campo de texto grande de valor único	X	article_content
Tópico	Campo de referência de valor único	X	tópico

Esse deve ser o formato do seu tipo de conteúdo OCEGettingStartedArticle:

Depois de criar seus tipos de conteúdo, você pode adicionar esses tipos de conteúdo ao repositório criado anteriormente, OCEGettingStartedRepository:

1. Efetue log-in na interface Web do Oracle Content Management como administrador.
2. Navegue até OCEGettingStartedRepository.
3. Edite o repositório e, em Tipos de Ativo, especifique todos os quatro tipos de conteúdo recém-criados.
4. Clique no botão Salvar para salvar as alterações.

Após adicionar os tipos de conteúdo ao repositório, você pode abrir o repositório OCEGettingStartedRepository na página Ativos e começar a criar seus itens de conteúdo para todos os tipos de conteúdo.

Tarefa 2: Criar o Blog no Oracle JET

Para consumir seu conteúdo do Oracle Content Management em um aplicativo Oracle JET, você pode usar a amostra de blog do Oracle JET, que está disponível como um repositório de código-fonte aberto em GitHub.

Observação: Lembre-se de que o uso da amostra do Oracle JET é opcional e nós a usamos neste tutorial para que você comece rapidamente. Você também pode criar seu próprio aplicativo Oracle JET, como um dos modelos iniciais pela equipe do Oracle JET.

Para criar o blog no Oracle JET:

1. Clonar o repositório de amostra e instalar dependências
2. Instalar o Oracle JET CLI e adicionar componentes do Oracle Spectra UI
3. Configurar o aplicativo Oracle JET
4. Trabalhar com o Oracle Content Management Content SDK
5. Usar o Content SDK para Extrair Conteúdo

Clonar o Repositório de Amostra e Instalar Dependências

A amostra de blog do Oracle JET está disponível como um repositório de código-fonte aberto em GitHub.

Primeiro você precisará clonar a amostra de GitHub para o computador local e alterar seu diretório na raiz do repositório:

git clone https://github.com/oracle-samples/oce-jet-blog-sample.git
cd oce-jet-blog-sample

Agora que você tem sua base de código, é necessário fazer download das dependências do aplicativo. Execute o seguinte comando no diretório raiz:

npm install

Instalar o Oracle JET CLI e Adicionar Componentes da Interface do Usuário do Oracle Spectra

Em seguida, para executar os comandos do Oracle JET, você precisa instalar a CLI do Oracle JET. Não deve haver nenhuma ação necessária da sua parte, pois esta é uma dependência instalada no arquivo package.json. Se houver problemas com a CLI do Oracle JET, você poderá seguir as instruções na documentação da CLI do Oracle JET. A CLI do Oracle JET pode ser encontrada em GitHub. Você precisará do Oracle JET CLI para instalar alguns componentes personalizados e também para atender ao aplicativo.

Depois disso, instale alguns componentes personalizados que você usará nessa amostra do Oracle JET. Esses componentes têm seu próprio CSS associado a eles que você usará. Os componentes da IU do Spectra são:

• oj-sp-welcome-page
• oj-sp-image-card
• oj-sp-item-visão geral-página
• oj-sp-item-visão geral

Para adicionar esses componentes, você deve configurar a troca-url como referência e instalar os componentes personalizados do Oracle JET (para instâncias dos EUA):

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 a documentação do Visual Builder para obter mais informações sobre como estabelecer conexão com o URL de troca de componentes.

Configurar o Aplicativo Oracle JET

Nesta amostra de blog do Oracle JET, você precisa configurar algumas informações para que o Oracle Content Management Content SDK (e qualquer outra solicitação) possa direcionar o URL da instância e a versão da API corretas com o token de canal correto. Esses valores são usados em src/scripts/server-config-utils.js para instanciar um novo cliente de entrega.

Abra src/config/content.json em um editor de texto. Você verá as seguintes informações:

{
  "serverUrl": "https://samples.mycontentdemo.com",
  "apiVersion": "v1.1",
  "channelToken": "47c9fb78774d4485bc7090bf7b955632"
}

Altere cada par de chave/valor para refletir o URL da instância, a versão da API que você deseja direcionar e o token de canal associado ao canal de publicação. O canal deste tutorial é OCEGettingStartedChannel. O token de canal está no arquivo src/config/content.json. Você também pode adicionar o valor de 'expressServerPort' aqui para seu número de porta localhost.

Observação: Recomendamos que você armazene esses valores como variáveis de ambiente no seu provedor de hospedagem ou em um arquivo .env local. Revelar o URL da instância ou o token de canal para o público pode potencialmente levar a ataques distribuídos de negação de serviço (DDoS). Esse risco é mitigado garantindo que o compartilhamento de recursos de origem cruzada (CORS) para sua instância esteja configurado corretamente.

Trabalhar com o Oracle Content Management Content SDK

O Oracle Content Management oferece um SDK para ajudar a descobrir e usar conteúdo em seus aplicativos. O SDK é publicado como um módulo NPM e o projeto é hospedado em GitHub.

Saiba mais sobre o SDK aqui.

O SDK foi registrado como uma dependência de runtime deste projeto no arquivo package.json.

Usar o Content SDK para Extrair Conteúdo

Agora podemos aproveitar o Content SDK para buscar conteúdo para que possamos renderizá-lo em nosso aplicativo Oracle JET.

A pasta src/scripts contém o código para obter dados do Oracle Content Management usando o Content SDK.

O arquivo src/scripts/server-config-utils.js importa o Content SDK e, em seguida, cria um cliente de entrega usando a configuração especificada em src/config/content.json.

O seguinte comando importa o SDK:

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

O comando a seguir cria o cliente de entrega:

return createDeliveryClient(serverconfig);

O arquivo src/scripts/services.js contém todo o código para obter dados do aplicativo. Há uma função principal para cada componente de página no aplicativo para obter todos os dados dessa página.

Para renderizar as imagens, o services.js fornece um método auxiliar para recuperar o conjunto de origens de um ativo que é construído com base nas renderizações do ativo.

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;
}

Dados da página inicial

A página inicial requer várias chamadas de dados para obter todos os seus dados:

1. Primeiro, consultamos itens no canal especificado em src/config/content.json.
2. Em seguida, para cada um dos itens do tópico, buscamos seus detalhes.
3. Finalmente, buscamos todos os dados do artigo para cada um dos tópicos.

Abra src/scripts/services.js e localize a função getTopicsListPageData(), que obtém todos os dados de tópico da 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;
        })
    ));
}

A função fetchHomePage(), chamada pela função getTopicsListPageData(), obtém todos os itens no canal. Isso obtém o ID do logotipo, o nome da empresa, os URLs sobre contatos e uma lista de tópicos. Observe que estamos consultando a página inicial chamada 'HomePage_JET' para este blog de amostra.

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 função fetchTopic() é chamada para cada ID de tópico para obter os detalhes completos do tópico.

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() também chama getRenditionURLs() para obter o URL da imagem a ser renderizada.

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

Em seguida, na página inicial, também chamamos a função fetchTopicArticles(topicId) para cada tópico. É usado para obter todos os artigos do tópico especificado e os URLs de renderização.

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));
}

O método fetchTopicArticles() também usa getRenditionURLs(), conforme visto anteriormente, para obter a imagem do artigo.

Dados da página do artigo

A página do artigo recebe um ID do artigo e requer várias chamadas de dados para obter todos os seus dados:

1. Obtenha os detalhes do artigo especificado. Para cada artigo, obtenha seus URLs de renderização.
2. Obtenha os URLs de renderização do avatar do autor.

Abra src/scripts/services.js e localize a função fetchArticleDetails(articleId), que obtém os dados da página do artigo.

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));
}

O método fetchArticleDetails() também usa getRenditionURLs(), conforme visto anteriormente, para obter a imagem do avatar.

Estrutura e Páginas do Oracle JET

As seções a seguir fornecem uma visão geral de como o Oracle JET renderiza nossos dados:

• Fluxo de Aplicativos do Blog Oracle JET
• TopicsList Página
• ArticleDetails Página

Fluxo de Aplicativos do Blog Oracle JET

O ponto de entrada principal para este aplicativo Oracle JET é o arquivo src/app.tsx. Este arquivo importa o roteador de pré-ação, bem como todas as páginas do aplicativo.

Em nosso site, queremos fornecer três rotas:

• A página inicial, que consiste na lista de tópicos e exibe todos os artigos do tópico selecionado. Este é o arquivo TopicsListPage.tsx.
• A página de artigo individual, exibindo o artigo selecionado e os detalhes do autor. Este é o arquivo ArticleDetailsPage.tsx.
• Uma página não encontrada, que é para todas as rotas inválidas. Este é o NotFoundPage.tsx.

Conforme visto no código do roteador abaixo, o caminho padrão da home page de '/' é para o TopicsListPage, e cada artigo é hospedado no servidor + 'artigo/:articleId' para o ArticleDetailsPage. Ele é roteado aqui usando o método track() no roteador preact. Todas as rotas inválidas são enviadas para NotFoundPage.

Observação: O suporte adicional para um caminho do roteador base pode ser modificado aqui no Roteador Preato, anexando o base_url antes do caminho desejado. Um método appRoute() especial é incluído no código de amostra para substituir o método Preact Router Route() no caso de um base_url.

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

TopicsList Página

A página TopicsList (home) consiste em uma lista de tópicos composta de tópicos individuais, bem como a lista de artigos do tópico selecionado.

A classe TopicsListPage extrai os dados usando a função fetchData(), que é chamada durante a fase componentDidMount do runtime.

A função fetchData() é a seguinte:

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 o estado está definido para carregar para mostrar o círculo de progresso ao carregar inicialmente e, em seguida, é definido como falso quando o carregamento está concluído. A função getTopicsListPageData() é chamada uma vez e fetchTopicArticles() é chamada para cada tópico. O resultado é uma promessa que é resolvida nesta seção de código.

Assim que tivermos todos os dados, criamos a página de boas-vindas do corpo com o corpo.

O corpo é criado da seguinte forma, onde usamos um 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 = [];
  },
);

Aqui, bodyElems é um array de elementos HTML que colocaremos no componente oj-sp-welcome-page. bodyElems alterna entre um cabeçalho de tópico com a descrição e os cartões de imagem reais de cada artigo sob esse tópico.

Cada cartão de imagem tem uma imagem com uma proporção de 16:9. Isso se deve à restrição de usar tamanhos de imagem 16:9 para o componente oj-sp-image-card e a renderização 16:9 está listada no renditionUrls com o nome do ojspcard para este código de blog de amostra do Oracle JET. Observe também que a ação onClick do cartão de imagem é uma função que roteia para a página do artigo.

O seguinte é retornado pelo TopicsListPage, que inclui o componente oj-sp-welcome-page com o slot bodyElems dentro:

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

O componente oj-sp-welcome-page cria o cabeçalho da página, bem como fornece o espaço para que o bodyElems seja colocado nele. Como visto, temos um título de página, o texto overline 'Home', alguns botões e uma imagem de exibição. A imagem de exibição tem uma origem no campo illustrationForeground e a imagem é estendida usando o parâmetro displayOptions. Há dois botões, 'Sobre Nós' e 'Fale Conosco', que têm ícones na biblioteca oj-ux, e ambos os botões abrem links em uma nova guia para as páginas sobre nós e entre em contato conosco.

ArticleDetails Página

A página ArticleDetails consiste em todos os dados relacionados ao próprio artigo, como autor, imagens e texto.

A classe ArticleDetails extrai os dados usando a função fetchData(), que é chamada durante a fase componentDidMount do runtime.

A função fetchData() é a seguinte:

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

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

Observe que o estado está definido para carregar para mostrar o círculo de progresso ao carregar inicialmente e, em seguida, é definido como falso quando o carregamento está concluído. A função fetchArticleDetails() é chamada uma vez para o articleId em que estamos. O resultado é uma promessa que é resolvida nesta seção de código.

Quando tivermos todos os dados, criamos a página articleDetails.

A página é criada da seguinte forma, na qual usamos um componente oj-sp-item-overview-page com o componente oj-sp-item-overview inserido na seção "visão geral" e o conteúdo principal inserido na seção "principal":

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

O componente oj-sp-item-overview-page fornece o layout da página articleDetails. Particularmente, overviewExpanded é falso para substituir agora a página inteira, as traduções de goToParent são 'Voltar ao Início' e onspGoToParent é uma função que completa a lógica a ser roteada de volta para a página topicsList.

Há dois slots que a página oj-sp-item-overview-page pode aceitar, e esses são o slot "visão geral" e o slot "principal", que contêm detalhes sobre o autor do artigo e fornecem o conteúdo do artigo, respectivamente.

O componente oj-sp-item-overview está inserido na seção 'visão geral' e fornece um layout de coluna para os detalhes do autor. O itemTitle é o nome do autor, o subtítulo é a data formatada e a foto é a origem da foto do autor.

A seção "principal" contém todos os detalhes do artigo, que incluem o título do artigo, uma imagem com legenda, bem como o texto do blog do artigo.

Tarefa 3: Preparar Seu Aplicativo para Implantação

Agora que construímos nosso site de blog Oracle JET, precisamos vê-lo em um servidor de desenvolvimento local para que possamos depurar quaisquer problemas e visualizar o aplicativo antes que ele entre em produção.

O arquivo package.json localizado na raiz do projeto contém scripts que facilitam a criação dos bundles e a execução do aplicativo.

Desenvolvimento

Você pode usar o script dev durante o desenvolvimento:

npm run dev

Este script cria os pacotes de cliente e servidor e inicia o aplicativo em um servidor local. O Webpack observará alterações de código e recriará os pacotes do cliente e do servidor, se necessário.

Produção

Para produção, o script de compilação seria usado para criar os bundles cliente e servidor:

npm run build

Quando o script for concluído, o aplicativo poderá ser executado com o seguinte comando:

npm run start

Conclusão

Neste tutorial, criamos um site de blog no Oracle JET, que pode ser encontrado no Github. Este site usa o Oracle Content Management como um CMS sem interface do usuário. Após configurar e configurar o Oracle Content Management com um canal de conteúdo publicado para o tutorial do site do blog, instalamos e executamos o site do Oracle JET para extrair o conteúdo necessário e criar o site.

Para obter mais informações sobre o Oracle JET, vá para o site do Oracle JET.

Saiba mais sobre conceitos importantes do Oracle Content Management na documentação.

Você pode encontrar mais amostras como esta na página Amostras do Oracle Content Management no Oracle Help Center.

---

Título e Informações de Copyright

Crie um Blog no Oracle JET (VDOM) com o Oracle Content Management Sem Interface

F38762-05

Novembro de 2022

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

Autor Principal: Oracle Corporation