1.1.3 Configuration de votre environnement AEM CS

1.1.3.1 Configurer votre référentiel GitHub

Accédez à https://github.com. Cliquez sur Se connecter.

{modal="regular"}

Saisissez vos informations d’identification. Cliquez sur Se connecter.

{modal="regular"}

Une fois connecté, votre tableau de bord GitHub s’affiche.

{modal="regular"}

Accédez à https://github.com/AdobeDevXSC/citisignal-one. Tu verras ça. Cliquez sur Utiliser ce modèle puis sur Créer un référentiel.

{modal="regular"}

Pour le Nom du référentiel, utilisez citisignal. Définissez la visibilité sur Privé. Cliquez sur Créer un référentiel.

{modal="regular"}

Au bout de quelques secondes, votre référentiel sera alors créé.

{modal="regular"}

Ensuite, accédez à https://github.com/apps/aem-code-sync. Cliquez sur Configurer.

{modal="regular"}

Cliquez sur votre compte GitHub.

{modal="regular"}

Cliquez sur Sélectionner uniquement les référentiels puis ajoutez le référentiel que vous venez de créer. Cliquez ensuite sur Installer.

{modal="regular"}

Vous obtiendrez alors cette confirmation.

{modal="regular"}

1.1.3.2 Mettre à jour le fichier fstab.yaml

Dans votre référentiel GitHub, cliquez sur pour ouvrir le fichier fstab.yaml.

{modal="regular"}

Cliquez sur l’icône modifier.

{modal="regular"}

Vous devez maintenant mettre à jour la valeur du champ url à la ligne 4.

{modal="regular"}

Vous devez remplacer la valeur actuelle par l’URL de votre environnement AEM CS spécifique, en combinaison avec les paramètres de votre référentiel GitHub.

Il s’agit de la valeur actuelle de l’URL : https://author-p131639-e1282833.adobeaemcloud.com/bin/franklin.delivery/adobedevxsc/citisignal-one/main.

3 parties de l’URL doivent être mises à jour

https://XXX/bin/franklin.delivery/YYY/ZZZ/main

XXX doit être remplacé par l’URL de votre environnement de création AEM CS.

Vous devriez être remplacé par votre compte utilisateur GitHub.

ZZZ doit être remplacé par le nom du référentiel GitHub que vous avez utilisé dans l’exercice précédent.

Vous trouverez l’URL de votre environnement de création AEM CS à l’adresse https://my.cloudmanager.adobe.com. Cliquez sur votre Programme pour l’ouvrir.

{modal="regular"}

Cliquez ensuite sur le de 3 points… dans l’onglet Environnements et cliquez sur Afficher les détails.

{modal="regular"}

Vous verrez ensuite les détails de votre environnement, y compris l’URL de votre environnement de création. Copiez l’URL.

{modal="regular"}

XXX = author-p148073-e1511503.adobeaemcloud.com

Pour le nom de compte d’utilisateur GitHub, vous pouvez facilement le trouver dans l’URL de votre navigateur. Dans cet exemple, le nom du compte utilisateur est woutervangeluwe.

AAAA = woutervangeluwe

{modal="regular"}

Pour le nom du référentiel GitHub, vous pouvez également le trouver dans la fenêtre du navigateur que vous avez ouverte dans GitHub. Dans ce cas, le nom du référentiel est citisignal.

ZZZ = citisignal

{modal="regular"}

La combinaison de ces 3 valeurs entraîne la création de cette nouvelle URL qui doit être configurée dans le fstab.yaml de fichiers.

https://author-p148073-e1511503.adobeaemcloud.com/bin/franklin.delivery/woutervangeluwe/citisignal/main

Cliquez sur Valider les modifications….

{modal="regular"}

Cliquez sur Valider les modifications.

{modal="regular"}

Le fichier fstab.yaml a été mis à jour.

1.1.3.3 Charger des ressources CitiSignal

Accédez à https://my.cloudmanager.adobe.com. Cliquez sur votre Programme pour l’ouvrir.

{modal="regular"}

Cliquez ensuite sur l’URL de votre environnement de création.

{modal="regular"}

Cliquez sur Se connecter avec Adobe.

{modal="regular"}

Votre environnement de création s’affiche alors.

{modal="regular"}

Votre URL ressemblera à ceci : https://author-p148073-e1511503.adobeaemcloud.com/ui#/aem/aem/start.html?appId=aemshell

Vous devez maintenant accéder à l’environnement Gestionnaire de packages CRX d’AEM. Pour ce faire, supprimez ui#/aem/aem/start.html?appId=aemshell de l’URL et remplacez-la par crx/packmgr, ce qui signifie que votre URL doit maintenant ressembler à ceci :
https://author-p148073-e1511503.adobeaemcloud.com/crx/packmgr.
Appuyez sur Entrée pour charger l’environnement du gestionnaire de packages.

{modal="regular"}

Cliquez ensuite sur Télécharger le package.

{modal="regular"}

Cliquez sur Parcourir pour localiser le package à charger.

Le package à charger est appelé citisignal-assets.zip et peut être téléchargé ici : https://tech-insiders.s3.us-west-2.amazonaws.com/one-adobe/citisignal-assets.zip.

{modal="regular"}

Sélectionnez le package et cliquez sur Ouvrir.

{modal="regular"}

Cliquez ensuite sur OK.

{modal="regular"}

Le package sera ensuite chargé.

{modal="regular"}

Cliquez ensuite sur Installer sur le package que vous venez de télécharger.

{modal="regular"}

Cliquez sur Installer.

{modal="regular"}

Au bout de quelques minutes, votre package sera alors installé.

{modal="regular"}

Vous pouvez maintenant fermer cette fenêtre.

1.1.3.4 Publication de ressources CitiSignal

Accédez à https://my.cloudmanager.adobe.com. Cliquez sur votre Programme pour l’ouvrir.

{modal="regular"}

Cliquez ensuite sur l’URL de votre environnement de création.

{modal="regular"}

Cliquez sur Se connecter avec Adobe.

{modal="regular"}

Votre environnement de création s’affiche alors. Cliquez sur Assets.

{modal="regular"}

Cliquez sur Fichiers.

{modal="regular"}

Cliquez pour sélectionner le dossier CitiSignal, puis cliquez sur Gérer la publication.

{modal="regular"}

Cliquez sur Suivant.

{modal="regular"}

Cliquez sur Publier.

{modal="regular"}

Vos ressources ont maintenant été publiées.

1.1.3.5 Créer un site web CitiSignal

Accédez à https://my.cloudmanager.adobe.com. Cliquez sur votre Programme pour l’ouvrir.

{modal="regular"}

Cliquez ensuite sur l’URL de votre environnement de création.

{modal="regular"}

Cliquez sur Se connecter avec Adobe.

{modal="regular"}

Votre environnement de création s’affiche alors. Cliquez sur Sites.

{modal="regular"}

Cliquez sur Créer puis sur Site à partir d’un modèle.

{modal="regular"}

Cliquez sur Importer.

{modal="regular"}

Vous devez maintenant importer un modèle préconfiguré pour votre site. Vous pouvez télécharger le modèle ici. Enregistrez le fichier sur votre bureau.

Sélectionnez ensuite le citisignal-edge-delivery-services-template-0.0.4.zip de fichier et cliquez sur Ouvrir.

{modal="regular"}

Tu verras ça. Cliquez pour sélectionner le modèle que vous venez de charger, puis cliquez sur Suivant.

{modal="regular"}

Vous devez maintenant renseigner certains détails.

{modal="regular"}

Tu auras alors ceci. Cliquez sur Créer.

{modal="regular"}

Votre site est en cours de création. Cela peut prendre quelques minutes. Cliquez sur OK.

{modal="regular"}

Actualisez votre écran au bout de quelques minutes, vous verrez alors votre nouveau site CitiSignal.

{modal="regular"}

1.1.3.6 Publier le site web de CitiSignal

Ensuite, cliquez sur la case à cocher devant CitiSignal. Cliquez ensuite sur Gérer la publication.

{modal="regular"}

Cliquez sur Suivant.

{modal="regular"}

Cliquez sur Inclure les paramètres enfants.

{modal="regular"}

Cochez la case Inclure les enfants, puis cliquez pour désélectionner les autres cases. Cliquez sur OK.

{modal="regular"}

Cliquez sur Publier.

{modal="regular"}

On vous renverra ensuite ici. Accédez à CitiSignal > us > fr. Cochez la case en regard de index, puis cliquez sur Modifier.

{modal="regular"}

Votre site web s’ouvre alors dans l’éditeur universel.

{modal="regular"}

Vous pourrez désormais accéder à votre site web en accédant à main--citisignal--XXX.aem.page/us/en/ et/ou main--citisignal--XXX.aem.live/us/en/, après avoir remplacé XXX par votre compte utilisateur GitHub, qui est woutervangeluwe dans cet exemple.

Dans cet exemple, l’URL complète devient :
https://main--citisignal--woutervangeluwe.aem.page/us/en/ et/ou https://main--citisignal--woutervangeluwe.aem.live/us/en/

Cela peut prendre un certain temps avant que toutes les ressources ne s’affichent correctement, car elles doivent d’abord être publiées.

Vous verrez alors ceci :

{modal="regular"}

Au bout de quelques minutes, les ressources se chargeront toutes correctement.

{modal="regular"}

Performances de la page de test 1.1.3.7

Accédez à https://pagespeed.web.dev/. Saisissez votre URL et cliquez sur Analyser.

{modal="regular"}

Votre site web obtient un score élevé dans les visualisations pour appareils mobiles et pour ordinateurs de bureau :

Mobile :

{modal="regular"}

Ordinateur de bureau :

{modal="regular"}

Étape suivante : 1.1.4 Configurer un bloc personnalisé

Revenir à Adobe Experience Manager Cloud Service et Edge Delivery Services

Revenir à tous les modules