Costruisci un blog in un ambiente angolare con Oracle Content Management Headless

Introduzione

Angular è una piattaforma per la creazione di applicazioni Web per dispositivi mobile e desktop. Ma cosa accade quando hai bisogno di un sistema di gestione dei contenuti (CMS) per servire tutti i tuoi contenuti? Fortunatamente, Oracle Content Management, con le sue funzionalità CMS headless, offre una soluzione ideale per le tue esigenze di amministrazione e gestione del controllo dei contenuti.

In questa esercitazione, creeremo un blog semplice in Angular, sfruttando Oracle Content Management come CMS senza spese nonché il kit SDK (Software Development Kit) per la distribuzione dei contenuti in JavaScript. Questo esempio angolare è disponibile su GitHub.

L'esercitazione prevede tre passi:

1. Prepara Oracle Content Management
2. Costruisci il blog in Angular
3. Preparare l'applicazione per la distribuzione

Prerequisiti

Prima di procedere con questa esercitazione, si consiglia di leggere le seguenti informazioni:

• Concetti chiave
• Repository di asset

Per seguire questa esercitazione, sono necessari:

• una sottoscrizione a Oracle Content Management
• un account Oracle Content Management con il ruolo Amministratore contenuto
• un computer Windows o Mac con Node versione 10 o successiva

Cosa stiamo costruendo

