Prise En Main - Tutoriel Du Développeur

Ce tutoriel vous permet de prendre en main un nouveau projet Adobe Experience Manager (AEM). En dix à vingt minutes, vous aurez créé votre propre site et vous pourrez créer, prévisualiser et publier votre contenu, votre 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, un autre navigateur et un autre é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

Le moyen le plus rapide et le plus simple de commencer à suivre les bonnes pratiques d’AEM 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 sur le bouton Use this template , sélectionnez Create a new repository, puis sélectionnez l’organisation de l’utilisateur propriétaire du référentiel

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

La seule étape restante dans GitHub consiste à installer l’application GitHub de synchronisation du code AEM sur votre référentiel en consultant ce lien : https://github.com/apps/aem-code-sync/installations/new

Dans les paramètres Repository access de l’application de synchronisation du code AEM, veillez à sélectionner Only select Repositories (non All Repositories). Sélectionnez ensuite le référentiel que vous venez de créer, 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. Vous avez un nouveau site web exécuté sur https://<branch>--<repo>--<owner>.aem.page/ Dans l’exemple ci-dessus, la valeur est https://main–mysite–aemtutorial.aem.page/

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

Dans votre formulaire du référentiel GitHub standard, le site pointe vers une source de contenu existante dans Google Drive. Voir ce dossier pour obtenir un exemple de contenu.

Ce contenu est en lecture seule, mais il peut être copié dans votre dossier Google Drive 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 avec l’utilisateur de Adobe Experience Manager (helix@adobe.com).

Pour commencer à créer votre propre contenu, copiez les index, les nav et les footer 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 possèdent une structure spéciale. La plupart des fichiers d’un projet ressemblent davantage à index.

Ouvrez les fichiers et copiez/collez l’intégralité du contenu dans les fichiers correspondants sur votre propre lecteur Google. Vous pouvez également télécharger les fichiers via Download All ou télécharger des fichiers individuels. Cependant, n’oubliez pas de reconvertir les fichiers .docx téléchargés en Google Docs natif lorsque vous les chargez dans votre dossier sur votre lecteur Google.

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

Gardez à l’esprit qu’après avoir effectué cette modification, des erreurs s’afficheront 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 avec leurs propres cycles d’aperçu 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

Après avoir terminé la dernière étape, votre nouvelle source de contenu n’est pas vide, mais aucun contenu n’a été promu vers les étapes preview ou live , ce qui signifie que votre site web diffuse des versions 404.

Pour prévisualiser le contenu, un auteur doit installer l’extension Sidekick Chrome. Recherchez l’extension Chrome dans Chrome Web Store.

Après avoir ajouté l’extension à Chrome, n’oubliez pas de l’épingler pour faciliter sa recherche.

Pour configurer l’extension Chrome, accédez au dossier Google Drive précédemment partagé, cliquez sur l’icône d’extension dans la barre d’outils du navigateur et 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 AEM Sidekick en cliquant sur votre extension épinglée. Une nouvelle barre d’outils s’affiche. Cliquez sur les boutons preview ou publish pour déclencher l’opération correspondante.

Ouvrez le document index et apportez des modifications. Activez le Sidekick en cliquant sur votre extension épinglée, puis cliquez sur le bouton Preview qui déclenchera l’opération de prévisualisation et affichera un nouvel onglet avec le rendu de prévisualisation 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 (CLI) d’AEM et de cloner votre référentiel localement à l’aide des méthodes suivantes.

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

À partir de là, placez-vous dans le dossier du projet et démarrez votre environnement de développement local en procédant comme suit.

cd <repo>
aem up

Cette action ouvre http://localhost:3000/ et vous êtes prêt à apporter des modifications.
Le dossier blocks constitue un bon point de départ. C’est là que réside la plupart du style et du code d’un projet. Il vous suffit d’apporter une modification à une .css ou une .js et les modifications devraient s’afficher immédiatement dans votre navigateur.

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

C’est tout, vous avez réussi ! Félicitations, votre premier site est opérationnel. Si vous avez besoin d'aide dans le tutoriel, s'il vous plaît rejoignez notre chaîne Discord ou contactez-nous.