Criar uma Galeria de Imagens em Angular com o Oracle Content Management sem Interface do Usuário
Introdução
Angular é uma plataforma para criar aplicativos web móveis e de desktop.
Este tutorial apresentará as etapas básicas da criação de um visualizador de imagens usando o Angular, com o Oracle Content Management como o sistema de gerenciamento de conteúdo e seu SDK de Conteúdo. Você verá como as taxonomias podem ser usadas para categorizar conteúdo e como diferentes renderizações de ativos digitais podem ser usadas para vários casos de uso. Esta amostra angular está disponível no GitHub.
O tutorial consiste de três etapas:
- Preparar o Oracle Content Management
- Construa a Galeria de Imagens em Angular
- Preparar seu aplicativo para implantação
Pré-requisitos
Antes de prosseguir com este tutorial, recomendamos que você leia as seguintes informações primeiro:
Para seguir este tutorial, você precisará:
- 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 o Node versão 10 ou superior
O que estamos construindo
Nossa galeria de imagens será composta por várias páginas de imagens de alimentos e bebidas disponíveis em uma cafeteria.
Para dar uma olhada no que estamos construindo, aqui está o estado final do nosso tutorial, uma versão ao vivo deste site da galeria de imagens:
https://headless.mycontentdemo.com/samples/oce-angular-gallery-sample
As categorias são nós filho de uma taxonomia e podem ser organizadas em hierarquias. Para nossa galeria de imagens, queremos mostrar todas as categorias disponíveis, independentemente da organização. Para fazer isso, primeiro precisamos encontrar as taxonomias disponíveis, que fazemos usando o método getTaxonomies() do SDK de Conteúdo.
Observação: A implementação de getTaxonomies usa o recurso GET da API REST /published/api/v1.1/taxonomies.
Em seguida, precisamos obter o conjunto de categorias para cada uma das taxonomias. Isso é feito usando o método queryTaxonomyCategories() do SDK de Conteúdo.
Observação: A implementação de queryTaxonomyCategories usa a API REST GET /published/api/v1.1/taxonomies/{id}/categories.
Para criar a visualização de uma categoria, como Bagels, precisamos obter uma contagem do número de imagens e dos URLs das quatro primeiras imagens.
Nossa solicitação para localizar os ativos publicados na categoria especifica os critérios da categoria por meio de uma string de consulta, da seguinte forma:
"(taxonomies.categories.nodes.id eq 892CD6BC4F654249A00CB7942EE8C773)"Para otimizar o carregamento de imagens, usaremos uma renderização da imagem chamada 'Thumbnail'. Consulte retrieveThumbnailURL(), em src/scripts/services.js, para obter o código que examina o conjunto de renderizações disponíveis para cada imagem.
Observação: Além de publicar os ativos digitais que queremos exibir, você também precisa publicar as taxonomias no canal.
Para continuar, será necessário ter uma inscrição ativa no Oracle Content Management e fazer log-in com a função Administrador de Conteúdo.
Tarefa 1: Preparar o Oracle Content Management
Este tutorial é baseado no pressuposto de que você criou seu repositório de ativos e atualmente tem um modelo de conteúdo vazio (ou seja, nenhum tipo de conteúdo criado).
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 do usuário.
Para este tutorial, você precisará criar um modelo de conteúdo de duas maneiras. Há um pacote de ativos descarregáveis disponível que preencherá seu repositório vazio com tipos de conteúdo e conteúdo associado ou você pode criar seu próprio modelo de conteúdo e conteúdo.
Para preparar o Oracle Content Management:
- Crie um canal e um repositório de ativos.
- Importar o Pacote de Ativos de Amostras do Oracle Content Management
- Fazer Upload de Seus Próprios Ativos de Imagem
- Crie Taxonomias e Vincule-as aos Ativos de Imagem
Criar um Repositório de Ativos e Canal
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:
Efetue log-in na interface Web do Oracle Content Management como administrador.
Escolha Conteúdo no menu de navegação à esquerda e escolha Publicando Canais na lista de seleção no cabeçalho da página.
No canto superior direito, clique em Criar para criar um novo canal. Nomeie o canal 'OCEImageGalleryChannel' para a finalidade deste tutorial e mantenha o acesso público. Clique em Salvar para criar o canal.
Escolha Conteúdo no menu de navegação à esquerda e escolha Repositórios na lista de seleção no cabeçalho da página.
No canto superior direito, clique em Criar para criar um novo repositório de ativos. Nomeie o repositório de ativos 'OCEImageGalleryRepository' para a finalidade deste tutorial.
No campo Canais de Publicação, selecione OCEImageGalleryChannel para indicar ao Oracle Content Management que o conteúdo no repositório OCEImageGalleryRepository pode ser publicado no canal OCEImageGalleryChannel. Clique em Salvar quando terminar.
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 contém todos os tipos de conteúdo e ativos necessários para este tutorial.
Você pode fazer upload de uma cópia do conteúdo que estamos usando neste tutorial a partir do Pacote de Ativos de Amostras do Oracle Content Management. Isso permitirá que você experimente os tipos de conteúdo e modifique o conteúdo. Você pode fazer download do arquivo compactado do pacote de ativos, OCESamplesAssetPack.zip e extraí-lo para um diretório de sua escolha:
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 no computador. Após a extração, esse local incluirá um arquivo chamado OCEImageGallery_data.zip.
Efetue log-in na interface Web do Oracle Content Management como administrador.
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 OCEImageGalleryRepository e clique no botão Importar Conteúdo na barra de ação superior.
Faça upload do OCEImageGallery_data.zip do computador local para a pasta Documentos.
Após fazer upload, selecione OCEImageGallery_data.zip e clique em OK para importar o conteúdo para o repositório de ativos.
Depois que o conteúdo tiver sido importado com sucesso, navegue até a página Ativos e abra o repositório OCEImageGalleryRepository. Você verá que todas as imagens e itens de conteúdo relacionados foram adicionados ao repositório de ativos.
Clique em Selecionar Tudo no canto superior esquerdo e em Publicar para adicionar todos os ativos importados ao canal de publicação criado anteriormente, OCEImageGalleryChannel.
Antes da publicação, é necessário validar todos os ativos. Primeiro, adicione OCEImageGalleryChannel como um canal selecionado e, em seguida, clique no botão Validar.
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 isso for feito, 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 a galeria de imagens no Angular.
Fazer Upload de Seus Próprios Ativos de Imagem
Para este tutorial, estamos usando um repositório de ativos chamado 'OCEImageGalleryRepository' para criar a home page do site da galeria. Esta página inicial consiste no título 'Image Gallery', bem como álbuns de coleção de imagens que têm ativos de imagem dentro.
Para adicionar ativos de imagem ao repositório de ativos da galeria:
Faça login na interface Web do Oracle Content Management.
Clique em Ativos no menu de navegação à esquerda.
Abra o repositório OCEImageGalleryRepository.
Clique em Adicionar no canto superior direito da página para adicionar ativos de imagem ao repositório de ativos da galeria.
Carregue seus próprios novos ativos do computador local ou escolha os ativos existentes já no Oracle Content Management.
Crie Taxonomias e Vincule-as aos Ativos de Imagem
Você precisa criar uma taxonomia no Oracle Content Management e, em seguida, atribuir categorias aos ativos do repositório.
Para criar uma taxonomia no Oracle Content Management:
Efetue log-in na interface Web do Oracle Content Management como administrador.
Escolha Conteúdo no menu de navegação à esquerda e escolha Taxonomias na lista de seleção no cabeçalho da página.
No canto superior direito, clique em Criar para criar uma nova taxonomia. Nomeie o canal 'OCEImageGalleryTaxonomy' para a finalidade deste tutorial.
Clique em Criar.
Agora crie sua taxonomia adicionando categorias. Clique em Adicionar uma categoria.
Nomeie o item de categoria pai 'Alimentos' e adicione as seguintes categorias filhas:
- Pequeno-almoço
- Sobremesa
- Bebidas
- Sanduíches
Clique em Concluído no canto superior direito da tela.
Na página Taxonomias, selecione a taxonomia OCEImageGalleryTaxonomy e clique em Promover na barra de ações para disponibilizá-la para uso em seus repositórios de ativos.
Em seguida, edite o repositório OCEImageGalleryRepository para ativar a taxonomia OCEImageGalleryTaxonomy para esse repositório:
Efetue log-in na interface Web do Oracle Content Management como administrador.
Escolha Conteúdo no menu de navegação à esquerda e escolha Repositórios na lista de seleção no cabeçalho da página.
Selecione e edite o repositório OCEImageGalleryRepository.
No campo Taxonomias, selecione OCEImageGalleryTaxonomy, para que você possa atribuir categorias dessa taxonomia aos ativos no repositório OCEImageGalleryRepository. Clique em Salvar.
Em seguida, atribua categorias de taxonomia a cada um dos ativos de imagem no repositório OCEImageGalleryRepository:
Faça login na interface Web do Oracle Content Management.
Clique em Ativos no menu de navegação à esquerda.
Abra o repositório OCEImageGalleryRepository.
Selecione um ou mais ativos de imagem, clique em Mais na barra de ações e escolha Categorias no menu.
No painel Categorias, clique em Adicionar Categoria. Procure o nome da categoria na barra de pesquisa ou selecione uma categoria na estrutura hierárquica da taxonomia e clique em Adicionar para atribuir a categoria selecionada. Você pode atribuir várias categorias a um ativo.
Depois de concluir a atribuição de taxonomias a todos os ativos de imagem, selecione todos os ativos em seu repositório e publique-os no canal OCEImageGalleryChannel.
Tarefa 2: Criar a Galeria de Imagens em Angular
Para consumir nosso conteúdo do Oracle Content Management em um aplicativo Angular, podemos usar a amostra da galeria de imagens 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 nós a usamos neste tutorial para começar rapidamente. Você também pode criar seu próprio aplicativo Angular, como um scaffolded pela CLI Angular com suporte adicional de renderização do lado do servidor usando a CLI Angular.
Para construir a galeria de imagens em Angular:
- Clonar o repositório de amostra e instalar dependências
- Configurar o aplicativo Angular
- Trabalhar com o SDK do Oracle Content Management Content
- Usar o SDK do Oracle Content Management Content 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-fonte aberto no GitHub.
Primeiro você precisará clonar a amostra do GitHub para seu computador local e alterar o diretório para a raiz do repositório:
git clone https://github.com/oracle/oce-angular-gallery-sample.git
cd oce-angular-gallery-sampleAgora 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 installConfigurar o Aplicativo Angular
Nesta amostra de galeria de imagens Angular, você precisa configurar algumas informações para que o SDK do Oracle Content Management Content (e quaisquer outras solicitações) possa direcionar o URL da instância e a versão da API corretos 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.
Este aplicativo utiliza um arquivo .env que é lido pelo Webpack ao empacotar os aplicativos cliente e servidor. Usando webpack.DefinePlugin, qualquer valor lido do arquivo .env pode ser disponibilizado 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=e0b6421e73454818948de7b1eaddb091Altere 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 é OCEImageGalleryChannel.
Trabalhar com o SDK do Oracle Content Management Content
O Oracle Content Management oferece um SDK de Conteúdo em duas versões diferentes, dependendo de você estar aproveitando-o em um contexto do cliente (bundle do navegador) ou em um contexto do servidor (Node.js).
Ambos os SDKs estão disponíveis como bibliotecas de código-fonte aberto no GitHub:
Além disso, o SDK de Conteúdo está disponível como um módulo NPM com cada instância do Oracle Content Management, em que {server} abaixo representa o URL da instância (consulte Início Rápido para obter informações sobre como recuperar o URL da instância):
- Navegador: {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-1.1.0.tgz
- Node.js: {server}/sitesclouddelivery/renderer/app/sdk/npm/contentsdk-node-1.1.0.tgz
Talvez você também queira usar o bundle do cliente minimizado: {server}/_sitesclouddelivery/renderer/app/sdk/js/content.min.js
Usar o SDK do Oracle Content Management Content para Obter Conteúdo
Agora podemos aproveitar o SDK do Oracle Content Management Content para extrair conteúdo e renderizá-lo em nosso aplicativo Angular.
O SDK do Oracle Content Management Content 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 SDK do Oracle Content Management Content e, em seguida, cria um cliente de entrega usando a configuração especificada em .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);O arquivo src/scripts/services.js contém todo o código para obter os 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 service.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;
}Dados da página inicial
A página inicial requer várias chamadas de dados para obter todos os seus dados:
- Primeiro carregamos as taxonomias do canal especificado em .env.
- Para cada uma das taxonomias, obtemos todas as categorias dessa taxonomia.
- Para cada categoria, obtemos quatro itens de conteúdo nessa categoria.
- Para cada um desses itens, obtemos seus URLs de renderização.
Abra src/scripts/services.js e localize a função getHomePageData(), que é usada para obter todos os dados da home page.
export function getHomePageData() {
const deliveryClient = getClient();
// get the categories for all taxonomies then add all the category items to each category
return fetchAllTaxonomiesCategories(deliveryClient).then(
(initialCategories) => addItemsToCategories(deliveryClient, initialCategories).then(
(categories) => {
// pull out all of the items for all of the categories then
// append the computed renditionUrls to each item.
const allItems = categories.map((category) => category.items);
const items = flattenArray(allItems);
// for each item, retrieve the rendition urls and add it to the item
items.forEach((item) => {
item.renditionUrls = getSourceSet(item);
});
return { categories };
},
),
);
}getHomePageData() chama fetchAllTaxonomiesCategories() para obter todas as categorias em todas as taxonomias.
function fetchAllTaxonomiesCategories(client) {
return client
.getTaxonomies()
.then((topLevelItem) => {
const taxonomyIds = topLevelItem.items.map((taxonomy) => taxonomy.id);
const promises = [];
// loop over each taxonomy id
taxonomyIds.forEach((taxonomyId) => {
// add a promise to the total list of promises to get the categories
// for the specific taxonomy id
promises.push(
fetchCategoriesForTaxonomyId(client, taxonomyId)
.then((categoriesTopItem) => categoriesTopItem.items),
);
});
// execute all the promises returning a single dimension array of all
// of the categories for all of the taxonomies (note: no taxonomy information)
// is returned.
return Promise.all(promises)
.then((arrayOfCategoryArray) => flattenArray(arrayOfCategoryArray));
})
.catch((error) => logError('Fetching taxonomies failed', error));
}fetchAllTaxonomiesCategories() chama fetchCategoriesForTaxonomyId() para obter todas as categorias em uma taxonomia específica.
function fetchCategoriesForTaxonomyId(client, taxonomyId) {
return client
.queryTaxonomyCategories({
id: `${taxonomyId}`,
})
.then((topLevelItem) => topLevelItem)
.catch((error) => logError('Fetching categories for taxonomy failed', error));
}Em seguida, a função addItemsToCategories é chamada para adicionar os quatro itens de categoria a cada categoria.
function addItemsToCategories(client, categories) {
const promises = [];
// loop over each category
categories.forEach((category) => {
// add a promise to the total list of promises to get the items
// for the specific category
promises.push(
fetchItemsForCategory(client, category.id, true).then(
(topLevelItem) => {
// add the item to the category before returning it
category.items = topLevelItem.items;
category.totalResults = topLevelItem.totalResults;
return {
...category,
};
},
),
);
});
// execute all the promises before returning the data
return Promise.all(promises).then((arrayOfItems) => flattenArray(arrayOfItems));
}Por fim, getSourceSet visto anteriormente é chamado para obter os URLs de renderização para cada item.
Dados da Página de Grade de Imagem
A página de grade de imagem recebe um ID categoria e requer várias chamadas de dados para obter todos os dados:
- Obtenha todos os itens da categoria especificada.
- Para cada item, obtenha seus URLs de renderização.
Abra src/scripts/services.js e localize a função getImageGridPageData(), que é usada para obter todos os dados da página da grade de imagem.
export function getImageGridPageData(categoryId) {
const client = getClient();
return fetchItemsForCategory(client, categoryId, false).then(
(topLevelItem) => {
const { totalResults } = topLevelItem;
// for each item, retrieve the rendition urls and add it to the item
topLevelItem.items.forEach((item) => {
item.renditionUrls = getSourceSet(item);
});
return {
totalResults,
items: topLevelItem.items,
};
},
);
}Ele chama fetchItemsForCategory, como a página inicial, mas sem limite, para que todos os itens sejam retornados, e não apenas quatro.
Agora que temos nossa consulta de dados, podemos renderizar as respostas em nossos componentes angulares.
Renderização no Lado Cliente Versus no 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 Web completa é retornada ao cliente.
Quando a página Web é solicitada do servidor na renderização do cliente, o documento HTML retornado contém HTML esqueleto e nenhum conteúdo real. Ele contém uma referência a um pacote JavaScript, que o cliente então solicita do servidor. Ao receber este pacote, o cliente executa o JavaScript e preenche a página Web. Até que o cliente termine de executar o JavaScript, todo o usuário visualiza uma página da Web em branco. Uma desvantagem dos aplicativos renderizados no lado do cliente é que quando alguns crawlers da Web indexam o site, não há conteúdo real a ser indexado.
Com a renderização do servidor (SSR), toda a página é criada no servidor e uma página Web completa é retornada ao cliente. A vantagem disso é que os crawlers Web podem indexar todo o conteúdo na página Web.
Renderização angular do lado servidor
O fluxo da aplicação da galeria de imagens angular é o seguinte:
- O cliente faz uma solicitação ao servidor para uma determinada rota.
- O servidor Express recebe a solicitação.
- O servidor Express transmite todas as solicitações do cliente para páginas para o Mecanismo Express do Angular Univeral
- O Mecanismo Express do Angular Univeral usa um arquivo HTML de modelo e o preenche com o seguinte
- A marcação da rota fornecida
- Os dados da rota foram serializados fora
- Referências a qualquer folha de estilo
- Referências a pacotes JavaScript a serem executados no cliente
- O servidor Express retorna o documento HTML criado pelo Mecanismo Express do Angular Univeral ao cliente
- O cliente recebe o HTML e o renderiza. O usuário verá uma página Web totalmente formada.
- O cliente solicita qualquer pacote JavaScript do servidor. Depois de recebê-lo, o cliente executa o JavaScript no pacote.
- Ele "hidra" o HTML, adicionando em qualquer JavaScript do cliente, como listeners de eventos.
- Angular automaticamente leva os dados serializados da página e os injeta no código JavaScript para ficarem disponíveis para os componentes
- Se o documento HTML contiver uma folha de estilo, o cliente solicitará a folha de estilo.
A CLI angular suporta a adição de suporte de renderização no lado do servidor a um aplicativo Angular existente. Consulte https://angular.io/guide/universal para obter mais detalhes.
Servidor Express no Servidor
O aplicativo de servidor utiliza um servidor Express para receber a solicitação e encaminhar para o Mecanismo Express do Angular Univeral.
O arquivo do servidor Express está localizado no 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 vinculação, que permitem que Angular ajuste o HTML antes de ser renderizado.
As próximas seções fornecem uma visão geral de como Angular renderiza nossa aplicação em cada um de nossos componentes:
- Módulo do Aplicativo
- Módulo raiz para renderização no servidor
- Resolvedor da página inicial
- Resolvedor da Página Grade de Imagem
- Componente do Aplicativo
- Componente Home
- Componente da Galeria
- Componente da Grade de Imagem
Módulo do Aplicativo
O módulo de aplicativo localizado em src/app/app.module.ts. Ela inicializa o aplicativo com o componente do aplicativo.
Esse arquivo define as diferentes rotas para nosso aplicativo. Em nosso site, queremos fornecer duas rotas:
- A home page, que consiste na lista de categorias
- A página de grade de imagem, que exibe todos os itens de um determinado ID categoria.
A página de grade de imagem utiliza um argumento fornecido pelo Oracle Content Management em seu URL.
As rotas da página inicial e da página da grade de imagem definem os resolvedores usados para obter todos os dados necessários para a rota antes de os componentes da rota serem criados.
const appRoutes: Routes = [
// home page - list of categories in all taxonomies
{
path: 'home',
component: HomeComponent,
resolve: { routeData: HomePageDataResolver }
},
// no path specified, go to home
{
path: '', redirectTo: '/home', pathMatch: 'full'
},
// Grid of images for the selected category
{
path: 'category/:categoryId',
component: ImageGridComponent,
resolve: { routeData: ImageGridDataResolver }
},
];Este módulo de aplicativo é o ponto de entrada ao renderizar o aplicativo no cliente.
Módulo Raiz para Renderização no Lado do Servidor
O ponto de entrada principal deste 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 ServerModule do Angular. O aplicativo do servidor inicializa o mesmo componente de Aplicativo que o cliente e usa todos os mesmos componentes.
A CLI Angular cria o arquivo de módulo do servidor ao adicionar suporte de renderização do lado do servidor.
Resolvedor de Dados da Home Page
O resolvedor de dados da home page, localizado em src/resolvers/home-page-data.resolver.ts, trata da obtenção dos dados a serem processados na home page.
Quando o cliente está sendo hidratado, esses dados são obtidos de transferState, que foi preenchido durante a renderização do servidor e serializado para fora 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 SDK de Conteúdo, chamando o método getHomePageData() de src/scripts/services.js.
Resolvedor de Dados da Grade de Imagem
O resolvedor de dados da grade de imagem, localizado em src/resolver/image-grid-data.resolver.ts, trata da obtenção dos dados a serem renderizados na página da grade de imagem.
Quando o cliente está sendo hidratado, esses dados são obtidos de transferState, que foi preenchido durante a renderização do servidor e serializado para fora 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 SDK de Conteúdo, chamando o método getImageGridPageData() 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á componentes na página dentro dessas tags, com base na rota atual.
Componente Home
A página inicial consiste em uma lista de categorias de uma taxonomia, com uma visualização de quatro itens nessa categoria.
Abra o componente Home, localizado em src/app/home/home.component.ts. Em ngOnInit, o componente obtém os dados da rota ativa, que foi preenchida pelo resolvedor da home page.
ngOnInit() {
const data = this.route.snapshot.data.routeData;
. . .
}Quando o componente é renderizado, ele obtém todos os dados de suas variáveis de membro. O mapa de miniaturas de categoria e imagem é passado para o componente Galeria.
A marcação do componente Home está localizada em src/app/home/home.component.html.
Componente da Galeria
O componente Galeria representa a categoria individual na lista. Este componente exibe uma visualização de quatro dos itens na categoria.
Localizado em src/app/gallery/gallery-component.ts, o componente Gallery recebe todos os seus dados como propriedades. Ele não obtém dados adicionais do servidor.
A marcação do componente Galeria está localizada em src/app/gallery/gallery-component.html.
Componente da Grade de Imagem
O componente Grade de Imagem exibe os itens na categoria cujo ID é passado para o componente no URL.
Abra o componente Grade de Imagem, localizado em src/app/image-grid-component.ts. Em ngOnInit, o componente obtém os dados da rota ativa que foi preenchida pelo resolvedor da página de grade de imagem.
ngOnInit() {
// get the values from the routed URL
this.categoryId = this.route.snapshot.paramMap.get(PAGE_PARAM_CATEGORY_ID);
this.categoryName = this.route.snapshot.queryParamMap.get(PAGE_PARAM_CATEGORY_NAME);
const data = this.route.snapshot.data.routeData;
. . .
}Quando o componente é renderizado, ele obtém todos os dados de suas variáveis de membro.
A marcação do componente Grade de Imagem está localizada em src/app/image-grid-component.html.
Tarefa 3: Preparar Seu Aplicativo para Implantação
Agora que construímos nosso site de galeria de imagens angulares, precisamos vê-lo em um servidor de desenvolvimento local para que possamos depurar qualquer problema e visualizar o aplicativo antes que ele entre em operação.
Prepare o aplicativo para implantação em duas etapas:
- Otimizar um servidor de desenvolvimento local
- Usar scripts para criar e executar o aplicativo em desenvolvimento e produção
Otimizar um Servidor de Desenvolvimento Local
Você pode iniciar um servidor de desenvolvimento localmente executando o comando a seguir.
npm run devEm seguida, abra seu navegador para http://localhost:4200 para ver seu site em ação.
Usar Scripts para Criar e Executar o Aplicativo no Desenvolvimento e na Produção
Para produção, o script de construção seria usado para construir o cliente e o código do servidor.
npm run buildEste script executa primeiro a compilação do cliente e, em seguida, executa a compilação do servidor. O dist/servidor e o dist/navegador criados precisam ser implantados na máquina do servidor antes de iniciar o aplicativo do servidor, usando o seguinte comando:
npm run startConclusão
Neste tutorial, criamos um site de galeria em Angular, que pode ser encontrado no GitHub. Este site usa o Oracle Content Management como um CMS sem interface do usuário. Depois de configurar e configurar o Oracle Content Management com um canal de conteúdo publicado para o tutorial do site da galeria, 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.
Criar uma Galeria de Imagens em Angular com o Oracle Content Management sem Interface do Usuário
F51777-01
Dezembro de 2021
Copyright © 2021, Oracle and/or its affiliates.
Autor Principal: Oracle Corporation