Il nostro blog sarà composto da un sito di tre pagine che consente ai visitatori di esplorare articoli di blog organizzati in argomenti. La prima pagina, la home page, sarà costituita da branding (nome e logo dell'azienda), alcuni collegamenti e una lista di argomenti del blog.

Per dare un'occhiata a ciò che stiamo creando, ecco lo stato finale della nostra esercitazione, un blog angulare di base che utilizza i contenuti di Oracle Content Management:

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

Questo è l'aspetto della home page alla fine di questa esercitazione:

La seconda pagina, la pagina argomento, mostra le anteprime di ogni articolo del blog che appartiene all'argomento. Di seguito viene descritto l'aspetto di una singola pagina di argomenti.

Infine, la pagina dell'articolo visualizza l'articolo del blog finale, incluse le informazioni sull'autore del blog. Di seguito viene descritto l'aspetto di una singola pagina di articolo.

Per continuare, sarà necessario disporre di una sottoscrizione attiva a Oracle Content Management ed eseguire il login con il ruolo Amministratore contenuto.

Task 1: Prepara Oracle Content Management

Se non si dispone già di un'istanza di Oracle Content Management, vedere Avvio rapido per informazioni su come registrarsi per Oracle Cloud, eseguire il provisioning di un'istanza di Oracle Content Management e configurare Oracle Content Management come CMS senza problemi.

Per questa esercitazione è necessario creare un modello di contenuto in due modi. È disponibile un pacchetto asset scaricabile che riempirà il repository vuoto con tipi di contenuto e contenuti associati oppure è possibile creare modelli di contenuto e contenuti personalizzati.

Per preparare Oracle Content Management, effettuare le operazioni riportate di seguito.

1. Creare un repository di canali e asset.
2. Creare un modello di contenuto utilizzando due metodi:
   • Metodo 1: Importazione del pacchetto asset di campioni di Oracle Content Management
   • Metodo 2: creare un proprio modello di contenuto

Crea un repository di canale e asset

Prima è necessario creare un canale e un repository di asset in Oracle Content Management in modo da poter pubblicare il contenuto.

Per creare un canale e un repository di asset in Oracle Content Management, effettuare le operazioni riportate di seguito.

1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.

2. Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Pubblicazione canali dall'elenco di selezione nell'intestazione della pagina.

   

3. Nell'angolo in alto a destra fare clic su Crea per creare un nuovo canale. Assegnare un nome al canale 'OCEGettingStartedChannel' ai fini di questa esercitazione e mantenere pubblico l'accesso. Fare clic su Salva per creare il canale.

   

4. Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Repositori dalla lista di selezione nell'intestazione della pagina.

   

5. Nell'angolo in alto a destra fare clic su Crea per creare un nuovo repository di asset. Assegnare un nome al repository di asset 'OCEGettingStartedRepository' ai fini di questa esercitazione.

   

6. Nel campo Pubblicazione canali selezionare il canale OCEGettingStartedChannel per indicare a Oracle Content Management che il contenuto nel repository OCEGettingStartedRepository può essere pubblicato nel canale OCEGettingStartedChannel. Al termine, fare clic su Salva.

   

Creazione di un modello di contenuto

Il passo successivo consiste nella creazione di un modello di contenuto. È possibile utilizzare uno dei due metodi riportati di seguito.

• Metodo 1: Importazione del pacchetto asset di campioni di Oracle Content Management
• Metodo 2: creare un proprio modello di contenuto

Importa pacchetto asset campioni di Oracle Content Management

È possibile scaricare un pacchetto di asset di esempio Oracle Content Management preconfigurato contenente tutti i tipi di contenuto e gli asset necessari per questa esercitazione. Se si preferisce, è inoltre possibile creare un proprio modello di contenuto anziché scaricare il pacchetto di asset campione.

È possibile caricare una copia del contenuto utilizzato in questa esercitazione dal pacchetto di asset dei campioni di Oracle Content Management. In questo modo sarà possibile provare i tipi di contenuto e modificare il contenuto. Se si desidera importare il pacchetto di asset di esempio di Oracle Content Management, è possibile scaricare l'archivio del pacchetto di asset, OCESamplesAssetPack.zip, quindi estrarlo in una directory selezionata:

1. Scaricare il pacchetto asset di campioni di Oracle Content Management (OCESamplesAssetPack.zip) dalla pagina download di Oracle Content Management. Estrarre il file ZIP scaricato in una posizione sul computer. Dopo l'estrazione, questa posizione includerà un file denominato OCEGettingStarted_data.zip.

2. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.

3. Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Repositori dalla lista di selezione nell'intestazione della pagina. Selezionare ora OCEGettingStartedRepository e fare clic sul pulsante Importa contenuto nella barra delle azioni superiore.

   

4. Caricare OCEGettingStarted_data.zip dal computer locale nella cartella Documenti.

   

5. Dopo aver caricato, selezionare OCEGettingStarted_data.zip e fare clic su OK per importare il contenuto nel repository di asset.

   

6. Dopo aver importato il contenuto, passare alla pagina Asset e aprire il repository OCEGettingStartedRepository. Si noterà che tutte le immagini e gli elementi di contenuto correlati sono stati aggiunti al repository di asset.

   

7. Fare clic su Seleziona tutto in alto a sinistra, quindi su Pubblica per aggiungere tutti gli asset importati al canale di pubblicazione creato in precedenza, OCEGettingStartedChannel.

   

8. Prima della pubblicazione, è necessario convalidare tutti gli asset. Aggiungere prima OCEGettingStartedChannel come canale selezionato, quindi fare clic sul pulsante Convalida.

   

9. Dopo la convalida degli asset, è possibile pubblicare tutti gli asset nel canale selezionato facendo clic sul pulsante Pubblica nell'angolo superiore destro.

   

Al termine, è possibile visualizzare nella pagina Asset la pubblicazione di tutti gli asset. (È possibile visualizzare l'icona sopra il nome dell'asset).

Dopo aver importato il pacchetto di asset di campioni di Oracle Content Management, è possibile avviare la creazione del blog in angolare.

Crea il tuo modello di contenuto

Invece di importare il pacchetto di asset dei campioni di Oracle Content Management, è possibile creare un proprio modello di contenuto.

Per questa esercitazione viene utilizzato un tipo di contenuto denominato 'OCEGettingStartedHomePage' per creare la home page del blog. Questa home page è costituita da branding (nome e logo dell'azienda), alcuni URL per i collegamenti e un elenco di argomenti di blog da includere nella pagina.

Per creare tipi di contenuto per il modello di contenuto, eseguire le operazioni riportate di seguito.

1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
2. Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Tipi di asset dall'elenco di selezione nell'intestazione della pagina.
3. Fare clic su Crea nell'angolo superiore destro.
4. Scegliere di creare un tipo di contenuto (non un tipo di asset digitale). Ripetere l'operazione per tutti i tipi di contenuto richiesti.

Verranno creati quattro tipi di contenuto, ciascuno con il proprio set di campi:

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

Il primo tipo di contenuto, OCEGettingStartedHomePage, deve avere i seguenti campi:

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
Nome società	Campo di testo a valore singolo	X	company_name
Logo società	Campo di testo a valore singolo	X	company_logo
Argomenti	Campo di riferimento a più valori	X	argomenti
URL contatto	Campo di testo a valore singolo	X	contact_url
Informazioni su URL	Campo di testo a valore singolo	X	about_url

Questo è l'aspetto che dovrebbe avere la definizione del tipo di contenuto OCEGettingStartedHomePage:

Il secondo tipo di contenuto, OCEGettingStartedTopic, deve avere il seguente campo:

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
Anteprima	Campo immagine a valore singolo	X	anteprima

Questo è l'aspetto del tipo di contenuto OCEGettingStartedTopic:

Il terzo tipo di contenuto, OCEGettingStartedAuthor, deve avere i seguenti campi:

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
Avatar	Campo immagine a valore singolo	X	avatar

Questo è l'aspetto del tipo di contenuto OCEGettingStartedAuthor:

Il quarto e il tipo di contenuto finale, OCEGettingStartedArticle, devono avere i seguenti campi:

Nome visualizzato	Tipo di campo	Obbligatorio.	Nome computer
Data pubblicazione	Campo data a valore singolo	X	published_name
Autore	Campo di riferimento a valore singolo	X	creare
Immagine	Campo immagine a valore singolo	X	immagine
Didascalia immagine	Campo di testo a valore singolo	X	image_caption
Contenuto articolo	Campo di testo di grandi dimensioni a valore singolo	X	article_content
Argomento	Campo di riferimento a valore singolo	X	argomento

Questo è l'aspetto del tipo di contenuto OCEGettingStartedArticle:

Dopo aver creato i tipi di contenuto, è possibile aggiungerli al repository creato in precedenza, OCEGettingStartedRepository:

1. Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
2. Passare a OCEGettingStartedRepository.
3. Modificare il repository e, in Tipi di asset, specificare tutti e quattro i tipi di contenuto appena creati.
4. Fare clic sul pulsante Salva per salvare le modifiche.

Dopo aver aggiunto i tipi di contenuto al repository, è possibile aprire il repository OCEGettingStartedRepository nella pagina Asset e iniziare a creare gli elementi di contenuto per tutti i tipi di contenuto.

Task 2: Costruisci il blog in Angular

Per utilizzare il contenuto di Oracle Content Management in un'applicazione Angular, è possibile utilizzare l'esempio di blog Angular, disponibile come repository open source in GitHub.

Nota: tenere presente che l'uso del campione angolare è facoltativo e che viene utilizzato in questa esercitazione per iniziare rapidamente. È inoltre possibile creare un'applicazione angolare personalizzata, ad esempio un'applicazione impalcata da un'interfaccia CLI angolare con un supporto di rendering lato server aggiunto utilizzando l'interfaccia CLI angolare.

Per costruire il blog in Angular:

1. Duplicare il repository di esempio e installare le dipendenze
2. Configurazione dell'applicazione Angular
3. Utilizzare l'SDK di Oracle Content Management Content
4. Utilizzare l'SDK del contenuto per recuperare il contenuto

Duplicare il repository di esempio e installare le dipendenze

L'esempio di blog Angular è disponibile come repository open source in GitHub.

Sarà prima necessario clonare l'esempio da GitHub al computer locale e modificare la directory nella directory root del repository:

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

Ora che si dispone del codice base, è necessario scaricare le dipendenze per l'applicazione. Eseguire il comando seguente dalla directory root:

npm install

Configurazione dell'applicazione angolare

In questo esempio di blog angolare è necessario configurare alcune informazioni in modo che l'SDK di Oracle Content Management Content (e qualsiasi altra richiesta) possa definire la versione corretta dell'URL dell'istanza e dell'API con il token di canale corretto. Questi valori sono utilizzati in src/scripts/server-config-utils.js per creare un'istanza di un nuovo client di distribuzione.

Questa applicazione utilizza un file .env letto da Webpack quando raggruppa le applicazioni client e server. Utilizzando webpack.DefinePlugin, tutti i valori letti dal file .env possono essere resi disponibili in qualsiasi punto dell'applicazione.

Aprire il file .env in un editor di testo. Verranno visualizzate le informazioni riportate di seguito.

# 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

Modificare ogni coppia chiave-valore in modo che rifletta l'URL dell'istanza, la versione dell'API a cui si desidera indirizzare e il token canale associato al canale di pubblicazione. Il canale per questa esercitazione è OCEGettingStartedChannel.

Utilizzare l'SDK di Oracle Content Management Content

Oracle Content Management offre un SDK che consente di individuare e utilizzare i contenuti nelle applicazioni. L'SDK viene pubblicato come modulo NPM e il progetto viene gestito in hosting su GitHub.

Per ulteriori informazioni sull'SDK, fare clic qui.

L'SDK è stato registrato come dipendenza runtime di questo progetto nel file package.json.

Utilizzare l'SDK del contenuto per recuperare il contenuto

Ora possiamo utilizzare il kit SDK del contenuto per recuperare il contenuto in modo da renderlo disponibile nell'applicazione Angular.

L'SDK del contenuto utilizza un oggetto DeliveryClient per specificare l'endpoint. È possibile creare tutte le richieste utilizzando tale oggetto client.

La cartella src/scripts contiene il codice per il recupero dei dati da Oracle Content Management mediante l'SDK del contenuto.

Il file src/scripts/server-config-utils.js importa l'SDK del contenuto, quindi crea un client di distribuzione utilizzando la configurazione specificata in .env.

Il comando seguente importa l'SDK:

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

Il comando seguente crea il client di consegna:

return createDeliveryClient(serverconfig);

Per il rendering delle immagini, service.js fornisce un metodo di supporto per recuperare il set di origini per un asset costruito dalle rendition per l'asset.

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

Il file src/scripts/services.js contiene tutto il codice per recuperare i dati per l'applicazione. Esiste una funzione principale per ogni componente della pagina nell'applicazione per ottenere tutti i dati relativi a tale pagina.

Dati home page

La home page richiede diverse chiamate di dati per ottenere tutti i relativi dati:

1. La prima è la ricerca di elementi nel canale specificato in .env.
2. Per ogni elemento dell'argomento, recuperiamo i relativi dettagli.

Aprire src/scripts/services.js e trovare la funzione getTopicsListPageData() che recupera tutti i dati per la home page.

export function getTopicsListPageData() {
      const client = getClient();
    
      return fetchHomePage(client)
        .then((data) => (
          getRenditionURLs(client, data.logoID)
            .then((renditionUrls) => {
              data.companyThumbnailRenditionUrls = renditionUrls;
              return data;
            })
        ));
    }

La funzione fetchHomePage(), chiamata dalla funzione getTopicsListPageData(), recupera tutti gli elementi nel canale. Viene visualizzato l'ID del logo, il nome dell'azienda, gli URL di informazioni e contatti e un elenco di argomenti.

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

La funzione fetchTopic() viene quindi richiamata per ogni ID argomento per ottenere i dettagli completi dell'argomento.

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() chiama anche getRenditionURLs() per ottenere l'URL dell'immagine da visualizzare.

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

Dati pagina argomento

La pagina dell'argomento riceve un ID argomento e richiede diverse chiamate di dati per ottenere tutti i relativi dati:

1. Recupera tutti gli articoli per l'argomento specificato.
2. Per ogni articolo, ottenere i relativi URL di rendition.

Aprire src/scripts/services.js e trovare la funzione fetchTopicArticles(topicId), utilizzata per ottenere tutti i dati per la pagina dell'argomento.

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

Il metodo fetchTopicArticles() utilizza anche getRenditionURLs() come mostrato in precedenza, per ottenere l'immagine per l'articolo.

Dati pagina articolo

La pagina dell'articolo riceve un ID articolo e richiede diverse chiamate di dati per ottenere tutti i relativi dati:

1. Recupera i dettagli dell'articolo per l'articolo specificato. Per ogni articolo, ottenere i relativi URL di rendition.
2. Ottenere gli URL di rendition per l'avatar dell'autore.

Aprire src/scripts/services.js e trovare la funzione fetchArticleDetails(articleId), che recupera i dati per la pagina dell'articolo.

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

Il metodo fetchArticleDetails() utilizza anche getRenditionURLs() come già visto, per ottenere l'immagine avatar.

Ora che abbiamo le nostre query sui dati, possiamo rendere le risposte nei nostri componenti angolari.

Rendering lato client e lato server

Con il rendering lato client (CSR), il client è responsabile della creazione e del rendering del contenuto di una pagina Web mediante JavaScript. Con il rendering lato server (SSR), l'intera pagina viene creata sul server e viene restituita una pagina Web completa al client.

Quando la pagina Web viene richiesta dal server nel rendering lato client, il documento HTML restituito contiene HTML scheletro e nessun contenuto effettivo. Contiene un riferimento a un bundle JavaScript che il client richiede quindi dal server. Alla ricezione di questo bundle, il client esegue il codice JavaScript e popola la pagina Web. Finché il client non ha terminato l'esecuzione di JavaScript, l'utente visualizza una pagina Web vuota. Un lato negativo delle applicazioni di rendering lato client è che quando alcuni web crawler indicizzano il sito, non esiste un contenuto effettivo da indicizzare.

Con il rendering lato server (SSR), l'intera pagina viene creata sul server e viene restituita una pagina Web completa al client. Il vantaggio è che i web crawler possono indicizzare l'intero contenuto sulla pagina Web.

Rendering angolare lato server

Il flusso dell'applicazione di blog angolari è il seguente:

1. Il client invia una richiesta al server per un determinato percorso.
2. Il server Express riceve la richiesta.
3. Il server Express trasmette tutte le richieste client per le pagine al motore Express di Angular Univeral
4. Express Engine di Angular Univeral utilizza un file HTML di modello e lo popola con il seguente
   1. Il markup per il percorso specificato
   2. I dati dell'instradamento sono serializzati in uscita
   3. Riferimenti a qualsiasi foglio di stile
   4. Riferimenti ai bundle JavaScript da eseguire sul client
5. Il server Express restituisce il documento HTML creato da Angular Univeral's Express Engine al client.
6. Il client riceve il codice HTML e lo visualizza. L'utente visualizzerà una pagina Web completamente formata.
7. Il client richiede eventuali bundle JavaScript dal server. Dopo averlo ricevuto, il client esegue il codice JavaScript nel bundle.
   1. "idrata" l'HTML, aggiungendo in qualsiasi JavaScript lato client, ad esempio i listener di eventi.
   2. Angular prende automaticamente i dati serializzati dalla pagina e li inserisce nel codice JavaScript per essere disponibili ai componenti
8. Se il documento HTML contiene un foglio di stile, il client richiede il foglio di stile.

La CLI angolare supporta l'aggiunta del supporto di rendering lato server a un'applicazione angolare esistente. Per ulteriori dettagli, visitare il sito https://angular.io/guide/universal.

Server Express lato server

L'applicazione server utilizza un server Express per ricevere la richiesta e inoltrare a Angular Univeral's Express Engine.

Il file del server Express si trova in server.js. Questo file viene creato dall'interfaccia CLI angolare quando si aggiunge il supporto di rendering lato server.

Componenti angolari

I componenti angolari vengono scritti in TypeScript e definiscono un modello che definisce la vista. Questi modelli contengono HTML ordinario, direttive angolari e markup di associazione, che consentono ad Angular di regolare l'HTML prima della visualizzazione.

L'applicazione di blog suddivide ogni pagina in vari componenti più piccoli.

Le prossime sezioni forniscono una panoramica di come Angular rende la nostra applicazione in ciascuno dei nostri componenti:

• Modulo applicativo
• Modulo root per il rendering lato server
• Resolver dati elenco argomenti
• Resolver dati elenco articoli
• Resolver dati dettagli articolo
• Componente applicazione
• Componente TopicsList
• Componente TopicListItem
• Componente ArticlesList
• Componente ArticleDetails

Modulo applicativo

Modulo applicazione situato in src/app/app.module.ts. Esegue il bootstrap dell'applicazione con il componente applicazione.

Questo file definisce i diversi percorsi per la nostra applicazione. Nel nostro sito vogliamo fornire tre percorsi:

• Home page, composta dall'elenco degli argomenti
• Pagina dell'argomento, che visualizza tutti gli articoli per l'argomento selezionato
• Pagina dell'articolo che visualizza l'articolo selezionato

Si noti che sia la pagina degli argomenti che la pagina degli articoli contengono un argomento fornito da Oracle Content Management nel relativo URL.

Gli instradamenti della home page, della pagina degli argomenti e della pagina degli articoli definiscono i risolutori utilizzati per ottenere tutti i dati necessari per l'instradamento prima della creazione dei componenti dell'instradamento.

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

Questo modulo app è il punto di accesso durante il rendering dell'applicazione sul lato client.

Modulo root per il rendering lato server

Il punto di accesso principale a questa applicazione angolare, quando si esegue il rendering dell'applicazione sul server, è il modulo del server applicazioni situato in src/app/app.server.module.ts.

Questo modulo importa il modulo app, che si trova in src/app/app.server.module.ts, insieme a Angular's ServerModule. L'applicazione lato server esegue il bootstrap dello stesso componente applicazione del client e utilizza tutti gli stessi componenti.

La CLI angolare crea il file del modulo server quando si aggiunge il supporto di rendering lato server.

Resolver dati elenco argomenti

Gli argomenti elencano il risolutore dei dati, che si trova in src/resolver/topics-list-data.resolver.ts, gestisce il recupero dei dati da visualizzare nella home page.

Quando il client è in fase di idratazione, questi dati vengono ottenuti da transferState, popolati durante il rendering lato server e serializzati nel documento HTML restituito al client.

Durante il rendering lato server o il rendering lato client quando si è verificata la navigazione lato client, transferState non conterrà i dati. I dati vengono ottenuti dal server Oracle Content Management mediante l'SDK dei contenuti chiamando il metodo getTopicsListPageData() da src/scripts/services.js.

Resolver dati elenco articoli

Gli articoli elencano il risolutore dei dati, che si trova in src/resolver/articles-list-data.resolver.ts, gestisce il recupero dei dati da visualizzare nella pagina dell'argomento.

Quando il client è in fase di idratazione, questi dati vengono ottenuti da transferState, popolati durante il rendering lato server e serializzati nel documento HTML restituito al client.

Durante il rendering lato server o il rendering lato client quando si è verificata la navigazione lato client, transferState non conterrà i dati. I dati vengono ottenuti dal server Oracle Content Management mediante l'SDK dei contenuti chiamando il metodo fetchTopicArticles() da src/scripts/services.js.

Resolver dati dettagli articolo

L'articolo descrive il risolutore dei dati, che si trova in src/resolver/article-details-data.resolver.ts, gestisce il recupero dei dati da visualizzare nella pagina dell'articolo.

Quando il client è in fase di idratazione, questi dati vengono ottenuti da transferState, popolati durante il rendering lato server e serializzati nel documento HTML restituito al client.

Durante il rendering lato server o il rendering lato client quando si è verificata la navigazione lato client, transferState non conterrà i dati. I dati vengono ottenuti dal server Oracle Content Management mediante l'SDK dei contenuti chiamando il metodo fetchArticleDetails() da src/scripts/services.js.

Componente applicazione

Il componente App, che si trova in src/app/app.component.ts, definisce la vista radice.

Questo componente contiene i tag router-link. In base all'instradamento corrente, i componenti verranno spostati su e fuori dalla pagina all'interno di tali tag.

Componente TopicsList

La home page è costituita da un elenco composto da singoli argomenti. Viene visualizzato dal componente TopicsList, disponibile in src/app/topics-list/topics-list.component.ts.

In ngOnInit il componente recupera i dati dall'instradamento attivo, popolato dal risolutore dei dati della lista di argomenti.

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

Quando il componente viene visualizzato, recupera tutti i dati dalle relative variabili membro.

Il markup per il componente TopicsList si trova in src/app/topics-list/topics-list.component.html.

Componente TopicListItem

Il componente TopicsList utilizza il componente TopicsListItem per visualizzare il singolo argomento nella lista.

Si trova in src/app/topic-list-item.component.ts e riceve tutti i suoi dati sotto forma di proprietà. Non riceve dati aggiuntivi dal server.

Il markup per il componente TopicsListItem si trova in src/app/topic-list-item.component.html.

Componente ArticlesList

Nella pagina Argomento vengono visualizzati gli articoli dell'argomento il cui ID viene passato al componente nell'URL. Viene visualizzato dal componente ArticlesList, che si trova in src/app/articles-list.component.ts.

In ngOnInit è possibile vedere che il componente recupera i dati dall'instradamento attivo, popolato dal risolutore dei dati della lista di articoli.

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

Quando il componente viene visualizzato, recupera tutti i dati dalle relative variabili membro.

Il markup per il componente ArticlesList si trova in src/app/articles-list.component.html.

Componente ArticleListItem

Il componente ArticlesList utilizza il componente ArticleListItem per visualizzare il singolo articolo nella lista.

Questo componente si trova in src/app/article-list-item.component.ts e riceve tutti i suoi dati sotto forma di proprietà. Non riceve dati aggiuntivi dal server.

Il markup per il componente ArticleListItem si trova in src/app/article-list-item.component.html.

Componente ArticleDetails

Nella pagina Articolo vengono visualizzati i dettagli dell'articolo il cui ID viene passato sull'URL. Viene visualizzato dal componente ArticleDetails, che si trova in src/app/article-details.component.ts.

In ngOnInit è possibile vedere che il componente recupera i dati dall'instradamento attivo, popolato dal risolutore dei dati della lista di articoli.

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 il componente viene visualizzato, recupera tutti i dati dalle relative variabili membro.

Il markup per il componente ArticleDetails si trova in src/app/article-details.component.html.

Task 3: Prepara la tua applicazione per la distribuzione

Ora che abbiamo creato il nostro sito di blog Angular, dobbiamo vederlo in un server di sviluppo locale in modo da poter eseguire il debug di qualsiasi problema e visualizzare in anteprima l'applicazione prima che sia attiva.

Preparare l'applicazione per la distribuzione in due passaggi:

1. Attiva un server di sviluppo locale
2. Utilizza script per creare ed eseguire l'applicazione in sviluppo e produzione

Attiva un server di sviluppo locale

È possibile avviare localmente un server di sviluppo eseguendo il comando seguente.

npm run dev

Aprire quindi il browser a http://localhost:4200 per visualizzare il sito in azione.

Usa script per creare ed eseguire l'applicazione in sviluppo e produzione

Per la produzione, lo script di build verrà utilizzato per generare il codice client e server.

npm run build

Questo script esegue in primo luogo la build del client, quindi esegue la build del server. Prima di avviare l'applicazione server, è necessario distribuire il dist/server e il dist/browser creati utilizzando il comando seguente:

npm run start

Conclusione

In questa esercitazione abbiamo creato un sito di blog in Angular, disponibile su GitHub. Questo sito utilizza Oracle Content Management come CMS senza problemi. Dopo aver impostato e configurato Oracle Content Management con un canale di contenuto pubblicato per l'esercitazione sul sito di blog, abbiamo installato ed eseguito il sito angolare per recuperare il contenuto richiesto e creare il sito.

Per ulteriori informazioni su Angular, visitare il sito Web angolare.

Acquisire informazioni sui concetti importanti di Oracle Content Management nella documentazione.

Nella pagina Esempi di Oracle Content Management del Oracle Help Center è possibile trovare altri esempi.

---

Titolo e informazioni sul copyright

Costruisci un blog in un ambiente angolare con Oracle Content Management Headless

F49068-01

Dicembre 2021

Copyright © 2021, Oracle and/or its affiliates.

Autore principale: Oracle Corporation