Crie um Blog em Angular com o Oracle Content Management Sem supervisão

Introdução

Angular é uma plataforma para criar aplicativos web para dispositivos móveis e desktop. Mas o que acontece quando você precisa de um sistema de gerenciamento de conteúdo (CMS) para atender a todo o seu conteúdo? Felizmente, o Oracle Content Management, com seus recursos avançados de CMS, tem uma solução graciosa para as suas necessidades de administração e governança de conteúdo.

Neste tutorial, vamos criar um blog simples em Angular, aproveitando o Oracle Content Management como um CMS sem supervisão, bem como seu kit de desenvolvimento de software (SDK) para entrega de conteúdo em JavaScript. Esta amostra Angular está disponível no GitHub.

O tutorial consiste de três etapas:

1. Preparar o Oracle Content Management
2. Construa o Blog em Angola
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 10 ou superior

O que estamos construindo

Nosso blog consiste em um site de três páginas que permite que os visitantes explorem artigos de blog organizados em tópicos. A primeira página, a página inicial, consistirá em marca (nome da empresa e logotipo), alguns links e uma lista de tópicos do blog.

Para dar uma olhada no que estamos construindo, aqui está o estado final de nosso tutorial, um blog Angular básico que consome conteúdo do Oracle Content Management:

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

É assim que a página inicial parecerá no fim deste tutorial:

A segunda página, a página de tópicos, mostra visualizações de cada artigo do blog que pertence ao tópico. Veja como uma página de tópico individual será exibida:

Por fim, a página do artigo renderiza o artigo do blog final, incluindo informações sobre o autor do blog. Veja como uma página de artigo individual será exibida:

Para prosseguir, será necessário ter uma assinatura ativa do Oracle Content Management e efetuar log-in 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 supervisão.

Para este tutorial, você precisará criar um modelo de conteúdo de duas maneiras. Há um pacote de ativos transferível para 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 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

Criar um Repositório de Canal e Ativos

Primeiro, você precisa criar um canal e um repositório de ativos no Oracle Content Management para 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 à esquerda 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' com 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 à esquerda 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' com a finalidade deste tutorial.

   

6. No campo Publicando Canais, 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 concluir.

   

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 um pacote de ativos de amostra pré-configurado do Oracle Content Management que contenha todos os tipos de conteúdo e ativos necessários para este tutorial. Se preferir, você também pode 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 no Pacote de Ativos de Amostras do Oracle Content Management. Isso permitirá que você experimente os tipos de conteúdo e modifique 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 Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) na página downloads do Oracle Content Management. Extraia o arquivo zip baixado para um local no computador. Após a extração, este 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 à esquerda 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 do OCEGettingStarted_data.zip do seu computador local para a pasta Documentos.

   

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

   

6. Após a importação bem-sucedida do conteúdo, navegue até a página Ativos e abra o repositório OCEGettingStartedRepository. Você verá que todas as imagens relacionadas e os itens de conteúdo foram adicionados ao repositório de ativos.

   

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

   

8. Antes da publicação, é necessário validar todos os ativos. Primeiro adicione OCEGettingStartedChannel como 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.

   

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

Depois de importar o Pacote de Ativos de Amostras do Oracle Content Management, você pode começar a criar o blog em Angular.

Criar 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 página inicial de nosso blog. Esta página inicial consiste em branding (nome da empresa e logotipo), alguns URLs para links e uma lista de tópicos de 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 à esquerda e escolha Tipos de Ativos na lista de seleção no cabeçalho da página.
3. Clique em Criar no canto direito superior.
4. Escolha criar um tipo de conteúdo (não um tipo de ativo digital). Repita isso para todos os tipos de conteúdo necessá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 para 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

É assim que sua definição de tipo de conteúdo OCEGettingStartedHomePage deve ter a seguinte aparência:

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

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

É assim que seu tipo de conteúdo OCEGettingStartedTopic deve ter a seguinte aparência:

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

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

É assim que seu tipo de conteúdo OCEGettingStartedAuthor deve ter a seguinte aparência:

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

Nome para Exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
Data de 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

É assim que seu tipo de conteúdo OCEGettingStartedArticle deve ter a seguinte aparência:

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 Ativos, 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ê poderá 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: Construir o Blog em Angular

Para consumir o conteúdo do Oracle Content Management em um aplicativo Angular, podemos usar a amostra de blog Angular, que está disponível como um repositório de código-fonte aberto no GitHub.

Observação: Lembre-se de que o uso da amostra Angular é opcional e o usamos neste tutorial para começar rapidamente. Você também pode criar seu próprio aplicativo Angular, como um scaffoldado pela CLI angular com o suporte de renderização do servidor adicionado usando a CLI angular.

Para construir o blog em angular:

1. Clonar o repositório de amostra e instalar dependências
2. Configurar o aplicativo Angular
3. Trabalhar com o SDK do Oracle Content Management Content
4. Usar o Content SDK para Obter Conteúdo

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

A amostra de blog Angular está disponível como um repositório de código aberto no GitHub.

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

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

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

npm install

Configurar o Aplicativo Angular

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

Este aplicativo usa um arquivo .env que é lido pelo Webpack quando ele agrupa os aplicativos cliente e servidor. Usando webpack.SetPlugin, todos os valores lidos no arquivo .env podem ser disponibilizados para qualquer lugar no aplicativo.

Abra o arquivo .env em um editor de texto. Você verá as seguintes informações:

# 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=47c9fb78774d4485bc7090bf7b955632

Altere cada par de chave/valor para refletir o URL da sua instância, a versão da API que você deseja direcionar e o token do canal associado ao seu canal de publicação. O canal deste tutorial é OCEGettingStartedChannel.

Trabalhar com o SDK do Oracle Content Management Content

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 no 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 Obter Conteúdo

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

O Content SDK usa um objeto DeliveryClient para especificar o ponto final. Você pode fazer todas as solicitações usando esse objeto cliente.

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 cria um cliente de entrega usando a configuração especificada no .env.

O seguinte comando importa o SDK:

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

O seguinte comando cria o cliente de entrega:

return createDeliveryClient(serverconfig);

Para renderizar as imagens, o services.js fornece um método auxiliar para recuperar o conjunto de origens de um ativo que é construído a partir das 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, '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;
    }

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 do aplicativo para obter todos os dados dessa página.

Dados da página inicial

A home page requer várias chamadas de dados para obter todos os seus dados:

1. Primeiro, consultamos itens no canal especificado no .env.
2. Para cada um dos itens do tópico, extraímos seus detalhes.

Abra src/scripts/services.js e localize a função getTopicsListPageData(), que obtém todos os dados 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 de contato e informações e uma lista de tópicos.

function fetchHomePage(client) {
      return client.queryItems({
        q: '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
      }).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));
    }

Em seguida, a função fetchTopic() é chamada para cada ID de tópico a fim de 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));
    }

Dados da Página do Tópico

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

1. Obtenha todos os artigos para o tópico especificado.
2. Para cada artigo, obtenha seus URLs de renderização.

Abra src/scripts/services.js e localize a função fetchTopicArticles(topicId), que é usada para obter todos os dados da página do tópico.

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.id)
              .then((renditionUrls) => {
                article.renditionUrls = renditionUrls;
                // Note: the spread operator is used here so that we return a top level
                // object, rather than a value which contains the object
                // i.e we return
                //   {
                //     field1: 'value', field2 : "value", etc
                //   },
                // rather than
                //   {
                //     name: {
                //             field1: 'value', field2 : "value", etc
                //           }
                //    }
                return {
                  ...article,
                };
              }),
          );
        });
    
        // execute all the promises and return all the data
        // 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 o getRenditionURLs() conforme visto anteriormente, para obter a imagem do artigo.

Dados da Página do Artigo

A página do artigo recebe um ID 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 para o avatar do autor.

Abra o 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 o getRenditionURLs() conforme visto anteriormente, para obter a imagem do avatar.

Agora que temos nossas consultas de dados, podemos renderizar as respostas em nossos componentes angulares.

