Gestion des hôtes AEM

Cet exemple, basé vaguement sur la variable AEM application React sans tête, illustre la manière dont AEM demandes d’API GraphQL peuvent être configurées pour se connecter à différents services AEM en fonction des variables d’environnement.

Les applications React doivent utiliser la variable AEM client sans affichage pour JavaScript pour interagir avec AEM API GraphQL. Le client AEM sans affichage, fourni par AEM client sans affichage pour JavaScript, doit être initialisé avec l’hôte de service auquel il se connecte.

Fichier d’environnement React

Utilisation de React fichiers d’environnement personnalisésou .env fichiers, stockés à la racine du projet pour définir des valeurs spécifiques à la version. Par exemple, la variable .env.development contient les valeurs utilisées pour lors du développement, tandis que .env.production contient les valeurs utilisées pour les versions de production.

• .env.development

# Environment variable used to specify the AEM service the React app will connect to when running under this profile
REACT_APP_AEM_HOST=https://publish-p123-e456.adobeaemcloud.com
...

.env des fichiers destinés à d’autres fins peut être spécifié par postfixage .env et un descripteur sémantique, tel que .env.stage ou .env.production. Différent .env Les fichiers peuvent être utilisés lors de l’exécution ou de la création de l’application React, en définissant la variable REACT_APP_ENV avant d’exécuter une npm .

Par exemple, une application React package.json peut contenir les éléments suivants : scripts config :

• package.json

