Créez un blog en Angular avec Oracle Content Management Headless

Introduction

Angular est une plate-forme permettant de créer des applications Web mobiles et de bureau. Mais que se passe-t-il lorsque vous avez besoin d'un système de gestion de contenu pour servir l'ensemble de votre contenu ? Heureusement, Oracle Content Management, avec ses puissantes fonctionnalités de gestion de contenu sans tête, propose une solution adaptée à vos besoins en matière d'administration de contenu et de gouvernance.

Dans ce tutoriel, nous allons créer un blog simple dans Angular, en utilisant Oracle Content Management en tant que système de gestion de contenu sans tête, ainsi que son kit de développement logiciel (SDK, Software Development Kit) pour la diffusion de contenu dans JavaScript. Cet exemple Angular est disponible sur GitHub.

Ce tutoriel se compose de trois étapes :

  1. Préparer Oracle Content Management
  2. Construire le blog à Angular
  3. Préparer votre application pour le déploiement

Prérequis

Avant de poursuivre ce tutoriel, nous vous recommandons de lire les informations suivantes en premier :

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

Ce que nous construisons

Notre blog sera composé d'un site de trois pages qui permet aux visiteurs d'explorer des articles de blog organisés en rubriques. La première page, la page d'accueil, se compose de la marque (nom et logo de la société), de certains liens et d'une liste de sujets de blog.

Pour voir ce que nous construisons, voici l'état de fin de notre tutoriel, un blog Angular de base qui consomme du contenu d'Oracle Content Management :

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

Voici à quoi ressemblera la page d'accueil à la fin de ce tutoriel :

Cette image présente la page d'accueil du site de démonstration Cafe Supremo avec la liste des rubriques disponibles.

La deuxième page, topic page, affiche des aperçus de chaque article de blog appartenant à la rubrique. Voici l'aspect d'une page de rubrique individuelle :

Cette image présente une page de rubrique intitulée "Recipes" avec la liste des articles disponibles pour cette rubrique.

Enfin, la page de l'article affiche l'article de blog final, y compris des informations sur l'auteur du blog. Voici l'aspect d'une page d'article individuelle :

Cette image présente une page d'article individuelle, avec le contenu et une référence d'auteur.

Pour continuer, vous devez disposer d'un abonnement actif à Oracle Content Management et être connecté avec le rôle d'administrateur de contenu.

Tâche 1 : Préparer Oracle Content Management

Si vous ne disposez pas encore d'une instance Oracle Content Management, reportez-vous à Démarrage rapide pour apprendre à vous inscrire à Oracle Cloud, à provisionner une instance Oracle Content Management et à configurer Oracle Content Management en tant que système de gestion de contenu sans tête.

Pour ce tutoriel, vous devez créer un modèle de contenu de deux façons. Un pack de ressources téléchargeable est disponible pour remplir le référentiel vide avec les types de contenu et le contenu associé, ou vous pouvez créer votre propre modèle de contenu et votre propre contenu.

Pour préparer Oracle Content Management :

  1. Créez un canal et un référentiel de ressources.
  2. Créez un modèle de contenu à l'aide de l'une des deux méthodes suivantes :

Création d'un canal et d'un référentiel de ressources

Vous devez d'abord créer un canal et un référentiel de ressources dans Oracle Content Management afin de pouvoir publier du contenu.

Pour créer un canal et un référentiel de ressources dans Oracle Content Management, procédez comme suit :

  1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

  2. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Publier des canaux dans la liste de sélection de l'en-tête de page.

    Cette image présente l'option Publier des canaux sélectionnée dans le menu déroulant de l'en-tête de la page Contenu.

  3. Dans l'angle supérieur droit, cliquez sur Créer pour créer un canal. Nommez le canal 'OCEGettingStartedChannel' dans le cadre de ce tutoriel et conservez l'accès public. Cliquez sur Enregistrer pour créer le canal.

    Cette image présente le panneau de définition du canal de publication, avec 'OCEGettingStartedChannel' dans le champ de nom du canal.

  4. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page.

    Cette image présente l'option Référentiels sélectionnée dans le menu déroulant de l'en-tête de la page Contenu.

  5. Dans l'angle supérieur droit, cliquez sur Créer pour créer un référentiel de ressources. Nommez le référentiel de ressources 'OCEGettingStartedRepository' dans le cadre de ce tutoriel.

    Cette image présente le panneau de définition du référentiel, avec 'OCEGettingStartedRepository' dans le champ de nom du référentiel.

  6. Dans le champ Canaux de publication, sélectionnez le canal OCEGettingStartedChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEGettingStartedRepository peut être publié dans le canal OCEGettingStartedChannel. Une fois que vous avez terminé, cliquez sur Enregistrer.

    Cette image présente le panneau de définition du référentiel, avec 'OCEGettingStartedChannel' dans le champ Canaux de publication.

