Configuration rapide

La configuration rapide est une présentation accélérée qui illustre comment installer et exécuter l’application WKND et en tant que SPA distant, et la créer à l’aide d’AEM Éditeur de ressources.

La configuration rapide vous emmène directement à l’état final de ce tutoriel.

Présentation vidéo de la configuration rapide

Prérequis

Ce tutoriel nécessite les éléments suivants :

Ce tutoriel suppose :

  • Microsoft® Visual Studio Codeas de l’IDE
  • Un répertoire de travail de ~/Code/wknd-app
  • Exécution du SDK AEM en tant que service Auteur sur http://localhost:4502
  • Exécution du SDK AEM avec le compte admin local avec le mot de passe admin
  • Exécution du SPA sur http://localhost:3000

Démarrage rapide du SDK AEM

Téléchargez et installez le SDK AEM Quickstart sur le port 4502, avec les informations d’identification admin/admin par défaut.

  1. Téléchargement du dernier SDK AEM

  2. Décompressez le SDK AEM sur ~/aem-sdk

  3. Exécution du fichier Jar de démarrage rapide du SDK AEM

    $ java -jar aem-sdk-quickstart-xxx.jar

# Provide `admin` as the admin user's password

AEM SDK démarre et se lance automatiquement le http://localhost:4502. Connectez-vous à l’aide des informations d’identification suivantes :

  • Nom d’utilisateur: admin
  • Mot de passe: admin

Télécharger et installer le package WKND Site

Ce tutoriel dépend du projet WKND 0.3.0+ (pour le contenu).

  1. Téléchargez la dernière version de aem-guides-wknd.all.x.x.x.zip
  2. Connectez-vous au gestionnaire de modules du SDK AEM à l’adresse http://localhost:4502/crx/packmgr à l’aide des informations d’identification admin.
  3. ____ Télécharger le aem-guides-wknd.all.x.x.x.zip téléchargé à l’étape 1
  4. Appuyez sur le bouton Installer pour l’entrée aem-guides-wknd.all-x.x.x.zip

Télécharger et installer des packages SPA d’application WKND

Pour effectuer une configuration rapide, AEM modules contenant la configuration et le contenu de l’AEM finale du tutoriel sont fournis.

  1. Télécharger
  2. Télécharger
  3. Connectez-vous au gestionnaire de modules du SDK AEM à l’adresse http://localhost:4502/crx/packmgr à l’aide des informations d’identification admin.
  4. ____ Télécharger le wknd-app.all.x.x.x.zip téléchargé à l’étape 1
  5. Appuyez sur le bouton Installer pour l’entrée wknd-app.all.x.x.x.zip
  6. ____ Télécharger le wknd-app.ui.content.sample.x.x.x.zip téléchargé à l’étape 2
  7. Appuyez sur le bouton Installer pour l’entrée wknd-app.ui.content.sample.x.x.x.zip

Téléchargement de la source de l’application WKND

Téléchargez le code source de l’application WKND à partir de Github.com et basculez la branche contenant les modifications vers le SPA effectué dans ce tutoriel.

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

Démarrez l’application SPA

À partir de la racine du projet, installez les dépendances npm SPA projets et exécutez l’application.

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start

En cas d'erreur lors de l'exécution de npm install, procédez comme suit :

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

Vérifiez que le SPA s’exécute à http://localhost:3000.

Création de contenu dans AEM Éditeur SPA

Avant de créer du contenu, organisez les fenêtres de votre navigateur de sorte qu’AEM Author (http://localhost:4502) soit à gauche et que la SPA distante (http://localhost:3000) s’exécute à droite. Cet arrangement vous permet de voir comment les modifications apportées au contenu AEM sont immédiatement répercutées dans le SPA.

  1. Connectez-vous à AEM service d’auteur du SDK en tant que admin
  2. Accédez à Sites > Application WKND > us > en
  3. Modifier Page d’accueil de l’application WKND
  4. Basculer vers le mode Modifier

Création du composant fixe de la vue d’accueil

  1. Appuyez sur le texte WKND Adventures pour activer le composant de titre fixe (codé en dur dans la vue d’accueil SPA).
  2. Appuyez sur l’icône clé à molette dans la barre d’actions du composant Titre.
  3. Modifie le contenu du composant Titre et enregistre
  4. Actualisez le SPA exécuté sur http://localhost:3000 et vérifiez que les modifications sont répercutées.

Création du composant Conteneur de la vue d’accueil

  1. Lors de la modification de la page d’accueil de l’application WKND…
  2. Développez la SPA barre latérale de l’éditeur (à gauche).
  3. Appuyez sur les icônes Composants .
  4. Ajouter, modifier ou supprimer des composants du composant de conteneur situé sous le logo WKND et au-dessus du composant Titre fixe
  5. Actualisez le SPA exécuté sur http://localhost:3000 et vérifiez que les modifications sont répercutées.

Création d’un composant de conteneur sur un itinéraire dynamique

  1. Basculer vers le mode Aperçu dans SPA éditeur
  2. Appuyez sur la carte Bali Surf Camp et accédez à son itinéraire dynamique.
  3. Ajouter, modifier ou supprimer des composants du composant de conteneur situé au-dessus de l’en-tête Initiaire
  4. Actualisez le SPA exécuté sur http://localhost:3000 et vérifiez que les modifications sont répercutées.

Les nouvelles pages d’AEM sous la Page d’accueil de l’application WKND > Adventure doivent avoir un nom de page AEM qui correspond au nom du fragment de contenu de l’aventure correspondante. En effet, l’itinéraire SPA vers AEM mappage de page est basé sur le dernier segment de l’itinéraire, qui est le nom du fragment de contenu.

Félicitations !

Vous venez d’apprendre rapidement comment l’éditeur de SPA d’AEM peut améliorer votre avec des zones contrôlées et modifiables ! Si vous êtes intéressé, consultez le reste du tutoriel, mais assurez-vous de commencer à nouveau, puisque dans cette configuration rapide, votre environnement de développement local est maintenant à l’état final du tutoriel !

Sur cette page