Création d'une galerie d'images en angle avec une instance Oracle Content Management Headless

Introduction

Angular est une plate-forme permettant de créer des applications Web mobiles et de bureau.

Ce tutoriel présente les étapes de base de la création d'un visualiseur d'images à l'aide d'Angular, avec Oracle Content Management en tant que système de gestion de contenu et son kit SDK Content. Vous découvrirez comment les taxonomies peuvent être utilisées pour catégoriser le contenu et comment différents rendus des ressources numériques peuvent être utilisés pour différents cas d'emploi. Cet échantillon Angular est disponible sur GitHub.

Le didacticiel comporte trois étapes :

  1. Préparer Oracle Content Management
  2. Création de la galerie d'images en 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 galerie d'images se compose de plusieurs pages d'images de nourriture et de boissons disponibles dans un café.

Cette image présente une galerie d'images avec différents types de bagels, certains avec de la crème ou des toppings, ou les deux.

Pour regarder ce que nous construisons, voici l'état de fin de notre tutoriel, une version en direct de ce site de galerie d'images :

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

Les catégories sont des noeuds enfant d'une taxonomie et peuvent être organisées en hiérarchies. Pour notre galerie d'images, nous voulons afficher toutes les catégories disponibles, quelle que soit l'organisation. Pour ce faire, nous devons d'abord trouver les taxonomies disponibles, que nous utilisons à l'aide de la méthode getTaxonomies() de Content SDK.

Remarque : l'implémentation de getTaxonomies utilise la ressource d'API REST GET /published/api/v1.1/taxonomies.

Ensuite, nous devons obtenir l'ensemble des catégories pour chacune des taxonomies. Pour ce faire, utilisez la méthode queryTaxonomyCategories() du kit SDK de contenu.

Remarque : l'implémentation de queryTaxonomyCategories utilise l'API REST GET /published/api/v1.1/taxonomies/{id}/categories.

Pour créer l'aperçu d'une catégorie, telle que Bagels, nous devons obtenir un décompte du nombre d'images et des URL des quatre premières images.

Cette image montre des images dans la catégorie Bagels.

Notre demande de recherche des ressources publiées dans la catégorie spécifie les critères de catégorie via une chaîne de requête, comme suit :

"(taxonomies.categories.nodes.id eq 892CD6BC4F654249A00CB7942EE8C773)"

Pour optimiser le chargement de l'image, nous utiliserons un rendu de l'image nommée "Miniature". Reportez-vous à retrieveThumbnailURL(), dans src/scripts/services.js, pour connaître le code qui examine l'ensemble des rendus disponibles pour chaque image.

Remarque : Outre la publication des ressources numériques à afficher, vous devez également publier les taxonomies sur le canal.

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

Tâche 1 : Préparer Oracle Content Management