Renderização por Cliente Versus Servidor

Com a renderização do cliente (CSR), o cliente é responsável por criar e renderizar o conteúdo de uma página da Web usando JavaScript. Com a renderização do servidor (SSR), toda a página é criada no servidor, e uma página da Web completa é retornada ao cliente.

Quando a página da Web é solicitada a partir do servidor na renderização do cliente, o documento HTML retornado contém o HTML do esqueleto e nenhum conteúdo real. Ele contém uma referência a um pacote JavaScript, que o cliente solicita do servidor. Ao receber este pacote, o cliente executa o JavaScript e preenche a página da Web. Até o cliente terminar de executar o JavaScript, todo o usuário verá uma página da Web em branco. Um lado de baixo dos aplicativos apresentados pelo cliente é que quando alguns rastreadores da Web indexam o site, não há conteúdo real para indexar.

Com a renderização do servidor (SSR), toda a página é criada no servidor, e uma página da Web completa é retornada ao cliente. A vantagem disso é que os crawlers da Web podem indexar todo o conteúdo na página da Web.

Renderização de Servidor Angular

O fluxo do aplicativo de blog Angular é o seguinte:

1. O cliente faz uma solicitação ao servidor para uma determinada rota.
2. O servidor Express recebe a solicitação.
3. O servidor Expressa passa todas as solicitações do cliente para páginas para o Express Engine do Universo Angular
4. O Express Engine do Universo Angular usa um arquivo HTML de modelo e o preenche com o seguinte
   1. A marcação para a rota especificada
   2. Os dados da rota são serializados
   3. Referências a quaisquer folhas de estilo
   4. Referências a bundles JavaScript a serem executados no cliente
5. O servidor Express retorna o documento HTML criado pelo Express Engine do Universo Angular para o cliente
6. O cliente recebe o HTML e o renderiza. O usuário verá uma página Web totalmente formada.
7. O cliente solicita todos os bundles JavaScript do servidor. Depois de recebê-lo, o cliente executa o JavaScript no pacote.
   1. Ele "idrata" o HTML, adicionando em qualquer JavaScript do lado do cliente, como listeners de eventos.
   2. Angular leva automaticamente os dados serializados da página e injeta-os no código JavaScript para que fiquem disponíveis para os componentes
8. Se o documento HTML tiver uma folha de estilo, o cliente solicitará a folha de estilo.

A CLI angular suporta a adição de suporte de renderização do servidor a um aplicativo Angular existente. Consulte https://angular.io/guide/universal para obter mais detalhes.

Servidor Expresso do Lado do Servidor

O aplicativo de servidor faz uso de um servidor Express para receber a solicitação e encaminhar para o Express Engine do Universo Angular.

O arquivo do servidor Express está localizado em server.js. Esse arquivo é criado pela CLI angular ao adicionar suporte à renderização do lado do servidor.

Componentes angulares

Os componentes angulares são gravados no TypeScript e definem um modelo que define a exibição. Esses modelos contêm HTML comum, diretivas angulares e marcação de ligação, que permitem que Angular ajuste o HTML antes que ele seja renderizado.

O aplicativo de blog divide cada página em vários componentes menores.

As próximas seções fornecem uma visão geral de como o Angular renderiza nosso aplicativo em cada um de nossos componentes:

• Módulo do Aplicativo
• Módulo Raiz para Renderização do Servidor
• Resolvedor de Dados da Lista de Tópicos
• Resolvedor de Dados da Lista de Artigos
• Resolvedor de Dados de Detalhes do Artigo
• Componente do Aplicativo
• Componente TopicsList
• Componente TopicListItem
• Componente ArticlesList
• Componente ArticleDetails

Módulo do Aplicativo

O módulo do aplicativo localizado em src/app/app.module.ts. Ele inicializa o aplicativo com o componente Aplicativo.

Esse arquivo define as diferentes rotas para nosso aplicativo. Em nosso site, queremos fornecer três rotas:

• A página inicial, que consiste na lista de tópicos
• A página do tópico, que exibe todos os artigos do tópico selecionado
• A página do artigo, exibindo o artigo selecionado

Observe que a página do tópico e a página do artigo têm um argumento fornecido pelo Oracle Content Management em seu URL.

As rotas de página inicial, página de tópico e página de artigo definem os resolvedores usados para obter todos os dados necessários para a rota antes da criação dos componentes da rota.

const appRoutes: Routes = [
      // home page - list of Topics
      {
        path: 'topics',
        component: TopicsListComponent,
        resolve: { routeData: TopicsListDataResolver }
      },
      // list of articles for a specific Topic
      {
        path: 'articles/:topicId',
        component: ArticlesListComponent,
        resolve: { routeData: ArticlesListDataResolver }
      },
      // details for a specific Article
      {
        path: 'article/:articleId',
        component: ArticleDetailsComponent,
        resolve: { routeData: ArticleDetailsDataResolver }
      },
      // no path specified, go to home
      {
        path: '',  redirectTo: '/topics', pathMatch: 'full'
      },
      // path not found
      { path: '**', component: PageNotFoundComponent },
    ];

Este módulo de aplicativo é o ponto de entrada ao renderizar o aplicativo no lado do cliente.

Módulo Raiz para Renderização do Servidor

O ponto de entrada principal para este aplicativo Angular, ao renderizar o aplicativo no servidor, é o módulo do servidor de aplicativos localizado em src/app/app.server.module.ts.

Este módulo importa o módulo de aplicativo, localizado em src/app/app.server.module.ts, juntamente com o ServerModule da Angular. O aplicativo do servidor inicializa o mesmo componente do Aplicativo do cliente e usa todos os mesmos componentes.

A CLI angular cria o arquivo do módulo do servidor ao adicionar suporte à renderização do lado do servidor.

Resolvedor de Dados da Lista de Tópicos

Os tópicos listam o resolvedor de dados, localizado em src/resolver/topics-list-data.resolver.ts, trata da obtenção dos dados a serem renderizados na home page.

Quando o cliente está hidratando, esses dados são obtidos em transferState, que foi preenchido durante a renderização do servidor e é serializado no documento HTML retornado ao cliente.

Durante a renderização do servidor ou a renderização do cliente quando a navegação do cliente tiver ocorrido, transferState não conterá os dados. Os dados são obtidos no servidor do Oracle Content Management, usando o Content SDK, chamando o método getTopicsListPageData() de src/scripts/services.js.

Resolvedor de Dados da Lista de Artigos

O resolvedor de dados da lista de artigos, localizado em src/resolver/articles-list-data.resolver.ts, trata da obtenção dos dados a serem renderizados na página do tópico.

Quando o cliente está hidratando, esses dados são obtidos em transferState, que foi preenchido durante a renderização do servidor e é serializado no documento HTML retornado ao cliente.

Durante a renderização do servidor ou a renderização do cliente quando a navegação do cliente tiver ocorrido, transferState não conterá os dados. Os dados são obtidos do servidor do Oracle Content Management usando o Content SDK, chamando o método fetchTopicArticles() de src/scripts/services.js.

Resolvedor de Dados de Detalhes do Artigo

O artigo detalha o resolvedor de dados, localizado em src/resolver/article-details-data.resolver.ts, controla a obtenção dos dados a serem renderizados na página do artigo.

Quando o cliente está hidratando, esses dados são obtidos em transferState, que foi preenchido durante a renderização do servidor e é serializado no documento HTML retornado ao cliente.

Durante a renderização do servidor ou a renderização do cliente quando a navegação do cliente tiver ocorrido, transferState não conterá os dados. Os dados são obtidos no servidor do Oracle Content Management, usando o Content SDK, chamando o método fetchArticleDetails() de src/scripts/services.js.

Componente do Aplicativo

O componente Aplicativo, localizado em src/app/app.component.ts, define a exibição raiz.

Este componente contém as tags de link do roteador. Angular trocará os componentes na página e fora dela, com base na rota atual.

Componente TopicsList

