Prise en main du développement AEM Sites – Tutoriel WKND

Bienvenue dans un tutoriel en plusieurs parties conçu pour les développeurs qui viennent d'apprendre Adobe Experience Manager (AEM). Ce tutoriel présente la mise en oeuvre d'un site AEM pour une marque de style de vie fictif WKND. Ce didacticiel porte sur des sujets fondamentaux tels que la configuration de projets, les composants principaux, les modèles modifiables, les bibliothèques côté client et le développement de composants avec Adobe Experience Manager Sites.

Présentation

Ce didacticiel en plusieurs parties a pour but d’apprendre à un développeur comment mettre en oeuvre un site Web en utilisant les dernières normes et technologies de Adobe Experience Manager (AEM). Après avoir suivi ce tutoriel, un développeur doit comprendre les fondements de la plate-forme et connaître les schémas de conception courants en AEM.

Le tutoriel est conçu pour fonctionner avec AEM en tant que Cloud Service et est rétrocompatible avec AEM 6.5.5.0+ et l'AEM 6.4.8.1+. Le site est mis en oeuvre à l’aide des éléments suivants :

Estimez 1 à 2 heures pour passer en revue chaque partie du tutoriel.

Environnement de développement local

Un environnement de développement local est nécessaire pour compléter ce tutoriel. Les captures d’écran et la vidéo sont capturées à l’aide de l’AEM en tant que SDK Cloud Service s’exécutant sur un environnement Mac OS avec Visual Studio Code en tant qu’IDE. Sauf indication contraire, les commandes et le code doivent être indépendants du système d'exploitation local.

Logiciels requis

Les logiciels suivants doivent être installés localement :

REMARQUE

Vous découvrez AEM as a Cloud Service ? Consultez le guide suivant pour configurer un environnement de développement local à l’aide de l’AEM en tant que SDK Cloud Service.

Nouveau à AEM 6.5 ? Consultez le guide suivant pour la configuration d'un environnement de développement local.

À propos du didacticiel

The WKND est un magazine et blog fictif en ligne qui se concentre sur la vie nocturne, les activités et les événements dans plusieurs villes internationales.

Kit d’interface utilisateur Adobe XD

Pour rapprocher ce didacticiel d'un scénario réel, des concepteurs UX talentueux du Adobe ont créé les maquettes pour le site à l'aide de Adobe XD. Au cours du tutoriel, divers éléments des conceptions sont mis en oeuvre dans un site d'AEM entièrement créateur. Remerciements particuliers à Lorenzo Buosi et Kilian Amendola qui ont créé la belle conception pour le site WKND.

Téléchargez les XD kits d’interface utilisateur :

Le nom WKND convient car nous espérons qu'un développeur prendra la meilleure part d'un week-end pour compléter le tutoriel.

Github

Tout le code du projet se trouve sur Github dans le AEM Guide repo :

GitHub : Projet de sites WKND

En outre, chaque partie du tutoriel a sa propre branche dans GitHub. Un utilisateur peut commencer le didacticiel à tout moment en vérifiant simplement la branche correspondant à la partie précédente.

REMARQUE

Si vous travailliez avec la version précédente de ce didacticiel, vous pouvez toujours trouver les packages de solution et code sur GitHub.

Site de référence

Une version finale du site WKND est également disponible à titre de référence : https://wknd.site/

Le tutoriel couvre les principales compétences de développement requises pour un développeur AEM, mais ne ne construira pas l'ensemble du site de bout en bout. Le site de référence terminé est une autre ressource formidable pour explorer et voir plus d'AEM fonctionnalités prêtes à l'emploi.

Pour tester le code le plus récent avant de passer au didacticiel, téléchargez et installez la dernière version de GitHub.

Proposé par Adobe Stock

La plupart des images du site Web de référence WKND proviennent d'Adobe Stock et sont des documents de tierces parties, tels que définis dans les termes supplémentaires des ressources de démonstration à l'adresse https://www.adobe.com/legal/terms.html. Si vous souhaitez utiliser une image Adobe Stock à d’autres fins que l’affichage de ce site Web de démonstration, par exemple en l’affichant sur un site Web ou dans du matériel marketing, vous pouvez acheter une licence sur Adobe Stock.

Avec Adobe Stock, vous avez accès à plus de 140 millions d'images de haute qualité, libres de droits, dont des photos, des graphiques, des vidéos et des modèles pour lancer vos projets créatifs.

Étapes suivantes

Qu'attendez-vous ? ! Début du didacticiel en accédant au chapitre Configuration du projet et en apprenant comment générer un nouveau projet Adobe Experience Manager à l'aide de l'archétype de projet AEM.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free