Por Pedro Ugioni e Andrés Ruiz Droege

Este post visa esclarecer os seguintes pontos quanto ao uso de React em Qlik Sense Mashups:

  1. Após a leitura conseguirá implementar um componente básico utilizando React para vincular o Qlik Sense com a renderização de dados;
  2. Entender as vantagens que um trabalho de desenvolvimento em React traz para gerenciamento de dados com a plataforma Qlik Sense.

Contextualizando o React

React é uma biblioteca criada pelo Facebook para construção de interfaces de grandes aplicações, as quais atualizam seus dados a cada segundo. Em outras palavras, uma ferramenta para atualizar dados na tela em tempo real.

Isso dá uma grande vantagem quando se trata de Business Intelligence, onde a expectativa dos analistas de dados é poder ter acesso aos dados de uma forma instantânea, no momento em que os dados base são atualizados nas fontes de dados.

No mundo Qlik isso se traduz numa sinergia muito útil entre a biblioteca React e o Qlik Engine (o componente encarregado de trabalhar os dados brutos dos bancos de dados até a tela do usuário).

Criando os Componentes

Primeiramente, vamos criar um componente para abrirmos a conexão com o Qlik Engine e vincular com o QVF onde residem os dados. Esse componente vamos chamar de QlikConnection.

Agora seguimos com a criação de outro componente (vamos chamar de QlikObject). Ele será responsável por renderizar um KPI que virá do QVF vinculado no componente anterior (QlikConnection).

Por último, criaremos um terceiro componente chamado App, responsável pelo gerenciamento do Mashup e fazer a ligação (no contexto da biblioteca React) dos outros dois componentes que criamos anteriormente.

Trabalhar com o React é bem simples: A API dele é bem pequena e basta entender o ciclo de vida dos componentes e algumas funções e você já poderá aproveitar o melhor que a biblioteca tem a oferecer. Para tornar a experiência ainda mais agradável, é possível utilizar o Babel para converter suas tags escritas em JSX (JavaScript XML) e tornar ainda mais simples o desenvolvimento.

Dito isso, vamos mexer no código

1. No index.html é necessário importar o require, para abrir uma conexão com o Qlik, o React, o ReactDOM, o Babel, e todos os componentes criados (ver Fig. 1)

2. Criar uma <div> com uma id (no nosso exemplo sendo o id=”root”), a qual iremos utilizar para iniciar a nossa app.

Figura 1:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”UTF-8″ />
    <title>React Mashup</title>
    <link rel=”stylesheet” href=”../../resources/autogenerated/qlik-styles.css”>
    <script src=”https://unpkg.com/react@16/umd/react.development.js”></script>
    <script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script>
   
    <script src=”https://unpkg.com/babel-standalone@6.15.0/babel.min.js”></script>

    <script type=”text/babel” src=”QlikConnection.js”></script>
    <script type=”text/babel” src=”QlikObject.js”></script>
    <script type=”text/babel” src=”App.js”></script>
    <script src=”../../resources/assets/external/requirejs/require.js”></script>
  </head>
  <body>
    <div id=”root” style=”background-color: black; width: 100%; height: 100%; position: fixed;”></div>
    <script type=”text/babel”>

      ReactDOM.render(
        <App/>,
        document.getElementById(‘root’)
      );

    </script>
  </body>
</html>

3. Após termos feito o nosso index.html, passamos a programar o nosso componente de QlikConnection.js. Ele é responsável para abrir a conexão com o QVF, determinado pela propriedade qvfName.

4. A conexão é  feita com o servidor do Qlik o qual está “rodando” o mashup. Ao conseguir obter o app solicitado, será acionado a função de callback, a qual passamos pela propriedade chamada “callback”. 

class QlikConnection extends React.Component {

  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount(){
      this.openQlikConnection();
  }

