DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Exemple d’application SecurBank pour l’éditeur universel securbank

Last update: Thu May 08 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • S'applique à :
  • Experience Manager as a Cloud Service

Créé pour :

  • Administration
  • Développeur

Découvrez l’éditeur universel avec une expérience pratique en utilisant l’application SecurBank, conçue pour présenter la puissance, la flexibilité et la convivialité de l’éditeur universel afin d’accélérer la création de contenu.

Prérequis prerequisites

  • Vous devez être affecté(e) au profil de produit administrateur AEM pour installer l’application SecurBank.
  • La version 20 ou ultérieure de Node.js doit être installée pour le développement local.

Installation de SecurBank installation

L’installation de l’application SecurBank est simple, mais plusieurs étapes sont nécessaires car elle touche de nombreux domaines d’AEM as a Cloud Service. Vous trouverez ci-dessous un aperçu des principales étapes.

  1. Création d’un programme Sandbox dans Cloud Manager.
  2. Clonez le référentiel Git du programme et mettez à jour avec le contenu du projet SecurBank AEM.
  3. Exécutez le pipeline pour déployer le projet SecurBank AEM.
  4. Récupérez les informations d’identification Cloud Manager pour le développement local d’applications web.
  5. Téléchargez et configurez l’application web SecurBank.
  6. Exécutez l’application Web SecurBank.

Les sections suivantes décrivent en détail les différentes tâches requises.

Créez un programme Sandbox dans Cloud Manager. create-sandbox-program

Vous aurez besoin d’un nouveau programme Cloud Manager dans lequel vous pourrez installer SecurBank.

  1. Se connecter à Cloud Manager à l’adresse my.cloudmanager.adobe.com et sélectionner l’organisation appropriée

  2. Créez un nouveau programme sandbox pour l’application SecurBank.

    • Utilisez les options par défaut lors de la sélection de Solutions et modules complémentaires.
    • Pour plus d’informations sur la création d’un programme Sandbox, consultez le document Création de programmes Sandbox.

Clonez le référentiel Git du programme et mettez à jour avec le contenu du projet SecurBank AEM. clone-and-update

  1. Une fois le programme créé, ouvrez-le et, dans l’onglet Référentiels, appuyez ou cliquez sur le bouton Accéder aux informations sur le référentiel pour ouvrir la boîte de dialogue Informations du référentiel et afficher les informations d’identification nécessaires pour accéder au référentiel Git pour l’environnement sandbox.

    • Pour plus d’informations sur l’accès aux informations de votre référentiel, consultez le document Accès aux référentiels.

  2. À l’aide des informations d’identification de la boîte de dialogue Informations du référentiel, clonez le référentiel sur votre ordinateur local.

  3. Recherchez le dossier du clone local, ouvrez-le et supprimez tout le contenu, à l’exception des fichiers masqués/point.

  4. Récupérez le dernier code de projet SecurBank AEM sur GitHub sur https://github.com/Adobe-Marketing-Cloud/summit-2024-l425-securbank en cliquant sur Code puis Télécharger le fichier ZIP dans la liste déroulante.

  5. Décompressez le contenu du fichier zip sur votre système de fichiers local et déplacez-le vers le dossier maintenant vide du clone local du programme Sandbox.

  6. À l’aide du terminal, basculez vers le dossier du projet cloné, validez tout le contenu et envoyez-le au git.

    1. git add --all
    2. git commit -m "Adding SecurBank app code"
    3. git push

Exécutez le pipeline pour déployer le projet SecurBank AEM. run-pipeline

Une fois le projet AEM pour SecurBank validé dans le référentiel sandbox, il peut être déployé avec un pipeline.

  1. Revenez à l’onglet Aperçu de votre programme Sandbox dans Cloud Manager et exécutez le pipeline hors production full-stack.

    • Décochez toutes les options d’exécution du pipeline.
    • Pour plus d’informations sur l’exécution des pipelines, consultez le document Gestion des pipelines.

Récupérez les informations d’identification Cloud Manager pour le développement local d’applications web. retrieve-credentials

Avant de pouvoir exécuter l’application SecurBank, vous aurez besoin des informations d’identification Cloud Manager pour connecter l’application à Cloud Manager.

  1. Pendant l’exécution du pipeline, revenez à l’onglet Aperçu dans Cloud Manager, appuyez ou cliquez sur le bouton représentant des points de suspension à côté du nom de l’environnement et sélectionnez Developer Console.

  2. Dans Developer Console, sélectionnez l’onglet Intégrations puis l’onglet Jeton local et appuyez ou cliquez sur Obtenir le jeton de développement local.

  3. Un fichier JSON est généré avec le jeton d’accès. Copiez uniquement le jeton lui-même (le fichier JSON restant n’est pas nécessaire) vers un emplacement sécurisé en vue d’une utilisation à une étape ultérieure avant de fermer le Developer Console et de revenir à Cloud Manager.

  4. De retour dans Cloud Manager, dans l’onglet Aperçu, cliquez avec le bouton droit sur l’URL de l’environnement pour la copier et l’enregistrer à un emplacement sécurisé en vue de l’utiliser à une étape ultérieure.

Téléchargez et configurez l’application Web SecurBank. download-web-app

Vous pouvez maintenant télécharger et configurer l’application Web SecurBank.

  1. Récupérez le dernier code de l’application SecurBank sur GitHub à l’adresse https://github.com/Adobe-Marketing-Cloud/summit-2024-l425/tree/ue-z-final-with-events en cliquant sur Code puis Télécharger le fichier ZIP dans la liste déroulante.

  2. Décompressez le contenu du fichier zip sur votre système de fichiers local.

  3. Démarrez l’éditeur de code de votre choix et ouvrez le fichier d’environnement masqué dans le projet de l’application SecurBank à l’adresse summit-2024-l425-ue-z-final-with-events/react-app/.env.

  4. Apportez les modifications suivantes au fichier .env et enregistrez-les.

    • Par REACT_APP_HOST_URI, collez la valeur de l’URL de votre environnement copiée précédemment.
    • Par REACT_APP_DEV_TOKEN, collez la valeur du jeton de développement local copié précédemment.

Exécutez l’application Web SecurBank. run-web-app

Avec tout configuré à la fois dans Cloud Manager et localement, vous pouvez exécuter l’application Web SecurBank.

  1. Sur la ligne de commande de votre ordinateur local, accédez au dossier react-app du projet d’application SecurBank que vous avez téléchargé et décompressé.

  2. Dans votre dossier react-app, installez l’application SecurBank avec la commande node -i.

  3. Une fois installé, lancez l'application SecurBank avec la commande npm start.

  4. Si l’installation et le démarrage ont réussi, vous verrez :

  • La sortie suivante dans le terminal.

    code language-text 
    Compiled successfully!

You can now view securbank in the browser.

  Local:            https://localhost:3000
  On Your Network:  https://192.168.1.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

    • Une fenêtre de navigateur s’ouvre également pour afficher la https://localhost:3000 de l’URL.

      • Notez qu’il s’agit d’un élément à des fins de développement et, par conséquent, aucun certificat valide n’est fourni. Par conséquent, vous devrez peut-être informer votre navigateur pour lui permettre d’accéder à la page.

Félicitations. Vous devriez maintenant voir l’application SecurBank s’exécuter correctement dans votre navigateur.

Si le contenu n’apparaît pas encore, assurez-vous que le pipeline Déployer vers l’environnement de développement que vous avez exécuté est terminé.

Application SecurBank dans le navigateur

NOTE
Si vous utilisez l’éditeur universel dans un cas d’usage découplé, votre application découplée doit gérer sa propre authentification.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab