DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Guide de prise en main du développeur pour la création WYSIWYG avec des Edge Delivery Services edge-dev-getting-started

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Administration
  • Développeur

Ce guide vous aidera à maîtriser l’exécution d’un nouveau site Adobe Experience Manager à l’aide de Edge Delivery Services et de l’éditeur universel pour la création de contenu WYSIWYG.

Conditions préalables prerequisites

Avant de commencer ce guide, il est recommandé de connaître les principes de base et d’avoir accès à Edge Delivery Services, notamment :

Choisir le bon éditeur editor-choice

AEM propose deux éditeurs de contenu différents dont le choix dépend de votre situation.

  • Éditeur universel  : il doit s’agir du choix par défaut pour les nouveaux sites.
  • Éditeur de page AEM  : cette option doit être sélectionnée pour une migration d’une instance AEM Sites existante vers Edge Delivery Services.

Ce guide porte sur les projets AEM réalisés sur Edge Delivery Services à l’aide de l’éditeur universel. Voir le document Utiliser Edge Delivery Services avec AEM pour en savoir plus sur le choix de l’éditeur approprié et la migration d’AEM Sites existants vers Edge Delivery Services.

Concepts de base du développement pour Edge Delivery Services core-concepts

Edge Delivery Services est basé sur le concept de blocs. AEM est fourni avec une bibliothèque complète de blocs prédéfinis, qui peut être étendue pour répondre aux besoins de votre projet. Le code pour les projets Edge Delivery Services est géré dans GitHub.

Blocs blocks

Les blocs sont la partie la plus fondamentale d’une page diffusée par Edge Delivery Services. Un bloc encapsule la mise en forme et le code qui génère un composant logique d’une page de contenu.

AEM fournit des blocs standard dans le cadre du produit, à l’intérieur du modèle standard du projet. Ces blocs incluent des en-têtes, du texte, des images, des liens, des listes, etc.

TIP
Consultez la section Créer de la documentation Edge Delivery Services pour plus d’informations sur les blocs et sur la manière de développer pour Edge Delivery Services.

Edge Delivery Services et GitHub github-edge

Edge Delivery Services utilise GitHub pour vous permettre de gérer et de déployer du code directement à partir de votre référentiel GitHub.

Vos auteurs et autrices peuvent créer du contenu à l’aide de la création basée sur des documents ou du contenu dans AEM avec l’éditeur universel. Les équipes de développement peuvent personnaliser les fonctionnalités de votre site à l’aide de CSS et de JavaScript dans GitHub, quelle que soit la manière dont les personnes créent leur contenu.

Les sites web sont automatiquement créés pour chacune de vos branches, de l’aperçu du contenu à la production. Chaque ressource que vous placez dans votre référentiel GitHub est disponible sur votre site web sans processus de création.

TIP
Consultez la section Créer de la documentation Edge Delivery Services pour plus d’informations sur les blocs et sur la manière de développer pour Edge Delivery Services.

Prise en main de la création et du Edge Delivery Services WYSIWYG getting-started

Lorsque vous remplissez les conditions préalables et avez choisi d’utiliser l’éditeur universel, vous pouvez commencer votre propre projet.

Créer votre projet GitHub create-github-project

Vous devez d’abord créer un projet sur GitHub, basé sur le modèle Adobe.

  1. Accédez à https://github.com/adobe-rnd/aem-boilerplate-xwalk et cliquez sur Utiliser ce modèle, puis sélectionnez Créer un référentiel.

    • Vous devez disposer d’une connexion à GitHub pour voir cette option.

    Copie du projet de référentiel

  2. Par défaut, le référentiel vous est affecté. Modifiez ce paramètre selon les besoins. Saisissez un nom et une description pour le référentiel, puis cliquez sur Créer un référentiel.

    Création du référentiel

  3. Dans un nouvel onglet du même navigateur, accédez à https://github.com/apps/aem-code-sync et cliquez sur Configurer.

    Code Sync

  4. Cliquez sur Configurer pour l’organisation dans laquelle vous avez créé votre référentiel à l’étape précédente.

    Choix de l’organisation pour Code Sync

  5. Sur la page GitHub d’AEM Code Sync, sous Accès au référentiel, choisissez Sélectionner uniquement les référentiels, choisissez le référentiel créé à l’étape précédente, puis cliquez sur Enregistrer.

    Octroi d’un accès à AEM Code Sync

  6. Une fois AEM Code Sync installé, un écran de confirmation s’affiche. Revenez à l’onglet du navigateur de votre nouveau référentiel.

    Confirmation de l’installation d’AEM Code Sync

  7. Cliquez sur le fichier fstab.yaml pour l’ouvrir, puis sur l’icône Modifier ce fichier pour le modifier.

    fstab.yaml

  8. Modifiez le fichier fstab.yaml pour mettre à jour le point de montage de votre projet. Remplacez l’URL Google Docs par défaut par l’URL de votre instance de création AEM as a Cloud Service, puis cliquez sur Valider les modifications….

    • https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
    • La modification du point de montage indique à Edge Delivery Services où trouver le contenu du site.

    Mise à jour de fstab

  9. Ajoutez un message de validation selon vos besoins, puis cliquez sur Valider les modifications, en les validant directement dans la branche main.

    Validation des modifications

  10. Revenez à la racine de votre référentiel et cliquez sur paths.json, puis sur l’icône Modifier ce fichier.

    paths.json

  11. Le mappage par défaut portera le nom du référentiel. Mettez à jour le mappage par défaut selon les besoins de votre projet avec /content/<site-name>/:/ et cliquez sur Valider les modifications….

    • Fournissez votre propre <site-name>. Vous en aurez besoin ultérieurement.
    • Les mappages indiquent à Edge Delivery Services comment mapper le contenu de votre référentiel AEM à l’URL du site.

    Mise à jour de paths.json

  12. Ajoutez un message de validation selon vos besoins, puis cliquez sur Valider les modifications, en les validant directement dans la branche main.

    Validation des modifications