  openQlikConnection(){
    var me = this;
   
    var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( “/extensions” ) + 1 );
    var config = {
      host: window.location.hostname,
      prefix: prefix,
      port: window.location.port,
      isSecure: window.location.protocol === “https:”
    };
    require.config( {
      baseUrl: ( config.isSecure ? “https://” : “http://” ) + config.host + (config.port ? “:” + config.port : “”) + config.prefix + “resources”
    } );

    require( [“js/qlik”], function ( qlik ) {
      qlik.setOnError( function ( error ) {
        me.props.callback({errorMessage: ‘Error upon loading QVF from Qlik ‘ + error, app: null});
        console.log(error);
      } );
      //open apps — inserted here —
      var app = qlik.openApp( me.props.qvfName, config );
      var state={ errorMessage: null};
      state[me.props.appName] = app;
      me.props.callback(state);
    } );
  }

  render() {
    return <span/>;
  }
}

5. Tendo configurado o nosso componente QlikConnection.js, passamos a configurar o componente QlikObject.js.

Este recebe como propriedades a conexão com o App do Qlik, o id do KPI que será renderizado e um id único que será utilizado para identificar a div criada para inserir o objeto do Qlik.

class QlikObject extends React.Component {

constructor(props){
super(props);
this.state = {};
}

componentDidMount(){
var me = this;
this.props.app.getObject(this.props.chartId, this.props.qlikId).then(model => me.setState({model:model}));
}

shouldComponentUpdate(nextProps, nextState){
return this.props.qlikId != nextProps.qlikId;
}

componentDidUpdate(){
var me = this;
if(this.state.model){
this.state.model.close();
}
this.props.app.getObject(this.props.chartId, this.props.qlikId).then(model => me.setState({model:model}));
}

componentWillUnmount(){
if(this.state.model){
this.state.model.close();
}
}

render() {
  return <div style={{height:300, width:700}} id={this.props.chartId} />;
  }
}

6. Finalmente tendo criado os dois componentes de QlikConnection e QlikObject, vamos passar para o componente Root da app em React. Vamos chamar ele simplesmente de App.js

Este componente Raiz é responsável pelo gerenciamento global do nosso app. Aqui teremos o gerenciamento das propriedades globais, que por sua vez vai iniciar todos os outros componentes que o app vai utilizar (QlikConnection e QlikObject para este caso).

No momento de chamarmos os componentes, teremos três propriedades a serem levadas em conta: “callback, “appName” e “qvfName”. Elas irão passar a referência para uma função que atualiza o state no componente App.

‘use strict’;
class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { };
  }


  onMessage(state){
    this.setState(state);
  }

  render() {

  var content = [];
  if(this.state.app){
  content = <div>
                    <QlikObject qlikId=”hRZaKk” chartId=”helpdesk-line-chart” app={this.state.app} />
                </div>
  }

    return (
      <div style={{backgroundColor:’black’,width:’100%’,height:’100%’}}>
      {content}
    <QlikConnection callback={this.onMessage.bind(this)} appName=”app” qvfName=”Helpdesk Management.qvf”/>
      </div>)
  }
}

Voilá. Pronto. O conjunto de componentes descritos acima exibe um Gráfico de linha que busca e renderiza o conteúdo diretamente desde o KPI específico, dentro do nosso QVF chamado “Helpdesk Management.qvf”.

Caso você tenha a necessidade de adicionar novos gráficos, objetos, KPIS, etc, basta replicar a chamada para uma instância do componente QlikObject. Isso conseguimos fazer alterando a propiedade qlikId.

Para obter o código fonte completo, visite o nosso repositório no Github

Esperamos que com este exemplo você consiga entender um pouco mais a fundo como o React ajuda na renderização de dados Qlik em Mashups customizados.

Caso precise de ajuda profissional na consulta e desenvolvimento de um Mashup Qlik utilizando todas as vantagens avançadas do React, entre em contato conosco para uma avaliação do seu projeto. 

Para aprender mais sobre mashups, tente participar do nosso curso “Design e Desenvolvimento de Mashups Qlik Sense”.