React App

Les exemples d’applications sont un excellent moyen d’explorer les fonctionnalités d’Adobe Experience Manager (AEM) sans interface utilisateur. Une application React est fournie. Elle indique comment interroger le contenu à l’aide des API GraphQL d’AEM. Le client AEM sans affichage pour JavaScript est utilisé pour exécuter les requêtes GraphQL qui alimentent l’application.

Afficher la variable code source sur GitHub

React Application

Un tutoriel détaillé complet est disponible here.

Prérequis

Les outils suivants doivent être installés localement :

Conditions AEM

L’application est conçue pour se connecter à une AEM Auteur ou Publier environnement avec la dernière version d’ Site de référence WKND installé.

Nous vous recommandons déploiement du site de référence WKND dans un environnement Cloud Service. Une configuration locale à l’aide de le SDK AEM Cloud Service ou Fichier jar QuickStart AEM 6.5 peut également être utilisé.

Mode d’emploi

  1. Cloner le aem-guides-wknd-graphql référentiel :

    git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Modifiez la variable aem-guides-wknd/react-app/.env.development et assurez-vous que REACT_APP_HOST_URI pointe vers votre instance AEM cible. Mettez à jour la méthode d’authentification (en cas de connexion à une instance d’auteur).

    # Server namespace
    REACT_APP_HOST_URI=http://localhost:4503
    REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
    #AUTH (Choose one method)
    # Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
    ...
    
  3. Ouvrez un terminal et exécutez les commandes :

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. Une nouvelle fenêtre de navigateur doit s’afficher http://localhost:3000

  5. Une liste des aventures du site de référence WKND doit s’afficher sur l’application.

Le code

Vous trouverez ci-dessous un bref résumé des fichiers et du code importants utilisés pour alimenter l’application. Le code complet se trouve sur GitHub.

AEM client sans affichage pour JavaScript

Le AEM client sans affichage est utilisé pour exécuter la requête GraphQL. AEM Client headless fournit deux méthodes pour exécuter des requêtes, runQuery et runPersistedQuery.

runQuery exécute une requête GraphQL standard pour AEM contenu et est le type d’exécution de requête le plus courant.

Requêtes persistantes sont une fonctionnalité d’AEM qui met en cache les résultats d’une requête GraphQL, puis rend le résultat disponible sur GET. Les requêtes persistantes doivent être utilisées pour les requêtes courantes qui seront exécutées sans cesse. Dans cette application, la liste des aventures est la première requête exécutée sur l'écran d'accueil. Il s’agit d’une requête très populaire et une requête persistante doit donc être utilisée. runPersistedQuery exécute une requête sur un point de terminaison de requête persistant.

src/api/useGraphQL.js est un React Effet Hook qui écoute les modifications apportées au paramètre query et path. If query est vide, puis une requête persistante est utilisée en fonction de la variable path. C’est là que le client AEM sans affichage est créé et utilisé pour récupérer des données.

function useGraphQL(query, path) {
    let [data, setData] = useState(null);
    let [errorMessage, setErrors] = useState(null);

    useEffect(() => {
      // construct a new AEMHeadless client based on the graphQL endpoint
      const sdk = new AEMHeadless({ endpoint: REACT_APP_GRAPHQL_ENDPOINT })

      // if query is not null runQuery otherwise fall back to runPersistedQuery
      const request = query ? sdk.runQuery.bind(sdk) : sdk.runPersistedQuery.bind(sdk);

      request(query || path)
        .then(({ data, errors }) => {
          //If there are errors in the response set the error message
          if(errors) {
            setErrors(mapErrors(errors));
          }
          //If data in the response set the data as the results
          if(data) {
            setData(data);
          }
        })
        .catch((error) => {
          setErrors(error);
        });
    }, [query, path]);

    return {data, errorMessage}
}

Contenu aventure

L’application affiche principalement une liste d’aventures et permet aux utilisateurs de cliquer sur les détails d’une aventure.