Créer un modèle de contenu

L'étape suivante consiste à créer un modèle de contenu. Vous pouvez utiliser l'une des deux méthodes :

Importer le pack de ressources pour les échantillons Oracle Content Management

Vous pouvez télécharger un pack de ressources échantillon Oracle Content Management préconfiguré contenant tous les types de contenu et ressources requis pour ce tutoriel. Si vous préférez, vous pouvez également créer votre propre modèle de contenu plutôt que de télécharger l'exemple de pack de ressources.

Vous pouvez télécharger une copie du contenu que nous utilisons dans ce tutoriel à partir d'Oracle Content Management Samples Asset Pack. Vous pourrez ainsi tester les types de contenu et les modifier. Si vous souhaitez importer le pack de ressources Oracle Content Management Samples Asset Pack, vous pouvez télécharger l'archive du pack de ressources, OCESamplesAssetPack.zip, puis l'extraire dans le répertoire de votre choix :

  1. Téléchargez le pack d'échantillons Oracle Content Management (OCESamplesAssetPack.zip) à partir de la page Téléchargements d'Oracle Content Management. Extrayez le fichier ZIP téléchargé vers un emplacement sur votre ordinateur. Après l'extraction, cet emplacement inclut un fichier nommé OCEGettingStarted_data.zip.

  2. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

  3. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page. A présent, sélectionnez OCEGettingStartedRepository et cliquez sur le bouton Importer le contenu dans la barre d'actions supérieure.

    Cette image présente la page Référentiels, avec l'élément OCEGettingStartedRepository sélectionné.

  4. Téléchargez OCEGettingStarted_data.zip à partir de votre ordinateur local vers le dossier Documents.

    Cette image présente l'écran de confirmation de chargement du fichier OCEGettingStarted_data.zip.

  5. Une fois téléchargé, sélectionnez OCEGettingStarted_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.

    Cette image présente le fichier OCEGettingStarted_data.zip sélectionné avec le bouton OK activé.

  6. Une fois le contenu importé, accédez à la page Immobilisations et ouvrez le référentiel OCEGettingStartedRepository. Vous verrez que toutes les images et éléments de contenu associés ont été ajoutés au référentiel de ressources.

    Cette image présente le référentiel OCEGettingStartedRepository, avec toutes les ressources qui viennent d'être importées.

  7. Cliquez sur Tout sélectionner en haut à gauche, puis sur Publier pour ajouter toutes les ressources importées au canal de publication que vous avez créé précédemment, OCEGettingStartedChannel.

    Cette image présente le référentiel OCEGettingStartedRepository, avec toutes les ressources sélectionnées et l'option Publier dans la barre d'actions visible.

  8. Avant la publication, vous devez valider toutes les ressources. Ajoutez d'abord OCEGettingStartedChannel en tant que canal sélectionné, puis cliquez sur le bouton Valider.

    Cette image présente la page Résultats de la validation, avec le canal OCEGettingStartedChannel ajouté dans le champ Canaux, toutes les ressources à valider et le bouton Valider activé.

  9. Une fois les ressources validées, vous pouvez publier toutes les ressources sur le canal sélectionné en cliquant sur le bouton Publier dans l'angle supérieur droit.

    Cette image présente la page Résultats de la validation, avec le canal OCEGettingStartedChannel ajouté dans le champ Canaux, toutes les ressources validées et le bouton Publier activé.

