Implementação de um componente de reação para SPA

Aplicativos de página única (SPAs) podem oferecer experiências interessantes para usuários de sites. Os desenvolvedores desejam criar sites usando estruturas SPA e os autores desejam editar com facilidade o conteúdo no AEM para um site criado usando estruturas SPA.

O recurso de criação de SPA oferece uma solução abrangente para oferecer suporte à SPA no AEM. Este artigo apresenta um exemplo de como adaptar um componente React simples e existente para funcionar com o Editor de SPA de AEM.

Introdução

Graças ao contrato simples e leve que é exigido pelo AEM e estabelecido entre o SPA e o Editor de SPA, tomar uma aplicação Javascript existente e adaptá-la para uso com um SPA em AEM é uma questão simples.

Este artigo ilustra o exemplo do componente meteorológico no SPA de amostra do We.Retail Journal.

Familiarize-se com o estrutura de um pedido SPA para AEM antes de ler este artigo.

O Componente Tempo

O componente meteorológico é encontrado no canto superior esquerdo do aplicativo We.Retail Journal. Ele exibe o tempo atual de um local definido, puxando dados meteorológicos dinamicamente.

Uso do Widget de tempo

Ao criar o conteúdo do SPA no Editor de SPA, o componente meteorológico aparece como qualquer outro componente AEM, completo com uma barra de ferramentas e é editável.

A cidade pode ser atualizada em uma caixa de diálogo como qualquer outro componente AEM.

A alteração é persistente e o componente é atualizado automaticamente com novos dados meteorológicos.

Implementação do componente meteorológico

O componente meteorológico é na verdade baseado em um componente React disponível publicamente, chamado de React Open Weather, que foi adaptado para funcionar como um componente no aplicativo SPA amostra do We.Retail Journal .

A seguir estão trechos da documentação do NPM do uso do componente React Open Weather.

Revisar o código do componente climático personalizado ( Weather.js) no aplicativo We.Retail Journal :

• Linha 16: O widget React Open Weather é carregado conforme necessário.

• Linha 46: O MapTo relaciona esse componente React a um componente AEM correspondente para que ele possa ser editado no Editor de SPA.

• Linhas 22-29: O EditConfig for definida, verificando se a cidade foi preenchida e definindo o valor se estiver vazia.

• Linhas 31-44: O componente Tempo estende o Component e fornece os dados necessários, conforme definido na documentação de uso do NPM para o componente React Open Weather e renderiza o 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);

Embora um componente de back-end já deva existir, o desenvolvedor de front-end pode aproveitar o componente React Open Weather no SPA We.Retail Journal com muito pouca codificação.

Próxima etapa

Para obter mais informações sobre como desenvolver SPA para AEM, consulte o artigo Desenvolvimento de SPA para AEM.

Recursos do Business.Adobe.com