Adventures.js - Affiche une liste de cartes d’aventures. L’état initial utilise la variable Requêtes persistantes qui préconditionné avec le site de référence WKND. Le point de terminaison est /wknd/adventures-all. Plusieurs boutons permettent à l’utilisateur de tester les résultats de filtrage en fonction d’une activité :

function filterQuery(activity) {
  return `
    {
      adventureList (filter: {
        adventureActivity: {
          _expressions: [
            {
              value: "${activity}"
            }
          ]
        }
      }){
        items {
          _path
        adventureTitle
        adventurePrice
        adventureTripLength
        adventurePrimaryImage {
          ... on ImageRef {
            _path
            mimeType
            width
            height
          }
        }
      }
    }
  }
  `;
}

AdventureDetail.js - Affiche une vue détaillée de l’aventure. Effectue une requête graphQL basée sur le chemin d’accès à l’aventure qui est analysé à partir de l’URL :

//parse the content fragment from the url
const contentFragmentPath = props.location.pathname.substring(props.match.url.length);
...
function adventureDetailQuery(_path) {
  return `{
    adventureByPath (_path: "${_path}") {
      item {
        _path
          adventureTitle
          adventureActivity
          adventureType
          adventurePrice
          adventureTripLength
          adventureGroupSize
          adventureDifficulty
          adventurePrice
          adventurePrimaryImage {
            ... on ImageRef {
              _path
              mimeType
              width
              height
            }
          }
          adventureDescription {
            html
          }
          adventureItinerary {
            html
          }
      }
    }
  }
  `;
}

Variables d’environnement

Plusieurs variables d'environnement sont utilisés par ce projet pour se connecter à un environnement AEM. La valeur par défaut se connecte à un environnement de création AEM s’exécutant à l’adresse http://localhost:4502. Si vous souhaitez modifier ce comportement, mettez à jour la variable .env.development en conséquence :

  • REACT_APP_HOST_URI=http://localhost:4502 - Défini sur AEM hôte cible
  • REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json - Définition du chemin d’accès du point d’entrée GraphQL
  • REACT_APP_AUTH_METHOD= - Méthode d’authentification préférée. Facultatif, aucune authentification n’est utilisée par défaut.
    • service-token - utiliser l’échange de jetons de service pour Cloud Env PROD
    • dev-token - Utilisation du jeton de développement pour le développement local avec Cloud Env
    • basic : utilisez user/pass pour le développement local avec l’environnement d’auteur local
    • laisser vide pour n’utiliser aucune méthode d’authentification
  • REACT_APP_AUTHORIZATION=admin:admin : définissez les informations d’identification d’authentification de base à utiliser lors de la connexion à un environnement d’auteur AEM (pour le développement uniquement). Si vous vous connectez à un environnement de publication, ce paramètre n’est pas nécessaire.
  • REACT_APP_DEV_TOKEN - Chaîne du jeton de développement. Pour vous connecter à une instance distante, en plus de l’authentification de base (user:pass), vous pouvez utiliser l’authentification du porteur avec le jeton DEV de la console Cloud.
  • REACT_APP_SERVICE_TOKEN - Chemin d’accès au fichier de jeton de service. Pour vous connecter à une instance distante, l’authentification peut également être effectuée avec le jeton de service (télécharger le fichier depuis la console Cloud).

Requêtes d’API de proxy

Lors de l’utilisation du serveur de développement webpack (npm start), le projet repose sur un configuration du proxy using http-proxy-middleware. Le fichier est configuré à l’adresse src/setupProxy.js et repose sur plusieurs variables d’environnement personnalisées définies sur .env et .env.development.

Si vous vous connectez à un environnement de création AEM, la méthode d’authentification correspondante doit être configurée.

CORS - Partage des ressources cross-origin

Ce projet repose sur une configuration CORS s’exécutant sur l’environnement AEM cible et suppose que l’application s’exécute sur http://localhost:3000 en mode de développement. Le Configuration des RCO fait partie de la variable Site de référence WKND.

Configuration CORS

Exemple de configuration CORS pour l’environnement de création

Sur cette page