A Home page consiste em uma lista composta de tópicos individuais. Ele é renderizado pelo componente TopicsList, localizado em src/app/topics-list/topics-list.component.ts.

Em ngOnInit, o componente obtém os dados da rota ativa, que foi preenchida pelo resolvedor de dados da lista de tópicos.

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

Quando o componente é renderizado, ele obtém todos os dados de suas variáveis de membro.

A marcação para o componente TopicsList está localizada em src/app/topics-list/topics-list.component.html.

Componente TopicListItem

O componente TopicsList usa o componente TopicsListItem para exibir o tópico individual na lista.

Ele está localizado em src/app/topic-list-item.component.ts e recebe todos os seus dados como propriedades. Ele não obtém dados adicionais do servidor.

A marcação para o componente TopicsListItem está localizada em src/app/topic-list-item.component.html.

Componente ArticlesList

A página Tópico exibe os artigos no tópico cujo ID é passado para o componente no URL. Ele é renderizado pelo componente ArticlesList, localizado em src/app/articles-list.component.ts.

Em ngOnInit, você pode ver que o componente obtém os dados da rota ativa, que foi preenchida pelo resolvedor de dados da lista de artigos.

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

Quando o componente é renderizado, ele obtém todos os dados de suas variáveis de membro.

A marcação para o componente ArticlesList está localizada em src/app/articles-list.component.html.

Componente ArticleListItem

O componente ArticlesList usa o componente ArticleListItem para exibir o artigo individual na lista.

Esse componente está localizado em src/app/article-list-item.component.ts e recebe todos os seus dados como propriedades. Ele não obtém dados adicionais do servidor.

A marcação para o componente ArticleListItem está localizada em src/app/article-list-item.component.html.

Componente ArticleDetails

A página Artigo exibe detalhes do artigo cujo ID é passado no URL. Ele é renderizado pelo componente ArticleDetails, localizado em src/app/article-details.component.ts.

Em ngOnInit, você pode ver que o componente obtém os dados da rota ativa, que foi preenchida pelo resolvedor de dados da lista de artigos.

ngOnInit() {
      // get the values from the routed URL
      this.articleId = this.route.snapshot.params[PAGE_PARAM_TOPIC_ARTICLE_ID];
      this.topicId = this.route.snapshot.queryParams[PAGE_PARAM_TOPIC_ID];
      this.topicName = this.route.snapshot.queryParams[PAGE_PARAM_TOPIC_NAME];
    
      const data = this.route.snapshot.data.routeData;
      . . .
    }

Quando o componente é renderizado, ele obtém todos os dados de suas variáveis de membro.

A marcação para o componente ArticleDetails está localizada em src/app/article-details.component.html.

Tarefa 3: Preparar Seu Aplicativo para Implantação

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

Prepare o aplicativo para implantação em duas etapas:

1. Criou um servidor de desenvolvimento local
2. Usar scripts para criar e executar o aplicativo em desenvolvimento e produção

Desenvolver um Servidor de Desenvolvimento Local

Você pode iniciar um servidor de desenvolvimento localmente executando o comando a seguir.

npm run dev

Em seguida, abra seu navegador para http://localhost:4200 para ver seu site em ação.

Use Scripts para Criar e Executar o Aplicativo em Desenvolvimento e Produção

Para produção, o script de construção seria usado para criar o código do cliente e do servidor.

npm run build

Esse script executa primeiro a criação do cliente e, em seguida, executa a criação do servidor. Para iniciar o aplicativo do servidor, é necessário implantar o servidor/servidor e o navegador/distúrbio construídos na máquina do servidor, usando o seguinte comando:

npm run start

Conclusão

Neste tutorial, criamos um site de blog em Angular, 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 Angular para extrair o conteúdo necessário e criar o site.

Para obter mais informações sobre o Angular, vá para o site angular.

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

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

---

Título e Informações de Copyright

Crie um Blog em Angular com o Oracle Content Management Sem supervisão

F49072-01

Dezembro de 2021

Copyright © 2021, Oracle and/or its affiliates.

Autor Principal: Oracle Corporation