Mise en œuvre d’un composant React pour SPA implementing-a-react-component-for-spa

Les applications monopage (SPA) peuvent améliorer considérablement l’expérience des sites web. Le souhait des développeurs et des développeuses est de pouvoir créer des sites avec des structures SPA. Les auteurs et les autrices pour leur part, souhaitent modifier facilement du contenu dans Adobe Experience Manager (AEM) pour un site conçu à l’aide de structures SPA.

La fonctionnalité de création d’application monopage constitue une solution complète pour la prise en charge de ce type d’application dans AEM. Cet article présente un exemple d’adaptation d’un composant React simple et existant pour le faire fonctionner avec l’éditeur de SPA d’AEM.

Présentation introduction

Grâce à un contrat simple et léger requis par AEM et établi entre la SPA et l’éditeur de SPA, il est facile d’utiliser une application JavaScript existante et de l’adapter à une SPA dans AEM.

Cet article illustre l’exemple du composant Météo de la SPA d’exemple We.Retail Journal.

Vous devez connaître la structure d’une application SPA pour AEM avant de lire cet article.

Le composant Météo the-weather-component

Le composant Météo se trouve dans le coin supérieur gauche de l’application We.Retail Journal. Il affiche la météo actuelle d’un emplacement défini, en extrayant dynamiquement les données météorologiques.

Utilisation du widget Météo using-the-weather-widget

Lors de la création du contenu de la SPA dans l’éditeur de SPA, le composant Météo apparaît comme tout autre composant d’AEM, avec une barre d’outils, et il est modifiable.

La ville peut être mise à jour dans une boîte de dialogue comme tout autre composant AEM.

La modification est conservée et le composant se met automatiquement à jour avec les nouvelles données météorologiques.

Implémentation du composant Météo weather-component-implementation

Le composant Météo est basé sur un composant React disponible publiquement, appelé React Open Weather. Il a été adapté pour fonctionner en tant que composant dans l’exemple d’application SPA We.Retail Journal.

Vous trouverez ci-dessous des extraits de la documentation NPM sur l’utilisation du composant React Open Weather.

Vérification du code du composant Météo personnalisé (Weather.js) dans l’application We.Retail Journal :

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Weather.css');

const WeatherEditConfig = {

    emptyLabel: 'Weather',

    isEmpty: function() {
        return !this.props || !this.props.cq_model || !this.props.cq_model.city || this.props.cq_model.city.trim().length < 1;
    }
};

class Weather extends Component {

    render() {
        let apiKey = "12345678901234567890";
        let city;

        if (this.props.cq_model) {
            city = this.props.cq_model.city;
            return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
        }

        return null;
    }
}

MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);

Bien qu’un composant back-end doive déjà exister, l’équipe de développement front-end peut utiliser le composant React Open Weather dans le SPA We.Retail Journal avec peu de codage.

Étape suivante next-step

Pour plus d’informations sur le développement de SPA pour AEM, consultez l’article Développement de SPA pour AEM.