Créer et modifier un nouveau site AEM create-aem-site

Maintenant que vous disposez d’un projet GitHub, vous devez créer un site AEM que le projet peut utiliser.

NOTE
Pour modifier votre site à l’aide de l’éditeur universel, vous devez utiliser un navigateur basé sur Chromium.

  1. Téléchargez la dernière création WYSIWYG avec modèle de site Edge Delivery Services depuis GitHub à l’adresse https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases.

  2. Connectez-vous à votre instance de création AEM as a Cloud Service et accédez à la console Sites, puis appuyez ou cliquez sur Créer  -> Site à partir du modèle.

    Création d’un site à partir de la console

  3. Dans l’onglet Sélectionner un modèle de site de l’assistant de création de site, cliquez sur le bouton Importer pour importer un nouveau modèle.

    Import des modèles

  4. Téléchargez la création WYSIWYG avec le modèle de site Edge Delivery Services que vous avez téléchargé à partir de GitHub.

    • Le modèle ne doit être chargé qu’une seule fois. Une fois chargé, il peut être réutilisé pour créer d’autres sites.

  5. Une fois le modèle importé, il apparaît dans l’assistant. Appuyez ou cliquez dessus pour le sélectionner, puis appuyez ou cliquez sur Suivant.

    Sélection d’un modèle

  6. Renseignez les champs suivants et appuyez ou cliquez sur Créer.

    • Titre du site  : ajoutez un titre descriptif pour le site.
    • Titre du site  : utilisez le <site-name> que vous avez défini à l’étape précédente.
    • URL GitHub  : utilisez l’URL du projet GitHub que vous avez créé à l’étape précédente.

    Détails du site

  7. AEM confirme la création du site avec une boîte de dialogue. Appuyez ou cliquez sur  OK pour ignorer.

    Confirmation de création de site

  8. Dans la console Sites, accédez à l’index.html du site nouvellement créé, puis appuyez ou cliquez sur Modifier dans la barre d’outils.

    Modification du nouveau site

  9. L’éditeur universel s’ouvre dans un nouvel onglet. Vous devrez peut-être appuyer ou cliquer sur Se connecter avec Adobe pour vous authentifier afin de modifier votre page.

    Éditeur universel

Vous pouvez désormais modifier votre site à l’aide de l’éditeur universel. Pour plus d’informations, voir la documentation de l’éditeur universel.

Publier le nouveau site publishing

Lorsque vous avez terminé de modifier votre nouveau site à l’aide de l’éditeur universel, vous pouvez publier votre contenu.

  1. Dans la console Sites, sélectionnez toutes les pages que vous avez créées pour votre nouveau site, puis appuyez ou cliquez sur Publication rapide dans la barre d’outils.

    Sélection des pages à publier

  2. Appuyez ou cliquez sur Publier dans la boîte de dialogue de confirmation pour lancer le processus.

    Boîte de dialogue Publier

  3. Ouvrez un nouvel onglet dans le même navigateur et accédez à l’URL de votre nouveau site.

    • https://main--<repository-name>--<owner>.hlx.page

  4. Affichez le contenu publié.

    Contenu publié

Étapes suivantes next-steps

Maintenant que vous disposez d’un projet WYSIWYG de création avec des Edge Delivery Services, vous pouvez commencer à créer et à mettre en forme vos propres blocs.

Consultez le guide Création de blocs instrumentés pour une utilisation avec l’éditeur universel pour plus d’informations.

TIP
Pour une présentation exhaustive de la création d’un projet Edge Delivery Services activé pour la création WYSIWYG avec AEM as a Cloud Service en tant que source de contenu, consultez ce webinaire GEMs AEM.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab