Guide de prise en main du développeur pour la création WYSIWYG avec des Edge Delivery Services edge-dev-getting-started
Ce guide vous aidera à maîtriser l’exécution d’un nouveau site Adobe Experience Manager à l’aide de Edge Delivery Services et d’Universal Editor 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 :
- Vous avez terminé le tutoriel sur Edge Delivery Services.
- Vous avez accès à un sandbox AEM Cloud Service.
- Vous avez activé l’éditeur universel dans le même environnement de sandbox.
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.
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.
Prise en main de la création et des 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.
-
Accédez à
https://github.com/adobe-rnd/aem-boilerplate-xwalket 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.
-
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.
-
Dans un nouvel onglet du même navigateur, accédez à
https://github.com/apps/aem-code-syncet cliquez sur Configurer.
-
Cliquez sur Configurer pour l’organisation dans laquelle vous avez créé votre référentiel à l’étape précédente.
-
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.
-
Une fois AEM Code Sync installé, un écran de confirmation s’affiche. Revenez à l’onglet du navigateur de votre nouveau référentiel.
-
Cliquez sur le fichier
fstab.yamlpour l’ouvrir, puis sur l’icône Modifier ce fichier pour le modifier.
-
Modifiez le fichier
fstab.yamlpour 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.
-
Ajoutez un message de validation selon vos besoins, puis cliquez sur Valider les modifications, en les validant directement dans la branche
main.
-
Revenez à la racine de votre référentiel et cliquez sur
paths.json, puis sur l’icône Modifier ce fichier.
-
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.
- Fournissez votre propre
-
Ajoutez un message de validation selon vos besoins, puis cliquez sur Valider les modifications, en les validant directement dans la branche
main.
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.
-
Téléchargez la dernière création WYSIWYG avec le modèle de site Edge Delivery Services depuis GitHub à l’adresse
https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases. -
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.
-
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.
-
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.
-
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.
-
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.
-
AEM confirme la création du site avec une boîte de dialogue. Appuyez ou cliquez sur OK pour ignorer.
-
Dans la console Sites, accédez à l’
index.htmldu site nouvellement créé, puis appuyez ou cliquez sur Modifier dans la barre d’outils.
-
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.
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.
-
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.
-
Appuyez ou cliquez sur Publier dans la boîte de dialogue de confirmation pour lancer le processus.
-
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
-
Affichez le contenu publié.
Étapes suivantes next-steps
Maintenant que vous disposez d’un projet WYSIWYG de création avec 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.