Prise en main – Tutoriel pour l’équipe de développement

Ce tutoriel vous permet de prendre en main un nouveau projet Adobe Experience Manager (AEM). Dans dix à vingt minutes, vous aurez créé votre propre site et vous pourrez créer, prévisualiser et publier votre propre contenu, style et ajouter de nouveaux blocs.

Conditions préalables :

Ce tutoriel utilise macOS, Chrome et Visual Studio Code comme environnement de développement. Les captures d’écran et les instructions reflètent cette configuration. Vous pouvez utiliser un autre système d’exploitation, navigateur et éditeur de code, mais l’interface utilisateur qui s’affiche et les étapes à suivre peuvent varier en conséquence.

Prise en main du modèle de référentiel standard

La méthode la plus rapide et la plus simple pour commencer à suivre AEM bonnes pratiques consiste à créer votre référentiel à l’aide du référentiel GitHub standard en tant que modèle.

https://github.com/adobe/aem-boilerplate

Cliquez simplement sur le bouton Use this template et sélectionnez Create a new repository, puis sélectionnez l’emplacement où vous souhaitez créer ce référentiel.

Nous vous recommandons de définir le référentiel sur public.

La seule étape restante dans GitHub est d’installer le Application GitHub de synchronisation de code AEM sur votre référentiel en consultant ce lien : https://github.com/apps/aem-code-sync/installations/new

Dans le Repository access paramètres de l’application de synchronisation du code AEM, veillez à sélectionner Only select Repositories (not) All Repositories). Sélectionnez ensuite le référentiel nouvellement créé, puis cliquez sur Save.

Remarque: si vous utilisez Github Enterprise avec le filtrage IP, vous pouvez ajouter l’adresse IP suivante à la liste autorisée : 3.227.118.73

Félicitations. Un nouveau site web est en cours d’exécution sur https://<branch>--<repo>--<owner>.hlx.page/ Dans l’exemple ci-dessus, qui correspond à https://main--my-website--lighthouse100.hlx.page/

Lier votre propre source de contenu à l’aide de Google Drive

Dans votre double du référentiel GitHub standard, le site pointe vers une source de contenu existante dans Google Drive. Voir ce dossier pour des exemples de contenu.

Ce contenu est en lecture seule, mais il peut être copié dans votre dossier de lecteur Google pour servir de point de départ.

Pour créer votre propre contenu, créez un dossier dans votre propre lecteur Google et partagez le dossier avec l’utilisateur Adobe Experience Manager (helix@adobe.com).

Pour commencer à créer votre propre contenu, copiez index, nav et footer à partir de l’exemple de contenu et familiarisez-vous avec la structure de contenu. nav et footer ne sont pas modifiés fréquemment dans un projet et ont une structure spéciale. La plupart des fichiers d’un projet ressemblent davantage à index.

Ouvrez les fichiers et copiez/collez le contenu entier dans les fichiers correspondants de votre propre lecteur Google. Vous pouvez également télécharger les fichiers via Download All ou télécharger des fichiers individuels. Toutefois, pensez à convertir le .docx de nouveau dans les documents Google natifs, lorsque vous les chargez dans votre dossier de Google Drive.

Maintenant que vous disposez de votre contenu, vous devez le connecter à votre référentiel GitHub. Pour ce faire, modifiez la référence dans fstab.yaml dans votre référentiel GitHub vers le dossier que vous venez de partager.
Copiez/collez l’URL du dossier de votre lecteur Google vers fstab.yaml.

Gardez à l’esprit qu’une fois ce changement effectué, vous verrez 404 not found car votre contenu n’a pas encore été prévisualisé. Reportez-vous à la section suivante pour savoir comment commencer à créer et prévisualiser votre contenu. Si vous avez copié sur index, nav et footer ces trois documents sont des documents distincts ayant leurs propres cycles de prévisualisation et de publication. veillez donc à les prévisualiser (et à les publier) tous si nécessaire.

Validez vos modifications et vous avez connecté votre propre source de contenu à votre site web.

Prévisualiser et publier votre contenu

Une fois la dernière étape terminée, votre nouvelle source de contenu n’est pas vide, mais aucun contenu n’a été converti en preview ou live phases, ce qui signifie que votre site web diffuse des versions 404.

Pour prévisualiser le contenu, un auteur doit installer l’extension Chrome du Sidekick. Recherchez le Extension Chrome ici.

Après avoir ajouté l’extension à Chrome, n’oubliez pas de l’épingler, cela permettra de la trouver plus facilement.

Pour configurer l’extension Chrome, accédez à votre dossier Google Drive précédemment partagé, cliquez sur l’icône d’extension dans la barre d’outils du navigateur, puis sélectionnez Add this project.

Dès que l’extension est installée et que votre projet est ajouté, vous êtes prêt à prévisualiser et publier votre contenu à partir de votre lecteur Google.

Sélectionnez les trois documents et activez le AEM Sidekick en cliquant sur votre extension épinglée. Une nouvelle barre d’outils s’affiche. Cliquez sur le bouton preview ou publish les boutons déclenchent l’opération correspondante.

Ouvrez le index puis apporter des modifications. Activez le Sidekick en cliquant sur votre extension épinglée, puis cliquez sur le bouton Preview qui déclenche l’opération d’aperçu et ouvre un nouvel onglet avec le rendu d’aperçu du contenu.

Commencer à développer le style et les fonctionnalités

Pour commencer le développement, il est plus facile d’installer l’interface de ligne de commande d’AEM et de cloner votre référentiel localement à l’aide de ce qui suit.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

Ensuite, modifiez le dossier de votre projet et démarrez votre environnement de développement local à l’aide de ce qui suit.

cd <repo>
aem up

Cette section s’ouvre. http://localhost:3000/ et vous êtes prêt à apporter des modifications.
Un bon point de départ se trouve dans le blocks dossier où se trouve la plupart du style et du code d’un projet. Il vous suffit d’apporter une modification à une .css ou .js et vous devriez voir les modifications dans votre navigateur immédiatement.

Une fois que vous êtes prêt à pousser vos modifications, utilisez simplement Git pour ajouter, valider et transmettre votre code à votre aperçu (https://<branch>--<repo>--<owner>.hlx.page/) et de production (https://<branch>--<repo>--<owner>.hlx.live/).

C'est tout, tu as réussi ! Félicitations, votre premier site est opérationnel. Si vous avez besoin d’aide dans le tutoriel, veuillez Rejoignez notre canal Discorde ou contacte-nous !