Ce tutoriel est basé sur l'hypothèse que vous avez créé votre référentiel de ressources et que vous disposez actuellement d'un modèle de contenu vide (c'est-à-dire qu'aucun type de contenu n'a été créé).

Si vous ne disposez pas encore d'une instance Oracle Content Management, reportez-vous à Démarrage rapide pour savoir comment vous inscrire à Oracle Cloud, provisionner une instance Oracle Content Management et configurer Oracle Content Management en tant que CMS 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échargeables est disponible pour remplir votre 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 contenu.

Pour préparer Oracle Content Management :

  1. Créez un référentiel de canaux et de ressources.
  2. Importer le pack de ressources d'échantillons Oracle Content Management
  3. Télécharger vos propres ressources d'image
  4. Créer des taxonomies et les lier à des ressources d'image

Créer un référentiel de canaux et 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 Canaux de publication dans la liste de sélection de l'en-tête de page.

    Cette image présente l'option Canaux de publication 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 'OCEImageGalleryChannel' dans le cadre de ce tutoriel, puis conservez l'accès public. Cliquez sur Enregistrer pour créer le canal.

    Cette image présente le panneau de définition de canal de publication, avec 'OCEImageGalleryChannel' dans le champ de nom de 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 'OCEImageGalleryRepository' dans le cadre de ce tutoriel.

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

  6. Dans le champ Canaux de publication, sélectionnez OCEImageGalleryChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEImageGalleryRepository peut être publié sur le canal OCEImageGalleryChannel. Cliquez sur Enregistrer une fois que vous avez terminé.

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

Importer le pack de ressources d'échantillons Oracle Content Management

Vous pouvez télécharger un pack de ressources Oracle Content Management préconfiguré contenant tous les types de contenu et toutes les ressources requis pour ce tutoriel.

Vous pouvez télécharger une copie du contenu que nous utilisons dans ce tutoriel à partir du pack de ressources d'échantillons Oracle Content Management. Vous pourrez ainsi expérimenter les types de contenu et modifier le contenu. Vous pouvez télécharger l'archive de pack de ressources OCESamplesAssetPack.zip et l'extraire dans le répertoire de votre choix :

  1. Téléchargez le pack de ressources 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 extraction, cet emplacement inclut un fichier nommé OCEImageGallery_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. Sélectionnez maintenant OCEImageGalleryRepository 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 OCEImageGalleryRepository sélectionné.

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

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

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

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

  6. Une fois le contenu importé, accédez à la page Ressources et ouvrez le référentiel OCEImageGalleryRepository. Vous verrez que toutes les images et tous les é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, OCEImageGalleryChannel.

    Cette image présente le référentiel OCEImageGalleryRepository, avec tous 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 OCEImageGalleryChannel 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 OCEImageGalleryChannel 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 OCEImageGalleryChannel ajouté dans le champ Canaux, toutes les ressources validées et le bouton Publier activé.

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

Cette image présente la page Equipements, avec tous les équipements publiés.

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

Télécharger vos propres ressources d'image

Pour ce tutoriel, nous utilisons un référentiel de ressources appelé 'OCEImageGalleryRepository' pour créer la page d'accueil de notre site de galerie. Cette page d'accueil se compose du titre " Galerie d'images ", ainsi que des albums de collection d'images qui ont des ressources d'image à l'intérieur.

Cette image montre la page d'accueil de la galerie d'images, avec des images de différentes catégories d'images : sandwiches, boissons, dessert, petit déjeuner et nourriture.

Pour ajouter des ressources d'image au référentiel de ressources de galerie, procédez comme suit :

  1. Connectez-vous à l'interface Web d'Oracle Content Management.

  2. Cliquez sur Ressources dans le menu de navigation de gauche.

  3. Ouvrez le référentiel OCEImageGalleryRepository.

  4. Cliquez sur Ajouter dans le coin supérieur droit de la page pour ajouter des ressources d'image au référentiel de ressources de galerie.

    Cette image présente la page Ressources avec le contenu et le menu déroulant Ajouter ouvert, avec deux options : Ajouter à partir de Documents et Ajouter à partir de cet ordinateur.

  5. Chargez vos propres ressources à partir de votre ordinateur local ou choisissez des ressources existantes déjà dans Oracle Content Management.

Vous devez créer une taxonomie dans Oracle Content Management, puis affecter des catégories aux ressources de votre référentiel.

Pour créer une taxonomie 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 Taxonomies dans la liste de sélection de l'en-tête de page.

    Cette image présente l'option Taxonomies 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 une taxonomie. Nommez le canal 'OCEImageGalleryTaxonomy' dans le cadre de ce tutoriel.

    Cette image présente le panneau de définition de taxonomie, avec 'OCEImageGalleryTaxonomy' dans le champ de nom de taxonomie.

  4. Cliquez sur Créer.

  5. A présent, créez la taxonomie en ajoutant des catégories. Cliquez sur Ajouter une catégorie.

    Cette image présente la page Ajouter une catégorie pour la taxonomie 'OCEImageGalleryTaxonomy'.

  6. Nommez l'article de catégorie parent "Alias" et ajoutez les catégories enfant suivantes :

    • Petit déjeuner
    • Dessert (homonymie)
    • Liens
    • Sandwichs

    Cliquez sur Terminé en haut à droite de l'écran.

    Cette image présente la page de définition de la catégorie, avec "Nourriture" comme catégorie parent et les catégories enfant suivantes : Petit déjeuner, Dessert, Boissons et Sandwichs.

  7. Sur la page Taxonomies, sélectionnez la taxonomie OCEImageGalleryTaxonomy et cliquez sur Promouvoir dans la barre d'actions pour la rendre disponible pour utilisation dans les référentiels de ressources.

    Cette image présente la taxonomie OCEImageGalleryTaxonomy sélectionnée dans la liste, avec l'option Promouvoir dans la barre d'actions visible.

Ensuite, modifiez le référentiel OCEImageGalleryRepository afin d'activer la taxonomie OCEImageGalleryTaxonomy pour ce référentiel :

  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 Référentiels dans la liste de sélection de l'en-tête de page.

  3. Sélectionnez et modifiez le référentiel OCEImageGalleryRepository.

  4. Dans le champ Taxonomies, sélectionnez OCEImageGalleryTaxonomy afin que vous puissiez affecter des catégories de cette taxonomie aux ressources du référentiel OCEImageGalleryRepository. Cliquez sur Enregistrer.

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

Affectez ensuite des catégories de taxonomie à chacune des ressources d'image du référentiel OCEImageGalleryRepository :

  1. Connectez-vous à l'interface Web d'Oracle Content Management.

  2. Cliquez sur Ressources dans le menu de navigation de gauche.

  3. Ouvrez le référentiel OCEImageGalleryRepository.

  4. Sélectionnez des ressources d'image, cliquez sur Plus dans la barre d'actions, puis choisissez Catégories dans le menu.

    Cette image présente une ressource sélectionnée dans le référentiel OCEImageGalleryRepository, avec le menu de sélection Plus affiché (y compris l'option Catégories).

  5. Dans le panneau Catégories, cliquez sur Ajouter une catégorie. Recherchez le nom de la catégorie dans la barre de recherche ou sélectionnez une catégorie dans la structure hiérarchique de la taxonomie, puis cliquez sur Ajouter pour affecter la catégorie sélectionnée. Vous pouvez affecter plusieurs catégories à une immobilisation.

    Cette image présente le panneau Catégories d'un actif, avec une barre de recherche de catégories et une structure hiérarchique de taxonomie "Alias".

  6. Une fois que vous avez affecté des taxonomies à toutes les ressources d'image, sélectionnez toutes les ressources de votre référentiel et publiez-les sur le canal OCEImageGalleryChannel.

Pour utiliser notre contenu Oracle Content Management dans une application Angular, nous pouvons utiliser l'exemple de galerie d'images 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 application enrichie par la CLI d'Angular avec la prise en charge du rendu côté serveur à l'aide de la CLI d'Angular.

Pour créer la galerie d'images à Angular, procédez comme suit :

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

Cloner le référentiel échantillon 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 de GitHub vers votre ordinateur local et remplacer votre répertoire par la racine du référentiel :

git clone https://github.com/oracle/oce-angular-gallery-sample.git
    cd oce-angular-gallery-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 galerie d'images angulaires, vous devez configurer quelques informations afin que votre kit SDK Oracle Content Management Content (et toutes autres demandes) puisse cibler l'URL d'instance et la version d'API correctes avec le jeton de canal correct. Ces valeurs sont utilisées dans src/scripts/server-config-utils.js pour instancier un nouveau client de distribution.

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 à disposition partout 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=e0b6421e73454818948de7b1eaddb091

Modifiez chaque paire clé-valeur afin qu'elle reflète l'URL de l'instance, la version d'API à cibler et le jeton de canal associé au canal de publication. Le canal de ce tutoriel est OCEImageGalleryChannel.

Utiliser le kit SDK Oracle Content Management Content

Oracle Content Management propose un kit SDK de contenu dans deux versions différentes, selon que vous l'utilisez dans un contexte côté client (groupe de navigateurs) ou dans un contexte côté serveur (Node.js).

Les deux kits SDK sont disponibles en tant que bibliothèques open source sur GitHub :

En outre, le kit SDK Content est disponible en tant que module NPM avec chaque instance d'Oracle Content Management, où {server} ci-dessous représente l'URL de l'instance (reportez-vous à Démarrage rapide pour plus d'informations sur l'extraction de l'URL de l'instance) :

Vous pouvez également utiliser le bundle côté client miniifié : {server}/_sitesclouddelivery/renderer/app/sdk/js/content.min.js

Utiliser le kit SDK Oracle Content Management Content pour extraire du contenu

Nous pouvons désormais utiliser le kit SDK Oracle Content Management Content pour extraire le contenu afin de le rendre dans notre application Angular.

Le kit SDK Oracle Content Management Content 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 de Content SDK.

Le fichier src/scripts/server-config-utils.js importe le SDK Oracle Content Management 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 distribution :

return createDeliveryClient(serverconfig);

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

Pour le rendu des images, services.js fournit une méthode d'aide permettant d'extraire l'ensemble 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;
    }

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 chargeons d'abord les taxonomies pour le canal spécifié dans .env.
  2. Pour chacune des taxonomies, nous obtenons toutes les catégories de cette taxonomie.
  3. Pour chaque catégorie, nous obtenons quatre éléments de contenu.
  4. Pour chacun de ces éléments, nous obtenons ses URL de rendu.

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

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() appelle fetchAllTaxonomiesCategories() pour obtenir toutes les catégories dans toutes les taxonomies.

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() appelle fetchCategoriesForTaxonomyId() pour obtenir toutes les catégories d'une taxonomie spécifique.

function fetchCategoriesForTaxonomyId(client, taxonomyId) {
      return client
        .queryTaxonomyCategories({
          id: `${taxonomyId}`,
        })
        .then((topLevelItem) => topLevelItem)
        .catch((error) => logError('Fetching categories for taxonomy failed', error));
    }

La fonction addItemsToCategories est ensuite appelée pour ajouter les quatre éléments de catégorie à chaque catégorie.

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

Enfin, getSourceSet vu précédemment est appelé pour obtenir les URL de rendu de chaque élément.

Données de la page de la grille d'images

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

  1. Obtenir tous les articles de la catégorie spécifiée.
  2. Pour chaque élément, obtenez ses URL de rendu.

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

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

Elle appelle fetchItemsForCategory, comme la page d'accueil, mais sans limite, de sorte que tous les éléments sont renvoyés, pas seulement quatre.

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

Affichage côté client ou côté serveur

Avec le rendu côté client (CSR), le client est responsable de la création et de l'affichage du contenu d'une page Web à l'aide de JavaScript. Avec le rendu côté serveur (SSR), l'ensemble de la page est construit sur le serveur et une page Web complète est renvoyée au client.

Lorsque la page Web est demandée au serveur dans l'affichage côté client, le document HTML renvoyé contient du 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 bundle, le client exécute le JavaScript et renseigne la page Web. Tant que le client n'a pas terminé l'exécution du code JavaScript, tout l'utilisateur voit une page Web vide. Un inconvénient des applications rendues côté client est que lorsque certains analyseurs de liens Web indexent le site, il n'y a pas de contenu réel à indexer.

Avec le rendu côté serveur (SSR), l'ensemble de la page est construit sur le serveur et une page Web complète est renvoyée au client. L'avantage est que les analyseurs de liens (crawlers) Web peuvent indexer l'intégralité du contenu sur la page Web.

Affichage côté serveur angulaire

Le flux de l'application de galerie d'images angulaires est le suivant :

  1. Le client envoie une demande au serveur pour une route donnée.
  2. Le serveur Express reçoit la demande.
  3. Le serveur Express transmet toutes les demandes client de pages au moteur Express d'Angular Univeral
  4. Le moteur Express de l'Univeral Angular prend un fichier HTML modèle et l'alimente comme suit
    1. Balisage pour la route donnée
    2. Données de routage sérialisées
    3. Références à des feuilles de style
    4. Références aux bundles 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 affiche. L'utilisateur verra une page Web entièrement formée.
  7. Le client demande des bundles JavaScript à partir du serveur. Après réception, le client exécute le JavaScript dans le groupe.
    1. Il "hydrater" le code HTML et l'ajouter dans n'importe quel code JavaScript côté client, tel que les processus d'écoute d'événement.
    2. Angular prend automatiquement les données sérialisées de la page et les injecte dans le code JavaScript afin qu'elles soient disponibles pour les composants.
  8. Si le document HTML contenait une feuille de style, le client demande la feuille de style.

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

Serveur Express côté serveur

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 angulaire 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 HTML ordinaire, des directives angulaires et des balises de liaison, qui permettent à Angular d'ajuster le HTML avant son affichage.

Les sections suivantes fournissent un aperçu de la manière dont Angular affiche 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érents routages pour notre application. Sur notre site, nous voulons fournir deux routes :

La page de grille d'images prend un argument fourni par Oracle Content Management dans son URL.

Les routages de page d'accueil et de grille d'images définissent les résolveurs utilisés pour obtenir toutes les données requises pour le routage avant la création des composants du routage.

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

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

Module racine pour l'affichage côté serveur

Le point d'entrée principal de cette application Angular, lors du rendu de l'application sur le serveur, 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, ainsi que le fichier ServerModule d'Angular. 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 d'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 la page d'accueil

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

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

Lors du rendu côté serveur ou du rendu côté client lors de la navigation côté client, transferState ne contiendra 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 getHomePageData() à partir de src/scripts/services.js.

Résolveur de données de la grille d'images

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

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

Lors du rendu côté serveur ou du rendu côté client lors de la navigation côté client, transferState ne contiendra 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 getImageGridPageData() à partir de src/scripts/services.js.

Composant d'application

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

Ce composant contient les balises routeur-lien. Angular échange les composants sur et hors de la page au sein de ces balises, en fonction du routage en cours.

Composant principal

La page d'accueil se compose d'une liste de catégories pour une taxonomie, avec un aperçu de quatre éléments dans cette catégorie.

Ouvrez le composant Home, situé dans src/app/home/home.component.ts. Dans ngOnInit, le composant obtient les données du routage actif, qui a été rempli par le résolveur de page d'accueil.

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

Lorsque le composant est affiché, il obtient toutes les données de ses variables membres. La carte miniature de catégorie et d'image est ensuite transmise au composant Galerie.

Le balisage du composant Home se trouve dans src/app/home/home.component.html.

Le composant Gallery (Galerie) représente la catégorie individuelle de la liste. Ce composant affiche un aperçu de quatre articles de la catégorie.

Situé à src/app/gallery/gallery-component.ts, le composant Gallery 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 Gallery se trouve dans src/app/gallery/gallery-component.html.

Composant de grille d'images

Le composant Grille d'images affiche les éléments de la catégorie dont l'ID est transmis au composant sur l'URL.

Ouvrez le composant Grille d'images, situé dans src/app/image-grid-component.ts. Dans ngOnInit, le composant obtient les données du routage actif qui a été rempli par le résolveur de page de grille d'images.

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

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

Le balisage du composant Grille d'images est situé dans src/app/image-grid-component.html.

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

Maintenant que nous avons créé notre site de galerie d'images angular, nous devons le voir sur un serveur de développement local afin de pouvoir déboguer tous les problèmes et prévisualiser l'application avant de la mettre en service.

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

  1. Mettre en place un serveur de développement local
  2. Utiliser des scripts pour créer et exécuter l'application dans les environnements de développement et de production

Mettre en place 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 vers http://localhost:4200 pour voir votre site en action.

Utiliser des scripts pour créer et exécuter l'application dans les environnements de développement et de production

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

npm run build

Ce script exécute d'abord le build client, puis le build de serveur. Le dist/serveur et le dist/navigateur créés 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 galerie dans 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 galerie, 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.