...
"scripts": {
  "build:development": "REACT_APP_ENV=development npm run build",
  "build:stage": "REACT_APP_ENV=stage npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},
...

AEM client sans interface

Le AEM client sans affichage pour JavaScript contient un client AEM sans affichage qui effectue des requêtes HTTP vers AEM API GraphQL. Le client AEM sans affichage doit être initialisé avec l’hôte AEM avec lequel il interagit, à l’aide de la valeur de la principale .env fichier .

• src/api/headlessClient.js

const { AEMHeadless } = require('@adobe/aem-headless-client-js');
...
// Get the environment variables for configuring the headless client,
// specifically the `REACT_APP_AEM_HOST` which contains the AEM service host.
const {
    REACT_APP_AEM_HOST,         // https://publish-p123-e456.adobeaemcloud.com
    REACT_APP_GRAPHQL_ENDPOINT,
} = process.env;
...

// Initialize the AEM Headless client with the AEM Service host, which dictates the AEM service provides the GraphQL data.
export const aemHeadlessClient = new AEMHeadless({
    serviceURL: REACT_APP_AEM_HOST,
    endpoint: REACT_APP_GRAPHQL_ENDPOINT
});

React useEffect(…) hook

Les hooks useEffect personnalisés React appellent le client AEM sans affichage, initialisé avec l’hôte AEM, au nom du composant React qui effectue le rendu de la vue.

• src/api/persistedQueries.js

import { aemHeadlessClient , mapErrors} from "./headlessClient";
...
// The exported useEffect hook
export const getAdventureByPath = async function(adventurePath) {
    const queryVariables = {'adventurePath': adventurePath};
    return executePersistedQuery('wknd-shared/adventures-by-path', queryVariables);
}
...
// Private function that invokes the aemHeadlessClient
const executePersistedQuery = async function(persistedQueryPath, queryVariables) {
    let data;
    let errors;

    try {
        // Run the persisted query using using the aemHeadlessClient that's initialized with the AEM host
        const response = await aemHeadlessClient.runPersistedQuery(persistedQueryPath, queryVariables);
        // The GraphQL data is stored on the response's data field
        data = response.data;
        errors = response.errors ? mapErrors(response.errors) : undefined;
    } catch (e) {
        console.error(e.toJSON());
        errors = e;
    }

    return {data, errors};
}

Composant React

Le point d’extension personnalisé useEffect, useAdventureByPath est importé et utilisé pour obtenir les données à l’aide du client AEM sans affichage et, en fin de compte, pour effectuer le rendu du contenu à l’utilisateur final.

• 'src/components/AdventureDetail.js'

import { useAdventureByPath } from './api/persistedQueries';
...
// Query AEM GraphQL APIs via the useEffect hook that invokes the AEM Headless client initialized with the AEM host
let { data, error } = useAdventureByPath('/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg')

...

Cet exemple, basé sur la variable exemple AEM application iOS™ sans affichage, illustre la manière dont AEM demandes d’API GraphQL peuvent être configurées pour se connecter à différents hôtes AEM en fonction de variables de configuration spécifiques à la version.

Les applications iOS™ nécessitent un client AEM sans affichage personnalisé pour interagir avec les API GraphQL AEM. Le client AEM sans affichage doit être écrit de sorte que l’hôte de service AEM soit configurable.

Configuration de création

Le fichier de configuration Xcode contient les détails de configuration par défaut.

• Config.xcconfig

// The http/https protocol scheme used to access the AEM_HOST
AEM_SCHEME = https

// Target hostname for AEM service, do not include the scheme: http:// or https://
AEM_HOST = publish-p123-e789.adobeaemcloud.com
...

Initialisation du client AEM personnalisé sans interface utilisateur

Le exemple AEM application iOS sans affichage utilise un client AEM sans tête personnalisé initialisé avec les valeurs de configuration pour AEM_SCHEME et AEM_HOST.

...
let aemScheme: String = try Configuration.value(for: "AEM_SCHEME")  // https
let aemHost: String = try Configuration.value(for: "AEM_HOST")      // publish-p123-e456.adobeaemcloud.com

let aemHeadlessClient = Aem(scheme: aemScheme, host: aemHost);

Client AEM personnalisé (api/Aem.swift) contient une méthode . makeRequest(..) qui préfixe les demandes d’API GraphQL AEM avec l’AEM configuré. scheme et host.

• api/Aem.swift

/// #makeRequest(..)
/// Generic method for constructing and executing AEM GraphQL persisted queries
private func makeRequest(persistedQueryName: String, params: [String: String] = [:]) -> URLRequest {
    // Encode optional parameters as required by AEM
    let persistedQueryParams = params.map { (param) -> String in
        encode(string: ";\(param.key)=\(param.value)")
    }.joined(separator: "")

    // Construct the AEM GraphQL persisted query URL, including optional query params
    let url: String = "\(self.scheme)://\(self.host)/graphql/execute.json/" + persistedQueryName + persistedQueryParams;

    var request = URLRequest(url: URL(string: url)!);

    return request;
}

De nouveaux fichiers de configuration de build peuvent être créés. pour vous connecter à différents services AEM. Valeurs spécifiques à la version pour la variable AEM_SCHEME et AEM_HOST sont utilisés en fonction de la version sélectionnée dans Xcode, ce qui entraîne le client AEM personnalisé sans affichage à se connecter au service AEM approprié.

Cet exemple, basé sur la variable Exemple AEM application Android™ sans affichage, illustre la manière dont AEM demandes d’API GraphQL peuvent être configurées pour se connecter à différents services AEM en fonction de variables de configuration spécifiques aux versions (ou versions).

Les applications Android™ (lorsqu’elles sont écrites en Java™) doivent utiliser la variable AEM client sans affichage pour Java™ pour interagir avec AEM API GraphQL. Le client AEM sans affichage, fourni par AEM client sans affichage pour Java™, doit être initialisé avec l’hôte de service auquel il se connecte.

Créer un fichier de configuration

Les applications Android™ définissent des "productFlavors" utilisés pour créer des artefacts à des fins différentes.
Cet exemple montre comment deux versions de produit Android™ peuvent être définies, fournissant différents hôtes de service AEM (AEM_HOST) pour les valeurs de développement (dev) et de production (prod).

Dans l’application build.gradle fichier, un nouveau flavorDimension named env est créée.

Dans le env dimension, deux productFlavors sont définies : dev et prod. Chaque productFlavor uses buildConfigField pour définir des variables spécifiques à la version définissant le service AEM auquel se connecter.

• app/build.gradle

android {
    ...
    flavorDimensions 'env'
    productFlavors {
        dev {
            dimension 'env'
            applicationIdSuffix '.dev'
            buildConfigField "String", "AEM_HOST", '"http://10.0.2.2:4503"'
            ...
        }
        prod {
            dimension 'env'
            buildConfigField "String", "AEM_HOST", '"https://publish-p123-e789.adobeaemcloud.com"'
            ...
        }
    }
    ...
}

Chargeur Android™

Initialisez la AEMHeadlessClient du créateur, fourni par AEM client headless pour Java™ avec la fonction AEM_HOST de la variable buildConfigField champ .

• app/src/main/java/com/adobe/wknd/androidapp/loader/AdventuresLoader.java

public class AdventuresLoader extends AsyncTaskLoader<AdventureList> {
    ...

    @Override
    public AdventureList loadInBackground() {
        ...
        // Initialize the AEM Headless client using the AEM Host exposed via BuildConfig.AEM_HOST
        AEMHeadlessClientBuilder builder = AEMHeadlessClient.builder().endpoint(BuildConfig.AEM_HOST);
        AEMHeadlessClient client = builder.build();
        // With the AEM headless client initialized, make GraphQL persisted query calls to AEM
        ...
    }
    ...
}

Lors de la création de l’application Android™ pour différents usages, spécifiez la variable env et la valeur d’hôte AEM correspondante est utilisée.

Cet exemple, basé sur la variable exemple AEM application React sans affichage, illustre la manière dont les URL d’image peuvent être configurées pour se connecter aux services AEM corrects en fonction des variables d’environnement.

Cet exemple montre comment préfixer la référence de l’image _path avec un champ configurable REACT_APP_AEM_HOST Variable d’environnement React.

Fichier d’environnement React

Utilisation de React fichiers d’environnement personnalisésou .env fichiers, stockés à la racine du projet pour définir des valeurs spécifiques à la version. Par exemple, la variable .env.development contient les valeurs utilisées pour lors du développement, tandis que .env.production contient les valeurs utilisées pour les versions de production.

• .env.development

# Environment variable used to specify the AEM service the React app will connect to when running under this profile
REACT_APP_AEM_HOST=https://publish-p123-e456.adobeaemcloud.com
...

.env des fichiers destinés à d’autres fins peut être spécifié par postfixage .env et un descripteur sémantique, tel que .env.stage ou .env.production. Différent .env peut être utilisé lors de l’exécution ou de la création de l’application React, en définissant la variable REACT_APP_ENV avant d’exécuter une npm .

Par exemple, une application React package.json peut contenir les éléments suivants : scripts config :

• package.json

...
"scripts": {
  "build:development": "REACT_APP_ENV=development npm run build",
  "build:stage": "REACT_APP_ENV=stage npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},
...

Composant React

Le composant React importe le REACT_APP_AEM_HOST Variable d’environnement et préfixe l’image _path pour fournir une URL d’image entièrement résolvable.

Même REACT_APP_AEM_HOST La variable d’environnement est utilisée pour initialiser le client AEM sans affichage utilisé par useAdventureByPath(..) crochet useEffect personnalisé utilisé pour récupérer les données GraphQL d’AEM. En utilisant la même variable pour construire la demande d’API GraphQL comme URL d’image, assurez-vous que l’application React interagit avec le même service d’AEM pour les deux cas d’utilisation.

• 'src/components/AdventureDetail.js'

...
// Import the AEM origin from the app's environment configuration
const AEM_HOST = env.process.REACT_APP_AEM_HOST; // https://publish-p123-e456.adobeaemcloud.com

let { data, error } = useAdventureByPath('/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg')

return (
    // Prefix the image src URL with the AEM host
    <img src={AEM_HOST + data.adventureByPath.item.primaryImage._path }>
    {/* Resulting in: <img src="https://publish-p123-e456.adobeaemcloud.com/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg"/>  */}
)

Cet exemple, basé sur la variable exemple AEM application iOS™ sans affichage, illustre comment AEM URL d’image peuvent être configurées pour se connecter à différents hôtes AEM en fonction de variables de configuration spécifiques à la version.

Configuration de création

Le fichier de configuration Xcode contient les détails de configuration par défaut.

• Config.xcconfig

// The http/https protocol scheme used to access the AEM_HOST
AEM_SCHEME = https

// Target hostname for AEM service, do not include the scheme: http:// or https://
AEM_HOST = publish-p123-e789.adobeaemcloud.com
...

Générateur d’URL d’image

Dans Aem.swift, l’implémentation client AEM personnalisée sans interface utilisateur, une fonction personnalisée imageUrl(..) emprunte le chemin d’accès à l’image, comme indiqué dans la variable _path dans la réponse GraphLQ et la préfixe avec l’hôte AEM. Cette fonction est ensuite appelée dans les vues iOS chaque fois qu’une image est rendue.

• WKNDAdventures/AEM/Aem.swift

class Aem: ObservableObject {
    let scheme: String
    let host: String
    ...
    init(scheme: String, host: String) {
        self.scheme = scheme
        self.host = host
    }
    ...
    /// Prefixes AEM image paths wit the AEM scheme/host
    func imageUrl(path: String) -> URL {
        return URL(string: "\(self.scheme)://\(self.host)\(path)")!
    }
    ...
}

Vue iOS

La vue iOS et le préfixe de l’image _path pour fournir une URL d’image entièrement résolvable.

• WKNDAdventures/Views/AdventureListItemView.swift

import SDWebImageSwiftUI
...
struct AdventureListItemView: View {
    @EnvironmentObject private var aem: Aem

    var adventure: Adventure

    var body: some View {
        HStack {
            // Path the image path to `aem.imageUrl(..)` to prepend the AEM service host
            AdventureRowImage(imageUrl: aem.imageUrl(path: adventure.image()))
            Text(adventure.title)
            Spacer()
        }
    }
}
...

De nouveaux fichiers de configuration de build peuvent être créés. pour vous connecter à différents services AEM. Valeurs spécifiques à la version pour la variable AEM_SCHEME et AEM_HOST sont utilisés en fonction de la version sélectionnée dans XCode, ce qui entraîne l’interaction du client AEM sans affichage personnalisé avec le service AEM correct.

Cet exemple, basé sur la variable Exemple AEM application Android™ sans affichage, illustre comment AEM URL d’image peuvent être configurées pour se connecter à différents services AEM en fonction de variables de configuration spécifiques à la version (ou aux versions).

Créer un fichier de configuration

Les applications Android™ définissent "productFlavors", qui sont utilisées pour créer des artefacts à des fins différentes.
Cet exemple montre comment deux versions de produit Android™ peuvent être définies, fournissant différents hôtes de service AEM (AEM_HOST) pour les valeurs de développement (dev) et de production (prod).

Dans l’application build.gradle fichier, un nouveau flavorDimension named env est créée.

Dans le env dimension, deux productFlavors sont définies : dev et prod. Chaque productFlavor uses buildConfigField pour définir des variables spécifiques à la version définissant le service AEM auquel se connecter.

• app/build.gradle

android {
    ...
    flavorDimensions 'env'
    productFlavors {
        dev {
            dimension 'env'
            applicationIdSuffix '.dev'
            buildConfigField "String", "AEM_HOST", '"http://10.0.2.2:4503"'
            ...
        }
        prod {
            dimension 'env'
            buildConfigField "String", "AEM_HOST", '"https://publish-p123-e789.adobeaemcloud.com"'
            ...
        }
    }
    ...
}

Chargement de l'AEM image

Android™ utilise une ImageGetter pour récupérer et mettre en cache localement les données d’image d’AEM. Dans prepareDrawableFor(..) l’hôte de service AEM, défini dans la configuration de build principale, est utilisé pour préfixer le chemin d’accès à l’image créant une URL résolvable à AEM.

• app/src/main/java/com/adobe/wknd/androidapp/loader/RemoteImagesCache.java

...
public class RemoteImagesCache implements Html.ImageGetter {
    ...
    private final Map<String, Drawable> drawablesByPath = new HashMap<>();
    ...
    public void prepareDrawableFor(String path) {
        ...

        // Prefix the image path with the build config AEM_HOST variable
        String urlStr = BuildConfig.AEM_HOST + path;

        URL url = new URL(urlStr);
        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
        // Get the image data from AEM
        Drawable drawable = Drawable.createFromStream(is, new File(path).getName());
        ...
        // Save the image data into the cache using the path as the key
        drawablesByPath.put(path, drawable);
        ...
    }

    @Override
    public Drawable getDrawable(String path) {
        // Get the image data from the cache using the path as the key
        Drawable drawable = drawablesByPath.get(path);
        return drawable;
    }
}

Vue Android™

La vue Android™ récupère les données d’image au moyen de la fonction RemoteImagesCache en utilisant la variable _path de la réponse GraphQL.

• app/src/main/java/com/adobe/wknd/androidapp/AdventureDetailFragment.java

...
public class AdventureDetailFragment extends Fragment implements LoaderManager.LoaderCallbacks<Adventure> {
    ...
    private ImageView adventureDetailImage;
    ...

    private void updateContent() {
        ...
        adventureDetailImage.setImageDrawable(RemoteImagesCache.getInstance().getDrawable(adventure.getPrimaryImagePath()));
        ...
    }
...
}

Lors de la création de l’application Android™ pour différents usages, spécifiez la variable env et la valeur d’hôte AEM correspondante est utilisée.