Une fois cette opération effectuée, vous pouvez voir sur la page Immobilisations que toutes les immobilisations ont été publiées. (Cliquez sur l'icône située au-dessus du nom de la ressource.)

Cette image présente la page Actifs, avec toutes les ressources publiées.

Après avoir importé le pack de ressources d'échantillons Oracle Content Management, vous pouvez commencer à créer le blog dans Angular.

Créer votre propre modèle de contenu

Au lieu d'importer le pack d'échantillons Oracle Content Management, vous pouvez également créer votre propre modèle de contenu.

Pour ce tutoriel, nous utilisons un type de contenu appelé 'OCEGettingStartedHomePage' pour créer la page d'accueil de notre blog. Cette page d'accueil se compose de la marque (nom et logo de la société), d'URL pour les liens et d'une liste de sujets de blog à inclure sur la page.

Cette image présente la page d'accueil du site de démonstration Cafe Supremo.

Pour créer des types de contenu pour le modèle de contenu :

  1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
  2. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Types d'immobilisation dans la liste de sélection de l'en-tête de page.
  3. Cliquez sur Créer dans l'angle supérieur droit.
  4. Choisissez de créer un type de contenu (et non un type de ressource numérique). Répétez cette opération pour tous les types de contenu requis.

Cette image présente la boîte de dialogue Créer un type de ressource dans l'interface Web d'Oracle Content Management.

Nous allons créer quatre types de contenu, chacun avec son propre ensemble de champs :

Le premier type de contenu, OCEGettingStartedHomePage, doit comporter les champs suivants :

Nom d'affichage Type de champ Requis Nom de la machine
Nom de la société Champ de texte à valeur unique X company_name
Logo de la société Champ de texte à valeur unique X company_logo
Rubriques Champ de référence à valeurs multiples X sujets
URL du contact Champ de texte à valeur unique X contact_url
A propos de l'URL Champ de texte à valeur unique X about_url

Voici l'aspect de la définition de type de contenu OCEGettingStartedHomePage :

Cette image présente la définition du type de contenu "OCEGettingStartedHomePage". Il inclut les champs de données suivants : Nom de la société, Logo de la société, Rubriques, URL de l'interlocuteur et URL A propos de.

Le second type de contenu, OCEGettingStartedTopic, doit comporter le champ suivant :

Nom d'affichage Type de champ Requis Nom de la machine
Miniature Champ d'image à valeur unique X miniature

Voici l'apparence de votre type de contenu OCEGettingStartedTopic :

Cette image présente la définition du type de contenu "OCEGettingStartedTopic". Il inclut le champ de données suivant : Miniature.

Le troisième type de contenu, OCEGettingStartedAuthor, doit comporter les champs suivants :

Nom d'affichage Type de champ Requis Nom de la machine
Avatar Champ d'image à valeur unique X avatar

Voici l'apparence de votre type de contenu OCEGettingStartedAuthor :

Cette image présente la définition du type de contenu "OCEGettingStartedAuthor". Il inclut ce champ de données : Avatar.

Le quatrième et dernier type de contenu, OCEGettingStartedArticle, doit comporter les champs suivants :

Nom d'affichage Type de champ Requis Nom de machine
Date de publication Champ de date à valeur unique X published_name
Auteur Champ de référence à valeur unique X auteur
Image Champ d'image à valeur unique X image
Légende d'image Champ de texte à valeur unique X image_caption
Contenu de l'article Champ de texte de grande valeur X article_content
Sujet Champ de référence à valeur unique X rubrique

Voici l'apparence de votre type de contenu OCEGettingStartedArticle :

Cette image présente la définition du type de contenu "OCEGettingStartedArticlePage". Il inclut les champs de données suivants : Date de publication, Auteur, Image, Légende de l'image, Contenu de l'article et Sujet.

Une fois les types de contenu créés, vous pouvez les ajouter au référentiel que vous avez créé précédemment, OCEGettingStartedRepository :

  1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
  2. Accédez à OCEGettingStartedRepository.
  3. Modifiez le référentiel et, sous Types d'immobilisation, indiquez les quatre types de contenu nouvellement créés.
  4. Cliquez sur le bouton Enregistrer pour enregistrer vos modifications.

Cette image présente la page Modifier le référentiel dans Oracle Content Management, avec les quatre types de contenu nouvellement créés associés au référentiel OCEGettingStartedRepository.

Après avoir ajouté les types de contenu au référentiel, vous pouvez ouvrir le référentiel OCEGettingStartedRepository sur la page Ressources et commencer à créer vos éléments de contenu pour tous les types de contenu.

Cette image présente les éléments de contenu de la page Ressources de l'interface Web d'Oracle Content Management, avec des options à gauche pour les collections, les canaux, les langues, les types, la sélection des éléments de contenu et le statut.

Tâche 2 : Construire le blog en Angular

Pour utiliser notre contenu Oracle Content Management dans une application Angular, nous pouvons utiliser l'exemple de blog Angular, disponible en tant que référentiel open source sur GitHub.

Remarque : n'oubliez pas que l'utilisation de l'exemple Angular est facultative et que nous l'utilisons dans ce tutoriel pour vous lancer rapidement. Vous pouvez également créer votre propre application Angular, telle qu'une mise en échafaudage par l'interface de ligne de commande Angular avec la prise en charge du rendu côté serveur à l'aide de l'interface de ligne de commande Angular.

Pour créer le blog en Angular :

  1. Cloner l'exemple de référentiel et installer les dépendances
  2. Configurer l'application Angular
  3. Utiliser le kit SDK Oracle Content Management Content
  4. Utiliser le kit SDK de contenu pour extraire du contenu

Cloner l'exemple de référentiel et installer les dépendances

L'exemple de blog Angular est disponible en tant que référentiel open source sur GitHub.

Vous devez d'abord cloner l'exemple à partir de GitHub sur votre ordinateur local et modifier votre répertoire en racine de référentiel :

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

Maintenant que vous disposez de votre base de code, vous devez télécharger les dépendances pour l'application. Exécutez la commande suivante à partir du répertoire racine :

npm install

Configurer l'application Angular

Dans cet exemple de blog Angular, vous devez configurer quelques informations afin que votre kit SDK Oracle Content Management Content (et toute autre demande) puisse cibler l'URL d'instance et la version d'API correctes avec le jeton de canal approprié. Ces valeurs sont utilisées dans src/scripts/server-config-utils.js pour instancier un nouveau client de livraison.

Cette application utilise un fichier .env lu par Webpack lorsqu'elle regroupe les applications client et serveur. En utilisant webpack.DefinePlugin, toutes les valeurs lues à partir du fichier .env peuvent être mises à la disposition de n'importe où dans l'application.

Ouvrez le fichier .env dans un éditeur de texte. Les informations suivantes s'affichent :

# 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

Modifiez chaque paire clé-valeur pour refléter l'URL de votre instance, la version d'API à cibler et le jeton de canal associé à votre canal de publication. Le canal de ce tutoriel est OCEGettingStartedChannel.

Utiliser le kit SDK Oracle Content Management Content

Oracle Content Management propose un kit SDK pour vous aider à repérer et à utiliser du contenu dans vos applications. Le kit SDK est publié en tant que module NPM et le projet est hébergé sur GitHub.

En savoir plus sur le kit SDK ici.

Le kit SDK a été enregistré en tant que dépendance d'exécution de ce projet dans le fichier package.json.

Utiliser le kit SDK de contenu pour extraire du contenu

Nous pouvons désormais exploiter le kit SDK de contenu pour extraire du contenu afin de le rendre dans notre application Angular.

Le kit SDK de contenu utilise un objet DeliveryClient pour indiquer l'adresse. Vous pouvez effectuer toutes les demandes à l'aide de cet objet client.

Le dossier src/scripts contient le code permettant d'obtenir des données à partir d'Oracle Content Management à l'aide du kit SDK de contenu.

Le fichier src/scripts/server-config-utils.js importe le kit SDK Content, puis crée un client de distribution à l'aide de la configuration indiquée dans .env.

La commande suivante importe le kit SDK :

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

La commande suivante crée le client de livraison :

return createDeliveryClient(serverconfig);

Pour le rendu des images, services.js fournit une méthode d'aide pour extraire le jeu de sources d'une ressource construite à partir des rendus de la ressource.

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

Le fichier src/scripts/services.js contient tout le code permettant d'obtenir des données pour l'application. Il existe une fonction principale pour chaque composant de page de l'application afin d'obtenir toutes les données de cette page.

Données de la page d'accueil

La page d'accueil nécessite plusieurs appels de données pour obtenir toutes ses données :

  1. Nous recherchons d'abord les articles dans le canal spécifié dans .env.
  2. Pour chacun des éléments de rubrique, nous extraitons ses détails.

Ouvrez src/scripts/services.js et recherchez la fonction getTopicsListPageData(), qui obtient toutes les données de la page d'accueil.

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

La fonction fetchHomePage(), appelée par la fonction getTopicsListPageData(), obtient tous les éléments du canal. Vous obtenez ainsi l'ID de logo, le nom de la société, les URL de contact et de présentation, ainsi qu'une liste de rubriques.

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 fonction fetchTopic() est ensuite appelée pour chaque ID de rubrique afin d'obtenir les détails complets de la rubrique.

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() appelle également getRenditionURLs() pour obtenir l'URL de l'image à afficher.

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

Données de page de rubrique

La page de rubrique reçoit un ID de rubrique et nécessite plusieurs appels de données pour obtenir toutes ses données :

  1. Obtenir tous les articles de la rubrique indiquée.
  2. Pour chaque article, obtenez ses URL de rendu.

Ouvrez src/scripts/services.js et recherchez la fonction fetchTopicArticles(topicId), qui permet d'obtenir toutes les données de la page de rubrique.

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

La méthode fetchTopicArticles() utilise également la méthode getRenditionURLs() comme vu précédemment pour obtenir l'image de l'article.

Données de la page Article

La page d'article reçoit un ID d'article et nécessite plusieurs appels de données pour obtenir toutes ses données :

  1. Obtenir les détails de l'article spécifié. Pour chaque article, obtenez ses URL de rendu.
  2. Obtenir les URL de rendu de l'avatar auteur.

Ouvrez src/scripts/services.js et recherchez la fonction fetchArticleDetails(articleId), qui obtient les données de la page d'article.

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

La méthode fetchArticleDetails() utilise également la méthode getRenditionURLs() comme vu précédemment pour obtenir l'image d'avatar.

Maintenant que nous avons nos requêtes de données, nous pouvons afficher les réponses dans nos composants angulaires.

Affichage côté client et côté serveur

Avec le rendu côté client (CSR), le client est chargé de créer et d'afficher le contenu d'une page Web à l'aide de JavaScript. Avec le rendu côté serveur (SSR), toute la page est construite sur le serveur et une page Web complète est renvoyée au client.

Lorsque la page Web est demandée au serveur dans le rendu côté client, le document HTML renvoyé contient le squelette HTML et aucun contenu réel. Il contient une référence à un groupe JavaScript, que le client demande ensuite du serveur. A la réception de ce groupe, le client exécute le JavaScript et remplit la page Web. Tant que le client n'a pas terminé l'exécution de JavaScript, tous les utilisateurs voient une page Web vierge. Un inconvénient des applications rendues côté client est que lorsque certains analyseurs Web indexent le site, il n'y a pas de contenu réel à indexer.

Avec le rendu côté serveur (SSR), toute la page est construite sur le serveur et une page Web complète est renvoyée au client. Cela permet aux analyseurs Web d'indexer l'intégralité du contenu sur la page Web.

Rendu horizontal côté serveur

Le flux de l'application Angular blog se présente comme suit :

  1. Le client demande au serveur une route donnée.
  2. Le serveur Express reçoit la demande.
  3. Le serveur Express transmet toutes les demandes client pour les pages au moteur Express d'Angular Univeral
  4. Le moteur Express d'Angular Univeral utilise un fichier HTML modèle et l'alimente avec les éléments suivants :
    1. Balisage pour la route donnée
    2. Données de routage sérialisées
    3. Références à toutes les feuilles de style
    4. Références aux packages JavaScript à exécuter sur le client
  5. Le serveur Express renvoie le document HTML créé par Angular Univeral's Express Engine au client
  6. Le client reçoit le code HTML et le rend. L'utilisateur verra une page Web entièrement formée.
  7. Le client demande des packages JavaScript à partir du serveur. Une fois reçu, le client exécute le JavaScript dans le groupe.
    1. Elle "hydrate" le code HTML, en ajoutant dans n'importe quel JavaScript côté client, comme les processus d'écoute d'événement.
    2. Angularise automatiquement les données sérialisées de la page et les injecte dans le code JavaScript afin de les rendre disponibles pour les composants
  8. Si le document HTML contenait une feuille de style, le client demande la feuille de style.

Angular CLI prend en charge l'ajout d'un rendu côté serveur à une application Angular existante. Pour plus d'informations, reportez-vous à https://angular.io/guide/universal.

Server-Side Express Server

L'application serveur utilise un serveur Express pour recevoir la demande et la transmettre au moteur Express d'Angular Univeral.

Le fichier du serveur Express se trouve dans server.js. Ce fichier est créé par la CLI Angular lors de l'ajout de la prise en charge du rendu côté serveur.

Composants angulaires

Les composants angulaires sont écrits dans TypeScript et définissent un modèle qui définit la vue. Ces modèles contiennent du code HTML ordinaire, des directives angulaires et un balisage de liaison, qui permettent à Angular d'ajuster le code HTML avant son affichage.

L'application de blog décompose chaque page en plusieurs petits composants.

Les sections suivantes présentent la façon dont Angular rend notre application dans chacun de nos composants :

Module d'application

Module d'application situé dans src/app/app.module.ts. Il initialise l'application avec le composant d'application.

Ce fichier définit les différentes routes de notre application. Dans notre site, nous voulons fournir trois itinéraires :

Notez que la page de rubrique et la page d'article prennent tous deux un argument fourni par Oracle Content Management dans son URL.

Les routes de page d'accueil, de rubrique et d'article définissent les résolveurs utilisés pour obtenir toutes les données requises pour l'itinéraire avant la création des composants de l'itinéraire.

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

Ce module d'application est le point d'entrée lors du rendu de l'application côté client.

Module racine pour l'affichage côté serveur

Lors du rendu de l'application sur le serveur, le point d'entrée principal de cette application Angular est le module serveur d'applications situé dans src/app/app.server.module.ts.

Ce module importe le module d'application, situé dans src/app/app.server.module.ts, avec Angular's ServerModule. L'application côté serveur démarre le même composant d'application que le client et utilise tous les mêmes composants.

La CLI Angular crée le fichier de module serveur lors de l'ajout de la prise en charge du rendu côté serveur.

Résolveur de données de liste de rubriques

Les rubriques répertorient le résolveur de données, situé dans src/resolver/topics-list-data.resolver.ts, gère l'obtention des données à afficher dans la page d'accueil.

Lorsque le client est en cours d'hydratation, ces données sont obtenues à partir de transferState, qui a été renseignée lors du rendu côté serveur et sérialisée dans le document HTML renvoyé au client.

Lors du rendu côté serveur ou de l'affichage côté client lors de la navigation côté client, transferState ne contient pas les données. Les données sont obtenues à partir du serveur Oracle Content Management, à l'aide du kit SDK Content, en appelant la méthode getTopicsListPageData() à partir de src/scripts/services.js.

Résolveur de données de liste d'articles

Les articles répertorient le résolveur de données, situé dans src/resolver/articles-list-data.resolver.ts, gère l'obtention des données à afficher dans la page de rubrique.

Lorsque le client est en cours d'hydratation, ces données sont obtenues à partir de transferState, qui a été renseignée lors du rendu côté serveur et sérialisée dans le document HTML renvoyé au client.

Lors du rendu côté serveur ou de l'affichage côté client lors de la navigation côté client, transferState ne contient pas les données. Les données sont obtenues à partir du serveur Oracle Content Management à l'aide du kit SDK Content, en appelant la méthode fetchTopicArticles() à partir de src/scripts/services.js.

Résolveur de données de détails d'article

Le résolveur de données de détails d'article, situé dans src/resolver/article-details-data.resolver.ts, gère l'obtention des données à afficher dans la page de l'article.

Lorsque le client est en cours d'hydratation, ces données sont obtenues à partir de transferState, qui a été renseignée lors du rendu côté serveur et sérialisée dans le document HTML renvoyé au client.

Lors du rendu côté serveur ou de l'affichage côté client lors de la navigation côté client, transferState ne contient pas les données. Les données sont obtenues à partir du serveur Oracle Content Management, à l'aide du kit SDK Content, en appelant la méthode fetchArticleDetails() à partir de src/scripts/services.js.

Composant d'application

Le composant App, situé dans src/app/app.component.ts, définit la vue racine.

Ce composant contient les balises routeur-liaison. Angular activera et désactivera les composants de ces balises en fonction de la route en cours.

Composant TopicsList

La page d'accueil comprend une liste composée de sujets individuels. Il est affiché par le composant TopicsList, situé dans src/app/topics-list/topics-list.component.ts.

Dans ngOnInit, le composant obtient les données de la route active, qui a été alimentée par le résolveur de données de liste de sujets.

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

Lorsque le composant est affiché, il obtient toutes les données de ses variables de membre.

Le balisage du composant TopicsList se trouve dans src/app/topics-list/topics-list.component.html.

Composant TopicListItem

Le composant TopicsList utilise le composant TopicsListItem pour afficher la rubrique individuelle dans la liste.

Il se trouve dans src/app/topic-list-item.component.ts et reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Le balisage du composant TopicsListItem se trouve dans src/app/topic-list-item.component.html.

Composant ArticlesList

La page Rubrique affiche les articles de la rubrique dont l'ID est transmis au composant dans l'URL. Il est rendu par le composant ArticlesList, situé dans src/app/articles-list.component.ts.

Dans ngOnInit, vous pouvez voir que le composant obtient les données de la route active, qui a été alimentée par le résolveur de données de liste d'articles.

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

Lorsque le composant est affiché, il obtient toutes les données de ses variables de membre.

Le balisage du composant ArticlesList se trouve dans src/app/articles-list.component.html.

Composant ArticleListItem

Le composant ArticlesList utilise le composant ArticleListItem pour afficher l'article individuel dans la liste.

Ce composant est situé dans src/app/article-list-item.component.ts et reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Le balisage du composant ArticleListItem se trouve dans src/app/article-list-item.component.html.

Composant ArticleDetails

La page Article affiche les détails de l'article dont l'ID est transmis dans l'URL. Il est rendu par le composant ArticleDetails, situé dans src/app/article-details.component.ts.

Dans ngOnInit, vous pouvez voir que le composant obtient les données de la route active, qui a été alimentée par le résolveur de données de liste d'articles.

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

Lorsque le composant est affiché, il obtient toutes les données de ses variables de membre.

Le balisage du composant ArticleDetails se trouve dans src/app/article-details.component.html.

Tâche 3 : Préparer votre application pour le déploiement

Maintenant que nous avons créé notre site de blog Angular, nous devons le voir sur un serveur de développement local afin que nous puissions déboguer tous les problèmes et prévisualiser l'application avant son déploiement.

Préparez l'application pour le déploiement en deux étapes :

  1. Lancement d'un serveur de développement local
  2. Utiliser des scripts pour créer et exécuter l'application en cours de développement et de production

Faire fonctionner un serveur de développement local

Vous pouvez démarrer un serveur de développement localement en exécutant la commande suivante.

npm run dev

Ouvrez ensuite votre navigateur sur http://localhost:4200 pour voir votre site en action.

Utilisation de scripts pour créer et exécuter l'application en cours de développement et de production

Pour la production, le script de création est utilisé pour créer le code client et le code serveur.

npm run build

Ce script exécute d'abord la création du client, puis la création du serveur. Le dist/serveur et le dist/navigateur doivent être déployés sur l'ordinateur serveur avant de démarrer l'application serveur, à l'aide de la commande suivante :

npm run start

Conclusion

Dans ce tutoriel, nous avons créé un site de blog à Angular, disponible sur GitHub. Ce site utilise Oracle Content Management comme CMS sans tête. Après avoir configuré et configuré Oracle Content Management avec un canal de contenu publié pour le tutoriel du site de blog, nous avons installé et exécuté le site Angular afin d'extraire le contenu requis et de créer le site.

Pour plus d'informations sur Angular, visitez le site Web angulaire.

Découvrez les concepts importants d'Oracle Content Management dans la documentation.

Vous trouverez d'autres exemples de ce type sur la page Exemples Oracle Content Management du centre d'aide Oracle.