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

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

O recurso de criação do SPA oferta uma solução abrangente para suportar SPAs dentro do AEM. Este artigo apresenta um exemplo de como adaptar um componente React simples e existente para funcionar com o Editor SPA AEM.

Observação

O Editor SPA é a solução recomendada para projetos que exigem renderização do lado do cliente baseada em estrutura SPA (por exemplo, Reagir ou Angular).

Introdução

Graças ao contrato simples e leve que é exigido pela AEM e estabelecido entre o SPA e o Editor SPA, pegar um aplicativo Javascript existente e adaptá-lo para uso com um SPA em AEM é uma questão simples.

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

Você deve estar familiarizado com a estrutura de um aplicativo SPA para AEM antes de ler este artigo.

CUIDADO

Este documento usa o aplicativo do Journal We.Retail apenas para fins de demonstração. Não deve ser utilizado para qualquer trabalho de projeto.

Qualquer projeto AEM deve aproveitar o AEM Project Archetype, que suporta projetos SPA usando React ou Angular e aproveita o SDK do SPA.

O componente de tempo

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

Uso do Widget de tempo

screen_shot_2018-06-08at143224

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

screen_shot_2018-06-08at143304

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

screen_shot_2018-06-08at143446

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

screen_shot_2018-06-08at143524

Implementação do componente meteorológico

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

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

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

Revisando o código do componente meteorológico personalizado ( Weather.js) no aplicativo de Journal We.Retail:

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

  • Linha 46: A MapTo função relaciona esse componente React a um componente AEM correspondente para que possa ser editado no Editor SPA.

  • Linhas 22-29: O EditConfig está definido, verificando se a cidade foi preenchida e definindo o valor se estiver vazio.

  • Linhas 31-44: O componente de Tempo estende a Component classe e fornece os dados necessários, conforme definido na documentação de uso do NPM para o componente de Tempo Reato Aberto 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 do Journal We.Retail com pouca codificação.

Próxima etapa

Para obter mais informações sobre o desenvolvimento de SPAs para AEM, consulte o artigo Desenvolvimento de SPAs para AEM.

Nesta página