Implementazione di un Componente React per applicazioni a pagina singola (SPA)

Ultimo aggiornamento: 2023-12-04

Le applicazioni a pagina singola (SPA) possono offrire esperienze coinvolgenti agli utenti di siti web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando framework SPA e gli autori desiderano modificare facilmente i contenuti all’interno di Adobe Experience Manager (AEM) per un sito creato utilizzando framework SPA.

La funzione di authoring dell’SPA offre una soluzione completa per il supporto dell’SPA nell’ambito dell’AEM. Questo articolo presenta un esempio di come adattare un componente React semplice ed esistente per lavorare con l’Editor SPA dell’AEM.

NOTA

L’editor SPA è la soluzione consigliata per i progetti che richiedono il rendering lato client basato sul framework SPA (ad esempio, React o Angular).

Introduzione

Grazie al contratto semplice e leggero richiesto dall'AEM e stabilito tra l'SPA e l'editor SPA, è facile prendere un'applicazione JavaScript esistente e adattarla per l'utilizzo con un SPA in AEM.

Questo articolo illustra l’esempio della componente meteo sull’SPA di esempio del Diario We.Retail.

Dovresti conoscere il Struttura di una domanda di AEM presentata dall'SPA prima di leggere questo articolo.

ATTENZIONE

Questo documento utilizza App We.Retail Journal solo a scopo dimostrativo. Non utilizzarlo per alcun lavoro di progetto.

Qualsiasi progetto AEM deve utilizzare l’archetipo di progetto AEM, che supporta progetti SPA utilizzando React o Angular e sfrutta l’SDK di SPA.

Componente meteo

Il componente meteo si trova in alto a sinistra nell’app We.Retail Journal. Visualizza il meteo corrente di una posizione definita, estraendo i dati meteo in modo dinamico.

Utilizzo del widget meteo

screen_shot_2018-06-08at143224

Quando si crea un contenuto dell’SPA nell’Editor SPA, la componente meteo viene visualizzata come qualsiasi altro componente AEM, completa di una barra degli strumenti, ed è modificabile.

screen_shot_2018-06-08at143304

La città può essere aggiornata in una finestra di dialogo come qualsiasi altra componente dell’AEM.

screen_shot_2018-06-08at143446

La modifica viene mantenuta e il componente si aggiorna automaticamente con i nuovi dati meteo.

screen_shot_2018-06-08at143524

Implementazione componente meteo

La componente meteo è basata su una componente React disponibile al pubblico, denominata Tempo React Open. È stato adattato per funzionare come componente nell’applicazione SPA di esempio di We.Retail Journal.

Di seguito sono riportati alcuni snippet della documentazione NPM relativa all’utilizzo del componente React Open Weather.

screen_shot_2018-06-08at144723 screen_shot_2018-06-08at144215

Revisione del codice della componente meteo personalizzata ( Weather.js) nell'applicazione del diario We.Retail:

  • Riga 16: il widget meteo React Open viene caricato come richiesto.

  • Riga 46: Il MapTo questa funzione di React collega questo componente a un componente AEM corrispondente in modo che possa essere modificato nell’Editor SPA.

  • Righe 22-29: Il EditConfig è definito, verificando se la città è stata compilata e definendo il valore se vuoto.

  • Righe 31-44: la componente Meteo estende il Component e fornisce i dati richiesti come definito nella documentazione di utilizzo NPM per il componente React Open Weather ed esegue il rendering del componente.

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ 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);

Anche se un componente back-end deve già esistere, lo sviluppatore front-end può utilizzare il componente React Open Weather nell’SPA di We.Retail Journal con poca codifica.

Passaggio successivo

Per maggiori informazioni sullo sviluppo dell’SPA per l’AEM vedi l’articolo Sviluppo dell'SPA per l'AEM.

In questa pagina